jquery stop animation on click when content is visible - javascript

i have two divs that contain separate content. the first div's content is displayed when the user loads the page, and the second div's content is hidden. when the user clicks on the second div, the first div's content disappears, and the second div's content is now visible. but if the user clicks on either div when it is visible, the div's content disappears. i am not skilled in javascript and found most of the code i am using online and would like to know how to make it so that when the div's content is visible the it doesn't disappear when clicking on it.
<!doctype html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("#div1_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div2_text").next().slideUp(300);
} else {
$(this).next().hide(300);
}
if ($(this).next().is(":visible")) {
}
});
$("#div2_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div1_text").next().slideUp(300);
} else {
$(this).next().hide(300);
}
if ($(this).next().is(":visible")) {
}
});
});
</script>
<style>
html {
background: #34495e;
}
#div1 {
background: rgba(255, 255, 255, 0.70);
width: 100%;
height: auto;
}
#div2 {
background: rgba(255, 255, 255, 0.70);
width: 100%;
height: auto;
margin-top: 20px;
}
.text {
text-align: center;
cursor: default;
}
.content {
background: #e74c3c;
height: 50px;
}
#div2_content {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<div id="div1_text" class="text">
blah
</div>
<div id="div1_content" class="content">
</div>
</div>
<div id="div2">
<div id="div2_text" class="text">
blah blah
</div>
<div id="div2_content" class="content">
</div>
</div>
</body>
</html>

Just remove else statement like this :
$(document).ready(function() {
$("#div1_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div2_text").next().slideUp(300);
}
});
$("#div2_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div1_text").next().slideUp(300);
}
});
});
Here is a demo : http://jsfiddle.net/4G8NM/

Related

How to automatically scroll to a div section when you have a fixed header

I have the following code snippet below. When the user scrolls past the header it becomes sticky. Then when they click on either of the tabs in the header One, Two, Three, etc. it scrolls down to the corresponding div.
For some reason when I click on the tabs it scrolls past the div. Like I want to scroll to the top of the One, Two, etc. sections and have it appear right underneath the sticky header when scrolled. Right now it scrolls past the sticky header when I click on the nav items on header. Is there a different way to achieve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-size: 28px;
}
#navbar {
overflow: hidden;
background-color: #333;
padding: 25px 16px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
margin-right: 15px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
}
.common {
border: 1px solid black;
padding: 200px 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="header">
<p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
<a onclick="headerClick(this); return false;" href="#">This is One</a>
<a onclick="headerClick(this); return false;" href="#">This is Two</a>
<a onclick="headerClick(this); return false;" href="#">This is Three</a>
<a onclick="headerClick(this); return false;" href="#">This is Four</a>
</div>
<div class="content">
<div class="common" id="One">This is the first</div>
<div class="common" id="Two">Two</div>
<div class="common" id="Three">Three</div>
<div class="common" id="Four">Four</div>
<div class="common" id="Five">Five</div>
<div class="common">Filler div to make scrolling longer</div>
<div class="common">Filler div to make scrolling longer</div>
<div class="common">Filler div to make scrolling longer</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
document.getElementById("navbar").style.padding = "40px 16px";
} else {
navbar.classList.remove("sticky");
document.getElementById("navbar").style.padding = "25px 16px";
}
}
function headerClick(elem) {
if (elem.innerHTML === 'This is One') {
document.getElementById("One").scrollIntoView();
}
if (elem.innerHTML === 'This is Two') {
document.getElementById("Two").scrollIntoView();
}
if (elem.innerHTML === 'This is Three') {
document.getElementById("Three").scrollIntoView();
}
if (elem.innerHTML === 'This is Four') {
document.getElementById("Four").scrollIntoView();
}
}
</script>
</body>
</html>
The problem is that your navbar is covering the top of the div. You can avoid this by using window.scrollBy() and offsetHeight to scroll the window up again by the height of the navbar. This solution has the advantage that it does not require you to know what height your navbar will be to start with, so it allows for various different browser configurations.
function headerClick(elem) {
if (elem.innerHTML === 'One') {
document.getElementById("One").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Two') {
document.getElementById("Two").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Three') {
document.getElementById("Three").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Four') {
document.getElementById("Four").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Five') {
document.getElementById("Five").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
}
The extra -2 is to ensure that the div border can be seen, but you can delete that if it's not needed.
You can achive this like so: Before each section add sort of anchor and instead scrolling to the section scroll to the unvisible anchor which will have some top offset.
<a id='Two'></a>
<div class="common">Two</div>
#Two {
display: block;
position: relative;
top: -120px; /*Here must be same value as your navbar height is*/
visibility: hidden;
}
I hope it helped you!

