SlideUp/Slidedown - Button is child of closing div and doesn'trigger parent - javascript

I have a little slideup, slidedown system. width some fading in it. Everything works fine, except from the slide up function. That does not seem to change the display back to none.
Here is a Fiddle:
Slide Up/Down Fiddle
HTML
<div class="standorte-m-wrapper">
<div class="panel-m up">
<div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="0">ZU-1
<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="1">ZU-2<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="2">BS<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="3">LU<i class="icon-down-open-2 iset"></i></button>
</div>
</div>
</div>
<div id="open" class="panel-m down">
<div class="close-button">
<i class="icon-cancel"></i>
</div>
<div id="content">
<div id="php-content-m"></div>
</div>
</div>
JS
$('.adres-wrap-m > button').on('click', function() {
if ($('.panel-m.up').hasClass('open')) {
//alert('already open');
} else {
$('.panel-m.up').addClass('open');
$('.standorte-m-wrapper').addClass('expand');
$('.panel-m.down').slideDown(1000);
}
$('#php-content-m').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
setTimeout(function (){
$('.panel-m.down div').fadeIn(400);
}, 500);
});
$('#close-m').on('click', function() {
$('.panel-m.down div').fadeOut(400);
setTimeout(function (){
$('.panel-m.up').removeClass('open');
$('.standorte-m-wrapper').removeClass('expand');
$('#close-m').parent().css("display", "block");
$('.pannel-m.down').slideUp(1000);
}, 500);
});
});

Looks like you have a typo in $('#close-m').on('click', function()
Change $('.pannel-m.down').slideUp(1000); to $('.panel-m.down').slideUp(1000);
Worked for me

Related

Add automatic refresh to a div with JS

The div works perfectly, but adding a new value to it results in NaN. But when updating the page, the div shows the updated value.
Would there be any way to add an automatic refresh to this div?
$(function () {
$(".but").on("click",function(e) {
e.preventDefault();
$(".content").hide();
$("#"+this.id+"div").show();
});
});
.content { display:none };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="but" type="button" id="Id">Load</button>
<div id="Iddiv" class="content">
<h2>content div</h2>
</div>
$(function () {
$(".but").on("click",function(e) {
if ($("h2")[0].innerHTML=='content div'){
$("h2")[0].innerHTML="";
}else {
$("h2")[0].innerHTML='content div';
}
});
});
.content { display:block };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="but" type="button" id="Id">Load</button>
<div id="Iddiv" class="content">
<h2></h2>
</div>
Given that hadent supplied where the new data comes from. Here are 2 examples.
Example one:
<button class="btn1" type="button" id="Id" data-newtxt="Example Text">Load</button>
<div id="section1">
<h2>content div</h2>
<span class="new-data"></span>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.btn1').click(function() {
$('.section1 .new-data').text( $(this).data('newtxt') );
})
});
</script>
Example two:
<button class="btn2" type="button" id="Id" data-newtxt="Example Text">Load</button>
<div class="hidden-div">Some example content</div>
<div id="section2">
<h2>content div</h2>
<span class="new-data"></span>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.btn2').click(function() {
$('.section2 .new-data').text( $('.hidden-div').text() );
})
});
</script>

how to change bootstrap carousel arrow class

I have this bootstrap carousel with arrows at the top right corner. I have set data-wrap="false" so that it stops when it reaches the end of the Carousel. Also, the left arrow becomes active when the first carousel starts.
Here's what I want to do: I want the class class-fade to change to class-active when the slide becomes active. And then change to class-fade when it becomes non-active again.
I hope this makes sense.
JSFIDDLE: https://jsfiddle.net/6kjnmbcb/
HTML:
<div class="container">
<p>When the carousel comes to an end, change the class <strong>"class-active"</strong> to <strong>"class-fade"</strong>.
<span class="pull-right">
<a class="" href="#CaseCarousel" data-slide="prev"><i class="class-fade"> << </i></a>
<a class="" href="#CaseCarousel" data-slide="next"><i class="class-active"> >> </i></a>
</span>
</p>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="CaseCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.class-fade {
color: grey;
}
.class-active {
color: red;
}
You need to use slide.bs.carousel event described in bootstrap
$('#CaseCarousel').on('slide.bs.carousel', function (e) {
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[0].className = 'controls class-active';
}
if (e.direction === 'right') {
controls[1].className = 'controls class-active'
}
var inner = document.querySelector('.carousel-inner');
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'controls class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'controls class-fade'
}
})
There is a full solution
https://jsfiddle.net/oeraa2kL/2/
You can handle the slide.bs.carousel event :
Take a look at this fiddle : https://jsfiddle.net/BaobabCoder/7756yuzb/1/
$(document).on('slide.bs.carousel', '.carousel', function(e) {
var slidesLength = $(this).find('.item').length;
var slideFrom = $(this).find('.active').index();
var slideTo = $(e.relatedTarget).index();
if(slideFrom === 0 || slideTo === 0) {
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-fade');
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-active');
}
else if(slideFrom === slidesLength || slideTo === slidesLength) {
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-fade')
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-active');
}
});

Why is my jquery toggle class is not working on single click

