[jQuery] Re: Need Help with changing css on an object
Hi Chris
My suggestion to your problem will involve a few changes to your
structure, but I don't think they should be too bad for you to pull
off.
Since the texts in your nav don't change on rollover, I would make
them a separate image all together. Then you could make just 2
different background images of the light bulb. One for the on state
and one for the off state. This way you can set up 2 classes in your
css, something like:
.navBulb{background-image: url(/images/bulb_off.gif);}
.navBulbOn{background-image: url(/images/bulb_on.gif);}
That way you can assign the .navBulb class to all 4 of them to start
with, and then just addClass('navBulbOn') and removeClass('navBulb')
as needed on hover and click events.
The other thing I've done that might work even easier for you would be
oonce again to separate out the text into a different image, and then
make one background image that includes both states (bulb on and bulb
off) and then on hover or click events you would just need to change
the position of the background to show/hide the right portion of the
background image.
I hope this helps.
Marty
On Mar 7, 11:27 pm, zeckdude zeckd...@gmail.com wrote:
Hi,
I am having some issues with my site. I have a main Nav with four links that
load in 4 different sections.
You can see the page I am working on
here:http://idea-palette.com/official/newofficialsite4.htmlhttp://idea-palette.com/official/newofficialsite4.html
What I am trying to do is, when a user clicks on another Main Nav button,
such as 'Web Projects', the background-image changes to another image that
shows the lightbulb being on. I also want it to change back the
background-image for any link that currently has the light on, so that it
seems the light is on for whatever page the user visits.
Here is my basic html layout that pertains:
body
div id=container
div id=header
div id=nav
li
anchor tag
span tag
Each of the links are called 'printsectbtn', 'websectbtn', and so on. Each
of the default background-images is called 'print_off.png', 'web_off.png',
and so on. Each of the background images that show up when a user clicks
that link are called 'print_on.png', 'web_on.png', and so on.
I have started all their names with either 'print', 'web', 'mot', or 'int'
so that I could make it dynamic and simply erase some letters from the
clicked div's name and then add some others at the end.
Here is my jquery that pertains to this issue:
$(function(){
$('#nav li a').click(function(){
var clickedLinkId = $(this).attr('id'); //This is the ID of the
Main Nav Link that was clicked
var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on'
+
'.png'; //This is the location of the new background image once the user
clicks a button
var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the
background image location and URL Line
$('#' + clickedLinkId + '
span').css({background-image:picOnUrl}); //This changes the background
image of the span of the currently clicked link.
return false;
});
});
Basically, what I am trying to do above is to:
1) Get the ID of the clicked link. I called this var ClickedLinkId.
2) Erase the word 'sectbtn' from the end of the ID, so that it just reads as
'print' or 'web' for example
3) Add 'images/' before the word and '_on.png' after the word, so that it is
the location of the new background Image that shows up after the user clicks
on a link. I called this var picOnLocation.
4) Combine the new background Image location(picOnLocation) and URL line. I
called this var picOnUrl.
5) Change the css of the clicked Link's span to show up as the new
background image as specified by picOnUrl.
What I am using does work as I can see the current background disappear, but
no new background loads in. Also, when I try this: var picOnUrl =
url('images/web_on.png'); ,it works fine, so I think I may have an issue
with it not being able to find the background image file or perhaps my
concatenation is incorrect.
Here's my folder structure if it helps:
newofficialdesign4.html
IMAGES
- print_on.png
- web_on.png
- mot_on.png
- int_on.png
I know this is a really long post, but I am really hoping someone can help
me, so I included all the specifics. Please let me know if there are any
other questions that I can answer to help you help me.
Thanks in advance!
-Chris
--
View this message in
context:http://www.nabble.com/Need-Help-with-changing-css-on-an-object-tp2239...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Need Help with changing css on an object
Chris
Charlie is absolutely right. You can simplify it by using the
css :hover to do your rollover states. You still however need to do
something on top of that to handle the current problem you're having
with it keeping the state change when a user clicks on
one of the nav elements. That's really where my thought process was in
my post.
Sorry that I missed the obvious with the css :hover state and thanks
to Charlie for catching it.
Marty
On Mar 8, 11:42 am, Charlie Tomlinson charlie...@gmail.com wrote:
good case of trying to add a bunch of script when simple css works. Spriting
the menu images into one (with or without the text included on each part of
image), adding a :hover in css avoids an unnecessary server request for
another image and works if scripting disabledjunk.mail...@gmail.comwrote:Hi
Chris My suggestion to your problem will involve a few changes to your
structure, but I don't think they should be too bad for you to pull off.
Since the texts in your nav don't change on rollover, I would make them a
separate image all together. Then you could make just 2 different background
images of the light bulb. One for the on state and one for the off state.
This way you can set up 2 classes in your css, something like:
.navBulb{background-image: url(/images/bulb_off.gif);}
.navBulbOn{background-image: url(/images/bulb_on.gif);} That way you can
assign the .navBulb class to all 4 of them to start with, and then just
addClass('navBulbOn') and removeClass('navBulb') as needed on hover and click
events. The other thing I've done that might work even easier for you would
be oonce again to separate out the text into a different image, and then make
one background image that includes both states (bulb on and bulb off) and
then on hover or click events you would just need to change the position of
the background to show/hide the right portion of the background image. I hope
this helps. Marty On Mar 7, 11:27 pm, zeckdudezeckd...@gmail.comwrote:Hi, I
am having some issues with my site. I have a main Nav with four links that
load in 4 different sections. You can see the page I am working on
here:http://idea-palette.com/official/newofficialsite4.htmlhttp://idea-palette.com/official/newofficialsite4.htmlWhat
I am trying to do is, when a user clicks on another Main Nav button, such as
'Web Projects', the background-image changes to another image that shows the
lightbulb being on. I also want it to change back the background-image for
any link that currently has the light on, so that it seems the light is on
for whatever page the user visits. Here is my basic html layout that
pertains: body div id=container div id=header div
id=nav li anchor tag span tag Each of the
links are called 'printsectbtn', 'websectbtn', and so on. Each of the default
background-images is called 'print_off.png', 'web_off.png', and so on. Each
of the background images that show up when a user clicks that link are called
'print_on.png', 'web_on.png', and so on. I have started all their names with
either 'print', 'web', 'mot', or 'int' so that I could make it dynamic and
simply erase some letters from the clicked div's name and then add some
others at the end. Here is my jquery that pertains to this issue:
$(function(){ $('#nav li a').click(function(){ var
clickedLinkId = $(this).attr('id'); //This is the ID of the Main Nav Link
that was clicked var picOnLocation = 'images/' + clickedLinkId -
'sectbtn' + '_on' + '.png'; //This is the location of the new background
image once the user clicks a button var picOnUrl = 'url(' +
picOnLocation + ')'; //This combines the background image location and URL
Line $('#' + clickedLinkId + '
span').css({background-image:picOnUrl}); //This changes the background
image of the span of the currently clicked link. return false;
}); }); Basically, what I am trying to do above is to: 1) Get the ID of the
clicked link. I called this var ClickedLinkId. 2) Erase the word 'sectbtn'
from the end of the ID, so that it just reads as 'print' or 'web' for example
3) Add 'images/' before the word and '_on.png' after the word, so that it is
the location of the new background Image that shows up after the user clicks
on a link. I called this var picOnLocation. 4) Combine the new background
Image location(picOnLocation) and URL line. I called this var picOnUrl. 5)
Change the css of the clicked Link's span to show up as the new background
image as specified by picOnUrl. What I am using does work as I can see the
current background disappear, but no new background loads in. Also, when I
try this: var picOnUrl = url('images/web_on.png'); ,it works fine, so I
think I may have an issue with it not being able to find the background image
file or perhaps my concatenation is incorrect. Here's my folder
[jQuery] get reference to element for cookie storage
I'm sure there's a simple answer to this buried somewhere in the jquery library, or in the jquery object returned by the selector... but I''m just not seeing it.:( I need to store a reference in a cookie to an element that was clicked. I know how to detect which element was clicked, and how to write the cookie, so those are not the problem. My problem comes in that I'm not sure what the reference to that exact element is that I would store in a cookie to find it again on the next page load. The elements in question have no css #id so I'm not sure what unique value I can use to store in the cookie to get me back to that element later. Thanks in advance. Marty
[jQuery] save pointer to element in a cookie
I need to save state for a nav in a cookie. I've managed to learn enough jquery so far to be able to detect which link was clicked and traverse to the dom element that I want save a pointer to, I'm just not sure what value to store in the cookie so I can identify that element on the next page load. The li elements in question don't have an assigned id or class, so I'm not sure what handle to the element I can store to get back to it. If my description of the problem isn't clear enough, please let me know and I'll try to clear it up in any way necessary. Thanks, Marty
[jQuery] Re: save pointer to element in a cookie
Thanks for the code samples Carl. I did try to save the index, but
must have been doing something wrong. I'm glad to have a code sample
to go by.
Cheers,
Marty
On Feb 17, 1:53 pm, Karl Swedberg k...@englishrules.com wrote:
you could store the link's index:
$('#yourlist a').each(function(index) {
$(this).click(function() {
$.cookie('mylink', index);
// do something else?
/* (?) */ return false;
});
});
Then, you can select it like this:
if ( $.cookie('mylink') != null ) {
$('#yourlist a:eq(' + $.cookie('mylink') + ')')
// .doSomething();
}
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Feb 16, 2009, at 10:14 PM, junk.mail...@gmail.com wrote:
I need to save state for a nav in a cookie. I've managed to learn
enough jquery so far to be able to detect which link was clicked and
traverse to the dom element that I want save a pointer to, I'm just
not sure what value to store in the cookie so I can identify that
element on the next page load. The li elements in question don't have
an assigned id or class, so I'm not sure what handle to the element I
can store to get back to it.
If my description of the problem isn't clear enough, please let me
know and I'll try to clear it up in any way necessary.
Thanks,
Marty
