i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)
Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}
move the element off the page to the left, moving it off to the right increases the width of the page
You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/
Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.
Related
I have a div on a page that acts as an overlay for the entire page when a button is pressed. Here is the problem I'm having:
When the overlay is showing, I am using Javascript to position the overlay starting at the top of a div on a page using the following method:
var elementTop = $("#myVideo").offset().top;
$('#lightBoxBackground').css('top', elementTop);
However, when I change the size of the page, rather than dynamically getting the new position of the myVideo div, it seems like it keeps the original position. So, as I expand my page, the overlay div stays where it was opened rather than constantly moving with the myVideo div.
Is there a way to dynamically continue getting the new position of a div as the page layout changes using html, css, and javascript so that way my overlay div moves with the myVideo div? I'm new to JavaScript and have checked through a lot of questions, but haven't found anything useful.
Thanks for any help.
Using javascript you could listen for width/height changes on the window with .resize()
$(window).resize(function() {
//resize just happened, update your positioning values
});
Note: This solution uses jQuery - https://api.jquery.com/resize/
I have gone through all related questions. But didn't find any answer.
My question is i have scrollable div tag, a chat window, in which images can be dropped as well. I have span tag at the end of every message so using this code the div tag scrolls properly to the bottom.
var EndChat = $(myid);
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
But When i append Image after resizing it, It doesn't get to the bottom. It stop at 1/4th of the image.
And when the chat loads in the beginning, if there are many images, the scrolling stops even more far from the bottom. Please Help
Why don't you scroll to the bottom of the chat using:
EndChat.scrollTop(EndChat[0].scrollHeight);
It works: http://jsfiddle.net/shawn31313/mb6JA/
In order to make sure the images have loaded before scrolling, attach an event to the load, something like this:
$('.chat img').on('load', function() {
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
});
If I'm not mistaken, whenever an image in .chat is loaded, it'll trigger the scroll to the footer. You could modify it as necessary :)
I'm trying to make a white div that extends from point (A) to point (B) on the page as shown in the photo. I want it so that when the page is extended the white takes up from pooint (A) all the way down to the end of browser so that no bg grey is shown underneath, even when page extended from below.
If you're talkinng about making the footer stick to the bottom of the page, Ryan Fait has a well known solution to this that you can find here:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Basically how it works is you position the footer absolutely and put it at the bottom, and add a "push" element to the bottom of the page to make sure that the footer doesn't go ontop of the content.
if youre looking for the sticky footer, kpsuperplane's answer wouuld be it
But seems to me that you want to have a DIV that is bellow your content, and stretching to the bottom of your browser?.
If this is the case check this example I made really quick where I'm stretching
the bottom div to fill that area which is the result of the browsers height - the top area. Gets executed every time you resize.
http://jsfiddle.net/99FpT/
js
$(function() {
function stretch(){
$(".area2").css({"height" : $(window).height() - $(".area1").height() });
}
$(window).on("resize", function(){
stretch();
});
stretch();
});
I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.