I am using a jquery function for toggle effect for an icon so when I click on that icon the div will move to left and hide.. so only the icon will show on the page and when I click on that icon again the div will appear sliding from left I am able to achieve the function but the following function
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x"></i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for any replies in advance.
Just found out that you did not add the class active while pageload but yet displaying the div.
Change the below line
<div class="demo_changer" style="padding-top:13px">
as
<div class="demo_changer active" style="padding-top:13px">
While loading, your webpage shows the div but does not have the class active in the div tag
and while clicking for the first time, as per your script, it finds out that there is no active class in the tag and then adds the class active and your div is already visible... I hope you understood..
The issue may be that, the margin in <div class="row"> is overlapping the icon div, it might be a reason why clicking on that area does not trigger "click" event -- See image below
Try Adding css style as mentioned in image below -
You need to use position: absolute; or position: relative; for the .demo_changer class so that you can animate its position.
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
.demo_changer {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x">icon</i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
You need too extra styles for animation block .
.demo_changer {
position:relative
}
Here is working example.
https://jsbin.com/xikamitole/1/edit?html,css,js,output
Hope this helps.
Try This:
$(document).on('click', '.demo-icon', function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});

Moving DIV disable button 0px left-margin

I have a little problem. Im trying to create my own slider using jQuery and some css/javascript.
I got my slider to work moving a Div 660px to the left and right by clicking a button.
But, I would like to have the right button disabled when the left margin is 0. And I would like the whole div to rewind back to 0px after some clicks.
Is this possible?
Here is my code:
<script language="javascript">
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
}
</script>
<div class="container">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide">
<?php get_template_part('loop-reviews');?>
</div>
</div>
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
The code im using is from this page: Page
Well, with the code from Rayn i got the button to hide, but now it won't show when left-margin is 1px or something. So I'm trying this now: (doesn't work btw)
Im trying this now: (doesn't work btw)`function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
} else (slidemarginleft == '1px') {
$('.contr-right').show();
}
}`
Also I'm seeing that the margin-left isn't set in the style sheet but in the
<div style="margin-left:0px">content</div>
You can do an if statement after each click to check if the element has 0px
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
}
}
Use this
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
if($('.xman').css("marginLeft")=='0px'){
$('.contr-left').attr('disabled',true);
}
}
Disable Button when margin-left: 0px
You can use jquery's .prop() method to disable a button if a condition is met. Here is an example (in pseudo code):
function disableButton() {
$(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
disableButton()
}
}
checkMargin()
Rewind to 0px after some clicks
Here, I'd just set a count for clicks and trigger a function when it meets the threshold you want. Pseudo code:
var threshold = 5
var clicks = 0
$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})
function rewind() {
$(element).css( "margin", "0" );
checkMargin()
}
Here is my working code, thanks for all the help:
<script>
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft < '-3000px'){
$('#slide').animate({marginLeft: '0px'}, 400);
}
var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hide >= '-50px'){
$('.contr-left').addClass('showMe');
}
var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hideMe <= '-50px'){
$('.contr-left').removeClass('showMe');
}
}
</script>
<!-- /Review script -->
<section id="reviews">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<h4>Reviews</h4>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide" style="margin-left:0px;">
<?php get_template_part('loop-reviews');?>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
<div class="btn btn-06">Bekijk alle reviews</div>
</div>
</section>

How can I make jquery script shorter?

I have got following code (i shorted it to make it more readable)
And I would like to ask if it is possible to do not write almost the same code for every button? How can I do it the easiest way? I have got 6 buttons and code would be quite long.
<script>
$(document).ready(function(){
$("#option1").click(function(){
if($(".option1").is(":visible")){
$(".option1").hide("slow",function(){});
}
else{
$(".option2, .option3").hide("slow",function(){});
$(".option1").show("slow",function(){});
}
});
$("#option2").click(function(){
if($(".option2").is(":visible")){
$(".option2").hide("slow",function(){});
}
else{
$(".option1, .option3").hide("slow",function(){});
$(".option2").show("slow",function(){});
}
});
$("#option3").click(function(){
if($(".option3").is(":visible")){
$(".option3").hide("slow",function(){});
}
else{
$(".option1, .option2").hide("slow",function(){});
$(".option3").show("slow",function(){});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
</body>
Without the need to change much of your html, add a common class option to all your option1, option2, ... :
<div class ="option option1">a</div>
<div class ="option option2">b</div>
<div class ="option option3">c</div>
and then you can use this below:
Array.from(document.getElementsByTagName('button')).forEach(function(btn){
btn.addEventListener('click', function(e){
if($("." + e.target.id).is(":visible")){
$("." + e.target.id).hide("slow",function(){});
}
else{
$(".option").hide("slow",function(){});
$("." + e.target.id).show("slow",function(){});
}
});
});
DEMO
You can reduce the code to just one click listener. Try this:
<script>
$(document).ready(function() {
$(".btn-primary").click(function() {
var option = $(this).data("option");
if ($(".option." + option).is(":visible")) {
$(".option." + option).hide("slow", function() {});
} else {
$(".option").not("." + option).hide("slow", function() {});
$(".option." + option).show("slow", function() {});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" data-option="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" data-option="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" data-option="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
<!-- common class option added -->
<div class="options">
<div class="option option1"></div>
<div class="option option2"></div>
<div class="option option3"></div>
</div>
</body>
I added a common class to all the options, and a data-option attribute to your buttons.
You don't need to check to see whether the current button is visible. It's visible because it was just clicked on.
All you need to do is show the other buttons that weren't clicked on and hide the one that was. To do this, assign the same class to all 3 buttons. In the example below, I added the class "myBtn" to all 3 buttons.
$(".myBtn").click(function () {
var id = $(this).attr('id');
$(".myBtn:not(#"+id+")").show("slow", function () {});
$(this).hide();
});
JSFiddle demo.

Categories