This is going to sound a bit vague, but i'll try and be as clear as possible.
I have this section of jquery that animates a slide down box.
$(function() {
$('.toggler').hover(function() {
$(this).find('div').slideToggle();
});
});
I'm just wondering if there is a way to stop when the user wiggles their mouse over and over the box, the box pops up and down then up and down for the amount of times the users mouse has crossed the box.
I hope that's clear.
HTML
<div class ="expandableboxes">
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
</div>
Just use the stop and slideDown functions.
.stop( [clearQueue ] [, jumpToEnd ] )
Description: Stop the currently-running animation on the matched elements.
$(function() {
$('.toggler').hover(function(e) {
if (!$(e.target).hasClass("toggler")) { return; }
$(this).find('div').stop().slideDown(1000, "easeOutBounce");
});
});
.toggler > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="expandableboxes">
<div class="toggler">This is the title
<div>This is the content to be toggled</div>
</div>
<div class="toggler">This is the title
<div>This is the content to be toggled</div>
</div>
<div class="toggler">This is the title
<div>This is the content to be toggled</div>
</div>
<div class="toggler">This is the title
<div>This is the content to be toggled</div>
</div>
<div class="toggler">This is the title
<div>This is the content to be toggled</div>
</div>
</div>
To avoid frequent pops up and down use mouseenter
$(function() {
$('.toggler'). mouseenter(function() {
$(this).find('div').slideToggle();
});
});
See the demo here
Related
I needed three panels to show or hide some of its content based on whether or not a button (p tag) was clicked, and then change the button text when it was clicked to say hide or show depending on the situation. However the hidden content is meant to be auto hidden on mobile devices so I've added some javascript to do this but now the button text change is messed up since its triggering on click. What I would like instead is to have the button text change if the 'clicked-hide' class is added and revert back if it's not. Help would be appreciated :)
HTML
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<img src="images/tooltip.svg">
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
Javascript
//COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
jQuery('.compare-card-attributes').toggleClass('clicked-hide');
});
//This will toggle the text on the show hide p tag button messaging
jQuery(document).ready(function($) {
$('.compare-card-footer').find(".hide-show-attributes").click(function(){;
if($(this).find("span.toggleShow").first().text()=="Hide Details"){
$("span.toggleShow").text("Show Details");
}
else {
$("span.toggleShow").text("Hide Details");
}
});
});
//Mobile Switch - this will auto collapse the panel when the user is on mobile
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
$('span.toggleShow').text('Show Details');
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
// this is used whenever the window is resized
$(window).resize(function(){
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
});
//END COMPARISON CARD SCRIPT---------------
First of all i suggest you set .compare-card-attributes to hidden on mobile with CSS
#media only screen and (max-width: 600px) {
.compare-card-attributes {
visibility: hidden;
}
}
and also have a class of something along the lines of
.hidden {
visibility: hidden;
}
then your script will need to be (assuming these jquery methods are already working)
jQuery('.hide-show-attributes').on('click', function() {
const cardAttributes = $('.compare-card-attributes');
const toggleText = $(this).find("span.toggleShow").first();
cardAttributes.toggleClass('hidden');
if(cardAttributes.hasClass("hidden")){
toggleText.text("Show Details");
}
else {
toggleText.text("Hide Details");
}
});
I have written that blindly, so i hope that works / helps.
I suggest you use a more semantic element for your toggle too, like a button or div with a 'role=button' attribute.
I have a website with different sections. I have jQuery to slide between these sections.
But now I have a link in a section which points to another section.
HTML:
<div class="section" id="one">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="tow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="ordernow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
jQuery:
// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
$.scrollTo($(this), 800);
});
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
}
The problem is that if I click on the link scrollOrderNow() the page slides to the order page and than back to the section because the link is in that section.
Could you please help me figure this out?
Thank You!
You can use a single click handler and determine what to do based on which element was clicked inside the section. For this, it's best to distinguish the clickable element by giving it a class:
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button" class="scroll-to-order"/>
</div>
</div>
The the click handler code:
$('div.section').on('click', function(evt) {
var $target = $(evt.target);
if ($target.is('.scroll-to-order')) {
// the image itself was clicked, so scroll to ordernow
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
} else {
// something else inside the section was clicked, scroll to section
$.scrollTo($(this), 800);
}
});
You'll need to put return false to your scrollOrderNow() function.
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
return false;
}
This way, your links will not react and the hash will not be appended to the URL, leaving the page where it is.
I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}
I have a series of "product" divs in a grid, each of which is clickable. When one is clicked, the corresponding "product info" DIV slides down to reveal the corresponding product info. I have it working somewhat but I'm having a couple of issues.
How can I make it so that when one set of info is showing, but ANOTHER "product" div is clicked, the current info slides into hidden status, the product info is switched and THEN the new info is revealed. Make sense?
If the code below doesn't make sense, the direct link is here
This is the HTML for the hidden info. The class 'selected_show' is styled with "display:none;" to start:
<section>
<div class=selected_show>
<div>
<div class="product_info grassone piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div>
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info competitive piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:red;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info magpie piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:blue;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
</div>
</section>
This is where the info is chosen:
<section>
<div class="piece woodcut">
<p>GRASSONE</p>
</div>
<div class="piece woodcut">
<p>COMPETITIVE</p>
</div>
<div class="piece woodcut">
<p>MAGPIE</p>
</div>
</section>
This is the script for the effect:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$('a.showinfo').click(function(e){
e.preventDefault();
$("html, body").animate({ scrollTop: 100 }, "slow");
$(".selected_show").slideToggle();
var a_href = '.'+ $(this).attr('href');
$('.product_info').hide();
$(a_href).show();
});
</script>
Ideas?
Use the slideToggle's callback:
$(".selected_show").slideToggle(1000, function(){
$('.product_info').hide();
});
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});