I'm still learning JavaScript and need some help. I am making next and previous buttons that cause a scroll to the next or previous <td>'s on the page. I'm trying to implement this to the existing structure of a virb site.
the markup looks like this:
div id="next">next</div><div id="prev">prev</div>
<table>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
</table>
Here is the script I'm working with:
jQuery.easing.def = "easeInOutQuad";
$("#next").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollLeft: $("td").next.offset().left
}, 600);
//});
});
Here is the jsFiddle I'm working on
Try:
scrollLeft: $("td").next().offset().left
The following keeps track of your current item to view. You'll need a similar thig to decrement the index in your 'prev' routine.
You may also need to add a delay or an event cut-off so that multiple clicks during animation don't take the value of currentIdx above or below the range of items you have to show.
var currentIdx = 0;
jQuery.easing.def = "easeInOutQuad";
$("#next").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollLeft: $("td").eq(currentIdx).offset().left
}, 600);
currentIdx++;
//});
});
Related
So, I have two pages, notifications and topic. Topic page has comments, every comment has an unique id. When user presses on the comment link in the notifications page it takes him to the topic page that is scrolled to the exact comment user pressed on. The link after that looks something like topic/titleoftopic#comment_627. It worked pretty good, but now, when I have added infinite scroll and started showing only first few comments (rest of it is loaded on the scroll to bottom) it won't scroll to the comment and I receive an error in the console Uncaught TypeError: Cannot read property 'top' of undefined, obviously this is because the comment is not loaded yet. Is there any way to make it work? I have an idea - start scrolling to the bottom until it finds the exact comment, but not sure how to implement this. Here is my code on how do I make it scroll:
//Scroll to the comment from notifications
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});
Thanks everyone for any advice or suggestion!
For dynamically added items you have to find that id from whole document.
$(document).ready(function () {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(document).find(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});
I'm trying to write jQuery code which would make the page scroll to the div instead of going there immediately and to make it as simple as possible. I have added ids of desired divs to li elements.
My html code looks like this:
<li id="#slide1" class="active" onclick="javascript:location.href='#slide1'"><a href="#slide1" title="Next Section" >About</a></li>
<li id="#slide2" onclick="javascript:location.href='#slide3'">Works</li>
<li id="#slide3" onclick="javascript:location.href='#slide3'">Contact</li>
<li id="#slide4" onclick="javascript:location.href='#slide4'">belekas</li>
<li id="#slide5" onclick="javascript:location.href='#slide5'">dar vienas</li>
and I tried this jQuery code but it doesn't work. So maybe anyone could help me?
$('li').click(function(){
var target = $(this).attr('id');
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
UPDATE: https://jsfiddle.net/j452hL2w/ here's is fiddle version of my navigation
I removed every onclick="javascript:location.href='#slide'" from every list item. This is not necessary because you create the clickhandlers in javascript.
I replaced your click function with this:
$('li').click(function(e) {
// Prevent default action (e.g. jumping to top of page)
e.preventDefault();
// Create a variable with the link found in the list-item
var link = $(this).children('a');
// Animate the document
$('html,body').animate({
// Gets the href from the link ('slideX') and scrolls to it on the page.
scrollTop: $(link.attr('href')).offset().top
// 'slow'(600ms) can be replaced by 'fast'(200ms) or a number in ms.
// The default is 400ms
}, 'slow');
});
Here is the updated fiddle.
I'm trying to scroll to the div that is in the URL. It could be one of 21 IDs like:
url.com/test#lite1
url.com/test#lite2
url.com/test#lite3
I need this to happen on page load (user is coming from an ebook and should see the exact item they clicked on).
Here is the code I currently have:
$(document).ready(function(){
$('a[href^="#"]').load(function() {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
It doesn't work and I think it's because of this part (I have no idea what I'm doing here):
$('a[href^="#"]').load(function() {
I also want it to be in the center of the page (not at the top cut off like browsers do when scrolling to divs). Please let me know if this is correct:
$target.offset().top -150
Thanks so much in advance!
window.location.hash contains the current hash in the URL so use that. As the hash is already in the URL(as you said that they come to page by clicking on link with hash) so you don't need to add it manually.
Try using this :
$(document).ready(function(){
$('html,body').animate({
scrollTop: $(window.location.hash).offset().top-150
}, 900, 'swing');
});
Using wordpress, it seems the $ needs to be replaced by jQuery so it comes out to:
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
As an alternative, you could try using the following jQuery plugins. I've used them on multiple projects. They're customizable and provide nice, smooth animation:
scrollTo (download, documentation) allows you to scroll to a specific element on the page. Basic usage: $(element).scrollTo(target);
localScroll (download, documentation) requires scrollTo as a dependency, and handles anchors for you. You can apply it to specific set of links by selecting their container: $('#link-container').localScroll();, or you can activate it globally: $.localScroll();
I have a very basic HTML site with a few anchor tags. On click each anchor leads to the other, using a little bit of smooth scroll with this function:
$(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 - 300
},
900,
'swing',
function () {
window.location.hash = target - 300 ;
}
);
});
});
The gaps between the anchors will be quite big and I am trying to figure out a way to get the speed to vary - when clicked on an anchor, to start slower, than speed up, when close to the next anchor to slow down again before it stops.
Could not find any JQuery docs on it, does someone has a suggestion?
FIDDLE: https://jsfiddle.net/koteva/ovf9ywb3/
I believe you would want to use an easing function to handle this. By default, jQuery only handles swing easing, which you have already passed into your animate function. However, you can include additional easing functions with a plugin.
George Smith has a lightweight js plugin for download that may help you, called jquery.easing.1.3.js. I think easeInOutQuart sounds like the closest thing to what you are looking for
Here is a demo fiddle
By including jQuery UI (after jQuery) you will be able to use the easings listed here
Your code should look like:
$('html, body').stop().animate(
{
'scrollTop': $target.offset().top - 300
},
900,
'easeInOutCubic',
function () {
window.location.hash = target - 300 ;
}
);
I would like to change the functionality of WP Casa theme Paraiba. http://wpcasa.com/demo/paraiba/
Right now the search results are displayed under the page fold - my aim is to scroll down on them after the search button is clicked.
Would you advise me how to accomplish that?
Thanks.
Try this :
$(document).on('click','.listing-search-submit', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#main-wrap").offset().top
}, 2000);
});
NOTE : This answer depends on the link given by you.So if you have made changes to class or ID then above code won't run.