I have a div which sits on the left hand side of the page, it has another div with content that fills the div,what i want to do is swap the inside div, with another div filled with different content after 10 seconds. and again after 10 seconds rotate back to the first div and so on..
on my main page i had php include of 'left_box.php'.. on that page the code looks like
<div class="span3 main_div">
<!-- first div -->
<div class="well sidebar-nav transfer-central">
<?php include 'includes/transfer_central.php'; ?>
</div>
<!-- second div -->
<div class="well sidebar-nav fixture-results">
<?php //include 'includes/fixture-results.php'; ?>
</div>
</div>
i have put both divs(includes) which i want to appear in the main div but currently only the first div appears.. but how after 10 seconds do i get the second div to replace the first div, inside the main div?
I looked around and just cant seem to get my head around it
JSFiddle: http://jsfiddle.net/Arj2C/
HTML:
<div id="outerdiv">
<div class="" id="1">
<!--content-->
</div>
<div class="hidden" id="2">
<!--content-->
</div>
<div class="hidden" id="3">
<!--content-->
</div>
<div class="hidden" id="4">
<!--content-->
</div>
</div>
JS (with jquery):
var next = 2;
$(function(){
setInterval(function(){
if(next == 1) $("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
if(++next == 5) {
//$("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
next = 1;
} else $("#" + (next-1)).toggleClass("hidden");
}, 10000);
});
CSS:
.hidden {
display: none;
}
Related
I have a series of div's that are populated with an image, title & excerpt.
Many of the 'content' div's have a div with a two lined title, but I'd like for the 'excerpt' div to have a different class added if the title is one lined (24 characters or less).
I figured I'd have a jQuery function that runs through each '.content' div then an if statement compares the amount of characters in the '.contentTitle', if true then it would apply a class to the '.excerpt' div within the same parent .content div.
What I have below is not working. I'm wondering if its because both of the divs (.contentTitle / .contentExcerpt .excerpt) I'm using are children of the container div (.content)
$(".content").each(function(){
if($(".contentTitle").text().length < 22) {
$(".contentExcerpt .excerpt").addClass('TEST');
}
});
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle"><?php the_title(); ?></div>
<div class="contentExcerpt">
<div class="excerpt">
<?php echo(get_the_excerpt()); ?>
</div>
</div>
</div>
When you are using the children of the container div (.content), you didn't check the children of the div whereas you check all other div matching $(".contentTitle").text().length < 22 when there is more than one .content parent div and when one of them is having the length >= 22, the condition will fail.
I have modified the code below to check the children of the parent div.
$(".content").each(function(){
var parent = $(this);
if(parent.find(".contentTitle").text().length < 22) {
parent.find(".contentExcerpt .excerpt").addClass('TEST');
}
});
.TEST {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle">12345678901234567890123</div>
<div class="contentExcerpt">
<div class="excerpt">
Test content
</div>
</div>
</div>
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle">12345678901234567890</div>
<div class="contentExcerpt">
<div class="excerpt">
Test content
</div>
</div>
</div>
Note: If you replace your code above, you can see, this is not changing the color as one of matching div is having the length >= 22.
I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
I am having one html page in which all navigation (lets say them the TABS) resides.
I wrote a javascript to show one and hide another one on link click.
It works well on the tab i want but when i navigate to another tabs that div is showing on the bottom. I dont want it to display it in all other tabs.
This is my javascript code:
function displayBlock(divName){
if(document.getElementById("vend")) {
var oldDiv = document.getElementById("vend");
oldDiv.style.display = 'none';
//show div
var newDiv = document.getElementById(divName);
newDiv.style.display = 'block';
}
else{
var newDiv = document.getElementById(divName);
newDiv.style.display = 'none';
}
}
How to modify it to meet the need?
HTML Structure:
<div class="tab-content">
<div class="tab-pane" id="dashboard">
<div class="container">
<!-- Container code -->
</div>
</div>
<div class="tab-pane" id="vend">
<div class="container">
<!-- Container code -->
<a id="auto-topup2" href="dashboard#auto-topup" onclick="displayBlock('schedule');">
Schedule Autovend
</a>
</div>
</div>
<div class="tab-pane" id="commision">
<div class="container">
<!-- Container code -->
</div>
</div>
<div id="schedule" style="display:none">
<div class="tab-pane" id="auto-topup">
<div class="container">
<!-- Container code -->
</div>
</div>
</div>
In the vend section i have created a whose onclick will call the function and hide the Div with vend id and show Div with schedule ID....But the DIV with scehdule ID is showing in all the tabs..
I hope now it can be somewhat undestandable
To hide all tabs without the selected one you can use this function:
function displayBlock(idOfBlock) {
document.getElementByClass('block').style.display = 'none';
document.getElementById(idOfBlock).style.display = 'block'
}
<div class="block" id="hello">
hello
</div>
<div class="block" id="foobar">
foobar
</div>
Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?
EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1
I would like to make a multi level menu with JavaScript.
The problem is when I display the first div with the mousover event I wish to keep the first div displayed and navigate though it to display the second div.
Can I put a mouseother event on nested divs ?
Here is what I wish to do:
function show_menu(nom_menu){
document.getElementById('ss_menu_marque').style.display='none';
document.getElementById(nom_menu).style.display='block';
}
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
function hide_menus_tous(){
document.getElementById('ss_menu_marque').style.display='none';
}
<a href="marque.php" onmouseover="show_menu('ss_menu_marque');">
<div id="ss_menu_marque" onmouseover="show_menu('ss_menu_marque');"
onmouseout="hide_menu('ss_menu_marque');">
<div id="ss_menu_marque2" onmouseover="show_menu('ss_menu_marque3');"
onmouseout="hide_menu('ss_menu_marque');">
</div>
</div
This is how you can do it with nested divs:
<html>
<head>
<script type="text/javascript">
function show_menu(nom_menu) {
document.getElementById(nom_menu).style.display='block';
}
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
</script>
</head>
<body>
<div id="ss_menu_marque_root" onmouseover="show_menu('ss_menu_marque_1');" onmouseout="hide_menu('ss_menu_marque_1');">
Menu marque 1
<div id="ss_menu_marque_1" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_11');" onmouseout="hide_menu('ss_menu_marque_11');">
Menu marque 11
<div id="ss_menu_marque_11" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_111');" onmouseout="hide_menu('ss_menu_marque_111');">
Menu marque 111
</div>
</div>
</div>
<div onmouseover="show_menu('ss_menu_marque_12');" onmouseout="hide_menu('ss_menu_marque_12');">
Menu marque 12
<div id="ss_menu_marque_12" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_121');" onmouseout="hide_menu('ss_menu_marque_121');">
Menu marque 121
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can simply show and hide different menu levels as your mouse moves over them, while the higher level menus stay visible.