I am trying to create a content div with button links on a right sidebar. When the user is not hovering over any of the buttons, the content should rotate through each of the five button topics (I've accomplished this). Also, when the user hovers over a specific button, what should happen is a) stop the rotation and b) display only the content topic related to that button.
Currently all I can make it do is rotate through the topics (with a Javascript function) and make content appear and disappear on hover (in HTML). Help please?
<script>
function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
futcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex+1
messages[prevcontentindex].style.display="none"
messages[curcontentindex].style.display="block"
messages[futcontentindex].style.display="none"
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}
$('#container li').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval("rotatecontent()", 1000);
});
</script>
HTML:
<body>
<ul id="container">
<li><a href="#">
<img src="image1.jpg" width="250" height="100" class="Bab-
image"></a></li>
<li><a href="#"><img src="image2.jpg" class="sluotr-image
</a></li>
<li><a href="#"><img src="image3.jpg"
class="blogs-image"></a></li>
<li><a href="#"><img src="image4.jpg" class="chat-
image"></a></li>
<li><a href="#"><img src="image5.jpg"
class="view-image"></a>
</li>
</ul>
<div class="dyncontent">
<div id="div1">Content 1</div>
<div id="div2" style="display:none">Content 2</div>
<div id="div3" style="display:none">Content 3</div>
<div id="div4" style="display:none">Content 4</div>
<div id="div5" style="display:none">Content 5</div>
</div>
</body>
</html>
Here's a jsfiddle rotates until you hover over one of the hyperlinks, then resumes when you leave: http://jsfiddle.net/58pms/11/ (updated jsfiddle, original only went through one rotation)
I feel like it's hard to say what's wrong with your original code since I had to add some variable declarations and HTML that were missing from your sample. I also took out the event handlers that would show the item you were hovering over for simplicity since I don't think that was your main question.
The HTML:
<ul id="container" overflow:hidden>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<div class="dyncontent">
<div id="div1">Be A Billiken</div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>
And the script:
var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;
function rotatecontent() {
messages.hide();
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
messages.get(curcontentindex).style.display = "block";
}
$(function() {
messages = $('.dyncontent').find('div');
i = setInterval(rotatecontent, 1000);
$('#container li').hover(function() {
clearInterval(i);
}, function() {
i = setInterval(rotatecontent, 1000);
});
});
Just declare the variable interval outside of window.onload function to make it a global variable (so it can be accessed by other functions), i.e.
var interval=0;
window.onload=function(){
// other code goes here
interval=setInterval(rotatecontent, 1000); // use the variable here
}
or make overall changes as follows
<script type="text/javascript">
function rotatecontent(){
// Your function's code here
}
$(document).ready(function(){
var interval=setInterval(rotatecontent, 1000);
$('#container li img').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(rotatecontent, 1000);
});
});
</script>
Don't use window.onload when you're already using jQuery. Use
$(function() { } );
instead.
Related
I create some elements with local storage and it works fine but I want that items also should be cloned to a specific div tag.
here is my jsFidddle Code jsFiddle Demo
Now When I try to clone all element to <div class="all-items"></div> but it didn't work
here is my code below
$(function() {
$('.mix').click(function() {
$(this).toggleClass('selected')
window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('selected'));
});
$('.mix').each(function() {
var id = 'test' + this.dataset.id;
if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
$(this).addClass('selected');
}
});
$(document).ready(function() {
var e = $('.top-items');
for (var i = 0; i < 5; i++) {
e.clone().insertAfter(e);
}
});
and the HTML is here
<div class="top-items">
<div data-id="1" class="box p001 mix ">Div 1</div>
<div data-id="2" class="box p002 mix">Div 2</div>
<div data-id="3" class="box p002 mix">Div 2</div>
<div data-id="4" class="box p002 mix">Div 2</div>
<div data-id="5" class="box p002 mix">Div 2</div>
</div>
<div class="all-items"></div> //all elements should be clone here on click one by one
To achieve this i try on click function but it didn't give perfect solution so that i want when elements added they should be remove onclick from this <div class="all-items"></div> cloned tag.
any help or advice is highly appreciated.
You can do something like this
let topItemsHTML = $(".top-items").html()
$(".top-items").html(""); // clear top-items div
$(".all-items").html(topItemsHTML) // fill all-items with top-items
I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
<div id="replace" style="visibility:hidden;">Bla Bla Bla</div>
Here is what I've got so far:
$('#1').on({
mouseover: function(){
$('#2').replaceWith(jQuery('#replace'));
},
mouseleave: function(){
$('#2').replaceWith(jQuery('#2'));
},
click: function(){
$('#2').replaceWith(jQuery('#replace'));
$('#1').off('mouseleave mouseover');
}
});
Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?
jsBin demo
<div class="box">This is DIV #1 :) </div>
Add a class .box to all your 8 elements and do:
jQuery(function($){
var replaceText = $('#replace').text();
var memorizeText = '';
$('.box').on({
mouseenter: function(){
memorizeText = $(this).next('.box').text(); // memorize text
$(this).next('.box').text(replaceText);
},
mouseleave: function(){
$(this).next('.box').text( memorizeText ); // restore memorized text
},
click: function(){
$(this).next('.box').text( replaceText );
$(this).off('mouseleave mouseenter');
}
});
});
Like this?
<div class="page">
<div class="content">Bla bla bla</div>
</div>
<div class="page">
<div class="content">Some more text</div>
<div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
<div class="content">Hello there</div>
<div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
<div class="content">Test</div>
<div class="content-alt" style="display: none;">Hi!</div>
</div>
JS
$('.page').on({
mouseover: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').hide();
nextPage.children('.content-alt').show();
},
mouseleave: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').show();
nextPage.children('.content-alt').hide();
}
});
Original answer
If I understand your question correctly, you can try this:
HTML
<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>
<div id="hidden" style="display: none">This is some hidden text</div>
JS
$('#page1').on({
mouseover: function(){
$('#page2 .name').hide().after($('#replace'));
},
mouseleave: function(){
$('#hidden').hide();
$('#page2 .name').show();
},
click: function(){
$('#hidden').hide();
$('#page2 .name').show();
$('#1').off('mouseleave mouseover');
}
});
But I'm not really sure why you are trying to do this. Are you just trying to show and hide some text on mouse over?
Don't have a lot of data on what your HTML structure looks like, the purpose of this, etc. But the following is an example structure that would achieve what you're question refers to -- and it's a bit shorter as writing out a specific handling for every div when they all do the same thing makes it a bit unnecessarily long. Code is below, working example also in this jsfiddle
HTML
<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>
CSS
#replacementText {
visibility: hidden;
}
JQuery
$('.replace-me').mouseover(function() {
$(this).text($('#replacementText').text());
});
$('.replace-me').mouseout(function() {
$(this).text("DIV "+$(this).attr('id'));
});
I'm a bit of a jQuery newbie, so forgive me if this seems a bit simple! I am setting up a sliding header system, which works very much like an accordion menu, however the links to open and close the elements are in a different part of the HTML, so all the accordion tutorials I found didn't work.
I have got this so far: HTML:
<div class="drawer" id="drawer_about"></div>
<div class="drawer" id="drawer_contact"></div>
<div class="drawer" id="drawer_hire"></div>
<div class="drawer" id="drawer_social"></div>
...
<ul class="navigation">
<li><span>About Me</span></li>
<li><span>Get In Touch</span></li>
<li><span>Hire Me</span></li>
<li><span>Social Networks</span></li>
</ul>
And jQuery:
$(document).ready(function(){
$("#drawer_about").hide();
$("#drawer_contact").hide();
$("#drawer_hire").hide();
$("#drawer_social").hide();
lastBlock = ("#drawer_hire");
$('.show_hide_about').click(function(){
$("#drawer_about").slideToggle(700);
$(lastBlock).hide(700);
lastBlock = ("#drawer_about");
});
$('.show_hide_contact').click(function(){
$("#drawer_contact").slideToggle(700);
$(lastBlock).hide(700);
lastBlock = ("#drawer_contact");
});
$('.show_hide_hire').click(function(){
$("#drawer_hire").slideToggle(700);
$(lastBlock).hide(700);
lastBlock = ("#drawer_hire");
});
$('.show_hide_social').click(function(){
$("#drawer_social").slideToggle(700);
$(lastBlock).hide(700);
lastBlock = ("#drawer_social");
});
});
Am I going OTT here? is there a simpler way to do this?
The main problem I'm having is it all works, however if the ABOUT ME panel is open and the user clicks the HIRE ME link, I get a weird effect. What I'd want in this situation is for the ABOUT ME panel to fold up, then the HIRE ME panel to fold down.
Hope that makes sense, thanks folks,
Alex
I'd set up the links like this: asdf
Then you all you need is:
$('.show').click(function(ev) {
var $visibleDrawer = $('.drawer:visible').eq(0); // make sure to get only one (or 0) drawer
// set currentSection to the drawer's id or empty if no drawer was found
var currentSection = $visibleDrawer.length?$visibleDrawer.attr('id').replace('drawer_',''):'';
$('.drawer').slideUp(700);
$('a.show').removeClass('active'); // reset all link classes
(function(clickedSection, $link){ //<-- pass the active link to have access to it inside the closure
if(currentSection != clickedSection){
$link.addClass('active'); // set active class on clicked link
setTimeout(function() {
$('#drawer_'+clickedSection).slideDown(700);
}, ($visibleDrawer.length?700:0)); // set the timeout to 0 if no drawer visible
}
})($(this).data('section'),$(this)); //<--
ev.preventDefault();
});
using .animate() you can parse a callback function which will be executed at the end of the animation, or you can use .queue() to keep track of the point of execution against and element. Some pseudo code of the first way
$('#foo').animate(function() {
// do stuff with foo
}, duration, easing, function() {
$('#bar').animate(function() {
// do stuff with bar
})
});
Here is a link to how it works on jsFiddle (Note that you should choose framework to be jQuery)
I think this would work with you :
$(document).ready(
function(){
$('.header').click(function(){
//To hide all other contents
$('.content').slideUp('slow');
var num=$(this).attr('id').split('_')[1];
//And show this one ..
$('#content_'+num).slideDown('slow');
});
}
);
HTML should look like this :
<div class="header" id="title_111">Category 1</div>
<div class="content" id="content_111">
</div>
<div class="header" id="title_112">Category 2</div>
<div class="content" id="content_112">
</div>
<div class="header" id="title_113">Category 3</div>
<div class="content" id="content_113">
</div>
<div class="header" id="title_114">Category 4</div>
<div class="content" id="content_114">
</div>
<div class="header" id="title_115">Category 5</div>
<div class="content" id="content_115">
</div>
<div class="header" id="title_116">Category 6</div>
<div class="content" id="content_116">
</div>
All I want to do is to call this function while page is loading or after loading automaticly, I mean without hover or click or etc.
If I manage that I am going to put it in a for loop with a delay function in order to call bg1, bg2 bg3 and bg4 respectively
I have read so many questions all seem similar but somehow they don't work for me.
Could you please help me about it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function slide()
{
$('#accordion > li.bg1')(
function () {
var $this = $(this);
$this.stop().animate({'width':'350px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
}
),
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
});
</script>
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
more ?
</div>
</li>
<li class="bg2">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
more ?
</div>
</li>
<li class="bg3">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
more ?
</div>
</li>
<li class="bg4">
<div class="heading">Heading</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Heading</h2>
<p>Some descriptive text</p>
more ?
</div>
</li>
</ul>
</div>
First, try replacing the line $(function slide() with the usual wrapper $(document).ready(function() { and make sure that all your parentheses and braces are balanced correctly.
Second, your selector needs a method call, which you don't have. It's unclear what you want to happen -- do some of the HTML elements need to be hidden, then show up slowly? Or vice versa? Do you want it to toggle back and forth continuously? We can help you, but only if you're more specific about what problem you're trying to solve.
UPDATE
If you want to animate the list items in sequence, you need a few things. First, a setTimeout that calls your function from within itself after a delay. Second, use $('#accordion > li').eq(i) to pick out the ith list element, with i being incremented each time your function is called. And finally (and aesthetically), replace those fadeIn/fadeOuts with slideDown/slideUps so that the whole thing doesn't jerk and shift as it animates.
http://jsfiddle.net/mblase75/EJXRD/
function slide(i) {
var $this = $('#accordion > li').eq(i);
// $this.stop().animate({'width': '350px'}, 500); // not sure what this is meant to do
$('.heading', $this).stop(true, true).slideUp(500);
$('.bgDescription', $this).stop(true, true).slideDown(500);
$('.description', $this).stop(true, true).slideDown(500);
var $that = $this.siblings();
// $that.stop().animate({'width': '115px'}, 500);
$('.heading', $that).stop(true, true).slideDown(500);
$('.description', $that).stop(true, true).slideUp(500);
$('.bgDescription', $that).stop(true, true).slideUp(500);
var items = $('#accordion > li').length;
setTimeout(slide, 2000, (i+1) % items); // modulo
}
$(document).ready(function() { // start the loop at the top
slide(0);
});
$(function slide() is not valid syntax, you were probably looking for
$(function() {
as your first line
You can follow this order:
<html>
<head>
<script src="toLoadBefore.js"></script>
</head>
<body>
<div class="yourHTMLHere">
...
</div>
<script>
//the DOM is loaded you can start your JS code here
</script>
</body>
</html>
ok, So I have multiple divs(7) which I want to toggle for show hide. If one div is open rest should hide and when I open a new div the others should hide. I have been able to accomplish this with the below piece of jquery
function showDivs() {
$(".head").click(function() {
$(".Content").hide();
$(this).next().fadeIn("slow");
})
}
where .head is the header for each div and .Content is the class for divs. I have got it working perfectly, by calling showDivs() from .head() Now the question is that on the left hand side of my page, I have ul li set. I have 7 li items, that correspond to 7 divs. I mean on click of first li the corresponding div should open up and the others should hide, and on click of 2nd li the 2nd div should open up and the others hide.
Does anybody have an idea how to make these divs show hide on the action of li items on left. I know I have to pass parameters for showDivs(), but don't know how?
help is appreciated
I believe this is where .index() comes into play:
$(function() {
$('ul li').each(function() {
$(this).click(function(e) {
var i = $(this).index();
$('div').hide();
$('div:eq('+i+')').show();
});
});
});
That's a pretty basic markup but I'm sure you can work out how to get it working with your code. Hope I helped!
http://jsfiddle.net/Z3Hj7/
EDIT: After having seen your fiddle I think i worked out exactly what you want:
$(function() {
$('ul li').each(function() {
$(this).click(function(e){
e.preventDefault();
var i = $(this).index();
$('.content').hide();
$('.head:eq('+i+')').next().show();
});
});
});
Take a look at the fiddle: http://jsfiddle.net/DTcGD/25/
If I understand your HTML structure correctly, it looks about like this:
<!-- The list... -->
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
<div class="head">Header One</div>
<div class="Content">Content One</div>
<div class="head">Header Two</div>
<div class="Content">Content Two</div>
<div class="head">Header Three</div>
<div class="Content">Content Three</div>
<div class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
...only with seven items rather than four.
If so, this would do it (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#container div.head:eq(" + $(this).index() + ")"));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
There, I'm relating the list to the headers implicitly, by where they are in their container. So the first li relates to the first div with class="head", the second to the second, etc. I'm doing that by using index to know which li was clicked, and then looking up the related div.head using :eq.
Doing it structurally rather than with id values makes it much easier to maintain. Alternately, though, you could do it by giving each li a data-div attribute with the value of the id of the related div:
<ul>
<li data-div="h1">One</li>
<li data-div="h2">Two</li>
<li data-div="h3">Three</li>
<li data-div="h4">Four</li>
</ul>
<div id="container">
<div id="h1" class="head">Header One</div>
<div class="Content">Content One</div>
<div id="h2" class="head">Header Two</div>
<div class="Content">Content Two</div>
<div id="h3" class="head">Header Three</div>
<div class="Content">Content Three</div>
<div id="h4" class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
Then (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#" + $(this).attr("data-div")));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
data-* attributes are valid as of HTML5, but all browsers support them right now. (The data-* thing is an attempt to codify and reign in people's use of invalid attributes, by giving them a valid way to do it without conflicting with future additions to the spec.)
How about asigning an id to each list item and a corosponding id to each item container. So your list items get an id of "item01".."item07" and your content containers gets id of "item01c".."item07c". Then you can do somehing like this:
$("li").click(function() {
showDivs($(this).attr("id"));
})
function showDivs(callerId) {
$(".content").hide();
$(".content", "#" + callerId + "c").fadeIn();
}
Working example can be seen here: http://jsfiddle.net/ECbkd/5/1
If you want to use .index() as suggested by someone earlier, then I belive this would be the simplest approach (check it out here http://jsfiddle.net/ECbkd/7/):
$("li").click(function() {
$(".content").hide();
$('.item').eq($(this).index()).children('.content').fadeIn();
})
You could add this to be able to show content when clickin on header also:
$("h2", ".container").click(function() {
$(".content").hide();
$(this).parent().children('.content').fadeIn();
})
* EDIT START *
To let content toggle on click at header use this:
$("h2", ".container").click(function() {
$(".content").not($(this).parent().children('.content')).hide();
$(this).parent().children('.content').toggle();
})
Updated code here
http://jsfiddle.net/ECbkd/8/
* EDIT END *
This is based on html like this:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class='container'>
<div class='item'>
<h2>Header 1</h2>
<div class='content'>Content 1</div>
</div>
<div class='item'>
<h2>Header 2</h2>
<div class='content'>Content 2</div>
</div>
<div class='item'>
<h2>Header 3</h2>
<div class='content'>Content 3</div>
</div>
<div class='item'>
<h2>Header 4</h2>
<div class='content'>Content 4</div>
</div>
<div class='item'>
<h2>Header 5</h2>
<div class='content'>Content 5</div>
</div>
<div class='item'>
<h2>Header 6</h2>
<div class='content'>Content 6</div>
</div>
<div class='item'>
<h2>Header 7</h2>
<div class='content'>Content 7</div>
</div>
</div>
you can show and hide multiple divs by using this simple method
function w3_open() {
document.getElementById("id01").style.display =
"block"; document.getElementById("id02").style.display = "block"
}
make sure that you are using w3.css
<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display-
container">
<span onclick="document.getElementById('id02').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
If you give the li's and the corresponding divs the same class, then you can say something like
function showDivs() {
$("li").click(function() {
$(".Content").hide();
clickedID = $(this).attr("class");
$('div#'+clickedID).fadeIn("slow");
})
}