i have developed a web solution which uses mousewheel js in order to apply horizontal scrolling. You can view the web site's page here. DEMP REMOVED
As you can see, i'm trying to simulate a mouse scroll on a click of a button, Currently i'm using this jquery snippet
var scrolled=0;
$("#btnRight").on("click" ,function(){
scrolled=scrolled+300;
$('html, body, *').scrollRight(scrolled);
});
var scrolled=0;
$("#btnLeft").on("click" ,function(){
scrolled=scrolled+300;
$('html, body, *').scrollLeft(scrolled);
});
the moment on these events are triggered, an error is produced.
Uncaught TypeError: Object [object Object] has no method 'scrollRight'
is this due to me targetting the entire body ? or is it not due to targetting a specific div ?
can the experts please be kind to provide me a hint or a elegant solution? Thank you.
There is no scrollRight function.
Use scrollLeft but have scrolled=scrolled-300 instead
Related
I'm using this jquery function to scroll into a div coming from a link at the index; when I execute the action (clicking on the link to go to the secondary page) and the scroll is executed, it works but not with the right 'scrollTop' measurement.
I realize that it works correctly until I reload the page. I do not know if I'm using the correct function.
var locationString = window.location.hash;
var headerHeight = -70;
$(document).ready(function(){
var divLoc = $(locationString).offset();
console.log(locationString, divLoc.top , divLoc.top + headerHeight);
$('html, body').animate({scrollTop: divLoc.top + headerHeight}, "slow");
});
The most common cause is the miss understanding of two event related to the page load: $(document).ready() (all elements of the DOM are ready to query/modify or whatever) and $(window).load() (all the images and related css are ready and the page will be rendered and will be fully displayed by the browser).
If you use $(document).ready() to apply actions that need all the page to be loaded for correctly display all the sizing, it will fail, because the images are not loaded yet so the vertical offsets (as in your case) may not be correctly computed.
So you need to use $(window).load() instead, so when you scroll to the element you will ensure that the page is fully rendered an all the elements will be placed as they should be.
Hope it helps.
WARNING: I'm new to JavaScript.
I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.
I am using this code from W3 to have my Nav links slowly scroll down the page to a section.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
No luck. My nav links nolonger work, and I get these nasty console errors
master.js:15 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (master.js:15)
at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)
I know what you're thinking, master.js is sourced before jQuery. Nope!
I would appreciate any help I can get on this.
See the answer here: jquery : $().animate() is not a function
You appear to be using the slim build of jQuery 3.2.1, which doesn't
include most of the library. Instead, you should be using the full
version.
https://code.jquery.com/jquery-3.2.1.js
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
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.
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.