Code Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
</div>
<div id="fullsite"></div>
</body>
</html>
jQuery:
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $("#fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('#intro').hide(2000);
});
Simple CSS:
body {
overflow: hidden;
}
Hi everyone, I am not a jQuery expert. I am the beginner. So, I have a problem. I have two div wraps, one for the intro and one for full site. I am making a site like this, When I will open my site in a browser only the top #intro div will visible and the full site will hidden. I am using the overflow: hidden; to hide everything other side of the computer screen. I have a control in the #intro div screen to unlock the full site. So, When I will click in the control the site will scroll to #full-site. I am doing it using query and I am adding $('html, body').css('overflow', 'auto'); to show the hidden part of the site. Also, I am adding $('#intro').hide(2000); to hide the top #intro.
At this time top #intro is hiding and the scroll effect is working. But the #intro div content going left side, right side when the #intro is hiding and the scroll effect is not going targeted id. It's going very down from the targeted div. How can I do the work properly?
You wrote #fullsite in your javascript, but <div class="fullsite"></div> in your HTML.
You need to change your HTML as <div id="fullsite"></div>.
The same error for intro.
Remember: for accessing to ID you should prefix with #, for classes you should use ..
You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/
In your case I prefer the solution based on "id" and not on "classes". Infact any valid HTML document can contain many elements using the same class, but shouldn't exist more element with the same id.
This means that $(".aaa") will return a list containing any element with aaa class, but $("#aaa") will return the only element with aaa id.
is this how you want to run the code
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $(".fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('.intro').hide(2000);
});
.container {
overflow: hidden;
height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="intro">
go to fullsite
</div>
<div class="fullsite">this is fullsite</div>
</div>
</div>
Related
I having a quite hard time in doing this thing.
I have a landing page with 12 buttons on it. When you click a button, it directs you to a page with a nav bar with 12 li a's.
I already made a portion of the code that sets it to active.
<li><a href="..." class="active">
when that page with the active a class loads, it should scroll to it. the navbar is horizontal. i've tried scrollTo, but no joy. Thanks .
Update:
Here's the sample ss.
http://postimg.org/image/xtn1ljsnt/
the tab "Item 5" must be shown in the middle. It's like
Item4 Item5 Item6
thanks
It's hard for me to visualize the markup If you only provide a single element, but the example below should be enough if you modifiy it to suit your scenario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#foo {
margin-top: 1000px;
}
</style>
</head>
<body>
<div id="foo">Hello</div>
<script>
$(function () {
$('html, body').animate({
scrollTop: $("#foo").offset().top
}, 2000);
});
</script>
</body>
</html>
jsFiddle
I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)
Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!
I have just installed perfect scroll, the jQuery plugin, and it works great but I can't find a parameter to start the content at the bottom of my div. I want to have to scroll up on page load, not to have to scroll down.
Normally with jQuery I would just do:
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
But that seems to have no effect.
Current code:
$(".chat_person").click(function ()
{
if (!$(".chat_content_wrap").is(":visible"))
{
$(".chat_content_wrap").fadeIn(300, function ()
{
$('#message_list').perfectScrollbar('update');
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
});
}
});
$("#message_list").perfectScrollbar();
I haven't used the plugin before but based on the docs at https://github.com/noraesae/perfect-scrollbar
The code you should need is:
$("#message_list").scrollTop( $( "#message_list" ).prop( "scrollHeight" ) );
$("#message_list").perfectScrollbar('update');
The $ selectors may be wrong since I can't see you HTML code.
Scrooltop
paste below JavaScript code just before </head> code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
paste below JavaScript code just <body> code.
<div class="scrool">
<script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<img src="http://static.tumblr.com/cqpvki8/7yWlh05zn/seta.png" title="Go to Top" alt="Go to Top"/>
</div>
Now on the Customize page, Go and Hit the button “Edit HTML” and add below css codes just before
#scrollToTop:link,
#scrollToTop:visited {
display: none;
position: fixed;
top: 20px;
right: 20px;
}
For reference http://www.tumblings.net/post/38379026809/scrolltotopbuttoncode
Use this code
I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>
I have a modal box with a defined height. Inside of this box there is an accordion box that expands when a user clicks a link. The height of the accordion box when it is toggled exceeds the height of the modal box and thus a scrollbar appears.
I would like to automatically scroll the bars down to its lowest point to display the new content in the accordion box.
The accordian box looks like this:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Is there a way to integrate this scroll down function into the existing function? Is there an existing Jquery function for this type of behavior?
If I understand what you're looking for...
If you'd like a nice smooth scroll, then the scollTo plugin is a great choice.
If you don't care, just use a hash. location.hash = '#someid';
If you don't want to rely on any plugin, or change the actual URL, you could use scrollTop, see http://api.jquery.com/scrollTop/
Cheers.
The trick is to use an outer container-div which is scrollable. This allows to find out the size of the inner div which holds the actual content.
My solution (You have to do some adjustments for your accordion):
<html>
<head>
<style>
#container {
overflow-y: scroll;
height: 200px; /* defined height */
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<!-- dynamic content -->
</div>
</div>
</body>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js" ></script>
<script type="text/javascript">
function onNewContent() {
$("#container").scrollTop($("#content").height());
}
//test
$(document).ready(function() {
for(var i = 0; i < 500; ++i)
$("#content").append($("<div/>").html(i));
onNewContent();
});
</script>
</html>