I'm trying to make a "Show All / Hide All", currently I've made it so when you click the text, it opens the image and text but I want a Show all so it will expand all divs.
Here is how it works at this moment: JSFiddle .
<div class="gwshowhide"><li><a class="printer">Amber Money Printer</a>
<div class="gwinfo">Level Requirement: 1<br>
<img src="pic.png"></div>
</div></li>
<div class="gwshowhide"><li><a class="printer">Moonstone Money Printer</a>
<div class="gwinfo">Level Requirement: 5<br>
<img src="pic1.png"></div>
</div></li>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
$(function () {
<script>
$('.printer').click(function () {
$(this).siblings('.gwinfo').slideToggle('slow')
})
})
</script>
In general: I want to add a Show all / Hide all text that would open all / hide all of these at once, I also want to keep the current system so when you click one, it opens / closes it. Thank you!
Here is a fiddle to get you started. I've outlined the general gist of what you need below.
Essentially, you need two components.
First, HTML. Which is just another anchor to click to toggle show/hide all.
<a class="toggle-all">Show All</a>
Second, you need an event on that new anchor to trigger the function you have, but for ALL the options.
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
From there, you might want to add something to toggle the text like:
if (open) {
$('.toggle-all').text('Hide all');
} else { ... }
Bonus tip: ALWAYS put semicolons at the end of your lines in JavaScript. Even though JS will auto-insert them, it can cause difficult to debug problems as well as make IE die in some cases.
<p class="showall">Show Hide All</p>
<div class="gwshowhide">
<li>
<a class="printer">Amber Money Printer</a>
<div class="gwinfo">Level Requirement: 1<br/>
<img src="pic.png"/>
</div>
</li>
</div>
<div class="gwshowhide">
<li>
<a class="printer">Moonstone Money Printer</a>
<div class="gwinfo">Level Requirement: 5<br/>
<img src="pic1.png"/>
</div>
</li>
</div>
and your jquery code would be
$(function () {
$('.printer').click(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
})
});
$('.showall').on('click',function(){
$('.gwinfo,.gwinfo').slideToggle('slow');
});
Demo
To show/hide all use:
$('.gwinfo').toggle('slow');
Also, i believe the "gwinfo" divs are not correctly closed on the JSFiddle.
Related
I'm writing this short JavaScript script.
Requirement:
(A) Object $(".img-aspect a") should be clicked by clicking on a class '.zoom-overlay'.
NOTE: $(".img-aspect a") can't be clicked directly due to CSS styling. We should first click on '.zoom-overlay'.
(B) Object and class are a part of LIST item, and there's more than one LIST item. How to click on a particular object and class that are attached to the same LIST? This is a requirement for the slideshow to work properly.
(C) The following script I have written clicked through all the objects and classes in LIST items and opens the last image in a slideshow. For example, if I want to click on the first LIST item or any other items, then how can I modify the script? Any guidance will be of immense help.
<script type="text/javascript">
$(document).on('click', '.zoom-overlay', function (event) {
//event.preventDefault();
$(".img-aspect a").click();
});
</script>
<ul>
<li class="gallery-item" >
<div class="center-crop">
<div class="img-aspect">
<a href="https://image.net">
<img class="thumbnail-image"
title="..."
alt="..."
src="https://image.net">
<div class="active-indicator"></div>
</a>
</div>
<div class="zoom-overlay">
<div class="zoom-icon"></div>
</div>
</div>
</li>
</ul>
maybe it helps you try this
$(document).on('click', '.zoom-overlay', function (event) {
//event.preventDefault();
$(this).siblings(".img-aspect").child("a").click();
});
I have 2 button like links, which toggle the class "active" for their respective 'arrowbox' divs. here is the html for that:
<span class="ct"><a class="fa fa-shopping-cart"><sup id="itm_count">31</sup></a></span>
<div class="cart">
hello world
</div>
<span class="ai"><a class="fa fa-plus"></a></span>
<div class="arrow_box">
<a style="margin-top: 5px;" onclick="new_dis()">Add distributor</a>
</div>
both the arrow-box and cart divs have display property set to none, but when I click the buttons 'ct' or 'ai' they appear on screen with following jquery:
$(".ai").click(function () {
$(".arrow_box").toggleClass("active");
$(".cart").RemoveClass("active");
});
$(".ct").click(function () {
$(".cart").toggleClass("active");
$(".arrow_box").RemoveClass("active");
});
the problem here is when one div is active ('cart' or 'arrow_box') and I click on the other button, the previous active div should not display on the screen, but it is.. how do I solve it?
also here is the fiddle to better understand the problem
thanks
your code is correct but there is a little problem you wrote RemoveClass but the actual function is removeClass. here is the example :-
$(".cart").removeClass("active");
$(".arrow_box").removeClass("active");
I am trying to implement the Foundation 3 slideshow Orbit into my Foundation mobile responsive design. When I try to place captions on the slides, none show but the caption bar does. This is based on the included homepage template, so the CSS for the slider components has not been altered from what was provided, but an override CSS file was included but shouldn't effect anything. (style.css) I have tried two methods, neither works. You can see the issue here. Thanks for any help you can give me, I'm new to responsive design.
<div id="slider">
<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
I have also tried:
<div id="slider">
<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
My initiation JS:
<script type="text/javascript">
$(window).load(function() {
$('#slider').orbit({
bullets: false,
timer: true,
captions: true,
animation: 'fade' });
});
</script>
I just encountered this issue as well. I managed to fix this issue by moving line 394 before line 391 in "jquery.foundation.orbit.js". The issue is that the current version orbit removes the # from the value of data-caption before it parses the text in the .orbit-caption span.
So I don't see anything wrong with your code examples. You just have to fix "jquery.foundation.orbit.js" yourself, or wait for the next release that fixes it.
Current Version:
390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392. captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
Fixed Version:
390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393. captionLocation = captionLocation.substring(1, captionLocation.length);
394. }
If you're using "foundation.min.js," you'll want to edit line 46. Look for this:
t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()
and just reverse the two parts to look like this:
n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))
I haven't tested to see if this breaks anything else, but it does fix the caption issue that you encountered.
The framework obviously has predefined classes and ids so you have to use that, if you use others that aren't defined, it will not work. Your code is almost ok, but wherever you used "slide1", "slide2", "slide3" you should use "#captionOne", "#captionTwo", "#captionThree".
From the website: http://foundation.zurb.com/docs/orbit.php
Adding Captions
Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.
<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p>Rock My World!</p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
If you follow what i wrote it should work. Hope it helps.
I have many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
I have spent the last few hours attempting to do this on my own, and using Google to find a solution but to no avail.
So if you can help out i would super appreciate it!
Basically I have a page which has 3 separate biographies in 'preview mode', which shows only the first paragraph of each bio.
When you click on 'read more' for one bio it opens up the 'full mode'.
What is happening at the moment, is if i click on one 'read more' link, it opens up the full mode on all 3 bio's.
How do i edit the following code so;
It only opens the full mode bio of the link i click on
Make it reusable so i don't have to duplicate the code 3 times for each bio
code:
$("a#btnReadMore").click(function() {
$('.readMoreSlider').slideToggle("fast");
$(this).toggleClass("readMoreSliderActive");
return false;
});
Thanks for your help!
This depends on what your markup looks like. IDs need to be unique. I'm going to assume:
<div class="bio">
<p>...</p>
<a class="readMore" href="#">read more</a>
<div class="more">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
with CSS:
div.more { display: none; }
and Javascript:
$(function() {
$("a.readMore").click(function() {
$(this).next("div.more").slideToggle();
return false;
});
});
$("a.btnReadMore").click(function(){
//--^ - Make 'btnReadMore' a CSS class, not an ID
// with this you reference *all* elements of class 'readMoreSlider',
// but you want only a single one
$('.readMoreSlider').slideToggle("fast");
// this should be okay
$(this).toggleClass("readMoreSliderActive");
return false;
});
So if you have, hypothetically:
<div class="bio">
<div class="readMoreSlider">The bio Text...</div>
<a class="btnReadMore">Read more</a>
</div>
You would need this modification to find the right readMoreSlider for a certain click.
$(this).parent('.bio').find('.readMoreSlider').slideToggle("fast");
Depending on your actual markup, your's might look a bit differently.