So i got the jQuery scroll working just fine on my page.
But I want to change one thing.
I don't want to show the anchor text in the url. ie. #products or #contactinfo
HTML CODE:
<div>
Products
Contact info
</div>
<div id="products"></div>
<div id="contactinfo"></div>
jQuery code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Try this:
HTML:
<div>
<span class="link" rel="#products">Products</span>
<span class="link" rel="#contactinfo">Contact info</span>
</div>
<div style="height:800px;"></div>
<div id="products">products</div>
<div style="height:800px;"></div>
<div id="contactinfo">contact</div>
<div style="height:800px;"></div>
Script:
$(document).ready(function(){
$('.link').on('click',function (e) {
$('html, body').stop().animate({
'scrollTop': $($(this).attr('rel')).offset().top
}, 900, 'swing', function () {});
});
});
Fiddle
just add a return false; at the end of the click function.
Edit: and probalby remove this line, I mean.. it does exactly what you not want? Appearently?
window.location.hash = target;
Related
I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:
/* JS */
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
/* HTML */
<div id="anchor></div>
Scroll to anchor
However, wrapping the summary or details itself in the a tag will disable this scrolling effect.
/* HTML */
<div id="anchor">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?
Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.
$('details').attr('open', true);
If you want to close it use:
$('details').attr('open', false);
In your code better use this selector:
$(target + ' details').attr('open', true);
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$(target + ' details').attr('open', true);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function() {
window.location.hash = target;
});
});
});
#divide {
height: 500px;
}
body {
padding-bottom: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<div id="divide"></div>
<div id="anchor1">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor2">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor3">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor4">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
Html:
<div id="mark" class="container">
<div class="col-xs-12">
<img src="/images/newdesk3.jpg" width="60px">
<span>Lorem ipsum dolor</span>
<div id="t3"><button class="btn btn-warning">Buy Now</button></div>
<div id="t2">Technical</div>
<div id="t1">Product presentation</div>
</div>
</div>
...
<div id="similarproducts">
...
</div>
<div id="oneeye">
...
</div>
jquery offset:
var offset = 80;
$('#t2 a, #t1 a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
jquery smooth animate:
$("#t2 a, #t1 a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
Jquery offset and smooth animate(scrolling) are working individual as a code but when I put them together are not working.
I use jquery version 1.9.1 with Bootstrap v3.3.5
I need to specify an offset position with animate.
What is the proper code jquery to combine these codes and working properly?
the new jquery code will be
$("#t2 a, #t1 a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -80
}, 800, function(){
window.location.hash = hash;
});
}
});
I found this code on jsfiddle and I am trying to get it to work on my page.
Here is the link:
http://jsfiddle.net/AfCdg/2/
Here is the code on JSFiddle:
<div data-role="page">
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>
<div data-role="content">
<div data-role="collapsible" id="searchForm" data-collapsed="true">
<h3>tester</h3>
<p>This is some text, cool</p>
</div><!-- end searchform-->
</div><!-- end content-->
</div><!-- end page-->
$(document).ready(function(){
$('#searchButton').live('click', function(event, ui) {
$("#searchForm").toggle();
});
});
and here is my code:
<div data-role="header" id="header">Refund Policy</div>
<div data-role="content">
<div data-role="collapsible" id="refund" data-collapsed="true">
and my javascript:
$(document).ready(function () {
$('#CollapseButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
Currently the div does not start collapsed nor does it toggle when I click on the a href button. What am I missing?
Here are the only errors I receive in the Chrome console and neither looks relevant to me.
Your id of the button is searchButton
Change your code to the new id, or match them to your html either way:
$(document).ready(function () {
$('#searchButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>
Try changing $('#searchButton').live('click', ... to $('#searchButton').on('click', ...
https://jsfiddle.net/o3mk90xq/
Also, note the check for whether or not the element is hidden when it first loads, in order to hide it initially.
if (!$("#refund").is(':hidden')) {
$("#refund").hide();
}
I'm having trouble getting a simple jquery code to work. I want a button to scroll the page down to another div.
The code is in here: http://jsfiddle.net/utm6d/
html:
<div class="jumbotron">
<div class="container text-center">
<h1>Scroll down!</h1>
<a type="button" id="helloclick" class="btn btn-default">scroll!</a>
</div>
</div>
<div class="container text-center" id="second">
<p> come here </p>
</div>
js:
$('#helloclick').click(function(){
$('html, body').ScrollTo("#second");
});
You need to use the scrollTop() method with an offset() of your target object.
$(function() {
$('#helloclick').click(function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 500);
});
});
EDIT: Code needed to be wrapped in $(function() {...});, to ensure #helloclick & #second are loaded before being executed.
See it working on JSFiddle
Try this:
$('#helloclick').click(function(){
$('html, body').animate({
scrollTop: $('#second').offset().top
}, 500);});
Working Demo
jQuery does not have .ScrollTo() method.
In your case, you need to use .scrollTop():
$('#helloclick').click(function(){
$('html,body').animate({ scrollTop: $('#second').offset().top });
});
Fiddle Demo
I have a div that looks like this:
<div id="ProductPriceWrap" class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="">
<span class="Label">MSRP:</span>
<strike>$249.00</strike>
<span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>
</div>
</div>
</div>
And I made this script to help customers see when the option chosen has changed the price:
$(document).ajaxSuccess(function(){
var currentPrice = $.trim($("#ProductPrice").text());
if(currentPrice == "%%GLOBAL_ProductPrice%%")
{
$("#ProductPrice").css('color','black');
$("#ProductPrice").removeClass("PriceChanged")
}
else
{
$("#ProductPrice").css('color','red');
$('html, body').animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
$("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });
$("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });
$( "#ProductPrice" ).addClass( "PriceChanged" );
}
});
</script>
I want to change the function that scrolls to #ProductPriceWrap so that it will only scroll to that element if they have scrolled passed it. Meaning don't scroll to that element if it is already visible. I am pretty new to JS and JQ, and don't even know where to start on this one. Any input is greatly appreciated! Thanks!
Seems you are looking for selector :visible and function .animate().
At the end you will have something like:
if ($("#ProductPriceWrap:not(:visible)")) {
$("html, body").animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
}