How to prevent slideToggle opening then closing on first click

I have a slideToggle which is giving me an accordion-style function. This all works fine except for the first click which shows the content div briefly but then slides it closed straight away. Clicking again slides open correctly and all subsequent clicks function correctly.
Here's the Jquery script I'm using:
$(".tm-section-label").click(function() {
$(this).parent().addClass('active').find('.tm-extra-product-options-container').slideToggle('fast,easing');
});~
$(".tm-section-label").click(function() {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
Here's the CSS I'm using :
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
How can I make the initial click just slide the div open without having to click twice?
https://dotnetfiddle.net/hpJDeF
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function () {
$(".tm-section-label").click(function () {
$(this).parent().addClass('active');
var q = $(this).parent().find('.tm-extra-product-options-container');
if (q.hasClass('cpf_hide_element')) {
q.removeClass('cpf_hide_element');
}
else {
q.slideToggle('fast,easing');
q.removeClass('cpf_hide_element');
}
});
$(".tm-section-label").click(function () {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
});
</script>
</head>
<body>
<div class="prodTabs" id="parent">
<div class="tm-extra-product-options-container cpf_hide_element" id="theContent">The content..</div>
<div class="tm-section-label">Click Me</div>
</div>
</body>
</html>

pop up window with info when image is clicked

Basically I have 4 images and when I click on one, information about that image should pop up with info about it.
How could I achieve that with jquery? Do I use jQuery for it?
Could someone direct me with some examples I could follow?
Thanks all
What you want is a popup when clicking ? See how to use JQuery with the click event, that's it. Something like
$( "#IdPicture" ).click(function() {
alert( "Here are the different information about the picture" );
});
You can also add an onClick event to the picture using JS.
You can also use CSS using #IdPicture:active
You choose
Seems like you're looking for something like fancybox. Its quite easy to use. Just browse through the link I provided, in my opinion the examples are quite straight forward. There is also a release based on jQuery.
I've created a JSFiddle
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Please have a look, this will help you.
You can do it on hover too
$(document).ready(function() {
$('#box1').hover(function() {
$('#info1').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info1').stop().animate({
opacity: 0
}, 300);
});
$('#box2').hover(function() {
$('#info2').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info2').stop().animate({
opacity: 0
}, 300);
});
$('#box3').hover(function() {
$('#info3').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info3').stop().animate({
opacity: 0
}, 300);
});
$('#box4').hover(function() {
$('#info4').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info4').stop().animate({
opacity: 0
}, 300);
});
});
#box1 {
width: 150px;
height: 150px;
background: blue;
}
#box2 {
width: 150px;
height: 150px;
background: red;
}
#box3 {
width: 150px;
height: 150px;
background: green;
}
#box4 {
width: 150px;
height: 150px;
background: orange;
}
#info1 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info2 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info3 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info4 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="box1">
<div id="info1">
<p>
<ul>
<li>cool info</li>
<li>even cooler info</li>
<li>too cool for school info</li>
</ul>
</p>
</div>
</div>
<div id="box2">
<div id="info2">
<p>
<ul>
<li>balblabala</li>
<li>this is interesting</li>
<li>of course it is</li>
</ul>
</p>
</div>
</div>
<div id="box3">
<div id="info3">
<p>
<ul>
<li>hello world</li>
<li>I came to rule the planet</li>
<li>just kidding</li>
</ul>
</p>
</div>
</div>
<div id="box4">
<div id="info4">
<p>
<ul>
<li>no one will read this anyway</li>
<li>this is not fun anymore</li>
<li>finally</li>
</ul>
</p>
</div>
</div>
</body>
And of couse with help of css you can position and format the info containers the way you want.

