I have a div structured as following.
<div id="parent">
<div id="div1" class="child" style="display:none">
text A
</div>
[Code].....
I want to show div1 for 5 secs , and then div2 for 5 and so on, then repeat it again.At the moment just one div will be shown within parent div.
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...
Can JQuery toggle be use to switch divs on page load instead of having to click a button to start the action? What would I have to write in the header to make this happen if this is possible?
View 2 Replies View RelatedI am calling this javascript function:
Inside a nested div so that when a hyperlink is clicked it will show one element and hide the other like this snippet:
The functions works perfectly to expand one div element at a time inside the larger div container. The problem is that when I expand either of the elements by clicking the hyperlink...The larger div container(red gradient square) pushes everything past the background (solid grey square) and screws up the look of the entire page because the div, (which is a few levels up), containing the background is a fixed width, (as a percentage width would not work). I know the exact two widths the background would need to expand to dynamically as a result of the hyperlink being click by a user, but I do not have any idea how to do this from within the aforementioned javascript function I posted. Does anyone have any idea or help for me? It is very confusing as the div I need to resize is a full 3 levels outside of the function call I am working with. As an example the function call is happening in the last div of this flow:
And results in either a div#First or div#Second being generated inside the div#bio. I need to resize the div#greySquareH height property.
Btw the url to the page I am working on is Here. If you want to see any of the other code in the page it is there or I can upload it including the css if I haven't given enough info what I'm working on.
I am calling this javascript function:
var facing = "First";
function switchit(list){
if (list != facing){
[code]....
I have some html like the following
<div id="#tabcontainers">
<div>
<div class="content">xxx</div>
[code]....
I expected $('#tabcontainers div') to return just the four top level divs but instead it returns six. That is, it is returning the four top level divs within tabcontainers but also the child divs with class="content" inside the top level divs.Is there a way to just select the 4 top level divs (i.e. excluding the inner divs) other than putting class or id attributes on them and using those in the selector?
I'm trying to move a set of divs into their parent elements. Currently I'm using:
[Code]...
I have a web site which main page is index2.html I need a script that when I refresh the page it takes me to index3.html or index#.html in a random fashion. the list of index numbers is 10 so far.
index3
index4
index5
etc etc
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
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?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
Demonstration page: [url]
Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.
Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.
Finally, adjust the margins again. The P element snaps back into its containing block.
As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.
Edit: Client is Google Chrome16.0.889.0 dev-m.
If I have this code:
<div id="test" bla="1
">Hey</div>
<div id="test" bla="2
[code]....
I am trying to switch pages programatically. When a user logs in successfully I want to switch to another page. I thought mobile.changePage was used for that but I get this error message:
TypeError: Result of expression '$.mobile' [undefined] is not an object.
Or is there another way to accomplish this?
I have some divs I am toggling and there is a little + sign image I want to change to a - sign image when the toggle event occurs, but can't quite figure it out. Here is the toggle code I have (taken from
[Code]...
I am working on a simple switch statement that will select the current url and perform a simple action Here is what I am trying:
var url = window.location;
//alert(url);
switch($(url).val())
{
[code]...
so far my site is loading fine and all the jquery is working, but I am having a real problem getting my alert() to fire. I have checked the url with the alert() outside the switch, it is receiving what it should.
I'm looking for a lightweight way to be able to switch between 2 divs on a page.
I have found various ways to do this online with jQuery, but none of which are able to handle multiple switches and make it extendable across the pages of my website efficiently.
For example I could have 12 - 15 individual elements on a page (All with same style) each with an option to switch content e.g. "Click here to do something" then once clicked "it would reveal something" (Within that element/<li> tag) - so it's element specific.
For example:
Code:
<ul>
<li class="box>
Title
[Code]....
But of course as it's element specific you have to associate each id together but you can't have two id="2" - as that won't validate.....
Looking around, a perfect example can be seen at: [URL]
And because it's CMS driven and will have multiple categories/pages, you can't list all the id's with the javascript, so it has to be portable/OOP (Is that the word?) so just a main identifier in the JS...??
Where you click to reveal code and it switches div, but only for that element, it doesn't effect anything else.
I am trying to create some code so that when you click on a letter or word within a <span> area, it changes color. The span area is defined by a class .e1 Below is what I have so far, I can get the text to change color on the first click, but will not change back.
$('.e1').click(function() {
if($(this).css('color', '#000')) {
$(this).css('color', '#DD6660');
[Code].....
Is there some way to switch the browser into full screen mode?
Essentially emulating the F11 key in IE would be what I'm trying to accomplish.
I'm looking for some guidance on the best way to use jQuery to change a set of simple shirt measurements (in a table) from inches to cm, and back again. Can I tell jQuery to look inside a specific table and then convery all the numbers it finds to another unit of measurement?
View 6 Replies View Relatedhow to get this functionality going. I have a div name "footer". Within "footer" I have 4 links:
link1, link2, link3, link4
Is there anyway to write a function which will sense which link was clicked and then alert the id of that selected link. I have written the code but am not certain why isn't it working. here is my code.
$('#footer a').bind('click', function(){
//alert($(this).attr('id'));
var mId = $(this).attr('id');
switch(mId)
[Code]....
i would like to check for the window size with jquery and based on the different resolutions i would like to change the background image. So i was thinking to somehow use the "switch" statement for more cases, but i just don't know how this would look like. This is the basic structure i want but with more options:
if ((screen.width>=1024) && (screen.height>=768)) {
//do something
}
[code]....
I'm in the process of developing a site at [url] I'm using the jquery cycle plugin for my slideshow. Does anyone know a way to have my pause button changed to a play button after it is clicked, and for the play to turn into a pause when clicked?
This is the Javascript currently
HTML Code:
And this is the slideshow controls
HTML Code:
You can see I currently have the Play button commented out.
It's kind of hard to start explaining what i did or maybe even harder why i did it that way. But ok i neededtext replacement for custom fonts. Cufon couldn't be used because of the large amount of text and javascript in general on the site. It should play nice on IE6 that's why i chose to use facelift(server side text to image replacement). The problem arose when i needed to show a different font on hover state. I created two elements with the same position and now i want to switch them on hover state! It's actually working but when hovering fast over the different elements the hover state's mixes up ending ugly and wrong...
View 1 Replies View RelatedIs it possible to do an 'on click' event that changes a css selector, then an 'off click' that switches it back? I am working on a touch screen app and need to replicate a css hover state.
View 2 Replies View RelatedI have a page which has a form and also one iframe in the same. there is a button on the parent form.when the button is clicked, i am submitting the iframe and parent both. forms are getting submitted. but when i do print_r for iframe values, it is blank
[Code]...
I have some function to Preload images and make MouseOver etc..
But when a put a Switch statement in one of my function (MouseOver), a
receive an error on body load in my preload function.. did someone have any
idea why ?
Here's my switch code :
function setOver(num)
{
var txt;
obj = eval('document.getElementById("image' + num + '")');
obj.src = imagesHover[num-1];
txt = '<img src="' + imagesInfo[num-1] + '">'
document.all("infoDiv").innerHTML=txt;
document.all["infoDiv"].style.display='block'
Switch (num)
{
Case 1: alert(num);Break;
Default: alert("hello");Break;
}
}
