I'm trying to create a select state using two div's positioned on top each other. One is positioned relatively and one is positioned absolutely with a bottom position of -200px. On Click of the relative div, the absolutely positioned div will slide in with a message of "success".
I have this working right now, but I need to go a little more in depth by removing the "success" div if the user decides that they want to change their selection. Also right now, when I click one div, all the divs show the "success" state. I want to fix this without touching the html/css.
Here is the JS fiddle.
http://jsfiddle.net/LSan3/
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
Thanks !
I think this is what you want:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').stop().animate({
bottom: "-100px"
}, 300 );
$(this).find('.inner-div').stop().animate({
bottom: "0px"
}, 300 );
});
});
http://jsfiddle.net/LSan3/3/
So in the click function we first hide all 'inner-divs' then find and show the one relative to 'this' - 'this' being the 'main-div' that was clicked.
Let me know if this is what you wanted to achieve.
EDIT: Also note I have added .stop() which will make sure your animation doesnt repeat multiple times if they user clicks the 'main-div' rapidly
Try:
$(document).ready(function () {
$('.main-div').click(function () {
$('.inner-div').animate({
bottom: "-100px"
}, 0);
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300);
});
});
jsFiddle example
try the code given below:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({bottom: "-1-0px"}, 300 );
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
I think this may help you.
Related
I'm new to HTML and Javascript and want to create a link that, when clicked on, scrolls to a specific position in the page. I made some research online and came up with the following solution:
My HTML file:
...
My link
...
My Javascript (which I include in the <head> tag):
function scroll() {
window.scrollTo({ top: 300, left: 0, behavior: "smooth" });
}
However this does not work well, because every time I click the link, the page just scrolls to the very top of the page, regardless to what position I set in window.scrollTo. Can somebody point out where my mistake is and how to do it right?
Thanks!
I do not know your html structure completely
Maybe this method will help you :
function goToTarget(){
var element = document.getElementById("target");
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}
#target{
margin-top:100pc;
}
<button onclick="goToTarget()"> click me </button>
<div id="target"> i am target </div>
Going on the assumption that you want a smooth scroll to a specific position on the same page, you could setup your HTML as tacoshy recommended, using an anchor for the place you’ll click and a reference #id for your destination:
My link
<h2 id="my-link">My Link Section</h2>
Then, if you’re using jQuery on your page, you can add a listener to the anchor tag:
$(".same-page-link").on("click", function(event) {
var $target;
event.preventDefault();
$target = $($(this).attr("href"));
$("html, body").animate({
scrollTop: $target.offset().top - 50
}, 1000, "swing").promise().done(function() {
$target.attr('tabindex', '0'); //Adding tabindex for elements not focusable
$target.focus(); //Setting focus
});
return false;
});
the - 50 is to offset the top of the scroll position from a fixed header, if you have one.
If you’re not using jQuery, there is a pure JavaScript solution on GitHub that you might be able to adapt for what you need.
As for your original function window.scrollTo({ top: 300, left: 0, behavior: "smooth" }); I think that’s always going to bring you to a position 300 pixels from the top of the window, and may not work for IE or Safari (I don't think they support the options version of scrollTo).
I have a Div containing overflow text that I would like to scroll through with the click of a corresponding button. It's set to scroll 100 pixels in either direction. The function works fine when I use it don't use jQuery .animate.
$(function() {
$( "#upBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()-100);
});
$( "#downBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()+100);
});
But once I add .animate, I can only click the button once in either direction. It won't let me scroll down past the first 100 pixels.
$("#scroll").animate({ scrollTop: "100px" });
Any suggestions? I put together a codepen.
Yes that is correct behavior!
Why?
Because that is already at 100px so it doesn't scroll further than that.
What should be done:
You can get the current scroll top position and add 100px to it. Like below:
$("#scroll").animate({ scrollTop: $("#scroll").scrollTop() + 100 });
And same goes for other way up.
I have some functionality on my web page to hide or show the side-menu. I have two divs, #collapse-side-nav, and #expand-side-nav. The way it is set up right now is that by default #expand-side-nav's style is set to display:none; . Then when the user clicks on the collapse-side-nav id the side-nav collapses and then #expand-side-nav gets displayed.
I noticed that the new #expand-side-nav's positioning needs to be further to the right and a little bit higher than #collapse-side-nav's div, and I wanted to achieve this with animations so that it looks sleek. My code is below. However, when I test this out in the browser the animation only works once.
$('#collapse-side-nav').click(function() {
$('.side-nav').toggle(300);
$('#collapse-side-nav').css('display', 'none');
$('#expand-side-nav').css('display', 'inherit');
$('#expand-side-nav').animate({
'margin-left' : 34,
'margin-top' : 2
}, "slow");
$('.container').animate({
'padding-left' : 0
}, "slow");
});
$('#expand-side-nav').click(function() {
$('.side-nav').toggle(325);
$('#expand-side-nav').css('display', 'none');
$('#collapse-side-nav').css('display', 'inherit');
$('.container').animate({
'padding-left' : 200
}, "slow");
});
EDIT:
I will try and post a fiddle later today. I also tried incrimenting rather than declaring exact pixels (jQuery- animate() only works once)
However this increments each and every time meaning the css will keep getting pushed further and further to the right every single time the user clicks on the div.
I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
The pre-clicked state (the arrow will be my link):
The post-clicked state:
Thanks in advance!
If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result
http://jsfiddle.net/3DpfJ/5/ - source code
So what I simply did was this:
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script> tag in the header and put the code there.
Hope it works for you.
$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});
jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/
I have a progress bar that is supposed to go to one of six thumbnails,depending on which one you click on. It works fine in the sense that it goes to the right thumb, and does it's job. The thing is, I need it to disappear as it moves, and reappear on stopping moving. I tried using hide, but that didn't quite work. The script is
$(function(){
$("#content div:not(.control)").bind('touchstart click', function() {
$(".control").animate({ top: $(this).offset().top, height: $(this).height() });
});
});
Can someone help me find the best way to go about doing this? thanks
If i got it right, maybe this would do:
$("#content div:not(.control)").bind('touchstart click', function() {
// first, we hide .control, then do animation, then in the callback we do fadeIn
$(".control").hide().animate({
top: $(this).offset().top,
height: $(this).height()
}, function() {
$(this).fadeIn();
}
);
});