I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.
<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has completed?
You can see what I have so far here.
Click on the printables button to see what I'm talking about.
I also created a jsFiddle of the basic functionality, jsfiddle.
$('a').click(function(event){
event.preventDefault();
$(element).slideToggle(250, function(){
window.location.hash = "#content";
});
});
Should work.
Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.
$('a').click(function(event){
event.preventDefault();
$a = $(this);
$(element).slideToggle(250, function(){
$(window).scrollTop($a.offset().top);
});
});
The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.
Below is an example based on your jsFiddle. The JS is the part you need.
$(function() {
$( "#button" ).on( "click", function() { //Click
$( "#content" ).slideToggle( "slow", function(){
if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
$('html,body').animate({ //animate the scroll
scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
}, "slow")
}
});
return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});
/* This is for the example */
#button{
display: block;
margin: auto;
margin-top:130px;
height: 50px;
width: 180px;
background-color: #ccc;
}
#content{
display: none;
margin: 0 auto;
height: 1200px;
width: 170px;
background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to expand content
<div id="content">
</div>
Related
I am trying to use the .show("blind", "slow") Jquery-ui Effects and the .hide("blind", "slow") with .hover(). I would like to .hover() on the button and show the div, then by leaving the button I would .hide("blind", "slow"). The problem is if I leave to quickly and the div is not completely shown, then I will not go back to show to his full height once hovering back again.
This is my code and I include the js fiddle
HTML Code
<div id="state-slider">
My Slider
</div>
<button id="trigger">
Button
</button>
CSS Code
#state-slider {
position: fixed;
top: 50px;
left: -270px;
width: 500px;
min-height: 100px;
background-color: #ff9000;
}
Jquery
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop().show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop().hide("blind", "slow");
});
});
Thanks a lot
Fabrizio
edit:
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop(false, true).show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop(false, true).hide("blind", "slow");
});
try it this way, so it jumps to the end of any animation if you quickly hover over and back again
I am not sure if this is the best way to get a navigation menu to be 'swipeable', if not, I am open to suggestions.
What I am trying to do is get the menu to not show on page load, so I added margin-left: 101%;, then when I add the class swipeleft I change the margin-left: 50% in order for the entire width of the menu to show. However, putting the menu off page like this, I cannot get the menu to swipe in. Does anyone know what I can do to get this to work?
I created a fiddle to show this. Click here to see the fiddle
JS
$(function(){
// Bind the swipeleftHandler callback function to the swipe event on div.box
$( "div.box" ).on( "swipeleft", swipeleftHandler );
// Callback function references the event target and adds the 'swipeleft' class to it
function swipeleftHandler( event ){
$( event.target ).addClass( "swipeleft" );
}
});
CSS
div.box {
width: 50%;
height: 3em;
background: #108040;
margin-left: 101%;
}
div.box.swipeleft {
background: #7ACEF4;
margin-left: 50%;
}
HTML
<div class="box"></div>
i only know the basics on coding, and i've hit a dead end right here. Is there a simple code on how to make something visible only when scrolled after a few pixels?
You can see what i mean here http://cocorrinanewtemplate.blogspot.gr
the grey van bar that is fixed, should have a menu visible only when scrolled 300px (that's when the main menu is no longer visible)
You can try this.
HTML
CSS
.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;}
JavaScript
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>150){
$('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
$('.back-to-top').click(function(e) {
$('body, html').animate({scrollTop:0}, 800);
});
});
You hase to use the jQuery function .scroll()
You will have to calculate where are you at in the scrolling proccess, and when you're at 300px from the top, do your logic.
I believe this script might work for you:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.classid').fadeIn();
} else {
$('.classid').fadeOut();
}
});
</script>
this is your problem on the blinking just remove this script and you will be fine:
<script type='text/javascript'>
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>200){
$('#menutest').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('#menutest').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
});
</script>
There are two divs; Div A (display:none by default) and Div B (visible all the time). How would one make it so if mouse moves over Div B, Div A becomes visible. Div A should remain visible if the mouse cursor is on either Div A or Div B, otherwise Div A should be hidden.
I'm using jQuery plugin hoverIntent for this.
$(".the-dropdown").hoverIntent( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
$(".menu-item").hoverIntent( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
jsfiddle
Hmm, try something like this.
HTML:
<div id="a"></div>
<div id="b"></div>
CSS:
div {
height: 200px;
width: 200px;
}
#a {
background: #0f0;
display: none;
}
#b {
background: #f0f;
}
JS:
$('#a, #b').hover(function() {
$('#a').show();
}, function() {
$('#a').hide();
});
Fiddle
Or in your specific case:
$(".the-dropdown, .menu-item").hover( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
hoverIntent is a plug-in that attempts to determine the user's
intent... like a crystal ball, only with mouse movement! It is similar
to jQuery's hover method. However, instead of calling the handlerIn
function immediately, hoverIntent waits until the user's mouse slows
down enough before making the call.
Why? To delay or prevent the accidental firing of animations or ajax
calls. Simple timeouts work for small areas, but if your target area
is large it may execute regardless of intent. That's where hoverIntent
comes in...
If you would like to use the hoverIntent plugin you can download it here:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Working Example Using hoverIntent
$(".menu-item").hoverIntent({
over: function () {
$(".the-dropdown").slideDown();
},
out: function () {
$(".the-dropdown").slideUp();
},
timeout: 500,
interval: 500
});
<div class="menu-item">Hover this for half a second
<div class="the-dropdown"></div>
</div>
div {
height: 200px;
width: 200px;
}
.the-dropdown {
background: red;
display: none;
position:relative;
top:182px;
}
.menu-item {
background: blue;
}
Is there any plugin available for jquery to animate the scroll? Say I have few scrollbars in the window. I want that whenever user is scrolling the scrollbar should animate and not appear instantaneously.
To get an exact idea of what I am trying to achieve, see this:
http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/
This is in Silverlight.
See how it scrolls in fluid manner. I want to achieve the same effect but using jquery. Is this possible?
Thanks.
Use jQuery UI: http://jqueryui.com/demos/slider/#default.
Insert code into the ready handler as shown here:
var width = $('#scrollable').width() - $('#wrapper').width();
$('#slider')
.slider( { max: width })
.bind('slide', function(event, ui) {
$('#scrollable').stop().animate(
{
right: ui.value
},
1000
);
});
HTML:
<div id="wrapper">
<div id="scrollable"><!-- bla bla --></div>
<div id="slider"></div>
</div>
Don't forget to hide the scrollbar:
#wrapper {
text-align: left;
width: 900px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
position: relative;
}
Some thing like this might help.
$("html, body").animate({
scrollTop: 0
}, "slow");
You could make your own custom "sliders" using jQuery UI, and then upon change, do what "userD" suggested. One slider would be horizontal, one vertical (of course).
Then you'd want to hide the browsers actual scroll bars for the particular div by using css ("overflow: hidden;")
Here's was #userD suggested....
$("html, body").animate({
scrollTop: 0
}, "slow");
You would of course change that to "#myDiv" instead of "html, body".
A nice light plugin jQuery .scrollTo. Found here: Arial Fiesler Blog
sytanx is easy $('div').scrollTo(#anchorindiv,{duration:1000});