jquery css change

[Jeager]

Found plenty of sites that offer explanations on some css changes on clicks, hovers, ect.. However they were all, well.. self contained. On a click it would change itself, however what I am looking for is for it to target something else on that click. I’ve tried changing the code, however i am no pro at java.

Thats altered script from a code i had found. Basicly what i changed was the fact that on a click of #test, the body tag would add the class of prod. What I am trying to accomplish is that on a click, it will change a background. It seems to reload the background on a click, but does not add a class.

And when trying something like:

When you load the page, the background toggles out to the correct class, however it gets rid of the #test. And its not on a click function. Any help would be awesome, looking forward to some answers, i’ll be playing with it in the meantime.

[Jeager]

Well, found a way of doing it..

Kind of a loophole, @import loads the normal css.css file, while the link href=”homebg.css” loads the bg image for the homepage.

Then you add:

$(".prodbg").click(function(){

$("link").attr("href", "prodbg.css");

return false;

});



$(".homebg").click(function(){

$("link").attr("href", "homebg.css");

return false;

});

so when you click on the .prodbg class, which was just a link to the “product page” (basically this was just a learning experience to never have to reload a page,however without preloading the images it doesn’t work quite like that) it will change the css of the “linked” src to the new css, which is just a background image change. the .homebg does the same.

[Jeager]

Added a onhover javascrip to the link so it will start to preload the image before you click, however, I still would like to do it the first way, just dont know how.

Was using http://designm.ag/tutorials/jquery-display-switch/ as a reference however I dont really understand how its working. The jquery looks like its just switching the the link css to .swap, not everything else it does. I see where its saying to fade in the thumb_view, but not sure what the added css of swap is really doing besides moving the sprite. Anyone able to take the time to explain it would be amazing. Would love to change the css using transitions verse chaning the css the second way I had posted.

Edit: Slightly off, I just really noticed the ul.display. So typing mainly to myself to orginize thoughts, is it adding and removing the swap class for the sprite, then adding and removing the display class and switching it via fade transition to the thumb_view. I think thats where I messed up, I wasnt thinking the author was using the jquery for the sprite switch, and thats what was confusing me. I’ll test it when I get back home.

[Jeager]

Got it working, for the most part. However the transition isnt working.

So its working for the link being .switch, telling the class .bg to switch to .bg_prod. But the fade isnt working in chrome, which is extremely odd to me because usually everything does. However it does work in firefox. Also, as a side note, adding the normal .bg class with the image refreshes all the other elements, so I placed the class in a div and set height and width to 100% and used a size cover for the image, as planned. However now that almost everything is on the right track, I dont know what functions can really be used with jquery, as I can read it but not write it. so toggle would normally be affective however I need it where if a user clicks it again the image wont fade back to the normal page.

[Author]

Posts