Skip to main content

Posts

Showing posts with the label JAVA Script

5 Ways that CSS and JavaScript Interact That You May Not Know About

CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow.  Here are five ways that JavaScript and CSS work together that you may not know about! Get Pseudo-Element Properties with JavaScript We know that we can get basic CSS style values for an element with the  style  property, but what about pseudo-element properties?  Yes, JavaScript can even access those too! // Get the color value of .element:before var color = window . getComputedStyle ( document . querySelector ( '.element' ) , ':before' ) . getPropertyValue ( 'color' ) ; // Get the content value of .element:before var content = window . getComputedStyle ( document . querySelect
Post a Comment
Read more

Download Javascript in 10 simple steps of less pdf

If you are looking to add exciting interactivity to Web pages and need a quick and easy understanding of the technology in order to do so, then this book is for you-whether you're new to JavaScript or you need a refresher on every-thing from validating user input forms to creating menu trees. Open the book and you'll discover clear, easy-to-follow instructions for more than 250 key JavaScript tasks, each presented in ten quick steps-or less. Easy-to-navigate pages, lots of screen shots, and to-the-point directions guide you through every common (and not so common) JavaScript challenge-and help you get more done in less time. * Each solution is ten steps-or less-to help you get the job done fast * Self-contained two-page spreads deliver the answers you need-without flipping pages * A no-fluff approach focuses on helping you achieve results * A resource packed with useful and fun ways to get the most out of JavaScript * Make it simple and get productive fast!- download re
Post a Comment
Read more

Making accordion menu using jquery

Last time, I’ve shown how to create  accordion using jquery . But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it. Live Demo of accordion menu using jQuery HTML structure for accordion menu using jQuery <div id = "firstpane" class = "menu_list" >   <p class = "menu_head" > Header-1 </p>     <div class = "menu_body" >         <a href = "#" > Link-1 </a>     </div>   <p class = "menu_head" > Header-2 </p>     <div class = "menu_body" >         <a href = "#" > Link-1 </a>     </div>   <p class = "menu_head" > Header-3 </p>     <div class = "menu_body" &
Post a Comment
Read more

Expand & colabs

Here is the first part without cookies... <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Example</title> <script type="text/javascript"> //<![CDATA[ function change(id, newClass) { identity=document.getElementById(id); identity.className=newClass; } //]]> </script> <style type="text/css"> div.toggle { display: none; } div.toggleshow { background: #fff; border: #000 solid 1px; color: #000; display: block; } </style> </head><body> <div> <a href="#" onclick="change('toggle1', 'toggleshow');">Show toggle1</a> <br /> <a href="#" onclick="change('toggle2', 'togglesho
Post a Comment
Read more