Results 1 to 2 of 2

Thread: Javascript with CSS

  1. #1
    Join Date
    Sep 2009

    Javascript with CSS

    I have the following bit of CSS:
    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:
    <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:
    <script type="text/javascript">
    function showdesc(desc, type){
    document.getElementById("bulk").innerHTML = desc;
    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
    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
    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
    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.

    Last edited by apeg; 05-26-2010 at 01: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