www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript with CSS

  1. #1
    Join Date
    Sep 2009
    Posts
    172

    Javascript with CSS

    All,
    I have the following bit of CSS:
    Code:
    ul li{background:url(images/marker.jpg) top left no-repeat; background-position:0 3px; margin:0; padding-left:13px; }
    So basically on my page whenever there is a bullet it displays this marker. I put in the following code to make the bullet become clickable:
    Code:
    <li onclick="javascript:showdesc('This is info about bulk delivery', 'bulk');">Bulk Delivery</li><div id="bulk"></div>
    I then have the following javascript to handle that:
    Code:
    <script type="text/javascript">
    function showdesc(desc, type){
    if(type=="bulk"){
    document.getElementById("bulk").innerHTML = desc;
    }
    }
    </script>
    Is there a way to incorporate CSS into the JS that will allow me to use a different image (down arrow) and make that clickable to then make the <div id="bulk"></div> not have the desc in it anymore?

    Thanks in advance!

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    i dont think im understanding you fully, here is what i got:
    1. when clicked you want the bullet to turn into a down arrow
    2. #bulk's html gets set to the passed string
    3. if user click the "new" arrow, #bulk gets set back to blank and the arrow returns to a bullet

    Assuming I'm on the right track, here is what you need to do:
    1. change the bullet to an arrow in your click function
    Code:
    document.getElementById("bulk").style.backgroundImage = 'SET TO YOU ARROW LOCATION'
    2. now you can cheat and use that arrow as your "flag" to see if the bullet has been clicked
    Code:
    if ( document.getElementById("bulk").style.backgroundImage== 'your arrow image location') {
         if we made it here that means the given bullet has been clicked so we revert back
         in here return your arrow back into a bullet and set the html of bulk to "-nothing-"
    } else {
         run the rest of your function like normal
    }
    the only problem you are going to run into is when a user clicks one bullet it will turn into an arrow... but if instead of clicking the arrow again (to turn it back) the user click another bullet then the arrow will remain on the 'old-no longer active' clicked bullet. The solution would be to reset you bullet list on click. meaning your click function runs through ALL the bullets and reverts them back to bullets if they are arrows. I know with jQuery the addClass / removeClass would do all the work for me, but im not sure with regular JS.

    -aPeg
    Last edited by apeg; 05-26-2010 at 12:57 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles