Have a fairly simple show/hide script for a set of data filters from a button. I've been looking at solutions on how to animate the transition but can't seem to see how this script differs from what's described on the jQuery site.
I read somewhere else that CSS3 animations might be easier or better but that also remains a mystery to me.
Is there an easy modification to this script:
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
Instead of changing the classes, you can use the built-in toggleX methods (eg toggle() and slideToggle()).
If you want to do something more fancy such as animating colours, you'll need to look at the animate method and possibly including jquery-ui, which is where css3 transitions may be easier / less overhead unless you're already including jquery-ui.
$("#toggle").click(function() {
$("#target").toggle(500);
});
$("#slide").click(function() {
$("#target").slideToggle(500);
});
Basic fiddle: https://jsfiddle.net/t2j03v6d/
$('.target').on( 'click', function () {
var $stuff = $(this).find('.stuff');
if ( $stuff.is(':visible') ) {
$stuff.slideUp('slow');
} else {
$stuff.slideDown('slow');
}
});
.target .stuff {
display: none;
height: 400px;
background-color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="target">
Show/Hide
<div class="stuff"></div>
</li>
</ul>
I'm not sure what animation you're looking for but here I've used slideToggle() (http://api.jquery.com/slidetoggle/) using some of the code you've provided: https://jsfiddle.net/8gavvmnL/1/
HTML:
<a class="toggle" href="#pop">Click Me</a>
<div id="pop">
I'm hidden until the button is clicked!
</div>
jQuery:
$("#pop").hide();
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).slideToggle();
});
Related
Hi guys I was making a javascript function for dismissing or hiding a div Ive search through the internet and found some answers but it does not apply on my code
Here is my code:
<script>
function Displayout()
{
$("#siteicon").mouseout(function () {
$("#map_tooltip").hide("drop", { direction: "down" }, "slow");
});
}
</script>
And here is the div that will trigger the function
<div id='siteicon' style="background-image:url('src/images/redbutton.png');margin-top:0px;margin-left:-8px;height:10px;width:10px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="Displayout();"></div>
UPDATE:
and here is the id of the div I want to hide
<div id='infocontainer'></div>
Thank you in advance
Seems like there is syntax wrong with your hide() method. Try this:
function displayData()
{
$("#map_tooltip").show("slow");
}
function displayOut()
{
$("#map_tooltip").hide("slow");
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id='siteicon' style="background-color:grey;margin-top:0px;margin-left:-8px;height:20px;width:60px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="displayOut();">SiteIcon</div>
<div id='map_tooltip' hidden="true">Should be hidden on mouseout of #siteicon</div>
The parameters for hide are wrong, it's giving error "Uncaught TypeError: n.easing[this.easing] is not a function". You can use "slow" to slow up the hiding effect but you can't specify the direction. You order is wrong as well. Please have a look at JSFiddle for Demo and api.jquery.com for for hide function.
You don't need onmouseout since you are using JQuery, and there seems to be a problem in the hide() of yours, so try removing the parameter inside.
$('#test').mouseout(function() {
$(this).hide();
})
#test {
height: 200px;
width: 200px;
background-color:pink}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">content</div>
I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.
Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>
I am still learning JavaScript/jQuery and I'm trying to open and close divs with the least amount of verbiage, I'm trying to break free of the habit of repeating myself because its easier to code.
$(document).ready(function() {
$(function () {
$('#section-two, #section-three').css('display', 'none');
$('.section-opener').function (e) {
e.preventDefault();
var target = $(this).data("target");
var $target = $(target);
$('.section').not($target).stop(true, true).css('display', 'none');
$target.stop(true, true).css('display', 'block');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Section One</h4>
<div class="section" id="section-one">
<p>I am inside section one</p>
</div>
<h4>Section Two</h4>
<div class="section" id="section-two">
<p>I am inside section two</p>
</div>
<h4>Section Three</h4>
<div class="section" id="section-three">
<p>I am inside section three</p>
</div>
I'm not having any luck as currently none of it is working.
Your code is very confusing and it looks incorrect as well.
When you mention closing and opening it seems like you mean show and hide instead of what is normally considered "closing", i.e. </div>
Also, it appears you are using JavaScript to set the initial display where you should be using CSS:
<style>
#section-two, #section-three{
display: none;
}
</style>
Your .stop() and .function() and target, $target all serve to make your code very difficult to understand. I suggest reading some tutorials to understand the basics, because it appears you do not understand the code you're writing.
Also, perhaps you are looking for $().show() and $().hide() functions? Those perform the display:block and display:none shortcuts.
I created a jsfiddle which does what I think you wanted:
http://jsfiddle.net/48xuvL6y/1/
JS:
$(document).ready(function () {
$('.section-opener').on('click', function (e) {
e.preventDefault();
var target = $(this).data("target");
$('.section').hide();
$(target).show();
});
});
CSS:
.section {
display: none;
}
So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle
I am using a JavaScript function and some jQuery to perform two actions on a page. The first is a simple JS function to hide/show divs and change the active state of a tab:
This is the JS that show/hides divs and changes the active state on some tabs:
var ids=new Array('section1','section2','section3');
function switchid(id, el){
hideallids();
showdiv(id);
var li = el.parentNode.parentNode.childNodes[0];
while (li) {
if (!li.tagName || li.tagName.toLowerCase() != "li")
li = li.nextSibling; // skip the text node
if (li) {
li.className = "";
li = li.nextSibling;
}
}
el.parentNode.className = "active";
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
document.getElementById(id).style.display = 'none';
}
function showdiv(id) {
//safe function to show an element with a specified id
document.getElementById(id).style.display = 'block';
}
The html:
<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>
<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>
Now the problem....
I've added the jQuery image gallery called galleria to one of the tabs. The gallery works great when it resides in the div that is intially set to display:block. However, when it is in one of the divs that is set to display: none; part of the gallery doesn't work when the div is toggled to be visible. Specifically, the following css ceases to be written (this is created by galleria jQuery):
element.style {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}
For the life of me, I can't figure out why the gallery fails when it's div is set to display: none. Since this declaration is overwritten when a tab is clicked (via the Javascript functions above), why would this cause a problem? As I mentioned, it works perfectly when it lives the in display: block; div.
Any ideas? I don't expect anybody to be familiar with the jQuery galleria image gallery... but perhaps an idea of how one might repair this problem?
Thanks!
If you are including jQuery then you can shorten your javascript to this:
$(function() {
var sections = $('#section1, #section2, #section3');
function switchid(id, el){
sections.hide();
$('#'+id).show();
$(this).addClass('active').closest('ul').find('li').removeClass('active');
}
});
I would also remove the inline styles that set display:none. Then you can in your javascript you can initialize galleria then hide your sections.
Something like:
$(function() {
$('#section2, #section3').hide();
$('#section2 .images').galleria();
var sections = $('#section1, #section2, #section3');
function switchid(id, el){
sections.hide();
$('#'+id).show();
$(this).addClass('active').closest('ul').find('li').removeClass('active');
}
});
I would even go further and change your html to be something like this:
<ul class="sectionlinks">
<li class="active">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>
Then you javascript could just be:
$(function() {
$('#section2 .images').galleria();
$('#section2, #section3').hide();
var sections = $('.section');
$('.sectionlinks a').click(function(e){
e.preventDefault();
sections.hide();
$($(this).attr('href')).show();
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
Working example: http://jsfiddle.net/cdaRu/2/
Set them all to 'block' by default, initialize the galleria image gallery, and afterwards hide the divs you want hidden and see if that fixes it. Or try initializing the gallery again after every switchid.
My first recommendation would be to re-write your original Javascript function to use jQuery. It already has built-in visibility toggle functions ... using the same system will minimize conflicts and make for smoother code.
This is just "off the cuff" but perhaps the box model is incomplete: "The element will generate no box at all" with display: none;
Perhaps change that back to "block" and set visibility: hidden; would be better?