I´m trying to make a scrolling effect on the page, the scroll makes a smooth effect but it miss the real position of the items, and start to bug after a few position clicks.
For example if you click on the last item it goes there, but after that if you click on the third the scroll goes to top (?). so I think i´m missing something here. anybody knows how to correct the problem?
this is my markup:
<div id="sidebar" class="clearfix">
<ul>
<li>
Muscles - Girls Crazy Go!
</li>
<li>
Tokyo Youth sports
</li>
<li>
Harajuku Interviews
</li>
<li>
Tokyo Youth
</li>
</ul>
</div>
Div to scroll example:
<div class="cinematography_box clearfix" id="two">
<div class="cinematography_item">
<img src="img/cinematography.jpg" alt="cinematography" width="700" height="397">
</div>
<div class="cinematography_info">
</div>
</div>
and my script:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#main').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I´m trying to do this without a plugin so if there is a solution with this code it would be better!
What you want to use here is .position() , not .offset() :
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).position().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
You can quick-try it in the Google Chrome Console by typing :
$(".scroll").off("click");
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).position().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
Then hit enter. It'll kill your listener and attach this new one.
Notice it's a little bit off because of your 12px margin-top on #gallery.cinematography. Either drop it or add 12 to scroll_to
JQuery's Doc is pretty self-explanatory, but feel free to ask if there's something you don't understand.
The top offset you're using is from the element #main and you want it from the .scroll element with the same id as the hash. Change the code in:
HTML:
<ul>
<li>
Muscles - Girls Crazy Go!
</li>
<li>
Tokyo Youth sports
</li>
...
jQuery:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).offset().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
});
Try it
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#sidebar').offset().top }, 750, function (){
//callback function if any
});
});
});
Related
I have a very long HTML page with content. What I am trying to achieve is when someone clicks a menu item in the header, the page should scroll down to an anchor element. I have try many things with no luck. I don't know JavaScript. This is what I tried:
_header.html.erb
<div class="header_pad">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>The Investors' Club</h1>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a id="result" href="#contact">Contact</a></li>
</ul>
</section>
</nav>
</div>
application.js
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#result").click(function() {
scrollToAnchor('contact');
});
index.html.erb
<div id="contact">
<%= image_tag("contact_us.png", :alt => "Forex Investment Contact") %></br>
<p class="small-11 small-centered columns">
Skype is free and more convenient, give us a call or send us an email if you happen to have some questions. We will
be glad to hear from you.
</br>
<%= image_tag("skype.png", :alt => "skype") %> OR
<b>100forexinvestors#gmail.com</b>
</p>
</div>
Live page: https://infinite-oasis-2303.herokuapp.com
So I want it that when I click "Contact" in the header, it scrolls smoothly all the way down to the Contact anchor down below the page. Any help?
EDIT:
I got it to work with the js I posted as an answer. However. If I click on the back button and click another link, the animation doesn't work anymore till I reload the page. Looks like the javascript loads just once. How do I eliminate that?
Seems you have typo <a name"test"></a>. Try change it to <a name="test"></a>
EDIT
Since the question edited, this is the example for application.js:
$(document).ready(function() {
$('.top-bar-section a').click(function(e) {
e.stopPropagation();
var eid = $(this).attr('href');
var top = $(eid).offset().top;
$('html, body').animate({ scrollTop: top }, 'slow');
});
});
Make sure the anchor href and target id is equal. E.g: <a href="#contact"> for <div id="contact">
this might help,
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},500);
Pass "time" as the second argument to the animate function. It should navigate to the target location in that much amount of "time". Thus helping smooth transition.
OK. I got it to work with this piece of js:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
});
I have a JavaScript menu that I want to unfold/fold when I click on the #dropdown button. First, it took three clicks for it to unfold and after those three clicks, it worked perfectly fine.
I edited my code, I have to click it three times again for it to work, but after that, each click makes the menu fold/unfold three times in a row.
buttonClickHandler
function buttonClickHandler(e) {
e.preventDefault();
$(document).ready(function(){
$('#main').hide();
$('a#dropdown-button').click(function(){
$('#main').toggle(function(){
$('#main').addClass('active').fadeIn();
}, function(){
$('#main').removeClass('active').fadeOut();
return false;
});
});
});
}
Init
function init(){
var button = document.getElementById('dropdown-button');
button.addEventListener("click", buttonClickHandler, false);
}
window.addEventListener("load", init, false);
HTML
<section id="nav-bar">
<figure>
<span class="helper"></span><img src="img/Logo.png" alt="Zien Woningmarketing"/>
</figure>
<img src="img/Menu.png" alt="Menuknop: open het menu"/>
</section>
<nav id="main">
<ul id="firstLevel">
<li>Home</li>
<li>Producten</li>
<li>Woningmarketing</li>
<li>Over Zien!</li>
<li>Werkwijze</li>
</ul>
<ul>
<li class="login">Inloggen</li>
<li>Registreren</li>
</ul>
</nav>
Link to JSFiddle
The thing is that this menu should easily drop down, thus showing its contents.
Hope this help :
http://jsfiddle.net/x7xu4/2/
$(function(){
$("a#dropdown-button").on("click",function(event ){
$("#main").toggleClass('active').fadeToggle();
event.preventDefault();
});});
Since you are using jquery 2.1, instead of "click" use "on" for it saves a bit of memory, and I edited your code for a simpler solution.
I make simpler your code
$(function(){
$('a#dropdown-button').click(function(){
if(!$('#main').hasClass('active')){
$('#main').addClass('active');
$('#main').show();
}else {
$('#main').removeClass('active');
$('#main').hide();
}
return false;
});
});
Here is jsFiddle sample
I am using jquery.scrollTo.js to scroll to blocks in one page onclick.
Html Code:
<ul>
<li>About</li>
<li>Products</li>
</ul>
<div id="about" class="item">
<a name="about"></a>
About content
</div>
<div id="product" class="item">
<a name="product"></a>
Products content
</div>
Internal Script:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
Please refer http://jsfiddle.net/8up4A/ to just view the code in jquery.scrollTo.js . I am trying to show the id name along with the url like http://www.test.com/index.html#about.
If i removed return false in internal script the id displays in url but the scrolling not working correctly. How to achieve this without affecting the scrolling effect. Any Help? Thanks.
$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
var currentString = $(this).attr('href');
var newString = currentString.substr(1);
$("html,body").animate({
scrollTop: $('a[name="'+newString+'"]').offset().top
}, 2000);
});
});
And you can remove the scrollTo.js plugin, you don't need it.
I have built a dropdown menu that works fine. It goes like this:
Main menu items are in horizontal bar, then
When hover on any item, big dropdown box (with submenu links) is shown.
And here is my code for this:
HTML:
<!-- Based on Bootstrap -->
<div class="navbar navbar-inverse">
<div class="nav-collapse collapse">
<ul class="nav">
<li>First item
<div id="about-horizontal-submenu" class="horizontal-submenu">
<div class="submenu-container span3">
<ul>
<li>Links</li>
<li>Links</li>
</ul>
</div>
<!-- and 4x similar div (to have 12 cols) -->
</div>
</li>
<li>Dropdown
<div id="about-horizontal-submenu" class="horizontal-submenu">
<!-- 3x similar div (like above) and then: -->
<div class="submenu-container span3">
<ul>
<li>I want to go here</li>
<li>Links</li>
</ul>
</div>
</div>
</li>
<!-- And then goes another main menu item... -->
</ul>
</div>
</div>
</div>
JS:
jQuery(document).ready(function($) {
'use strict';
$('.navbar .nav > li').hover(function() {
var $el = $(this);
$el.addClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':hidden')) {
$submenu.slideDown(200);
}
}, function() {
var $el = $(this);
$el.removeClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':visible')) {
$submenu.hide();
}
});
});
Problem
I think I need to add a little delay before both - sliding Down submenu on very first hover and - changing submenu content (when switching/hovering to another menu item).
Why?
When you hover on "Dropdown" and want to choose "I want to move here":
You have to go down from "Dropdown" item and then to the right - which is ok (but not very usable).
Problem is, when you go like the image is showing (from the "Dropdown" straight to the "I want to move here" - you catch "Third item" on your way and immidiatelly see the content that belongs to "Third item". And that's not very good.
If you could show me how to delay/ignore hover on my menu items for very short time, I would be grateful. (I found great example behavior of menu on: http://FEI.com)
Ben Kamens from Khan Academy wrote an article regarding this exact problem, outlining how Amazon.com solved it. It is a great read!
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
He also put together a jQuery plugin to solve this problem with a working demo. You can find it on GitHub here:
https://github.com/kamens/jQuery-menu-aim
http://htmlpreview.github.io/?https://github.com/kamens/jQuery-menu-aim/blob/master/example/example.html
$(function($) {
var m;
var timer="";
var wait=200;
active=function(){
$('.navbar .nav > li').mouseover(function() {
m = $(this);
if(timer==""){
test();
unb();
timer = setTimeout(reb,wait);
}
});
}
test = function(){
$(".horizontal-submenu").stop().hide(300);
m.find(".horizontal-submenu").stop().show(300);
};
unb = function(){
$('.navbar .nav > li').unbind('mouseover');
};
reb = function(){
timer="";
active();
};
$(".horizontal-submenu").hide(300);
active();
});
Adjust 'wait' for your best timing; You can just copy and try on your script.
This might be what you are looking for:-
http://cherne.net/brian/resources/jquery.hoverIntent.html
From this you need 2 lines on your web page to activate the hover to working properly
1) Loading script hoverIntent
2) Change from hover to hoverIntent in your jQuery
please try setTimeout. It always does the trick.
I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)
If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.
Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});
use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>