Develop Reference

How to call jQuery event from another page?

Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?

This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>

You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});

Display div on "mouseenter" and remove inner div on "click"

I have a mouseenter event on two elements. The mouseenter shows a div with content; And in each div is a button in which I'd like to attach a event to listen for a click or tap which would allow to remove itself i.e. the div.
This is the script in jQuery:
$(function() {
var $subnav = $('.subnav');
$("#discover #watch").on({
mouseenter: function(e) {
$subnav.show();
$(".close").on('click tap', function(e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
},
mouseleave: function() {
$subnav.hide();
}
});
$(function() {
var $subnav = $('.subnav');
$("#discover #watch").on({
mouseenter: function(e) {
$subnav.show();
$(".close").on('click tap', function(e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
},
mouseleave: function() {
$subnav.hide();
}
});
});
header nav ul:not(:hover).discover-active .discover .nav-category {
color: #ef4b4b;
}
nav ul li .nav-category {
padding: 0 15px 0 30px;
height: 58px;
position: relative;
}
nav ul:not(:hover).discover-active .discover .nav-category:before {
background-color: #ef4b4b;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.discover:hover .nav-category:before {
background-color: #ef4b4b;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.watch:hover .nav-category:before {
background-color: #e5059a;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.discover .subnav,
.watch .subnav,
.global-site-switch .subnav {
display: none;
}
.discover .subnav img {
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.discover:hover .subnav {
background-color: #000;
position: fixed;
display: block;
left: 0;
right: 0;
margin: 0 auto;
top: 59px;
height: 530px;
width: 635px;
}
header nav .nav-categories .nav-category-and-subnav.watch:hover .subnav {
background-color: #000;
position: fixed;
display: block;
left: 0;
right: 0;
margin: 0 auto;
top: 59px;
height: 530px;
width: 635px;
}
<nav>
<ul class="nav-categories discover-active">
<li class="nav-category-and-subnav discover">
<div id="discover" class="nav-category">
<span class="nav-category-padding">Discover</span>
<i class="fa fa-angle-down" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg>
</i>
<div class="subnav">
<img src="images/thisweek.jpg">
<p class="close">X</p>
</div>
</div>
</li>
<li class="nav-category-and-subnav watch">
<div id="watch" class="nav-category">
<span class="nav-category-padding">Watch</span>
<i class="fa fa-angle-down" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg>
</i>
<div class="subnav">
<div class="column">
Original Series
</div>
<div class="column">
Trending Videos
</div>
<p class="close">X</p>
</div>
</div>
</li>
</ul>
</nav>
What am I doing wrong?
UPDATE
Apparently I had to update the script because I didn't realize their was CSS code which was conflicting with the JS. As a work around I have to use the jQuery selectors to actually select the :hover states. This script works but only once.
$(document).ready(function() {
var $subnav = $('.subnav');
$(".close").on('click tap', function(e) {
if (!$subnav) {
$subnav.show();
}
$subnav.hide();
});
$('.discover:hover, .watch:hover').on({
mouseenter: function() {
if (!$subnav) {
$subnav.show();
}
$subnav.hide();
},
mouseleave: function() {
if ($subnav) {
$subnav.hide();
}
$subnav.show();
}
}

If you want to use pure JavaScript, you need to:
Make sure both your subnav divs are hidden by default by adding a display:none; css property to your subnav divs.
You can then use getComputedStyle() to retrieve that display property value and based on that retrieved value, you can go ahead and toggle the subnav display property whenever a mouseenter or mouseleave event is triggered.
Finally, you can use the parentElement() property to close the parent subnav div whenever the child X element is clicked.
You can check out a practical example of what I described above in this jsFiddle or in the Code Snippet below:
var discover = document.getElementById("discover");
var watch = document.getElementById("watch");
var close = document.querySelectorAll(".close");
function openSub(e) {
var subNav = e.target.childNodes[5];
var x = window.getComputedStyle(subNav);
if (x.display == "none") {
subNav.style.display = "block";
} else {
subNav.style.display = "none";
}
}
function closeSub(e) {
var subNav = e.target.childNodes[5];
subNav.style.display = "none";
}
discover.addEventListener("mouseenter", openSub);
watch.addEventListener("mouseenter", openSub);
discover.addEventListener("mouseleave", closeSub);
watch.addEventListener("mouseleave", closeSub);
function btnSub(e) {
e.target.parentElement.style.display = "none";
}
close.forEach(btn => {
btn.addEventListener("click", btnSub);
});
.subnav { background: green;display: none;}
<nav>
<ul>
<li>
<div id="discover" class="nav-category">
<span>Discover</span>
<p>
SVG here
</p>
<div class="subnav">
<p>
IMG here
</p>
<p class="close">X</p>
</div>
</div>
</li>
<hr>
<li>
<div id="watch" class="nav-category">
<span>Watch</span>
<p>
SVG here
</p>
<div class="subnav">
<div class="column">
Original Series
</div>
<div class="column">
Trending Videos
</div>
<p class="close">X</p>
</div>
</div>
</li>
</ul>
</nav>

Please add a comma in between the two id selectors => #discover, #watch. Wrap the code in document ready to be safe and put the close event handler outside the mouse enter / leave so it only applies it once. See code below:
$(document).ready(function () {
var $subnav = $('.subnav');
$(".close").on('click tap', function (e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
$("#discover, #watch").on({
mouseenter: function (e) {
$subnav.show();
},
mouseleave: function () {
$subnav.hide();
}
});
});

You need to find the button within the context of the clicked element:
$(e.target).find(".close").on ....

Take the .close click event listener out of the existing mouseenter listener, and target the parent element.
$(".close").on('click tap', function(e) {
$(this).parent().hide();
});
UPDATED SOLUTION
I also removed the conditional statement, as if the .close element can only be clicked if the parent is visible, so there's no need to watch for a "hidden parent"

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

addClass and removeClass

I'm not getting used to write some code in jquery but trying hard.
Making an poll application and I want to show different backgrounds to user when their click one of two button in my page.
div tag
<div id="soruBtnSol" class="bgsol">
<!-- solbuttonbg -->
<a class="sorubtn<?=$i?>1" href="javascript:;" rel="<?=$i?>">
<span id="userCevap" class="sorubtnTxtSol">
<em class="<?php echo $soruCevapId[0]; ?>" style="visibility:visible">
<?=$question[0]?>
</em>
</span>
</a>
</div>
jquery
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").attr('class');
var cevapid = 'cevapId='+$("#cevapIdd").attr('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "fail" );
}
if(cevapid == usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "success" );
currentskor = 5;
}
});
EDIT : CSS ADDED
#soruBtnSol {
position: absolute;
top: 50%;
left: 80px;
width: 192px;
height: 75px;
margin-left: -75px;
z-index: 3;
float: left;
}
.bgsol {
background: url("../img/btn-left.png") no-repeat;
}
.fail {
position: absolute;
background: url("../img/fail.png") no-repeat;
z-index: 4;
}
.success {
position: absolute;
background: url("../img/success.png") no-repeat;
z-index: 4;
}
I want to change <div id="soruBtnSol" class="bgsol"> into <div id="soruBtnSol" class="fail"> if users gave wrong answer. if not, class will be success.
I do might have some issues in if() condition in jquery.
Any suggestions?

Try this
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").prop('class');
var cevapid = 'cevapId='+$("#cevapIdd").prop('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$(this).removeClass("bgsol").addClass("fail");
}
if(cevapid == usercevapid) {
$(this).removeClass("bgsol").addClass("success");
currentskor = 5;
}
});

How to toggle (hide / show) sidebar div using jQuery

I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?

$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look

The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});

Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}

$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}