jQuery Show/Hide - Make other elements have a smoother transition - javascript

Is there a way for the label/form below the 'myContent' div to have a smoother transition when I am hiding/showing it?
Currently, when the myContent div is toggled, the other elements below it 'jump' into place - it would be great if I could figure out a way to slide them up into their correct location. What do you think?
JavaScript
function toggleDiv(divId) {
jQuery("#" + divId).toggle("slide", {
direction: "up"
});
}
function ShowThing(divID) {
jQuery("#" + divID).show("slide", {
direction: "up"
}, 500);
}
function HideThing(divID) {
jQuery("#" + divID).hide("slide", {
direction: "up"
}, 500);
}
HTML
Toggle Button
<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>

Click Here for jsFiddle
Optimized the javascript so that all code is based on jQuery.
HTML code
Toggle Button
<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
jQuery Code:
$(function(){
$('a.togglebtn').click(function(){
$('#myContent').stop().slideToggle(500);
return false;
});
$('#showthing').click(function(){
$('#myContent').slideDown(500);
});
$('#hidething').click(function(){
$('#myContent').stop().slideUp(500);
});
});

Your Jsfiddle is blank.
Instead of show() you can use slideDown('slow');
for hide you can use slideUp('slow'); Also you can set direction.
Otherwise you can use JQuery Animate

Related

Scrolling down with button

Given the following button :
<section id="section04" class="demo">
<h1>Scroll Down Button #4</h1>
<a><span></span>Scroll</a>
</section>
How can I make the button scroll down on the page with a particular amount?
Using jQuery animate
$("#section04").click(function(){
$("html, body").stop().animate({
scrollTop: 100px
},1000);
});
Change 100px to any value required.
If you want to use vanilla javascript you can use windows built in methods scrollTo
//.html
<div style='height:4000px; border:solid red 2px; width:80%;'>
<input type='text' class='y' />
<button>Scroll Y-axis</button>
</div>
//.js
var button = document.querySelector('button')
button.addEventListener('click', function(){
var y = document.querySelector('.y').value
window.scrollTo(0,y)
})
jsfiddle

JQuery animation to lengthen container not working

I want to make the length of one of my divs longer on a button click, however the jquery doesn't seem to be working. Here's the script.
<script type="text/javascript">
$(document).ready(function(){
function extendContainer() {
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
}
})
</script>
Here's the html, with the code for the button
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
And here's the css just in case.
#one .container {
width: 50em;
height: 22em; /* Height of the #one section*/
}
You shouldn't need the onclick="extendContainer()" attribute, or the function itself for this to work, as you are attaching the handler rather than performing the action when you call extendContainer():
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
})
and
<div id="div1" id="buttons">
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
Should be enough
I guess you want this :
function extendContainer() {
$('#one .container').animate({
height: "200px"
},
300);
}
And of course, add the relevant HTML in your code to make the animation works :
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
<div id="one">
<div class="container">test</div>
</div>
</div>
Besides, you can choose between the click() event in jQuery and the onclick on the input but both in same time are useless.
It's not working because the onlick method is only applying a listener, not calling the method you want. Anyway, you can remove the onclick attribute (and by the way, you have two of them, I don't understand why) from the input element, and use only this:
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
}, 300);
});
});
This should work. Also you're applying this to an element (with id "one" - #one) that I don't see in you HTML code, so you have to create it too.

JQuery Minimize & Maximize HTML Div

Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>

Hide/unhide div with button?

<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Highlight and Hide DIV onClick

How to Animate/Highlight the Div before hide, when click on desired Div?
Here is my JS DEMO:
http://jsfiddle.net/L7tK3/17/
I want to animate or highlight the Clicked or Selected Div first and then its should hide.
Here is the HTML :
<div id="response_1" class="container">
<span id="1" class="hide_content">
Click Here To Hide First Div
</span>
</div>
<br>
<div id="response_2" class="container">
<span id="2" class="hide_content">
Click Here To Hide Second Div
</span>
</div>
<br>
<div id="response_3" class="container">
<span id="3" class="hide_content">
Click Here To Hide Third Div
</span>
</div>
Here is CSS:
.container{
border:#666666 solid 1px;
padding:4px;
}
Here is JS:
$('.hide_content').click(function ()
{
var current_number = $(this).attr("id");
$('#response_'+current_number).hide();
});
jsFiddle Demo
$('.hide_content').click(function () {
$(this).closest(".container").animate({ "background-color": "yellow" }, 500, "linear").
delay().fadeOut(500)
});
Animating the background color requires the jQuery.Color plugin (or jQuery UI).
A quick google search instantly led me here:
http://api.jquery.com/hide/
.hide( duration [, easing ] [, complete ] )
Come on.

Categories