So i got a onepage website which has menu points that scroll to a div on click. This is working so far. I implemented a jquery function that should give the whole thing an animation but somehow it does not work.
Here is the HTML:
<div class="mainmenu">
<div class="menuwrapper">
<div class="menulist">
<ul class="items">
<li class="menuitem">
HOME
</li>
<li class="menuitem">
TEAM
</li>
<li class="menuitem">
LEISTUNGEN
</li>
<li class="menuitem">
KNOW-HOW
</li>
<li class="menuitem">
KONTAKT
</li>
</ul>
</div>
</div>
</div>
and this is the js:
$(document).ready(function(){
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500, "swing");
return false;
});
$(window).resize(function(){
sliderResize();
});
});
someone has an idea?
The problem is that when clicking on the <a> tag, it still does what an <a> tag does... bring you to the link (in this case an anchor tag).
To avoid the default link action, you need to add code to prevent it:
$('a').click(function(e){
e.preventDefault(); // This will stop the default jump to anchor
// Now you can add your smooth scroll animation
Read the preventDefault() documentation for more information.
Related
I am testing a bootstrap webpage, auto scroll works on desktop but scrolls to far on mobile and makes my <h2> disappear and leave only the <p> tags visible.
Why does this scroll down not scroll to the beginning of the section?
Can anybody help me out? Many thanks
Menu:
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">Over</a>
</li>
<li>
<a class="page-scroll" href="#Teams">Teams</a>
</li>
<li>
<a class="page-scroll" href="#sponsoren">Sponsoren</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
Section:
<section id="about" class="content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 wow fadeInDown" data-wow-delay=".2s ">
<h2>test</h2>
<p>test</p>
</div>
</div>
</section>
css:
.content-section{}
js:
// jQuery to collapse the navbar on scroll
function collapseNavbar() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
$(window).scroll(collapseNavbar);
$(document).ready(collapseNavbar);
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
if I click on "CV" it will scroll to the page. If I click on a link or photo it will keep scrolling back to the top of the page.
// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'thisCVTopPosition' is the amount of pixels #thisCV
// is from the top of the document
var thisCVTopPosition = jQuery('#thisCV').offset().top;
// When #scroll is clicked
jQuery('#cv').click(function(){
// Scroll down to 'thisCVTopPosition'
jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
// This stops the anchor link from acting like a normal anchor link
return false;
});
jQuery('#thisCV').parent().click(function(){
jQuery('html, body').animate({scrollTop:1}, 'fast');
return false;
})
});
My navigation bar:
<div id="sidebar-wrapper">
<center>
<ul class="sidebar-nav">
<li class="logo"><a href="#Home" class="scroll"><img src="img/logo2.png" alt=
"Portfollio" /></a></li>
<li style="list-style: none; display: inline">
<div class="animation">
<div class="hoverImages" align="center"><img src="img/photo.jpeg" alt=
"Photo" style="width:auto;height:auto;" /></div>
</div>
</li>
<li>Home</li>
<li>CV</li>
<li>My Projects</li>
<li>GitHub</li>
<li>Contact Me</li>
</ul>
</center>
</div>
CV
` <div id="page-content-wrapper">
<div class="container-fluid">
<div id="thisCV" style="height: 1000px; width 100px">
<h1>My CV</h1>
[...]
`
Is it my divs or the jquery?
Update: Fixed my divs but it's still not working.
Anchor elements have a default action: going to their href url. When the href attribute is not set (or valid, I believe), the default action is refreshing the page (and going to the top).
It is possible that this is what is happening to you. You can use jQuery's event.preventDefault() to prevent any event from triggering its default action (jQuery docs):
jQuery('#cv').click(function(event){
// Prevent the click from loading href
event.preventDefault();
// Scroll down to 'thisCVTopPosition'
jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
// This stops the anchor link from acting like a normal anchor link
return false;
});
So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});
Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});
To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.
So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that. You can test out what I currently have at http://rac.site44.com just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.
Here is the HTML
<div class="col_4 no-padding">
<a href="/">
<img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
</a>
<a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
<a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
<nav id="nav" class="nav mobile-hide">
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
<li>Estimate</li>
<li class="top mobile-only"></li>
</ul>
</nav>
</div>
and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the $("li.top").click(function(e) { but I can't seem to figure it out)
$(function() {
$("li.top").click(function(e) {
$("#nav").addClass('mobile-hide');
$(".nav-toggle").removeClass('hidden');
$(".nav-toggle2").addClass('hidden');
e.preventDefault();
});
});
Thanks for the help!
I just tested this on your site:
$("html, body").animate({ scrollTop: "0px" });
You can read about .animate() here: http://api.jquery.com/animate/
I am using photoswipe to show my gallery when clicking on a item.
My markup:
<ul id="gallery_mobile_about">
<li>
</li>
<li>
<a href="/files/uploads/Figues-de-Moro.jpg" style="background-image: url('/files/uploads/Figues-de-Moro.jpg');" data-iframe="" data-pos="1" data-url="/files/uploads/Figues-de-Moro.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" style="background-image: url('/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg');" data-iframe="" data-pos="2" data-url="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Deia-Church-on-Cala-rock.jpg" style="background-image: url('/files/uploads/Deia-Church-on-Cala-rock.jpg');" data-iframe="" data-pos="3" data-url="/files/uploads/Deia-Church-on-Cala-rock.jpg" class="gallery-item ui-link">
</a>
</li>
</ul>
The js:
$(document).ready(function(){
var myPhotoSwipe = $("#gallery_mobile_about a").photoSwipe(
{ enableMouseWheel: false ,
enableKeyboard: false }
);
});
The problem is that even that the gallery seems to load, as a backgound i see a white page with the text 'undefined' and on closing the galler page will stay as this white page (is not returning to the original view)
The result (hit on a image where it says 5 items in gallery): http://deia.info/m/?lan=2&task=view_post&catid=14&blogid=25
What am I seem to be missing here?
Adding rel="external" solved this
I allready have the attribute rel="external" and trying things this works for me.
var myPhotoSwipe = $("#Gallery a").photoSwipe({
//your others attributes
target: 'html'
});