473,549 Members | 2,834 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Need Help with changing css on an object using jQuery

1 New Member

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.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:

Expand|Select|Wrap|Line Numbers
  1. <body>
  2.   <div id="container">
  3.     <div id="header">
  4.       <div id="nav">
  5.         <li>
  6.           anchor tag
  7.             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:

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2.         $('#nav li a').click(function(){
  3.             var clickedLinkId = $(this).attr('id'); //This is the ID of the Main Nav Link that was clicked
  4.             var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png'; //This is the location of the new background image once the user clicks a button
  5.             var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the background image location and URL Line
  7.             $('#' + clickedLinkId + ' span').css({"background-image":picOnUrl}); //This changes the background image of the span of the currently clicked link.
  9.             return false;
  10.    });
  11. });
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(picOnL ocation) 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('image s/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:

newofficialdesi gn4.html
- 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!

Mar 8 '09 #1
0 1365

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Gale | last post by:
I'm working on something in jQuery with XPath What I want to do is: if checkbox is checked, set background color od label that contain input(checkbox) to red I have this code: $("label]").css("background", "red"); but it doesn't working because of nested brackets ] and it freeze the browser
by: sfmcfar | last post by:
Hi, Can someone recommend an Javascript toolkit that provides both AJAX- like requests and effects, and that supports IE 5.5+, Firefox 1.5+, and Netscape 7+? I know that NS7 may not be as functional as the others, but I need a toolkit that at least provides some semblance of compatibility - instead of a fade out, for example, NS7 would...
by: DuaneMoraes | last post by:
A new book on jQuery, the powerful JavaScript library, has been announced by Packt In Learning jQuery, Karl Swedberg and Jonathan Chaffer, creators of the popular jQuery learning resource www.LearningjQuery.com, share their knowledge, experience, and enthusiasm about jQuery to help users get the most from the library and to make their web...
by: Big Moxy | last post by:
This plugin can be downloaded from http://www.phpletter.com/DOWNLOAD/. I want to add 2 fields to the sample form but do not know how. The variable s.fileElementId in the function ajaxFileUpload below is the name of the file to be uploaded. I can see where it is added to the form in the createUploadForm. Can someone please show me how to add...
by: Steve Swift | last post by:
Is there a universally correct way to change the weight of the font in an <INPUT TYPE=TEXTcontrol or do I have to use some trick, or even browser sniffing to achieve the same result despite the browser? I've been trying to get this working, but I need a different approach between Opera and Firefox. I'm yet to get IE6 working. My test page...
by: mikeh3275 | last post by:
I'm new to developing in jQuery, so I'm probably doing this wrong. I'm loading a form into a modal dialog box and I'm trying to assign a click event to the button in the form, but I can't seem to get anything to happen. Below is the code. Thanks in advance. jQuery: jQuery(document).ready(function() { jQuery("a").click(function() {...
by: liketofindoutwhy | last post by:
I am learning more and more Prototype and Script.aculo.us and got the Bungee book... and wonder if I should get some books on jQuery (jQuery in Action, and Learning jQuery) and start learning about it too? Once I saw a website comparing Prototype to Java and jQuery to Ruby... but now that I read more and more about Prototype, it is said...
by: pradeepjain | last post by:
I am using a form which does inline validation using jquery! http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/ and i saw another inline validation method http://www.exploremyblog.com/html/blog_contents.php?blogid=301 i tried to integrate the pop up error which exits in 2nd one to 1st one but failed as i am...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.