jquery toggle between divs and subsequently hide active div - javascript

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});

Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.

Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});

Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.

Related

Refresh a div without a full page been refreshed?

Is it possible to refresh a div on a click of a button and not auto refresh?
Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
<!--END BEER-->
</div><!--end box-->
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).fadeIn(5);
});
</script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: \u0E3F' + total);
};
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
</body>
If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.
For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:
$("#button-id").click(function() {
$("#div-id").load("content.html");
});
It's as simple as that!
Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event
(function($, window){
var nodes = $('[reload]'); // all <div reload=""/> elems
var serializer = new XMLSerializer(); // serializer
nodes.each(function(){ // iterate over all elems
var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
$(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
$(this).click(function(){ // event
$(this).html($(this).attr('cache')); // restore content of div
});
});
// demoPurpose: modify div, add attribute(style), change text
$('#style').click(function(){
$(nodes[0]).children().first().css('color', randomColor());
$(nodes[0]).children().last().css('color', randomColor());
$(nodes[1]).children().first().css('color', randomColor());
$(nodes[1]).children().last().css('color', randomColor());
$(nodes[1]).children().last().text(Date.now());
});
// demoPurpose: simple random colorizer
function randomColor(){
var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
return colors[Math.floor(Math.random() * colors.length)];
}
})(jQuery, window);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div reload="">
<h1>h1</h1>
<p>p</p>
</div>
<hr />
<div reload="">
<h1>another h1</h1>
<p>with dummy p</p>
</div>
<hr />
<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>
Although it might seem quite heavy, this should help you to understand the idea behind

Scrolling the height of several divs by several buttons

I have a page with the following structure:
<div id="about" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="films" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="projects" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
I would like that when clicking on the image, you will be scrolled to the end of the <div> where the <img>is located.
I have stated with this code but it works only for the first image.
function go_to(){
$("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}
$(document).ready(function(){
var go_to_div = $('.button img');
$(go_to_div).click(function(event) {
go_to()
});
});
If necessary, I can change the HTML structure. Thank you!!
Because for scrollTop property, you need to give a value to go there. Your $('.section').height() code allways gives the same value so it kinda stuck. Try this instead
function go_to(section){
var pos = section.position();
$("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}
$(document).ready(function(){
$('.button img').click(function(event) {
go_to($(this).closest(".section"));
});
});
FIDDLE

refresh the whole page and load a div on clicking a link

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
$(window).load(function () {
var divs = $( #add_new, #details");
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});
});
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details">
<p>detailssss</p>
</div>
<script>
$(function () {
$("#addsettings").click(function () {
$.ajax({
url: "manage.php",
success: function (html) { // this happens after we get results
$(".result").empty();
$(".result").show();
$(".result").append(html);
}
});
});
});
</script>
manage.php
<div id="div1">
pppppp
lll
kkk
</div>
<div id='div2'>
tttttt
gg
mm
</div>
<script>
$("#add_new").hide();
</script>
I need the page to get refreshed and then show the particular div tag. Now it is showing the div without page reload. For example, if i click the button inside add_new, it will take me to another page via ajax. In that another page, i have many divs (div1, div2) shown and I hide the add_new div here. Then if I click the 'details' link, and then go back to add_new again, it is still showing that divs which are in ajax page (div1, div2) not `add_new.
Please help me. I need the add_new div here.
Thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
var divs = $('#add_new,#details');
$("li a").click(function () {
divs.css('display','none');
$("#" + $(this).attr("class")).css('display','block');
});
});
</script>
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new" style="display: none">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details" style="display: none">
<p>detailssss</p>
</div>

Making a text disappears when another text appears with jquery

$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});

jQuery how to make slideToggle applies one each item

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.
Could someone please help ? Thanks
Online Sample
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
jQuery
$('.invisible').hide();
$('.warp').addClass('bg');
$(".warp").click(function () {
$(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$('.warp').removeClass('bg');
}else{
$('span.click').css('visibility', 'visible');
$('.warp').addClass('bg');
}
});
$('span.click').css('visibility', 'hidden');
});
How can I make this toggle fadein fadeout applies on each itemsblock?
when I click anyone, it applies all of them.
This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").
See the updated FIDDLE.
Updated your jQuery code:
$(".warp").click(function () {
var $warp = $(this);
$warp.next(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$warp.removeClass('bg');
}else{
$warp.find('span.click').css('visibility', 'visible');
$warp.addClass('bg');
}
});
$warp.find('span.click').css('visibility', 'hidden');
});
HERE: jsfiddle
jquery:
$('.invisible').hide();
$(".warp").click(function () {
$(this).next('div').slideToggle("slow", function () {
$(this).prev('div').toggleClass('bg');
$(this).prev('div').find('.click').slideToggle("fast", function () {});
});
});

Categories