I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this. how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.
I've got a script that toggles the visibility of a div on "dashboard.html": $(document).ready(function(){ $("#add_networks_wrapper, .remove_box").hide(); $(".toggle_add_networks").show(); $('.toggle_add_networks').click(function(){ $("#add_networks_wrapper, .remove_box").slideToggle(); }); }); On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it. What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
I have just started trying to use jquery and though it looks cool and simple I'm having really problems working out how to do a really simple thingAll the examples I've seen use css selectors to target an element in the page but i need to use an id.basically I have a list of <a href> links and a load of <div>s that are all display:none by default when the page loads. The <a href> links and <div> elements are written dynamically by a php loop.What I would like to do is click on an <a href> link and make a specific <div> visible using its id. Sounds simple doesn't it ? But I can't figure out how to do this with jquery syntax.In traditional js syntax I would write a function that would receive the id of the target div as an argument when the <a> tag is clicked. Then I would loop through all the divs and make them all display:none and then display the target div.would i still need to put an onclick event in the <a href> links ? or is there a way of getting the id of the <a href> and using that to target the correct <div> ?
I found this little script and it works fine but the only thing is when the page first loads it displays the "This is foo" text. I would like it to not display the text until it is clicked. So instead of it displaying "This is foo" when the page loads I would like it to not display anything.
Here is the script: Code: <body> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div> </body>
I got the functionality of this plugin working tonight. It allows for a checkbox or link to make the password field of a form show the hidden characters, because sometimes it's nice to see them. I turned it into a plugin, and because I still consider myself a beginner with javascript, I thought I'd ask for a review so hopefully I can learn something. I tested it in FF5, IE7, IE8, IE9, Latest Opera, Latest Chrome, and Latest Safari.
I've a frameset in my application. 1. A header Frame. (header) 2. A Tree Frame (left) 3. A Main Frame for displaying main contents. (mainFrame)
Well, I just want to toggle the visibility of the Left Tree frmae to provide more space to the Contents page when required. > There can be a button which will have the label as HIDE when frame is visible. > And when frame is hidden, the buttons label should be SHOW, clicking on which should show the frame baxck in its place.
I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).
Here is the current code:
function archives(toggle) { if (typeof(toggle) != "undefined") { if (document.getElementById(toggle).style.display == 'none') { document.getElementById(toggle).style.display = 'block';
[Code].....
This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.
I'm pretty new to JavaScript and I've been searching for a way to toggle the visibility of many divs with images inside. Basically I want to have nothing visible, then I have three links that represent three categories of the images. So for example if the user clicks the link "Illustration" I want all the divs with the class illustration to appear. But when the user chooses a new link say, "typography" I want to hide the divs with class illustration and then show the divs with class typography.
I'm having problems with the jQuery 'if' statement. When the div 'accord3' is hidden, I'd like the class 'linklast' to be added to 'Schools' --> the bottom corners are rounded. When the div 'accord3' is visible, the bottom corners must be square, meaning the class 'linklast' has to be removed. This has to be able to switch back and forth while I toggle the visibility.
This is using jquery by the way. I have a list of ethnicity on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to disappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box disappear when unclicked.
How do I check if a certain word exists in a text box? For example, if I set the word to be found to "word1", if the text box is "This is word1", and alert would come up saying that "word1" was found.
I am creating this Javascript/XML HTA that is basically a project tracker. I recently added some new fields in the form that are written to the XML file for the project being tracked. This makes the files neither backwards compatible if I use it in a previous version nor forward compatible for future versions. This means if a user is using version 1, I create version 2, he wants to import his old tasks to Version 2, it throws an error. For example if I have a <status> element written in the newest version, but no <status> in the previous, I can no longer use that projects XML file in a previous version.
I tried to use the following code to validate existence of the tag and assign whatever outcome as the variable to write, but it's not working. Theres a few different ways I tried.
Is it possible to check for the existence of an element? I have a dynamic page which may or may not have a <div> holding a bunch of thumbnails, and I want a function to check for the existence of the <div>. Doing:
blah = getElementById("thumbnails");
Generates an error.... I was hoping it would just return false or something... Is there a way of doing this?
Code: <script language="javascript"> <!-- // Max number of items to show/hide
[Code].....
Which is designed to hide all but one of a group of DIVs with consecutive IDs in the form "listings_stations_<number>". The problem is, I won't know how many of these DIVS there will be. I know a maximum possible number though.
The script as-is works, but obviously throws up errors trying to get handles to non-existent elements/objects. How can I check an element exists before getting and setting style properties for it? I'd like a solution that works for all three browser-types the script currently works with.
I am using Javascript to add rows to tables, etc. in a function I am calling. I pass the function the ID of the div, and what I want in the rows, and it will add rows to a table in the div.
The problem is I need to test for the existence of the table - and if the variable or object doesn't exist already my code errors - PLEASE REMEMBER - I don't know the name of the variable or object I am testing the existance for - it is created dynamically based on the divID. So when I test for this object or variable the test has to be for a dynamically created object - Code:
I'm processing a form with numbered fields, but I don't know how many fields there are. Might be 1, might be 20. So I'm iterating through 1-20 and trying the following test:
for(i=1; i<=20; i++) { if(typeof(eval('document.edit_orderitem_form.field_'+i+'.value')) != 'undefined') { [doing stuff with the form field here] } }
The script quits on that line with "Undefined value" showing up in Safari's error console. I just can't figure out how to eval() the name of a field when it may or may not exist.
I'm trying to write a function to determine whether or not an image exists.
Most people recommend setting the onload event handler. That works like a charm except that side-effective actions seem to be impossible. I can, as nearly as I can tell, run alert and opera.postError (I test on IE, firefox, and opera by the way). I've tried using the 'this' while in the event handler, setting this.name, test.name, window.document.getElementById(test's id).name. I just can't seem to find any means of using side effects inside the event handler.
Below are several examples of things I've tried so far: