So i'm having some issues with my JQuery which is suppose to scroll to particular divs.
HTML
<div id="searchbycharacter">
<a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a>
<a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a>
<a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a>
<a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a>
... Untill Z
</div>
<div id="0-9">
<p>some content</p>
</div>
<div id="A">
<p>some content</p>
</div>
<div id="B">
<p>some content</p>
</div>
<div id="C">
<p>some content</p>
</div>
... Untill Z
JQuery
What i want the code to do is: On click event of an .searchbychar A TAG > Take the ID attributes value and scroll to that...
$( '.searchbychar' ).click(function() {
$('html, body').animate({
scrollTop: $('.searchbychar').attr('id').offset().top
}, 2000);
});
Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric">0-9 |</a>
<a class="searchbychar" href="#" data-target="A"> A |</a>
<a class="searchbychar" href="#" data-target="B"> B |</a>
<a class="searchbychar" href="#" data-target="C"> C |</a>
... Untill Z
</div>
As for the jquery :
$(document).on('click','.searchbychar', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
You can do this:
$('.searchbychar').click(function () {
var divID = '#' + this.id;
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 2000);
});
F.Y.I.
You need to prefix a class name with a . (dot) like in your first line of code.
$( 'searchbychar' ).click(function() {
Also, your code $('.searchbychar').attr('id') will return a string ID not a jQuery object. Hence, you can not apply .offset() method to it.
Here is my solution:
<!-- jquery smooth scroll to id's -->
<script>
$(function() {
$('a[href*=\\#]:not([href=\\#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
With just this snippet you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.
I already explained how it works in another thread here: https://stackoverflow.com/a/28631803/4566435 (or here's a direct link to my blog post)
For clarifications, let me know. Hope it helps!
Related
When my page first loads, I have a fullscreen jumbotron. When the user goes to scroll down with the mousewheel I want to use the Jquery animate effect to bring the navbar (underneath the jumbotron) to the top of the page.
I already have a button that can achieve this but I would like to do it with the mousewheel too.
How can i achieve this?
Thank you
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</div>
</nav>
Jquery:
$(document).ready(function() {
$('#btnToNav').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
});
You can use
mousewheel OR DOMMouseScroll
If you want to run that function in Firefox as well, you should use both of them, since Firefox doesn't have mousewheel, but they have DOMMouseScroll
$(document).ready(function() {
$('#btnToNav').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
$('html, body').on('mousewheel', function(e){
e.preventDefault();
var delta = event.wheelDelta;
if(delta < 0){
// scroll from top to bottom
$('html, body').animate({
scrollTop: $("#brand").offset().top
}, 1000);
}else{
// scroll from bottom to top
$('html, body').animate({
scrollTop: $("#btnToNav").offset().top
}, 1000);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a id="brand" asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</nav>
I have a jquery function that shows/hides div upon href link click. But everytime the div loads, the page scrolls up to the top instead of the target div. Here is the jquery code and the html layout for divs. The jquery is used to get the id from the clicked link and open target div.
I need the page to scroll to the target div upon click.
so if i click on item1 then page scrolls to div100 then when i click on item1-desc1 then page should scroll to div1.
is there a way to edit the jquery to achieve this.
i have tried to use the following inside the click function. but the page does not scroll to the target div.
$('html, body').animate({
scrollTop: $( $(this).attr('#') ).offset().top
}, 500);
return false;
$('a').click(function () {
var divname= this.name;
$("#"+divname).fadeIn("slow").siblings().fadeOut("fast");
});
item1</font>
item2</font>
item3</font>
item4</font>
<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >item1-desc1</a></li1>
<li1><a href="#" name="div2" >item1-desc2</a></li1>
<li1><a href="#" name="div3" >item1-desc3</a></li1>
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div4" > item2-desc1</a></li1>
<li1><a href="#" name="div5" >item2-desc2</a></li1>
<li1><a href="#" name="div6" >item2-desc3</a></li1>
<div id="div300" style="display:none" align="left">
<li1><a href="#" name="div7" > item3-desc1</a></li1>
<li1><a href="#" name="div8" >item3-desc2</a></li1>
<li1><a href="#" name="div9" >item3-desc3</a></li1>
<div id="div400" style="display:none" align="left">
<li1><a href="#" name="div10" > item4-desc1</a></li1>
<li1><a href="#" name="div11" >item4-desc2</a></li1>
<li1><a href="#" name="div12" >item4-desc3</a></li1>
<div id="div1" style="display:none" align="left">
<!--div1 contents-->
<div id="div2" style="display:none" align="left">
<!--div2 contents-->
<div id="div3" style="display:none" align="left">
<!--div3 contents-->
<div id="div4" style="display:none" align="left">
<!--div4 contents-->
<!--- so on...->
Your try was good, you just put the wrong attr:
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
And you should add a preventDefault:
$('a').on('click', function(e){
e.preventDefault();
var divname= this.name;
$("#"+divname).fadeIn("slow").siblings().fadeOut("fast");
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
}
You can change the href attribute in a elements to include the target id:
item1</font>
<li1><a href="#div1" name="div1" >item1-desc1</a></li1>
This will add an anchor to the element with the id in the href. So this way you can remove:
$('html, body').animate({
scrollTop: $( $(this).attr('#') ).offset().top
}, 500);
return false;
I am unable to get the height of my navigation.
Attempt #1:
$("#process-link").click(function() {
$('html, body, #project-container').animate({
scrollTop: $("#process-work").offset().top
}, 2000 + $("nav#primary").height());
});
Attempt #2:
var headerHeight = $("nav#primary").height();
$.address.change(function(evt) {
var target = "#" + evt["pathNames"][0]; //Get the target from the event data
// If there's been some content requested go to it…else go to the top
if(evt["pathNames"][0]) {
var scrollToPosition = $(target).offset().top - headerHeight;
$('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600);
} else {
$('html, body, #project-container').animate({ 'scrollTop': '0' }, 600);
}
return false;
});
Attempt #3
$(function() {
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $( "#process-work" ).offset().top + $('nav#primary').height()
}, 2000);
return false;
});
});
HTML
<nav id="primary">Content</nav>
<div id="arrow-nav" class="container-full clearfix">Content</div>
<div id="project">
<div id="project-container">
<div class="container">
<section>
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a>
<div class="row">
<div id="process-work">
<div class="col-6 fixme">
<h2 id="process-title">Process Work</h2>
<p id="process-description"></p>
</div>
<div class="col-6">
<div id="process-wireframes" class="owl-theme owl-carousel"></div>
</div>
</div><!-- end process-work-->
</div>
</section>
</div>
</div><!-- end project container -->
</div><!--closes project-->
I'm trying to make it so once #process-link is clicked it slides you to #process-work and calculates the height of nav#primary and #arrow-nav and offsets accordingly.
This javascript currently achieved what I wanted to do. I grouped all div elements into one called #project-content and calculated the height of that plus the nav. Because the page is fixed it was causing issues.
HTML
<div id="project-content">
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<div style="background:#919191" class="hr"></div>
<a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a>
<a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a>
<div id="project-tag"></div>
<div id="project-images"></div>
</div><!--end project content-->
Javascript
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30
}, 2000);
return false;
});
Look at the OP to see the divs that also exist in the document and what I am calculating. #project-container has padding-top:60px; which I think also affected the offset, which is why I added 30.
I use this script for scrollspy offset height in my bootstrap theme. This code doesnt work properly in firefox and the heght offset aint operate, this works on chrome.
var offsetHeight = 120;
$("#p-menu a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top-offsetHeight}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
HTML:
<ul class="nav nav-tabs bg" role="tablist" id="p-menu">
<div class="container">
<i id="info-icon"></i><span>Informations</span>
<i id="details-icon"></i><span>Specifications</span>
<i id="comments-icon"></i><span>Comments</span>
<i id="diagram-icon"></i><span>Diagram</span>
</div>
</ul>
<div class="row bg" id="info" data-spy="scroll" data-target=".navbar-example">
<div class="p_info" id="details">
...
</div>
<div class="p_info" id="comments">
...
</div>
<div class="p_info" id="diagram">
...
</div>
</div>
I had the same Problem and solved it with this
history.pushState(null, null, myHash);
instead of
window.location.hash = myHash;
The second "click" function of this script doesn't work, I think it's simply a syntax issue. I'm quite new to this. But I need to find a simple way call the live "click" function once for an array of vars.
The script works, just not the second part.
I'm looking for an efficient way to replaceWith an array of different vars, each matching a classed link, and without creating a new function every time.
Any suggestions would be great!
Thanks in advance
<script type="text/javascript">
$(window).load(function(){
$('a.pow').live("click",function(e) {
webgl = $('<iframe src="http://s..."> </iframe>');
e.preventDefault();
$('#slider-wrapper').replaceWith(webgl);
});
$('a.biff').live("click",function(e) {
video = $('<iframe src="http://s..."> </iframe>');
e.preventDefault();
$('#slider-wrapper').replaceWith(video);
});
});
</script>
html
<div id="slider-wrapper">
<div>
<a class="pow" href="">
</a>
</div>
<div>
<a class="biff" href="">
</a>
</div>
next one could be..
<div>
<a class="batman" href="">
</a>
</div>
</div><-- close slider wrapper -->
You can give all your anchors that will load iframes a common class, move the description of the anchor from class to a custom attribute, and have the event handler to act on the custom attribute instead.
<div id="slider-wrapper">
<div>
<a class="link" href="" data-desc="pow">
</a>
<div>
<div>
<a class="link" href="" data-desc="biff">
</a>
<div>
<div>
<a class="link" href="" data-desc="batman">
</a>
<div>
</div>
And in your script:
<script type="text/javascript">
var desc_url_map = {
"pow" : "http://s...",
"biff" : "http://s...",
"batman" : "http://s..."
};
$(window).load(function () {
$('a.link').live('click', function(evt) {
item = $('<iframe src="' + desc_url_map[this.dataset.desc] + '"></iframe>');
$('#slider-wrapper').replaceWith(item);
evt.preventDefault();
});
});
</script>
Hope there are no bugs :)