Posts

Showing posts from June, 2015

Star Ratings With Very Little CSS | CSS-Zilla

Hello Guys.. Now you make star rating with css not by image ☆ ☆ ☆ ☆ ☆ Thanks CSSZILLA TEAM 

image Scale on Hover with Transition or image zoom on Hover with Transition

.csszilla{ transition: all .2s ease-in-out; } .csszilla:hover { transform: scale(1.1); }

Java script Header fixed on scroll or, add remove class with jquery based on vertical-scroll

Hello Guys Please refer this js code for your solution =========================================================== <script type="text/javascript">   // Css Zilla Fixed navigation    jQuery(window).scroll(function() {        var scroll = jQuery(window).scrollTop();      //>=, not <=     if (scroll >= 500) {         //clearHeader, not clearheader - caps H         jQuery("#home").addClass("nav_top");   //alert("Css zilla welcomes you");     } }); </script> =========================================================== Css Zilla Team

Multiple Class / ID and Class Selectors

Image
Hello Guys Please see how we select multiple Id and classes from css. In first example header is ID and callout is class implemented on same div so we write its CSS as #header.callout {} , where as In second example header is ID and callout is class implemented on same div and callout is child div of header so we write its CSS as #header .callout {} Means #header "space" .callout {} Thanks CssZilla

CSS display:table-cell child width bug in Firefox and IE,

CSS display:table-cell child width bug in Firefox and IE display table property not work in mozilla firefox but work in chrome This is your issue, See demo, This is your issue solution , see demo Thanks Css Zilla

delete all existing HTML

delete all existing HTML : by this method we can clarify that our JavaScript   code is wrong or right by opening it on web page and its delete all existing html. <!DOCTYPE html> <html> <body> <button onclick="document.write(15 + 6)"> click me</button> <p> click on button and you will see the result of (15+6)   </p> </body> </html>  demo here https://jsfiddle.net/4opd5qw2/1/

Using document write method

Using document.write() For testing our   JavaScript coding on web page to use document.write() : <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html> demo here https://jsfiddle.net/4opd5qw2/

JavaScript Alert pop up

By window. Alert property we can show a alert box on html page. Without click on that box  we can not do anything on html page. <h1>Using window.alert()</h1> <script> window.alert("hello its javascript. click to ok"); </script> go  to this link and see the live demo. https://jsfiddle.net/ssgp6mwr/11/

JavaScript Display Possibilities

Window. Alert()  = for alert box when we open the HTML page Document. Write() =  if is it text  then we put that in  quotes  like…“ I am text” If it is value then we do not use quotes . innerHTMl. = to change the inner HTML values, styles anything. Console.log() =  to check your  methods  to browser that its working or not. Click F12  and go to console and enable it then see your result of methods in browser.

Use of JavaScript in different ways in html document

We can use java script in html page by three method. ·          In header section ·          In body   section (bottom of the body) ·          External   JavaScript If we are using java   script in header and body section then we must Put   our code between script tag. (<script>………..</script>) We can use JavaScript   same like external css. But if we are using external jacvascript. Then we don’t need script tag. And the extension of JavaScript is   (.js) Example: Script.js This is the example of an external JavaScript file. Here you   sees that the extension of JavaScript is .js