I have a simple fade transition that hides the current div, while un-hiding the div below it. However the transition doesn't look right as when the fade is happening it briefly shows all the div's. I'm new to using jQuery so could anyone show me how i could polish this up a bit to make it look better when the fade transition takes place?
p.s i know the jQuery could be coded better, but again I'm pretty new to jQuery so if anyone has a better way of coding this let me know.
Thanks.
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
jQuery:
$(document).ready(function(){
$("#buttonone").click(function(){
$("#home").fadeOut();
});
});
$(document).ready(function(){
$("#buttontwo").click(function(){
$("#portfolio").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#aboutfour").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#about").fadeOut();
});
});
$(function() {
$('#portfolio').addClass('hidden').hide();
$('#buttonone').click(function() {
if ($('#portfolio').hasClass('hidden')) {
$('#portfolio').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#about').addClass('hidden').hide();
$('#buttontwo').click(function() {
if ($('#about').hasClass('hidden')) {
$('#about').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#contact').addClass('hidden').hide();
$('#buttonthree').click(function() {
if ($('#contact').hasClass('hidden')) {
$('#contact').removeClass('hidden').fadeIn(1000);
}
});
});
How about you add each button class="button" attribute, and run the following jQuery:
$('.button').click(function() {
if($(this).hasClass("hidden"))
{
//if already hidden, do you want to display it back?
$(this).removeClass("hidden");
}
else{
$(this).parent().parent().next().fadeIn(1000);
$(this).addClass("hidden");
$(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay?
}
}
});
So, when a button is clicked the div containing that button will be hidden, and the next div will be showed, is that right? Then, at the beginning, only the first one will be displayed? I am not clear about the functionality.
UPDATE
I got it working finally. There you go: https://jsfiddle.net/ev64mqsp/
note that I included one extra div for Home div to make all main content divs have the same structure.
$('.button').click(function() {
if($(this).next().hasClass("hidenext"))
{
$(this).parent().parent().fadeOut(1000)
$(this).parent().parent().next().removeClass("hidenext");
}
else{
$(this).parent().parent().fadeOut(1000);
$(this).parent().parent().next().addClass("hidenext");
}
});
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<div>
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button class="button" id="buttonone" type="button">Click Me!</button>
</div>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button class="button" id="buttontwo" type="button">Click Me!
</button>
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button class="button" id="buttonthree" type="button">Click Me!</button>
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button class="button" id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
Class hidden (supposed to have display:none) should be added when fadeOut() finish for a good animation. If you want to mantain div position you may use visibility:hidden removing display:none given by fadeOut()
$(document).ready(function(){
$("body > div").not("#home").addClass("hidden");
$("button[type=button]").click(function(){
if ($(this).parent().attr('id') == 'home') {
$(this).parent().fadeOut(1000,function(){
$(this).addClass('hidden');
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
});
} else {
$(this).parent().parent().fadeOut(1000,function(){
$(this).addClass('hidden');
if ($(this).next().hasClass('panel')) {
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
}
});
}
});
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
Related
As a js noob, I'm fighting a struggle width the load of content in a slider. I have 4 buttons. When clicking a button, I want a slider to open and content to fade in. When I click another button, I want the slider to stay open but content needs to fade out and new content to fade in.
I have this:
HTML
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button href="#" id="expand" class="show-hide">TOGGLE</button>
</div><!--
--><div class="pan-item tr">
<button></button>
</div><!--
--><div class="pan-item bl">
<button></button>
</div><!--
--><div class="pan-item br">
<button></button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a href="#" id="close" class="close">
<i class="icon-cancel"></i></a>
</div>
<h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
</div>
</div>
JS
$(document).ready(function(){
$("#expand").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
$("#close").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
});
That gives me this result, opening and clossing
How can I add the functions I wish as written on top? De content I load in the panel are .php files. file1.php, file2.php, ...
After our collaboration on Github I post here what we did so far
https://github.com/neodev2/ajax-slide-panel
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
$(document).ready(function(){
var ajaxUrls = [
'snip1.html',
'snip2.html',
'snip3.html',
'snip4.html'
];
var ajaxFiles = [];
for(var i=0; i<ajaxUrls.length; i++){
$.ajax({
method: 'GET',
url: ajaxUrls[i],
success: function(data){
//console.log(data);
ajaxFiles.push(data);
}
});
}
$('.pan-item > button').on('click', function(){
if($('.panel.left').hasClass('open')){
//alert('already open');
}else{
$('.panel.left').addClass('open');
$('.standorte-wrapper').addClass('expand');
}
$('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
});
$('#close').on('click', function(){
$('.panel.left').removeClass('open');
$('.standorte-wrapper').removeClass('expand');
});
});
</script>
<title></title>
</head>
<body>
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button data-ajaxfile="0">X</button>
</div>
<div class="pan-item tr">
<button data-ajaxfile="1">X</button>
</div>
<div class="pan-item bl">
<button data-ajaxfile="2">X</button>
</div>
<div class="pan-item br">
<button data-ajaxfile="3">X</button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
</div>
<div>
<h2>Everything you need to know</h2>
<div id="php-content"></div>
</div>
</div><span class="clear"></span>
</div>
</body>
</html>
When I'm trying to add dynamically a div after click on a "reply" class, it is just repeat for my first div.
I want to add that div after each div but it is just works for the first one.
Here is my code:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
$(".repetable").hide();
$(".repetable").slideDown("slow")
$("#nazar").slideUp("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
If I understand correctly the problem, after .reply click the both of the .repetable did the slidedown() animation.
So, you just need to do this only on the .repetable that come after the comment. So, you need to use the parents() function,
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
like this:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
// $(".repetable").hide(); - You don't need it
// You want to do this only for the next div after the sepecific comment
$(this).parents('.comment1').next().slideDown("slow");
//$(".repetable").slideDown("slow")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
The problem here is that you select by the same class. All your "repetable" divs will be affected by your
$(".repetable").hide();
$(".repetable").slideDown("slow")
To solve this, you can make the HTML to look more like this. Note the replay input is inside the comment where it actually belongs. (or you can use a different parent to group the comment div with the comment replay input)
<div class="main">
<!--div 1-->
<div class="comment">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 1-->
<!--div 2-->
<div class="comment">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 2-->
</div>
After that, you can use a js event handler like this, to dynamically select the replay input related to the replay button that the user just clicked:
$(".repetable").hide();
$(".reply").bind("click", function(e) {
var target = $(e.target);
var targetRepeatable = target.parents('.comment').find('.repetable');
targetRepeatable.hide();
targetRepeatable.slideDown("slow")
$("#nazar").slideUp("slow");
});
You can see it in action here: https://jsfiddle.net/hm1zxy5b/
Thanks
Hello How can Possible to
Work with show or hide multiple div
The fastest way possible
Why do I need to number each div
like this :
open,close,show_text
open2,close2,show_text2
I wish that it will be repeated for each div 10 times
$(document).ready(function(){
$(".open").click(function(){
$(".show_text").show('blind');
$(".open").hide();
$(".close").show();
});
$(".close").click(function(){
$(".open").show();
$(".show_text").hide('blind');
$(".close").hide();
});
});
$(document).ready(function(){
$(".open2").click(function(){
$(".show_text2").show('blind');
$(".open2").hide();
$(".close2").show();
});
$(".close2").click(function(){
$(".open2").show();
$(".show_text2").hide('blind');
$(".close2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->
<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->
Wrap you content in a container div, then you can use
.closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
.find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
HTML
<div class="container">
<div class="open" style="cursor:pointer">Open 1
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div>
</div>
Code
$(".open").click(function() {
//Traverse up to container div
var container = $(this).closest('.container');
//Use .find() to find child
});
Here is an example:
$(document).ready(function() {
$(".open").click(function() {
var continer = $(this).closest('.container');
continer.find(".show_text").show('blind');
continer.find(".open").hide();
continer.find(".close").show();
});
$(".close").click(function() {
var continer = $(this).closest('.container');
continer.find(".open").show();
continer.find(".show_text").hide('blind');
continer.find(".close").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="open" style="cursor:pointer">Open 1
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div>
</div>
<!-- show_text -->
<div class="container">
<div class="open" style="cursor:pointer">Open 2
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 2
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 2
</div>
</div>
<!-- show_text -->
$(document).ready(function(){
$("div[class^=open]").click(function(){
$("div[class^=show_text]").show('blind');
$("div[class^=open]").hide();
$("div[class^=close]").show();
});
$("div[class^=close]").click(function(){
$("div[class^=open]").show();
$("div[class^=show_text]").hide('blind');
$("div[class^=close]").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->
<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->
Based on the details you have provided, if you haven't figured this out yet, I think that the most efficient way to accomplish this task is by using a loop (of some sort). In my mind this would make the most sense if your goal is speed. That being said, I think that attempting to do this with jQuery's show() & hide() will only hold you back.
If you want to "number" each element, and display them at different times, depending on certain circumstances, think JSON; JavaScript's older and more attractive brother. I'm happy to assist you further if need be, else, cheers.
I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.
Whats happening right now is either all are showing or none are showing.
I am a newbie (using Jquery) Any help most appreciated.
The HTML
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
Thanks!
You can try this, Based on my understanding.
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
$(this).closest('.myContent').hide();
});
DEMO
If I understand right here is what you are looking for :)
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
$(this).closest('.myContent').hide();
});
I added a popup to a div-container. Opening the popup doesn't work.
This is my container-structure:
<div data-role="page" id="mainPage">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
<a class="select-Button">
...
</a>
</div>
<ul data-role="list-view"></ul>
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
I'd like to open the popup by javascript:
...clone the template and add clones to the list-view before.
$('#mainPage').find('.select-Button').on('click', function(){
$('#myPopup').popup("open");
});
But it's not working
This works:
Java-Script:
var $popUp = $('#myPopup').popup({
dismissible: false,
theme: "c",
overlyaTheme: "d",
transition: "pop"
});
$popUp.popup('open').trigger("create");
HTML:
<div id="myPopup"> <!-- removed data-role="popup" here-->
<p>My Popup</p>
</div>
page div should be direct parent of popup div. If you place it inside any other div, it won't open, or malfunction.
<div data-role="page">
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
<div id="myContent">
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
</div>
To open it using HTML
Popup
To open programatically
$("#popupID").popup("open");
You need to delegate click event to dynamically added elements.
$(document).on("click", ".select-button", function () {
$('#myPopup').popup("open");
});
Demo
Try this out:- http://jsfiddle.net/adiioo7/rF873/
JS:-
$('#myPopup').popup();
$('#myPopup').popup("open");
HTML:-
<div data-role="page">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
<div dara-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
Issue with your approach is that you cannot call methods on popup prior to initialization.