Sorry I'm really new to JQUery and would like to know how do I make an Div Slide Down?
JQuery is confusing to me and really just need help
Try this:
HTML:
<button id="click_to_slide"></button>
<div id="me_down" style="display:none;">I'm Sliding down</div>
Javascript:
$('#click_to_slide').click(function () {
$('#me_down').slideDown();
});
And Optional CSS:
#me_down {
color:white;
width: 100px;
height: 100px;
background-color: #000;
}
Try this, and it will work :)
HTML
<a id="click_to_slide">Click To Slide Down</a>
<div id="slide_me_down"></div>
CSS
#slide_me_down {
display: none;
width: 100px;
height: 100px;
background-color: #000;
}
JAVASCRIPT
$(document).ready(function () {
$('#click_to_slide').live('click', function () {
$('#slide_me_down').slideDown();
});
});
Here is a jsfiddle of the above code: http://jsfiddle.net/EfmeW/
Also if you want to have the div slideUp and Down depending on whether or not the div is already visible or not you can use .slideToggle() instead of .slideDown()
To slide an element down, just use this:
<script type="text/javascript">
$(document).ready(function() {
$('#test').slideDown();
});
</script>
<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div>
Check out an example here: http://jsfiddle.net/WvVf3/1/
Hope this helps.
When you say slide down, do you mean:
make the div appear by sliding down: $('#me').slideDown();
or
make the div slide down: $('#me').css('position','relative').animate({top:'+200'},'slow');
http://jsfiddle.net/rkw79/AnTDk/5/
Use the following JQuery. You'll need to have a div with class myDivClass as JQuery uses CSS-selectors to find elements. The document.ready part is to ensure your page is fully downloaded / parsed before the Javascript is executed (this is a crucial step).
$(document).ready(function() {
$('.myDivClass').slideDown();
});
Here is a JSFiddle as an example to have a div slide down on a button press.
P.S. If you are using Firebug or Chrome right, you can try this out right now on this page!
$('#hlogo').hide().slideDown('slow');
Related
<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>
#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Objective is to implement infinite scrolling for both homeview-story and homeview-stream separately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.
"scroll" only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel" if your browser supports it.
document.addEventListener("wheel", function(event) {
console.log(event);
});
The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.
Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.
Well I can't see what's not working for you. Here is a working fiddle
Have to paste some code so:
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)
Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.
Put a inner div in #homeview-story
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hope this demo can help you in what you want to achieve.
I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() function inside the $(window).scroll() function like this:
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct way of fixing this, but works fine for me.
I am an amateur in Jquery but am so close to getting what I am looking for. I am trying to have a containing div animate to a larger height when an object is clicked. I am using the following code:
<div id="sliderone">
<div id="nav">
<div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="ourteam">
<div id="title"></div>
</div>
</div>
<script type="text/javascript">
$('#navone').click(function(){
$('#title').html("<img src='http://placehold.it/350x550' alt='' />");
$('.post-8 .content-container').animate({height: '950'});
});
</script>
#navone {
padding:20px 20px;
cursor:pointer;
}
#title {
width:350px;
margin:0 auto;
}
#sliderone {
height:50px;
background-color:#777777;
position: absolute;
margin-top: -500px;
left: 50%;
margin-left: -175px;
}
#sliderone has to be absolutely positioned and so when I try to animate .post-8 .content-container it makes the top longer in comparison instead of making the bottom longer to contain the new content. Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container?
Thank you for any help. I have worked hard on this and just can't quite figure out this last problem.
Here is the actual page to see.
http://s416809079.onlinehome.us/wp-login
login:stackoverflow
password:stackoverflow
You might want to try using some of jQuery's slideDown, slideUp or slideToggle methods. Since you are specifically looking to slide the container I imagine this might be more specific to your needs.
See this example based on what you have above: http://jsfiddle.net/82kHV/13/
Also links to jQuery methods:
http://api.jquery.com/category/effects/sliding/
You will set the element's height you want in your CSS. jQuery will interpolate and animated from 0 to this defined value in slideDown and the reverse in slideUp. slideToggle will take initial state of the element and do the opposite or toggle.
I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . If that is the case you need to animate too the height for #sliderone:
$('#sliderone').animate({height: '225px'});/*The value you calculate*/
Check this demo http://jsfiddle.net/z7M2Y/26/
I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.
EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.
Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal
You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;
That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>
What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.
OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...