I want a panel to show up for five seconds after a button is clicked....
Then if the user click on the panel (uses it...) the panel continues showing up,otherwise it hides for inactivation.
So the panel can increase its lifespan if the user uses it (click or hover on it)...otherwise it just fadeOut
What am I doing wrong?
I tried to use clearTimeout but it ends up in a wierd behaviour snippet. I tried reseting with booleans the code but as well...I couldnt make it work the way is expected
let ShowPanel = 0;
$('.ShowPanel5Seconds').on("click", function() {
ShowPanel = 1;
$(".Panel").show();
setTimeout(function() {
$(".Panel").fadeOut();
}, 5000)
});
//clicking hoverin on the panel
$('.Panel,.container').on("click", function(event) {
if (1 == ShowPanel) {
$('.ShowPanel5Seconds').trigger("click");
}
});
.container{
position:relative;
width:300px;
height:300px;
border:1px solid blue;
margin:10px
}
.Panel {
display: none;
position:absolute;
top:10px;
left:10px;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="container">
<div class="Panel">I'm the panel...click me to continue living</div>
</div>
An alternative, that works as expected is to keep a timeout variable with the time left to display the div.
let timeleft = 0;
function hide_or_not() {
timeleft = timeleft - 1;
if (timeleft <= 0) {
$(".Panel").fadeOut();
}
setTimeout(hide_or_not, 1000);
}
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel").show();
if (timeleft <= 0) {
timeleft = 5;
hide_or_not();
}
});
//clicking hoverin on the panel
$('.Panel').on("click", function(event) {
timeleft = timeleft + 1;
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<scri
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
Note: The code is made to be readable, not exactly optimal.
You are overcomplicating it. Just show/extend time in one go
let panel = $('.Panel'),
panelTimer;
function showAndExtendPanel(){
panel.stop(true,true).show();
clearTimeout(panelTimer);
panelTimer = setTimeout(killPanel, 5000)
}
function killPanel(){
panel.fadeOut();
}
$('.ShowPanel5Seconds, .Panel').on("click", showAndExtendPanel);
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
You can control this by addClass, removeClass() and :not() selector
// on button click show/fadeOut the panel but not the panel with class hover
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel:not(.hover)").show();
setTimeout(function() {
$(".Panel:not(.hover)").fadeOut();
}, 5000)
});
// when hover over the panel add class hover and remove it when unhover and trigger the button click
$('.Panel:not(.hover)').hover(function(event){
$(this).addClass('hover');
} , function(){
$(this).removeClass('hover');
$('.ShowPanel5Seconds').click();
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
Related
I have this sample navigation that I'm trying to create. What I want to achieve is when you clicked on prev or next class. The active class will be added to map-inr and the scale_text will also be added to the global_map_location class. I believe that only the eq() function will be used in this part.
Here's my js Code:
// Open Popup
$(".map-inr").on("click", function () {
let myIndex = $(this).closest(".global-map").index() - 1;
$('.map-inr').removeClass('active');
$(this).addClass('active');
$('.global_map_location').removeClass('scale_text');
$(this).closest(".global-map").find('.global_map_location').addClass('scale_text');
if ($(".map-item.is--show").length) {
$(".map-item").removeClass("is--show");
setTimeout(function () {
$(".map-item").eq(myIndex).addClass("is--show");
}, 600);
} else {
$(".map-item").eq(myIndex).addClass("is--show");
}
});
//Next function
$('.next').click(function(){
if ($('.is--show').next('.map-item').length) {
$('.is--show').removeClass('is--show')
.next('.map-item')
.addClass('is--show');
}
});
//Prev function
$('.prev').click(function(){
if ($('.is--show').prev('.map-item').length) {
$('.is--show').removeClass('is--show')
.prev('.map-item')
.addClass('is--show');
}
});
.global-map {
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
.map-inr {
background: red;
width: 150px;
height: 150px;
cursor: pointer;
}
.map-inr.active {
background: yellow;
}
.global_map_location.scale_text {
font-weight: 600;
}
.contain {
width: 100%;
max-width: 1000px;
margin: 50px auto 0;
padding: 0;
}
.map-item {
display: inline-block;
vertical-align: top;
padding: 20px;
border-radius: 20px;
text-align: center;
}
.map-item.is--show {
background: yellow;
}
.slider-arrow-wrapper {
margin-bottom: 20px;
}
.slider-arrow-wrapper .prev,
.slider-arrow-wrapper .next {
display: inline-block;
vertical-align: top;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global-map">
<div class="map-inr active"></div>
<p class="global_map_location scale_text">map1</p>
</div>
<div class="global-map">
<div class="map-inr"></div>
<p class="global_map_location">map2</p>
</div>
<div class="global-map">
<div class="map-inr"></div>
<p class="global_map_location">map3</p>
</div>
<div class="contain">
<div class="map-item is--show">
<div class="slider-arrow-wrapper">
prev
next
</div>
1
</div>
<div class="map-item">
<div class="slider-arrow-wrapper">
prev
next
</div>
2</div>
<div class="map-item">
<div class="slider-arrow-wrapper">
prev
next
</div>
3</div>
</div>
I have tried this on next button:
//Next function
$('.next').click(function(){
let nextIndex = $(this).closest(".map-item").index() + 1;
console.log("This next is " + nextIndex);
$(".global-map").eq(nextIndex).find('.map-inr').addClass("active");
$(".global-map").eq(nextIndex).find('.global_map_location').addClass("scale_text");
if ($('.is--show').next('.map-item').length) {
$('.is--show').removeClass('is--show')
.next('.map-item')
.addClass('is--show');
}
});
But it just keeps adding classes to next div. How to remove the classes from prev sections/divs? Is there any proper way to do it?
When user click on Prev and Next anchor tag which have Yellow background then only it should work. It is not feasible solution to make all the prev and next anchor tag click work. Only yellow background prev and next click should work.
Below is the code which match up the scenario which is explained above and also it will give you the user friendly standard view:
$(".next").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").next().length > 0)
{
$(".contain .is--show").removeClass('is--show').next().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().next().children(".map-inr").addClass("active");
}
});
$(".prev").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").prev().length > 0)
{
$(".contain .is--show").removeClass('is--show').prev().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().prev().children(".map-inr").addClass("active");
}
Please replace it with your prev and next click jQuery.
Let me know if you have any issues or modification request.
setInterval(function scroll() {
$(".box_auto").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500);
});
setTimeout(function() {
$('html, body').animate({
scrollTop: 0
}, 5000);
}, 4000);
return scroll;
}(), 9000);
.auto_scroll_top {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.auto_scroll_top .box_auto {
display: inline-block;
min-width: 400px;
height: 200px;
background-color: orange;
border-radius: 10px;
margin: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
</div>
I am trying to make a website clone and one of the things I have to do is the following.
I have many divs(boxes) in a horizontal position which you can scroll.I want it to scroll automatically on each div(to jump from one div to the next, and at the end to repeat itself)
So it should be something like div1 pause.. div2 pause.. etc.
Any ideas how to do it?
Here's an example which is fully commented. I added some numbers to your div so you can see whats going on. I found a nice answer here https://stackoverflow.com/a/45388452/5604852 which I then adapted using setInterval() to work through the collection (https://javascript.info/settimeout-setinterval#setinterval).
The code is fully commented so should be explanatory.
// Starting index
let auto_index = 0;
// Total number of divs
let total = document.getElementsByClassName('box_auto').length;
// Set interval
let timerId = setInterval( function() {
// Increase index
auto_index = auto_index + 1
// Check if index is above total
if (auto_index > total - 1 ) {
// Reset if it is
auto_index = 0;
}
scrollTo(auto_index);
}, 2000); // 2000 = 2 seconds
// Adapted from this answer:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView
// Adding smooth and center for design reasons
function scrollTo(item) {
document.getElementsByClassName('box_auto')[item].scrollIntoView({ behavior: 'smooth', block: 'center' });
};
.auto_scroll_top{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.box_auto{
display:inline-block;
min-width:300px;
height:200px;
background-color: orange;
border-radius: 10px;
margin:0 5px;
}
.box_auto {
font-size: 150px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto">1</div>
<div class="box_auto">2</div>
<div class="box_auto">3</div>
<div class="box_auto">4</div>
</div>
I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}
I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)
I'm trying to get a simple side navigation bar which you can hide and unhide with a single button.
So far I have it worknig but only every other click, so click to hide works, then does nothing, next click unhides, nothing etc. Yet I have to button set to an image to change on every click, and that is working.
What I have so far is....
HTML:
<div id="navBar-control">
<a href="#" id="toggle-slide-button">
<img src="http://i.imgur.com/8BMxPsC.png" width="50px" height="50px" />
</a>
</div>
<div id="navBar">
<div class="navBtn navBtnText">
Calculator
</div>
<div class="navBtn navBtnText">
About
</div>
<div class="navBtn navBtnText">
Other Services
</div>
</div>
Script:
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#mnavBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
and if it matters, CSS:
#navBar{
background-color: #660000;
height: 780x;
width: 80px;
}
.navBtn{
background-color: #660000;
color: white;
width: 80px;
height: 70px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.2);
opacity: 1;
font-size: 12px;
text-align: center;
}
.navBtnText {
line-height: 120px;
vertical-align: bottom;
}
.navBtn:hover{
background-color:#990000;
}
#navBar-control {
width: 50px;
height: 100%;
padding: 0 15px;
background-color: #000;
}
Fiddle of this: http://jsfiddle.net/GUjPA/91/
I have been basing this off this fiddle: http://jsfiddle.net/GUjPA/13/ This has the desired behavior only that it is on the right of the screen instead of the left. The script I'm using is exactly the same, and besides different colours and size of side bar, its essentially exactly the same.
You have a mistake here:
$('#mnavBar').animate({width: "toggle"}, 1000);
must be
$('#navBar').animate({width: "toggle"}, 1000);
http://jsfiddle.net/GUjPA/94/ here works
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
try this: you had added an m to the second call to #navbar
simplified in fiddle