External Header - Show/hide A Set Of Divs In My HTML BODY
Oct 8, 2010
I would like to learn jquery but have already stumbled upon a little problem.
My whole website is programmed in PHP. On every page I include my header.php containing the header, login bar etc. I am now trying to show/hide a set of divs in my HTML BODY.
Now I understand that I need to put my jquery code in my HTML HEAD tags, however, I don't want to put it in my header.php because then the jquery will be included in all my pages.
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
I'm new to using forums to help solve my coding problems, but here it goes. Basically, I have a JavaScript header ad that appears automatically on page load. There is a button on the ad that allows the user to close the ad, which disappears when clicked. The code looks like this:
[Code]...
What I need to do is have an option for the user to make that ad reappear by clicking a button. I'm sure this is done using an onClick event, but I don't know what the code should look like.
I have 3 divs containing images floated next to each other and when clicked i want a new div to appear beneath these 3 images. Clicking on the first image i want a new div to appear beneath these 3 images. Clicking on the second image must hide all other divs and only show the content for that div.
the script works fine with one problem. I would like div1 to be initially visible but if i remove the style="display:none" then the script does not function correctly.
I'm using a pretty simple submenu to try to hide the div sections I don't want, isolating the ones I do want to be the only ones visible. My code isn't the most concise when addressing this problem, but it looks like it should still work.
Make sure you use Firefox (because I'm still very early in development and I dislike IE) and use this link [URL]... to see for yourself: Observe that there are two videos and one graphic. Hover over "my work" and click graphic. Fine, right? Now click video.
The div sections are identical in naming conventions. Is it that the JS can't act fast enough? I thought I remedied that by calling isolateDiv() after I had hid all the unwanteds.
[Code]...
This is just a small portion of my code. The sections separate fine when you first click the video link.The problem is that after you select one section, and then decide to select another one, only the first post with that div id shows up. Try the link at the top and hover on the "my work" section to try.
If I don't use style="display:none" inside the divs, I see them both initially and I can hide/show each one depending on which link I press. But the thing is that I need both divs to be hidden in the first place, and when I click on ONE, to show TWO, when I click on TWO to hide ONE and show TWO etc. Each time 1 div should be visible, depending on which link we press. The other must disappear.
I want to display the div marked 'General overview' by default, and to hide all of the other divs (section1, section2, section3 and section4) but would like to swap out the 'general' div with the other divs as the corresponding links are moused over.
e.g. mousing over the Section 2 link will replace the 'general' div with the 'section2' div. On mousing out, it will revert back to the 'general' div. Mousing over the Section 4 link will replace the 'general' div with the 'section4' div. On mousing out, it will revert back to the 'general' div. Etc etc....
So, if the user were to select "Selection1" two divs should only be visible. The same will apply for others, if "selection4" is made then only one div would be visible.
The user will need to the option to reset and display all divs by using the "ShowAll" selector.
I ahve seen examples of this on the net however, they do not show all the divs in the first instance and they are donhe by ID and not class. I need to do it by class as I have some with the same name and they cannot change.
I have been using a jquery based plug-in, and what i would like to do is degrade it, so a non js enabled browser will hide the relevant div when js is not enabled, and show a different div with appropriate message content.i have followed a couple of tut's which do this on click, but i would like this to occur on page load.
So I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this. var divElement = ''; function show(divElement) { if(divElement == 'add') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='block'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'edit') { .....
Completely new to jQuery but I am trying to implement a few pieces on my new website. At the moment I have three images in a row and I want to be able to click on any one of the images and use jQuery to populate a hidden div below the three images that contains more info and slide it out using the fold animation. I'd also like it if when a second image was clicked it closed the currently open div and opened the new one. I've seen tutorials that open the divs but can't find one that closes them again on opening a new one.
Can anyone point me to a tutorial that does this or suggest how it could be done?
On the homepage of my site, I would like to have some nav links that toggle between a few divs that are below in the content The divs in the content should display one at a time. For example, if you click nav1, the user would see div1. If nav2 is then clicked, div1 would hide and div2 would display.
I have some code that will do this, but for some reason it is hiding any divs that are within the toggled div. I'm very basic with JS and could use some help here. Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> function toggleID(IDS) { var area = document.getElementById('secondContent'); var sel = area.getElementsByTagName('div');
It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.
I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.
I'm trying to add the "you have unsaved changes" message to a form. I have it working in every browser except IE7 and IE8.I have set the onbeforeunload with using a global "goodExit" variable (that's supposed to help IE, and it did partially).The thing is, that I have multiple tabs on the page, so I only show part of the form at any given time. If they change a field on one tab, the top of the page shows a visual box of "unsaved data", so that as the users changes tabs the box at the top still shows.The problem is that, IE fires the onbeforeunload anytime someone clicks to change tabs. The only thing that happens when they click a tab is that I use jQuery to show/hide the DIVs appropriately.Why does IE fire onbeforeunload when changing the display of DIVs???!!!No other browser does this.The global "goodExit" variable meant to help IE, seems to work, except that goodExit is set to true if they change any field on a tab, so that then the next tab they switch to fires the event.
Complete JS first timer here, hope you all can understand my difficulties and stupidities without getting too frustrated. Trying to make a portfolio website as a Christmas gift. Anyway, I'm trying to build a menu that:
1. Expands/Retracts when clicking on other 'headers' in the Menu. 2. Allows for more than one object to be listed in each 'header'.
(Something similar to this [URl]... I've tried to hatch together several online solutions but I really have no idea what I'm doing, as you can see:
I want to hide all divs inside a specific div. Fx. <div name="theDiv"> <div id="hidden">hidden div</div> </div> I would think it was: document.getElementsByName('theDiv').getElementsByTag('div').style.visibility="visible"; But that doesn't work?
I am using the following code to show / hide form elements within a div based upon the drop down choice. How this code can be amended to use multiple drop downs within one form?
HTML Code: <html><head> <title>Show and Hide</title> <script> // Function that Shows an HTML element function showDiv(divID){ var div = document.getElementById(divID); div.style.display = ""; //display div }
// Function that Hides an HTML element function hideDiv(divID){ var div = document.getElementById(divID); div.style.display = "none"; // hide } .....
I'm doing a page w/lots of divs that I set to visibile or hidden dynamically using getElementById.. the divs are all forms... sometimes elements in a hidden form show thru on a visible form.. how can I fix this..
I have a site with a lot of small div-boxes (with images and movieswithin them)they are positioned with CSS and float:left.i created buttons, which show and hide either all images or all moviesthis works well.but when i switch between these options, the float-position of thedivs goes crazy and every div-container is on one line for itself(instead of 5 on one line)
I have a table with 5 columns, I want to show column by column, first show the 1st column, after 5 seconds hide this column and show the 2nd column, and when I show the 5 column hide this and return to the 1st.All this automatically, without a button click If is more easy with divs I can change this columns for divs
It works well! But my script actually clones elements of the form so a user could be selecting adult or child for a number of tickets - ticket1,ticket2,ticket3....
How can I adapt that script so that it will show/hide for each ticket
I'm currently programming a website and we wanted to have Jquery on it. This is my first real foray into Jquery (other than occasionally using a plugin here and there) so I'm a bit confused as to why what is happening is happening.
The idea is to have 3 different things going on: At the top of the website we want rotating ads. When one of them is clicked, it opens a video file in Lightbox style (darkens the BG) 3 rotating banners below that, when clicked they just go to a website 3 more buttons with play buttons in the corners. When the play button is clicked, a video player takes over the button and plays the video. So far I have the 2nd and 3rd one working. The video player works, the Jquery shows and hides the divs appropriately, and the rotating banners work great.
