[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 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, zeckdudewrote: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: id="nav"> 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
[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 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:
>
>
>
>
>
>
> 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] 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] 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 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
[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
