/    Sign up×
Community /Pin to ProfileBookmark

Javascript with CSS

Copy linkTweet thisAlerts:
May 24.2010

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; }
[/CODE]

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>
[/CODE]

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>
[/CODE]

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!

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@apegMay 26.2010 — 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'[/CODE]
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
}[/CODE]

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
×

Success!

Help @treeleaf20 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...