Fixed Menu & Scroll to DIV with jQuery - javascript

im doing a page, I've manage to create a one page website, with a fixed menu.
My problem: I want to add the scrollto.element jquery to my page, already tried Smint, Ariel Flesler and Infinty.js, none worked.
Im new to jQuery but I think I can setup things with the guide/tutorial but its just not working.
Can someone help out?
My Temporary Test Host: http://styleeuclides.site50.net/#home

If you're just looking to animate a scroll to an element, the following should do it:
$('.button1').click(function() {
$('html, body').animate({
scrollTop:$('element-to-scroll-to').scrollTop()
}, 250);
});
Something like that should do the trick.

Related

Scroll to id href without #

Hi I'm developing a site and I'd like to make people scroll to an href id without showing it in the navigation bar of their browsers. If is it possible I'd like to do it with
Am I able to do it? Thanks
Example: index.html#id
How I want it: index.html
You can use Element.scrollIntoView to achieve this. The javascript needed is
var scrollToElement = function(id){
document.getElementById(id).scrollIntoView();
}
If you pass in {behaviour: 'smooth'} to the function you get smooth scrolling which is really slick.
Check https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView for further documentation on this function
pure JS version
Using window.scrollTo(x,y) you can move the viewport:
var elem = document.getElementById("your element id");
window.scrollTo(0, elem.offsetTop);
jQuery Version
If you are already using jQuery, you can use .animate() for a smooth scroll transition to the element.
Here is an example:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
See also here

ScrollTo: targeting specific buttons in a navbar

Got an issue with a navbar I'm creating for a WordPress site. Some of the links are meant to scroll down to different places on the homepage and some are outside links to other places on the site. Something like this:
<div class="main-navigation">
<ul>
<li class="link1">Link 1
<li class="link2">Link 2
</ul>
</div>
Basic stuff.
So if I add the following Javascript in the footer....
jQuery(document).ready(function() {
jQuery('.main-navigation a' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
Link 2 will scroll down but since Link 1 isn't supposed to scroll, if you click on it, nothing happens like it's a null link.
I thought I could change the reference to something like
jQuery('.main-navigation a.link2' ).click(function(){
So only link 2 does the scrolling, but that just makes it jump to the page like an old anchor tag trick in the 1990's.
Tried a few variations of the same idea, and nothing clicked. Anyone know what the right code would be to target just the buttons that need to have the scrolling?
Building from itsgoingdown's answer. The animation is ignored because the default link event still fires. If you pass the event and also prevent the default, you'll be set. See below.
$(document).ready(function() {
$('.main-navigation a[href^="#"]' ).click(function(event) {
// Prevent default link action
event.preventDefault();
// Grab location to send to
var href = $(this).attr('href');
// Scroll the page, animated
$('html, body').animate({
scrollTop: $(href).offset().top
}, 700);
});
});
Here is a live JSFiddle to show as well.
https://jsfiddle.net/y3nutj22/5/
Thanks to the both of you. I finally figured it out and in a sense, you're both right. However, neither of your codes produced the scrollTo effect. While '.main-navigation a[href^="#"]' was partially correct, my issue....and I finally realized it this morning....was I hard coded in the URL's in WordPress' menu feature as a complete URL. So just using '#' wouldn't work. Also, since it's WP, I can't use $'s in the code, Have ot use jQuery, of course.
This is the code that did the trick.
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
with path.to.url representing the actual URL, of course.
Thanks again!

Jquery accordion wont stay collasped

Maybe someone having the same problem - Im having a small issue with collapse. I have read this article already along with a couple of others How do I keep jQuery UI Accordion collapsed by default? , but i can't seem to get it to collapse by default - ive managed to do it to stay open, but can't get my head around the collapsible true and active false. I am aiming to have it so when you click the next accordion the previous one automatically shuts.
this is the accordion js fiddle link:
https://jsfiddle.net/limtu/gnhgdxrm/
$(document).ready(function(){
$('#original .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').slideToggle();
});
$('#improved .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
});
});
Any suggestions or links to similar problems would be really kind!
Happy Friday!
jsFiddle
$(document).ready(function(){
var $contents = $("#improved").find(".content"); // Cache your slideable elements
$('#improved .head').click(function(e){
e.preventDefault();
$contents.stop().slideUp(); // Slide up all
$(this).closest('li').find('.content').stop().slideToggle(); // Toggle one
});
});
and fix all those things in HTML and move your inline styles to stylesheet

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.
$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck
I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

scrollTo event overridden when using jQuery Mobile

After loading, I want a section of the page to be display on the top, so the page scroll will be in that particular place. without the user see scrolling, I want him see immediately the right place on the page.
I load the JQuery mobile script and this override the document ready and load events.
If I remove the JQuery mobile Script It works perfect. But I cant remove It.
I tried:
$(window).load(function() {
window.scrollTo($("#selector").offset().top, 0);
});
As mention in - Stackoverflow question I tried:
$(window).load(function() {
setTimeout(function() { $.mobile.silentScroll($("#selector").offset().top); }, 100);
}
});
But It didn't work for me.
only in chrome the scroll is in the right place, but in IE, Firefox It didn't.
If I increase the timer to 1000 the IE work but the user see the top of page and after the scroll go to the right position. and this is not good.
I tried:
$(document).on("pagebeforeshow", '#selector', function() {
$.mobile.silentScroll(500);
setTimeout(function() {
$.mobile.silentScroll(500);
}, 100);
});
And it didn't work too.
What Do I need to do to, for scroll the page to the right place in all the browsers, Immediately after page had been loaded.
Thanks for helping.
I wrote sample code in this jsfiddle, it works in Chrome and Firefox
Here is code that I used:
$($("html,body").animate({scrollTop: 500}, 1000));
Hope this help
EDIT: if you want scroll to be in particular place immediately after page had been loaded then use this code (see plunker sample)
$(document).ready(function()
{
$("html,body").scrollTop(400);
});

Categories