Next / previous arrows to cycle through divs

I want to add two arrows to the sides of the "boxes" divs (below) to cycle through the 3 divs.
Working JSFiddle: https://jsfiddle.net/HBHcC/11/
Can someone help me with this?
HTML:
<div class="container">
<div class="boxes">
<div class="one box">
</div>
<div class="two box">
</div>
<div class="three box">
</div>
</div>
</div>
CSS:
.container{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.box {
display:inline-block;
float: left;
width: 100px;
height: 100px;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:blue;
}
.boxes{
width:400px;
}
JS:
$(document).ready(function(){
$('.box').on("click", function() {
// Is this the last div, or is there a next one?
if ($(this).next().length) {
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
}
});
});
After adding arrows to the div, here is a new fiddle that should get you started:
$('.rightarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
https://jsfiddle.net/tx2yg06w/1/
Updated w/arrows moved out of divs:
$(document).ready(function(){
var animSpeed = 200;
$('.rightarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
});
https://jsfiddle.net/b56r0d72/
Errata has given you a good solution. Just wire up his code to the arrows in the snippet below.
Run snippet to view:
<html>
<body>
<style type="text/css">
.leftarrow, .rightarrow {
font-size: 48px;
color: blue;
text-decoration: none;
}
.rightarrow {
color: red;
float: right;
}
.content {
width: 200px;
padding: 4px;
border: 1px gray solid;
}
.box {
height: 200px;
border: 1px green solid;
}
</style>
<div class="content">
<div>
◀
▶
</div>
<div class="box">slide</div>
</div>
</body>
</html>

Trouble Removing One Child DIV At A Time

I am building a simple Grocery List App and I am having issues trying to remove a place holder div element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grocery List App</title>
<link type="text/css" href="style/form.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="left_side">
<div id="to_buy">To Buy:</div>
</div>
<div id="right_side">
<div id="in_cart">In Cart:</div>
</div>
</div>
<input type="text" id="item_body" placeholder="Type Item to Add">
<script src="scripts/jquery-1.11.2.min.js"></script>
<script src="scripts/grocery.js"></script>
<script src="scripts/jquery-ui/jquery-ui.js"></script>
</body>
</html>
JS
$(function () {
var rmv = false;
$('#item_body').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable( {
axis: "x"
});
$(".draggable_item").dblclick(function() {
this.remove();
$('#in_cart > div:first').remove();
});
});
});
CSS
#to_buy {
float:left;
width: 50%;
height: 100%;
color: #00E5EE;
}
#in_cart {
float: left;
width: 49%;
height: 100%;
color: #00E5EE;
}
#container {
width:100%;
height: 100%;
}
#left_side {
height: 100%;
width: 50%;
float:left;
background: #5D5851;
}
#right_side {
height: 100%;
width: 50%;
float: left;
background: #6D5D4D;
}
#item_body {
float:left;
clear:both;
color: #326B62;
}
body {
background: #B1ADA5;
}
.draggable_item {
color: #FFF;
}
.holder {
height: 20px;
}
So the screen is split vertically between "to_buy" and "in_cart." When I add an item to "to_buy" I also add a "dummy" div to "in_cart" so that the two sides remain even. However, when I double click to remove an item, when
$('#in_cart > div:first').remove();
gets called, first one div is removed, then on the next double click two, then four etc etc. Apparently, it is getting called multiple times or something else wonky is going wrong.
This is because you bind event handlers for double click event on every Enter key press so they multiply on every item addition. Just move dblclick registration outside:
var rmv = false;
$('#item_body').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable({
axis: "x"
});
});
$("#left_side").on("dblclick", ".draggable_item", function () {
this.remove();
$('#in_cart > div:first').remove();
});
Also note, that it makes sense to delegate double click event to the parent container #left_side so you don't have to worry about presence of elements at the time of event registration.
Here is a demo: http://jsfiddle.net/hx11gkcj/

Categories

Resources