I'm trying to do something like at this image, the main content goes up when I select another thing at the menu.
I know at a certain way how to do this, I'm using the same concept of a website with tabs, something like this:
$(function(){
$("#content:First").show();
$("#wrap a").click(function(){
$(".aba").hide();
var div = $(this).attr('href');
$(div).fadeIn('slow');
$('#menu li').css('background', '#03c0f3');
$(this).parent('li').css('background', '#2ADAF1');
return false;
});
I want to know what is the effect that I can apply to div(on the $(div).) to become like this, or if there is some better way to do this.
Like #d3c0y's idea why not make it a scrollable content and just slide to the contents on click().
$('nav a').click(function (e) {
e.preventDefault();
var div = $(this).attr('href'),
//get the contents offset top position
offsetTop = $(div).offset().top;
//animate scrolling to the contents
$('body, html').animate({
scrollTop: offsetTop
}, 'slow');
});
You can also apply some fading effects using fadeTo():
$(div).fadeTo('slow', 1).siblings().fadeTo('slow', 0);
You can also remove the scrollbar if you like to body {overflow:hidden;}, the scrolling/anchoring will still work.
See this jsfiddle.
I don't think there's any predefined function suiting your needs. You'd have to construct it by yourself using .animate(). It should look something like this:
$('#navigation a').click(function(){
$('#content').css({
position : 'absolute',
top : 0,
left : 0
}).animate({
top : -$('#content').height() - 1
}, 250, function(){
// Change content here
// Animate it back
});
});
Alternatively, what many other sites are using, you can deliver your entire content in a single page and scroll respectively (example). For that, have a look at different plugins, such as this one.
Related
Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.
No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.
$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle
I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});
$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});
I am a jQuery novice but have got really close to achieving my result. Basically what I am trying to do is the following process:
From page load #anchor:
Convert the hash to an ID and a class
Scroll vertical to an element with the anchor ID
Scroll horizontal to a different element with a class
Additionally, the same functionality works when on the page. I am trying to direct link to the url.homl#hash so it is important that the animation effect works on the load as well.
My example is here: http://willminnig.com/stacko/vertical-test-5.html#1908
So far, I can get it to scroll to the vertical ID on page load but not the horizontal class, and also after the pages has loaded perfectly. It will also scroll to the class the very first time after the page loads perfectly, but is erratic behavior after the 1st time.
This is my (messy) jQuery:
$(window).bind("load", function() {
var mainhash = window.location.href.split("#")[1];
$('html, body').animate({
scrollTop: $('#'+mainhash).offset().top
}, 900, 'swing');
$('a[href^="#"]').bind('click',function() {
var target = this.hash; //target is whole #hash
var whatever = '.pics .'+this.hash.split("#")[1];
$whatever = $(whatever);
$target = $(target); //$target is $(#hash)
$('.pics').animate({
scrollLeft: $whatever.offset().left
}, 900, 'swing');
$('html, body').stop().animate({
scrollTop: $target.offset().top
}, 900, 'swing');
window.location.hash = target; //target is whole #hash
});
});
Any expertise explaining what I am doing wrong would be greatly appreciated! Additionally, I could change the way I am scrolling to the elements if it is recommended. The class/ID/hash was just the best I could come up with. Many thanks all!
To trigger the horizontal scroll on load all you need to do is trigger a click on the element with the id equal to 'mainhash'. You could achieve this by adding this line at the end of your 'load' handler:
$('#'+mainhash).trigger('click');
As for the erratic scrolling, well, it's a little complicated. $whatever's offset().left is $whatever's distance from the left side of the window, not its distance from the left side of .pics. When .pics .scrollLeft() is 0 (ie., when '1900' is flush to the left) then your animation will work correctly, otherwise it won't. I think the solution is to add the .pics .scrollLeft() amount to $whatever's offset().left so that you will have the value of $whatever's offset from the left side of .pics:
scrollLeft: ($('.pics').scrollLeft() + $whatever.offset().left)
Also, I think the 200% widths you have on #picswrap and .pics are wreaking havoc, though I am unable to explain precisely why. I think they should be changed to 100%.
I have seen some website has this: they have only one page (actually they have some pages, but only show one at one time) on their homepage, which means they have no vertical scroll bar, but when you put your fingers scroll up and down on the touchpad, the homepage will scroll up or down smoothly,show some different contents.
Just like you have a slide, but the slide go up and down, not left or right.
Sample link: http://tangyan.maxinrui.com/
Can somebody show me how to did this, maybe using Bootstrap? Or give me a sample page.
Thanks in advance.
You can make it with buttons, I don't know if you want that.
Make a file called extra.js
put the following code in it:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
on the pages the extra.js is loaded all anchor links will scroll.
(Anchor link is just a link with 'id="one"' 'href="#one"')
I think when you want to make it scroll when the user scrolls you could hook this up to some javascript.
I try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.
You might want to change your HTML. There can be only one id per page.
In the given fiddle, you have a repeating <div id="one">
Now, to get the scroll working, you could do something like this :
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
var hash = $(this).attr("href");
//console.log($(hash).position().top);
$('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
});
});
Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).
Here is a fiddle
ok I have seen people using position:fixed to have a div follow the scroll.
I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :
create a smooth scroll for the box
scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)
an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47
but I cant figure out what they used and even if they used a library.
As a slight alternative to Adam Hutchinson's
http://jsfiddle.net/HelloJoe/JjuQu/
It's pretty self explanatory but just say if you need anything explained.
This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively
Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.
$(document).scroll(function(){
$('#divtomove').css('top', $(document).scrollTop());
})
Also, this is the code in the example page, just to get an idea
var $scrollingDiv = $("#customize");
$(window).scroll(function () {
if ($(window).scrollTop() > 490) {
if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() - 500) + "px"
}, "slow");
}
} else {
$scrollingDiv.stop().animate({
"marginTop": "0px"
}, "slow");
}
});
Simpler solution:
$('#divtomove').scrollFollow();