I have some inputs with images that I'm changing the source for onmouseover and onfocus. I want to move the js from the HTML and use a script that does the same thing for all instances of the buttons throughout the site (there's only two at the moment). So far I've got this:
That doesn't look very lean and it works erratically. On a page where both buttons exist, it works in Firefox but only one of the buttons works in IE (the second one) and in Firefox the script won't work if the first button is not present on the page. So what would be the best way to do it?
I am using PHP and Javascript to create a user generated page editor. I have everything working except one thing. The user can select the background color of the page using preselected colors. They can also enter in a hexadecimal code to change the color of the background if the color they want isn't one of the preselected ones. These two things work good, but when it comes to them entering in a web address to make an image the background instead of a color, I can't get the background image to change. I have tested it out and when I enter in a predetermined url in the javas source code to test if the pic will display it does, but it doesn't go away after being displayed. So my question is using the code below, how can I get the change the background image using an input box and how can I make it go away when a color is selected instead of an image. Explained below:
I am trying to dynamically clear the value of a form input field and then submit the form.When I used $('#my_field').val('') to clear the field, it was cleared on the screen but when the form was submitted the original value of the input field was posted.My browser is FireFox and I can see using FireBug that when the field is cleared, firebug is still showing the html code with the old value. E.G. <input type="text" value="old_value" />The same situation occurred if I used $('#my_field').attr('value', '') to clear the field.The same situation occurred if I actually changed the value of the field rather than just clearing it.To work around this problem I ended up using the $('#my_field').removeAttr('value') to clear the field before it was submitted.
Is there any way to determine the number of bytes or percentage of a image that is being loaded?This function is a extract and what I would like to do is show a real time progress bar while the image is loading if it hasn't loading after x seconds. Is this possible? By real time I mean a progress bar that reflects the images actual state not a fake bar that just moves. The thing I'm most concerned about is calculating how much of the image has actually loaded. Possible?
Code Javascript: function fadeMonitor() { controller.monitorIsAnimating(true);
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); }});
I have 6 horizontal navigation image links on top of my site. The regular images are black n white, but on the hover they transform to a colored image. Each image leads to a different page on my site, I'm wondering if I can make the image corresponding to that page light up whenever on that page.
Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.
Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";
The javascript that I have come up with so far and works is as follows:
<img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>
I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
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.
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 an image that I start out with opacity = 0. Then when I rollover the image area the opacity is set to 1 so I can see the image, and when I roll off of the image the opacity is set back to 0:
This works fine. But the image has an image map that defines a small hot spot. When I roll over the hot spot the image hover state is interrupted and the image goes away. Does anyone know how I can keep the image hover state active when rolling over the image hot spot?
I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website [URL] In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.
I found this slide show [URL]. I got it to work on my website [URL] using Firefox, but when it is viewed in Internet Explorer it will not work. Second question, When the slide show gets to the last image, after the last image all photos disappear and it resets itself changing the format of the webpage. Any way to not have the images disappear while it loops itself or is there a code to have it stop on the last photo and not loop.
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.
How do I change the value of "id" of a text input field?I am using the function attr (), but it seems every time I call the function adds an id.$ ("input.buscaf.") attr ('id', obj);"obj" is the value of the id which will be exchanged.I have to change the value of the id because I'm using masks values.
I have a table with a list of items which currently show 8 items per page. I want to have an input box at the top of the page so if I want a different amount of items to be shown i enter the number and the page alters the pagination to what ever number is entered.
However, the problem is that it also changes the value of the input form Submit button. How can I change the code so that it only changes the input box of a certain ID?
I'm making a <select></select> with lots of <option></option>. It contains all possible options. Because of the length of the list, I also have an <input type="text">.
This is what I wish to do:
onKeyDown I want all options that don't contain (or begin with, it doesn't matter which one) the typed letters to be removed from the <select>.
My problem is that I don't know of any code to find words and identify letters.
I'm building a template editor and changing some of the variables.
Part 1.
Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s
I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.
Part 2.
I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.
Head <script language="javascript" type="text/javascript"> function detail1a(){ document.getElementById("detail1").innerHTML = "Up to 5 Quarts"; }
