I have been trying to find an answer to this question. I am trying to create a nav bar using jquery that uses images and rollovers. So there is an on state, off state and clicked state for three different tabs/images.
example: Home | Support | About
The problem I¢m having is getting the clicked/on state to turn off the other image/tab if it was already on/clicked state. What keeps happening is each tab stays active when clicked instead of toggling off and on.
I've been researching a good effective way to do 3 state image rollovers with jQuery, but haven't found anything that's workable with an AJAX style page. The page consists of a ul based menu that shows and hides new content depending on the selection. What I'm attempting to achieve is once the image has been clicked on, for the "over" state to remain until a new choice is made from that menu, aka another image has been clicked on. Once another image was clicked on, it would then display the active state and the previous would not.
Here is the HTML: <ul id="navWork"> <li onclick="javascript:doShowHide('spotsPromos');"> <a href="javascript://"> <img src="images/nav-spots-promos.png" alt="Spots and Promos" /> </a> </li> <li onclick="javascript:doShowHide('corporate');"> <a href="javascript://"> <img src="images/nav-corporate.png" alt="Corporate" /> </a> </li> </ul>
Here is the JavaScript that is activating the rollovers: $(document).ready(function() { // preload all rollovers $("#navWork img").each(function() { // Set the original src rollsrc = $(this).attr("src"); rollON = rollsrc.replace(/.png$/ig,"-over.png"); $("<img>").attr("src", rollON); });
// fon't do the rollover if state is already ON if (!matches) { imgsrcON = imgsrc.replace(/.png$/ig,"-over.png"); // strip off extension $(this).children("img").attr("src", imgsrcON); }});
Here is an example of what is done so far: [URL]. When you mouse over the b&w images you will see the image change to color. When you mouse over the links on the left they will have a rollover and also change the image on the right to color.
What I would also like is mouseover the image to change the rollover state of the link on the left. Here is my code so far.. PHP Code: <style type="text/css"><!--/* ================================= *//* ====== Subject Matter Rollovers ====== */#menuButton1{height: 41px;width: 133px; overflow: hidden;background: url(images/content/buttons/subjectmatter.png) top left no-repeat; display: block;text-decoration:none;line-height:2.5em;color:#000000;} #menuButton1:hover{color:#FFFF00;
I thought the following might work (2nd image) Code: document.getElementById('link2').class='menu_hover'; But as you see no it does not.
I am attempting to make a menu that has a background image that changeswhen you rollover or click a menuitem. I've got the hover effect working fine with CSS, but am trying to implement the click event via jquery with the following:
My process is to reset the entire menu to the inactive state, then switch on the active state for the item that was clicked. Eventually, the item that was clicked will display its corresponding body section as well. I've tried using the CSS pseudo-class "active", but since the entire div is the link, that is unavailable. I've also tried multiple variations of addClass/removeClass, toggleClass, and setAttribute/removeAttributebut nothing hasworked so far.
To say I'm new to JavaScript is a bit of an understatement so bear with me. I have a site set up with a variety of layers of toggles. When you enter the site all of the items are collapsed and you click the headings to expand. Each of the toggle-able items have ids. It works great for users who start at the homepage.
However, when I send people to any of the inner topics, all they see is the initial collapsed state of the site. I want to be able to provide a URL that will set the toggle to open, and show all of the content for that section on entry.
Here is my code and js, can anyone point me in the right direction?
I have navigation buttons that I'll call primary buttons. I also have secondary navigation buttons that I'll call secondary buttons. If you rollover a primary navigation button, it should make secondary navigation buttons 1,4,and 5 go to rollover state A. However, if you rollover secondary navigation button 1,4 or 5 they should go to rollover state B.So the simplest way I can explain it is that the secondary navigation buttons need two rollover states possible.
Before, I had an iframe, and when I moused over a link outside the iframe, it would load a page into the iframe. Background image was part of the page loaded, as well as the text and what not. The problem was, the image took too long to load. I've been learning how to do javascript and I came across some code for preloading an image before the mouseover so there was zero wait time. For the past few days I've been trying to figure out how to have the preload image appear BENEATH the iframe (now with no background image or color) with the allowtransparency attribute set to true.
I've figured out the code to do both individually, i.e. I have the code so that when the link is moused over, the new image will appear; AND I have the code so that when the link is moused over, the page with load into the iframe. Both work, both do what is expected, but they don't do it together.Below is the script. Here's where it's confusing. If I have the "setupImgRollover..." first inside the if statement: the page loads into the iframe, but there is no image. If I have the "setupImgRollover..." after the "document.link..." commands in the if statement: the image appears but the page does not load into the iframe.
HTML Code:
window.onload = rolloverInit; function rolloverInit() { for (var i=0; i<document.links.length; i++) { var linkObj = document.links[i];
I have a chart (class="chart") that sits behind another graphic element and which only has a tab portion visible. What I need to happen is this: Click on the graphic -- the exposed tab part -- and it slides down an x amount of pixels. Click on it again, and it slides back up. I'm not using the toggle function, since as far as I know there is no way of preventing it from hiding the whole graphic, and I need a portion of it to show. What would I add to the code below to make this happen? Is there a better way to do this than how I've started it?
On the following page (Link to the test page), i used toggle to open and close additional content. I don't know why, but you always have to click twice on the Link (name) to see or hide the content. im shure the code isn't perfect, but all in all it works.
Here is the jQuery Code i used for all the effects on the page. (most of the code is for the image fading. I just want to paste the complete code).
$(document).ready(function() { /* ========== Team Imagehandling ========== */ // hide all team-active divs $('.team-active').hide(); $('.slidebox .view-team img').addClass('faden');
I am a JQuery newbie, and was asked to use jquery to do something like this: when clicking hyperlink A, it actually clicks hyperlink B? How to accomplish this using jquery?
// Right click on file $('.file').live('mousedown', function(event) { // If rightmouseclick (=3) if(event.which == 3) { $(this).bind("contextmenu", function(e) { e.preventDefault(); }); [Code]...
When I right click on a file and pick "openFile"from the context menu, the action only run once. But when I do this again, it runs twice. When I do this again, it run three times, and so on ... For some reason jQuery (or JavaScript) is counting the times I have clicked on the class '.file', and fires the action according to this number.
I came across some simple jQuery that does a nice job styling checkboxes but it's doing things that I wouldn't expect to work. The idea behind the code is to set the original checkbox element to display:none and then follow the checkbox element with a <label> element that has a background image of what you want the new checkbox to look like. jQuery assigns a change handler to the checkbox elements that looks at the current state and adds a new class to the label, one with a "checked" background image, if the state is going to checked and removes this class if the state is going to unchecked. The basic jQuery is:
You can see it work on the pay form at [URL] by clicking any of the three checkboxes there. The thing that puzzles me is that when you click in the area where the original checkbox was, the click event seems to pass through the image that is there now and be passed on to the checkbox element that has a display:none style now. My experience with HTML has been that mouse clicks don't pass through elements. That is, if you place something over a clickable element, you can no longer click it.
I have a button and I want it to be disabled (not clickable) after 3 clicks. Also the button text must change at each click.
Example: Test (3) <- button with text -click- Test (2) <- button text changed -click- Test (1) <- button text changed -click- Test (0) <- button can't be clicked anymore (non active button now)
Is there a way to tell the state of slideToggle? My problem is I have two buttons that change a div and also toggle it open/close. But if you click one button then click the other, the changes take effect and then it will close. So is there something like if(slideToggle() == open) or something along those lines?
I'm completely new to jquery. I've been reading through the tutorials and documentation, but I can't figure out the best way to make this work. I want the User to see one box that changes colors by pressing the proper button.
I'm trying to prevent any mouse clicks on my page (if only for a short time), and I have this working on a very simple test page, but within my application (that has a very large DOM footprint) nothing is working. function noop(){ return false; } jQuery( document ).bind( 'click mousedown mouseup', noop ); I am running this code well after the DOM is loaded. I've tried binding to document, document.body, "*", and window. I am not dealing with any frames. I've also tried unbinding any click/mousedown events prior to binding. I am currently using jQuery 1.2.6, although for fitness I tested this with 1.3.2 but I get the same results. What could I be doing wrong?
We have been trying to set up a procedure on our website so that the following happens:
When someone clicks on an image, the visitor is taken to our Contact Us page, the title tag is inserted into the Subject and they can complete the rest fo the form and submit.
We have about 40 pages of images, all of which have the ALT and TITLE tags completed. Each image has a description paragraph, and all pages are made using HTML and CSS.
We've seen several websites, although of course now we can't find them, that something similar occurs. Seems there was a jquery script that did this type of thing, but it would only work on the same web page and we want it to go froma category page (about 40 different image category pages right now) to the Contact Us page.
It is important that the name related to the image shows in the email form so we know what image they are referring to.
With our limited knowledge of javascript, we've not been able to insert the TITLE or ALT tag info into the form Subject so that it shows on the emailgoing to us. We've attempted onclick which now moves the visitor to our Contact page. We also can use the <a href as well.
I'm wanting to have a button on a web page where if I click on that button it changes colour. Basically I have 3 images of leds being on, a green a yellow and a red. Depending on the state the normal running state would be green and if there was a problem I could make it yellow and if it was off make it red.
Rather than having 3 different buttons, I want to have 1 that can change when clicked and just cycle through the 3 colours.
I made a drop-down list that is opened when a user clicks on a button. If the user selects an item, the drop-down is rebuilt so the list is closed. If the user clicks on the button again, the drop-down closes using .toggle() on the button click event, and these two scenarios work great.However, I also need the drop-down to close when the user clicks anywhere outside of the drop-down. This seems simple, but I've been having a really difficult time figuring this out. I tried .focusout(), but this makes the events I have tied to selecting an item not fire at all. I also found this little bit of code from a drop-down plugin that should work perfectly, but it fires when the user clicks on the button, so the drop-down never opens:
I am having a strange issue with jQuery where if someone clicks a checkbox, then a hidden div would slideDown using jQuery but for some reason, the intial click on the checkbox works and shows the hidden div but it does NOT work when you click on the checkbox again to hide the div. [URL] On the borrower and lender tabs you'll see checkbox i speak of by the "Mailing address same as Property Address"
Can the div report back that its css display state got changed to none? Not sure whether I am making much sense since reckon most events are triggered by user action and not the change of css display status. The idea is basically that a staticpositioneddiv shown on several pages but not others, caused by css set display:none. During hiding the div should change its state and return to the previous state when being displayed again. Is it possible to bind an event to the change of the css display state instead of user action such as clicks?
