.slideToggle() is being triggered many times? - javascript

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?

If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle

code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)

Related

Jquery - Open .next

I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>
The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});
Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});
jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});

JQuery onclick function error within post loop

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->
As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.
Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});

Displaying info from sidebar on the same page

I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

jQuery - Having the same HTML twice renders my script inoperative

I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/

jquery slidetoggle hide previous element

I'm working on a slideToggle function on click, I want to hide the previous element that was clicked when a new one is clicked, I've used this same set of code previously and its worked however it's no longer working now and I'm stumped at why its no longer works:
My code is as below or view a jsfiddle
js/js.js
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
index.html
<div class="mostpopular">
<h4>Nokia:</h4>
<h5>3100</h5>
<p>Most popular mobile phone of the year</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia (Data Source)</p>
<p class="source">GSM Solution (Image Source)</p>
</div><!-- End Toggle Sources -->
</div><!-- End Sources -->
</div>
<!-- END MOST POP -->
<div class="mostpopular">
<h4>Lord of the Rings:</h4>
<h5>Return of the King</h5>
<p>Highest Grossing Film</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia</p>
<p class="source">IMDB (Image Source)</p>
</div> <!-- End Toggle Sources -->
</div> <!-- End Sources -->
</div>
would appreciate some help in regards to this.
Why aren't the other '.togglesources' divs closing when I open a new one?
Try this:
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
Working Fiddle

Categories