JavaScript that adds behavior to all links should exclude some - javascript

I have the fallowing smooth scrolling script:
<!-- Smooth scroll JS -->
<script type="text/javascript">
jQuery('a[href^="#"]').click(function(e) {
jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
</script>
The problem is that it affects all link to an id (as intended) and causes a conflict with toggle script.
I need to add a condition to the script so that the links in the #work_tabs div are not affected.
<div id="work_tabs">
<ul>
<li>Films</li>
<li>TV Films</li>
<li>TV Shows</li>
<li>Special Events</li>
</ul>
</div>
I tried adding the condition myself but i'm still new to JS and have no idea how to achieve this.
How could I make the script ignore the links in the work_tabs id?

You can use the not() function:
jQuery('a[href^="#"]').not('#work_tabs > a').click(function(e) {
jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
This will exclude any anchor tags inside that div.
Read more here.

One way to go about it is add a class to the items that can be toggled and change your element selector to point to that.
jQuery('.toggle').click(function(e) {

You can use the jQuery .not() function to remove the intended elements
Use jQuery('a[href^="#"]').not('#work_tabs > a')
<!-- Smooth scroll JS -->
<script type="text/javascript">
jQuery('a[href^="#"]').not('#work_tabs > a').click(function(e) {
jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
</script>

Related

Smooth Scroll blocks anchor link to other page

I am working on my portfolio website but I don't get the anchor links to work.
On the website you click on a case to view the details and after that I want to link back to the portfolio part of my website. I used anchor points to achieve this but my smooth scrolling is blocking the anchor links to another page. (I does work when I just link to the index but not when I add the anchor point & it also works when I remove the smooth scroll)
Does anyone know how I can fix this problem?
HTML:
<div class="menubalk" id="basic-menubalk">
<!-- logo -->
<a href="../index.html" class="logo-link">
<div class="logo"></div>
</a>
<ul class="menu" id="basic-menu">
<li>Terug</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
"use strict";
$("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;
});
}
});
});
The problem is the condition in your JavaScript code. if (this.hash !== "") { will evaluate to true for every link that contains a hash, not just the ones on your current page.
Instead you could use:
if (this.attributes.href.value.substr(0, 1) === '#') {
Additionally, I would not use that jQuery script for smooth scrolling at all. There is a W3 standard that already works in some browsers (e.g. Firefox). And for the browsers that do not support it, you can use a polyfill (e.g. iamdustan/smoothscroll).

Smooth scrolling onclick of li element

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.

How do disable JavaScript inside an div?

I have an problem with my JavaScript and I'm not sure how to deal with it.
So I'm using this script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 700);
return false;
});
});
The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.
But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:
<div id="images">
<img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
<img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
<img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.
Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?
I think my "href" is the problem.
So.. Here it is in fiddle:
http://jsfiddle.net/62dsqLff/
and you can see the problem.
Really thanks. I appreciate it :-)
Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.
$('a.nav').click(function () {
alert( $($(this).attr('href')).offset().top);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 700);
// return false;
});
Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element. Also prevent default action if you are using an a as a button. The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.

JAVASCRIPT - script conflicts?

I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?
My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.
Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))

.slideToggle auto scroll down to reveal content

I am using .slideToggle to open a panel when the user clicks a link:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
The content of the toggled div (#panel) is taller than the height of the containing div so scorllbars show up. I would like the vertical scrollbar to automatically scroll down to the reveal the new content when the div gets toggled. I think I could probably do this with .scrollTop to make this happen but Im not sure how to go about making it happen at the same time... Any ideas?
EDIT:
There seems to be a consensus that this is the best way to go about achieving what I described:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
var $panel = $("#panel");
$panel.slideToggle("slow");
if ($panel.is(':visible')){
$panel.parent().scrollTop($panel.height()-$panel.parent().height());
}
$(this).toggleClass("active");
return false;
});
});
</script>
This makes the panel slide but the scroll down effect isn't working..
I've done something like this before:
$(".btn-slide").click(function(event){
if ( $(this).hasClass("active"))
{
$(this).removeClass("active");
$("#panel").slideUp("slow");
}
else
{
$(this).addClass("active");
$("#panel").slideDown("slow");
var destination = $("#container ").offset().top + $("#container").height();
$("#container").animate({ scrollTop: destination},"slow");
//or
//$("#container").animate({ scrollTop: destination},"slow", "fx_name_here");
}
event.preventDefault();
});
Html:
Fire Panel
<div id="container">
<div id="panel">sdfsdfsdfs</div>
</div>
Would that help you?
EDIT:
If you download the jQuery Easing Plugin you can add different effects to the sliding, adding the fx name into the code (commented out line in answer)
Improved code so there is less code but same effect.

Categories

Resources