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)
View 2 RepliesI'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?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
<script type="text/javascript">
$(document).ready(function() {
$('#box2').hide();
[code]....
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.
View 2 Replies View RelatedCompletely 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?
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
[code]....
I have a jquery function that will show or hide a div id="hide1" based on the result of a select id="ticket1"
$(document).ready(function(){
$('#hide1').hide();
$('#ticket1').change(function(){
if(this.value == 'adult'){$('#hide1').hide();}
[Code]....
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.
[Code]...
I have a little issue with trying to hide / show multiple divs on my page. I am using a class name for the divs but the name is generated by a field have set in my database. So for example
<div class="General">Ttitle 1</div>
<div class="General">Ttitle 2</div>
<div class="General">Ttitle 3</div>
<!-- and my link is -->
<a href="#" class="toggle" title="General">Toggle 1</a>
And then say I have
<div class="Questions">Ttitle 1</div>
<div class="
Questions ">Ttitle 2</div>
<div class="
Questions ">Ttitle 3</div>
<!-- and my link is --><a href="#" class="toggle" title="
Questions ">Toggle 2</a>
What would be the easiest way or the best way to code out the jquery to hide / show all the divs with the same name as the links title i can do code jquery to toggle 1 div but not sure how to code it so that it will hide / show all the divs with the same class name.
Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added. Here's my Javascript:
$(document).ready(function() {
// toggles the personnel window on clicking the image/header
$('div.title'+'#one').click(function() {
[code]....
I am new to jquery and need some help with this I have the following simplified html
[Code]...
I have 2 divs: <div id="box1></div> and <div id="box2></div> I also have one link to contoll them both. The effect I want to get is: when I click first time on my link box2 hides, when i click second time also box1 hides, when I click third time both divs should show. I manage to do that both divs hiding but later I can't get the show. Im trying sth like this:
$(document).ready(function() {
$('.slick-hide').click(function() {
$('#box2').hide('fast');
$('.slick-hide').click(function() {
$('#box1').hide('fast');
$(".slick-hide").removeClass("slick-hide").addClass("slick-show");
$('.slick-show').click(function() {
[Code]...
Heres the code -
<html>
<head>
<title></title>
[code]....
I've got an issue with the attached file.
I have 3 buttons & 3 divs.
I would like to hide/show the relevant divs (into a container) based upon the button pressed. If no div was open, then it would simply open the relevant div, however if say div 2 was open and div 3 was pressed, div 2 would toggle closed then div 3 would toggle open.
I've got each individual div opening and closing, but I'm stuck at the next point (checking if a div is open/toggling etc).
Here's my issue, hoping someone can help. I have a page with 5 roundabouts on it showing pictures depending on a button click. Buttons would look like:
DOGS CATS BIRDS FISH REPTILES
So if you click Dogs, I want it to hide the roundabout for Cats, Birds, Fish, and Reptiles but show Dogs. This works perfectly in FF, Chrome, IE8, IE7, but if I view in compatibility mode or with an IE6/7 browser, all 5 roundabouts show and even if I hit the buttons, which fire the show/hide code, nothing gets hidden. Here's some code, I'm hoping someone has a tip on where I am going wrong in getting this simple show/hide of a div.
[Code]...
I'm trying to selectively hide and show divs based on what a user specifies using three select boxes in a form. I'm probably missing something obvious, but here's what I've got and it doesn't, work, they divs just stay hidden.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
[Code].....
I'm trying to get a next/previous arrow to float over the right/left edges of a slideshow div. I'm using to absolutely positioned divs to contain the next/previous buttons but for whatever reason they refuse to display above the slideshow div. Is there any way to get controllers to float over the cycle container?
Here's my code and if you give it a try you won't see the floating next/previous buttons unless you change the 'top' values for #next_btn and #prev_btn in the CSS to be greater than the height of the image (change to 410 to see them in my example):
<style>
#container {width: 500px;}
#container {position: relative;}
#next_btn {position:absolute; top:10px; right:5px;}
[Code]....
I'm trying to make a script which in realtime changes a DIV to float either left or right but somehow I'm doing something wrong? Here is what I got...
Code JavaScript:
function logoplace(that){
document.getElementById('logoholder').style.float=that
} Code HTML4Strict:
<style type="text/css">
div#logoholder {
float:left;
border:1px solid #666666;
}
</style>
Â
<input type="radio" name="logoplacement" value="left" onclick="logoplace(this)" />
Left
<input type="radio" name="logoplacement" value="right" onclick="logoplace(this)" />
Right
<br><br>
<div id="logoholder">This is a test</div>
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.
View 7 Replies View Relatedim using a script to show or hide divs
<div id="div1" style="display:none">div1</div>
<div id="div2" style="display:none">div2</div>
<a onclick="showIt('div1');">div1</a>
<a onclick="showIt('div2');">div2</a>
[Code]....
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.
is it possible to have 1 dive that hide/show all divs the div i want to open all or hide all is
<div id="expandall" onclick="toggleall('noticecontent[i]');" div style="cursor: pointer;" div align="center"> Abrir tudo</div>
<html>
<head>
<script type="text/javascript">
[code].....
another day, another problem ;) I have a select:
<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
[Code]...
I have 2 things that I want to show/hide using JS.
Code:
<html>
<head>
<title>Hidden Div</title>
<script language="JavaScript">
[Code]...
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've got the following code in a website of mine:
Code:
<a href="section1.htm">Section 1</a>
<a href="section2.htm">Section 2</a>
<a href="section3.htm">Section 3</a>
<a href="section4.htm">Section 4</a>
<div id="general">General overview</div>
<div id="section1">Section 1 overview</div>
<div id="section2">Section 2 overview</div>
<div id="section3">Section 3 overview</div>
<div id="section4">Section 4 overview</div>
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....
I have the situation where in the first instance I would like all divs to be visible.
Only when the user selects something in a select menu the non selected divs will hide.
I have the following:
Code:
<select name="type">
<option value="ShowAll">1</option>
<option value="Selection1">1</option>
<option value="Selection2">2</option>
[Code].....
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.