I made a very simple expand boxes. the Structure is like below
<div class="container">
<div class="item"> </div>
<div class="outside"> </div> <!-- append '.item''s children to '.outside' -->
<div class="item"> </div>
<div class="item"> </div>
</div>
I'd like to achieve is that, if a box is opened, contents can be viewed immediately when you click another box. ( Do not need to slideUp and slideDown again)
The problem I am having is that, If you click the first box box 1, you can see the slider correctly, then you click box 2, the contents can be showed properly as well, and then you click back to box 1, contents won't show. I understand append all .inside children to '.outside' contents can be view only once as append moves elements to .outside, if I use clone(), I can view the contents but will lose a working slider.
so my question is do I need to append .inside children to '.outside' first then move everything back to where is was? if someone could help please? Thanks!
Online Sample http://jsfiddle.net/ny4sx/
Here is my html
<div class="container">
<div class="item">1
<div class="inside">
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4" />
</li>
</ul>
</div>
</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
jQuery
var $outside = $('<div class="outside"></div>');
var $closebutton = $('<div class="close">x</div>');
$outside.append($closebutton);
$('.item').click(function (event) {
event.preventDefault();
var $this = $(this);
$this.toggleClass('active');
if ($this.hasClass('active')) {
$('.active').removeClass('active');
$this.addClass("active");
}
if $this.next().hasClass('outside')) {
console.log('yes');
} else {
console.log('no');
$outside.insertAfter(this).css({
'height': 300
}).slideDown();
}
$('.close').click(function () {
$('.outside').remove();
$('.active').removeClass('active');
});
});
//Slider FROM Here
// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function () {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
},
$transition_time + $time_between_slides);
could you consider something like this or is it too different from what you expect.
HTML:
<div class="container">
<div class="item" data-content="1">1</div>
<div class="item" data-content="2">2</div>
<div class="item" data-content="3">3</div>
<div class="outside">
<div class="close">x</div>
<div class='content content1'>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3" />
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4" />
</li>
</ul>
</div>
<div class='content content2'>
<h1>this is item 2</h1>
</div>
<div class='content content3'>
<h1>this is item 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aliquam, dolorum ipsa perferendis iure quibusdam consequuntur nulla reiciendis velit aut modi reprehenderit. Sit, mollitia, natus odio repellat neque error voluptatem.</p>
</div>
</div>
</div>
JS:
$('.item').click(function(event) {
var $this = $(this);
var contentNumber = $this.data("content");
$('.active').removeClass('active');
$this.addClass("active");
$('.content').hide();
$('.content'+contentNumber).show();
$('.outside').slideDown();
});
$('.close').click(function(){
$('.outside').slideUp();
$('.active').removeClass('active');
});
FIDDLE
I played with it a little here:
http://jsfiddle.net/ny4sx/37/
A summary of my edits:
var savedContent = $('.outside .content').children();
var target = $('.outside').prev().children().first();
console.dir(target);
$('.outside .content').remove();
target.append(savedContent);
Not the cleanest (I was doing a lot of trial and error), but I figured out what the issue was. You were deleting the contents before you saved a reference to it, there fore it was not persisting. I would definitely do it the way that MamaWalkter proposed, though.
Related
I have created an advent calander, the link is:- http://www.project-progress.co.uk/westcoast/advent/
However I have the problem that clicking close when the popup is open, you then cannot reopen this popup.
This is my HTML:-
<ul>
<div class="left-title">
<img src="/westcoast/advent/wp-content/uploads/images/quizmass.jpg" width="280px" />
<p class="sh">Lorem ipsum dolor sit amet, ut cum omnis accumsan eleifend. Ei animal splendide eum, vis liber ocurreret forensibus.<br><br>
Lorem ipsum dolor sit amet, ut cum omnis accumsan eleifend. Ei animal splendide eum, vis liber ocurreret forensibus.
</p>
</div>
<li>
<div class="door">
<img src="/westcoast/advent/wp-content/uploads/images/days/1.png" />
<span>1</span>
</div>
<div class="door-popup">
<div class="half-l">
<img src="/westcoast/advent/wp-content/uploads/images/days/popup/1a.png"/>
</div>
<div class="half-r">
<div class="cross">
<img src="/westcoast/advent/wp-content/uploads/images/cross.png" />
</div>
<div class="pad">
detail </div>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="door">
<img src="/westcoast/advent/wp-content/uploads/images/days/2.png" />
<span>2</span>
</div>
<div class="door-popup">
<div class="half-l">
<img src="/westcoast/advent/wp-content/uploads/images/days/popup/2a.png"/>
</div>
<div class="half-r">
<div class="cross">
<img src="/westcoast/advent/wp-content/uploads/images/cross.png" />
</div>
<div class="pad">
detail </div>
</div>
<div class="clear"></div>
</div>
</li>
And my JQuery is:-
$(document).ready(function () {
var message = "";
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var scrolled = false;
var timeDelay = 200;
// function to reveal message
var cardReveal = function () {
$("#message").text(message).show();
}
day=1; //Comment me out
// Only work in December
if (month === 11) {
// Loop through each calendar window
$(".container ul li").each(function (index) {
var adventwindow = index + 1;
var item = $(this);
// Add words so far to message variable
if (adventwindow <= day) {
var word = words[index];
$(this).append('<div class="revealed">' + word + '</div>');
message = message + " " + word;
}
// On clicking a window, toggle it open/closed and
// handle other things such as removing jiggle and 25th
$(".container ul li").on("click", function () {
if (adventwindow <= day) {
$(this).children().find(".door").addClass("openlive");
$(this).children(".door-popup").fadeIn();
$(".overlay").fadeIn();
$(".door-popup").appendTo('body');
$(this).find('.openlive img, .openlive span').fadeOut();
setTimeout(function(){
$('.revealed').fadeIn();
}, 300);
event.stopPropagation();
}
//else {
//alert("Please check back on the correct day, to see more prizes")
//}
$(this).removeClass("jiggle");
});
});
$( ".cross" ).click(function() {
if($(this).parent().parent().css("display") == "block"){
$(this).parent().parent().hide();
$('.overlay').hide();
event.stopPropagation();
}
else{
}
});
}
});
Does anyone have any ideas? It seems as though I need to kind of reset the function one the cross has been clicked.
Thank you all.
Scott
How would I go about hiding and showing multiple divs using JavaScript? I don't want to use JQuery. I can make it work for hiding and showing one div but not multiple divs. The problem originates because I'm using PHP to display multiple records. These records are included in divs which have the same ID.
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
.edit-slider {
display: none;
}
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
HTML;
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
JavaScript;
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
I have also set in the CSS to hide the "edit-slider" div on page load.
.edit-slider {
display: none;
}
The HTML is echoed out in a loop for every record in the database. Information is also added in replace of the placeholder text.
How should I best go about making it so that if a div if clicked it is hidden and the corresponding div is shown in it's place?
I was thinking about doing something about individually giving the divs separate ID's in PHP and than passing those ID's to JavaScript and creating some sort of a loop? My knowledge of JavaScript isn't massive so I don't really know how easy or difficult this method would be. Or is there a much easier method?
This is my first stack overflow post,so sorry if I'm doing anything wrong or missed something.
If you use classes instead of IDs you can use document.QuerySelectorAll() to get all the divs with that class and then show or hide as necessary.
Something like below would hide all divs with an edit-slider class and reveal (assuming they were already hidden) all divs with a history-slider class.
(function() {
var editSliders = document.querySelectorAll('div.edit-slider');
for(var i=0;i<editSliders.length;i++){
editSliders[i].style.display = 'none';
}
var historySliders = document.querySelectorAll('div.history-slider');
for(var i=0;i<historySliders.length;i++){
historySliders[i].style.display = 'block';
}
})();
First, consider using class instead of id to set multiple elements with the same attribute and value. Then, use the following script:
<script type="text/javascript">
document.querySelectorAll('div.history-slider').forEach(item => {
item.addEventListener("click", myFunction);
});
function myFunction() {
this.hide;
}
</script>
I have a FAQ accordion.
Each question has a class name of q with id of q1 or q2 or q3.
Each answer has a class name of a.
When the url has a anchor tag /faq#q2, I want the q2 to be triggered. I have the below code but its the not working.
I think the line that caused it not working is: if (hash) $(.q[id$="+hash+"]).trigger('click'); but i can't figure out whats wrong.
$(document).ready(function($) {
$(".a").hide().first().show();
$(".q:first").addClass("active");
$('#accordion').find('.q').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
//Find anchor hash and open
var hash = $.trim( window.location.hash );
if (hash) $(.q[id$="+hash+"]).trigger('click');
});
});
.q {cursor: pointer;}
.a {display: none;}
.q.active + .accordion-content {
display: block;
}
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
First of all - you've lost single or double quotes with your jQuery selector. And if I understand correctly - you want something like this?
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
Update (http://jsfiddle.net/6hzby0aa/):
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
// Get hash from query string. You can put there "#q1", "#q2" or something else for test
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
// Show requested panel
requestedPanel.next(".a").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
This is my final Code. Thanks to #Andrew Orlov
<script type="text/javascript">
$(document).ready(function($) {
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
$(".q:first").addClass("active");
// Get hash from query string
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
$('.q').removeClass("active"); // remove active
// Show requested panel
requestedPanel.next(".a").show();
requestedPanel.addClass("active"); //add active
}
};
$('body').find('.q').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('600');
$('.q').removeClass("active"); // remove active
$(this).addClass("active"); // add active
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
});
});
</script>
I want the div with the class features_3_content_center to display the FH_MainMenu.png image when a user mouses over the div with id FH_Blurb, or display the HDS_MainMenu.png image when a user mouses over the div with id HDS_Blurb.
I've attempted this below by having both images on top of each other in features_3_content_center and having it display the image based on its id. This doesn't seem to work, it just displays the first image (HDS_MainMenu.png) and doesn't change on mouseover. What am I doing wrong?
PicChanger: function() {
$('#FH_Blurb').mouseover(function() {
$('.features_3_content_center').getElementById('#features3_FH_image');
});
$('#HDS_Blurb').mouseover(function() {
$('.features_3_content_center').getElementById('#features3_HDS_image');
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_left">
<div class="feature" id="FH_Blurb">
<h4>Fizz+Hummer</h4>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
</p>
</div>
</div>
<div class="col-sm-4 col-md-4 ol-lg-4">
<div class="features_3_content_center">
<img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img">
<img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
</div>
</div>
<div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_right">
<div class="feature" id="HDS_Blurb">
<div>
<h4 class="we_make_games_HDS_text">Human Delivery Service</h4>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
</p>
</div>
</div>
</div>
</div>
JSFiddle: http://jsfiddle.net/2hL71dsr/
Kind of like this:
$('#features3_FH_image, #features3_HDS_image').hide();
$('#FH_Blurb').hover(function() {
$('#features3_FH_image').toggle();
});
$('#HDS_Blurb').hover(function() {
$('#features3_HDS_image').toggle();
});
See it in action in this demo
You aren't actually doing anything to the images. Here is a simple, straight-forward method of showing the images on mouseover, then hiding them again on mouseout.
var imgContainer = $('.features_3_content_center');
var FH_image = imgContainer.find('#features3_FH_image').hide();
var HDS_image = imgContainer.find('#features3_HDS_image').hide();
$('#FH_Blurb').on('mouseover', function() {
FH_image.show();
});
$('#FH_Blurb').on('mouseout', function() {
FH_image.hide();
});
$('#HDS_Blurb').on('mouseover', function() {
HDS_image.show();
});
$('#HDS_Blurb').on('mouseout', function() {
HDS_image.hide();
});
Ok I have to two images on a page that I want to cross fade between on mouse over and on mouse out i want it to reverse so the image looks as if it reverting back to its original state.
Right now I it have working by fading out the first image then fading the replacement back in as below how do I make this cross fade as above?
$("#img-swap1 img").mouseover(function() {
$("#img-swap1 img").fadeOut(350, function() {
$(this).attr("src", "images/dentalwise-hover.jpg","images/dentalwise.jpg");
$(this).fadeIn(350);
});
}).mouseout(function(){
$("#img-swap1 img").fadeOut(350, function() {
$(this).attr("src", "images/dentalwise.jpg","images/dentalwise.jpg");
$(this).fadeIn(350);
});
});
the html:
<div id="main-content">
<div class="featured">
<div class="featured-heading">
<h3>Recent Works</h3>
<p class="sub-heading">Check out my latest work</p>
</div>
<p class="featured-para">
Elementum sed pid nunc, placerat quis parturient,
sit nascetur? Mid placerat vel, cum scelerisque diam.
placerat quis parturient dolorElementum sed pid
placerat quis parturient.
</p>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap1" class="img-swap" href="#">
<img src="images/dentalwise.jpg" width="191" height="129" />
</a>
</div>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap2" class="img-swap" href="#">
<img class="img-swap" src="images/wyevallay.jpg" width="191" height="129" />
</a>
</div>
</div>
<div id="latest-w" class="pleft">
<div class="latest-img">
<a id="img-swap3" class="img-swap" href="#">
<img src="images/easycms.jpg" width="191" height="129" />
</a>
</div>
</div>
</div>
Well you should have two separate images. Place one behind the other. Then you can fade the one on top out and it will have the effect of "cross-fading". If you're only changing the src of the image, there is no way to have it cross-fade.
If your images all follow the same pattern, i.e. name.jpg -> name-hover.jpg, you can automate the whole process:
$(function() {
// Create your hover images:
$('.img-swap img').each(function() {
// Construct your hover img src:
var src = $(this).attr('src').replace(/\.jpg/, '-hover.jpg');
// Clone the img, give it the new src,
// place the clone after the original,
// and position it underneath
var offset = -$(this).outerWidth();
$(this).clone()
.attr('src', src)
.css({position: 'relative', left: offset+'px', zIndex: -1})
.insertAfter($(this));
});
// Create mouseover to "cross-fade":
$('.img-swap').on('mouseover', 'img', function() {
// Keep it barely visible, so it doesn't re-flow the DOM
$(this).stop().fadeTo(350, .01);
}).on('mouseleave', 'img', function() {
$(this).stop().fadeTo(350, 1);
});
});
Here is a jFiddle example: http://jsfiddle.net/jtbowden/xqUQ6/3/