Develop Reference

Divi - Slide Navigation On Button Optimisation

I have a slide navigation script that allows me to navigate to a particular slide using an "nth-child(#) that triggers a click event.
Each button currently has its own slide reference, i.e Slide-1 button will link to nth-child(1) and so forth through to slide/button 8
I am looking for ways to optimise the below script using a loop or something similar so that it is more manageable and still keeps the same functionality.
<script>
jQuery(document).ready(function( $ ) {
var selector = '.activelinks a';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
$("#Slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});
$("#Slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});
$("#Slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
$("#Slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
$("#Slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});
$("#Slide-6").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(6)").trigger("click");
});
$("#Slide-7").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(7)").trigger("click");
});
$("#Slide-8").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(8)").trigger("click");
});
});
</script>

you can give a class to all slide buttons like : slideBtn
then :
jQuery(document).ready(function ($) {
var selector = ".activelinks a";
$(selector).on("click", function () {
$(selector).removeClass("active");
$(this).addClass("active");
});
$(".slideBtn").on("click", function (e) {
e.preventDefault();
var slideNumber = e.target.id.replace( /^\D+/g, '');
$(".et-pb-controllers a:nth-child("+slideNumber+")").trigger("click");
});
});

jQuery combine 2 scripts to achieve smooth scrolling to anchor

I have the following jquery function which shows / hides content depending on the div that is selected...
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
http://jsfiddle.net/W4Km8/7944/
I also have the following script taken from http://1stwebmagazine.com/jquery-scroll-to-anchor-point
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am trying to combine the 2 so that instead of jumping to the anchor it scrolls to it. Do I need to combine them or can they be made to work separate?

Looks like you can combine them easily enough, I've made it work with this jsfiddle: http://jsfiddle.net/9soxbhpj/
var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
'scrollTop': target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = selector;
});

You can add the scroll action in the same click call.
See the js:
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
var _el = jQuery(this),
_target = jQuery('#div' + _el.data('target')),
_targetDiv = jQuery('.targetDiv');
_el.addClass('selected').siblings().removeClass('selected');
_targetDiv.hide();
_target.show();
// Scroll to object
$('html, body').animate({
scrollTop: _target.offset().top
}, 800);
});
});
Here is a working example.

How to make an exceptions in Jquery

First of all: I'm a Jquery newbie :-)
I've implemented this "smooth scroll" effect to the internal links on my website so when I use # in a href (like a href="#footer") it makes the effect:
$(document).ready(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
console.log("Denne funktion fanger #");
console.log(event);
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
And I'm using this script to fade between pages so everytime I click an external link it makes the fade effect to that given page.
$(document).ready(function() {
$("body").css("display", "none");
});
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
});
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
But I do not want the fade effect on the internal links where I use the smooth scroll effect. How do I write an exception in the above script so it ignores the fade effect-script where I use the #?
Thank you!

You can use a not() with a "startswith".
$("a:not([href^='#'])").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});

You can just fitler out the elements.
$("a").not("[href^='#']").on("click", function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});

how to solve this Jquery error?

I have made some Jquery that you can see with this fiddle below:
http://madaxedesign.co.uk/dev/Test/
http://jsfiddle.net/x82mU/1/
Code:
$(document).ready(function() {
var $root = $('html, body ');
$('.scroll a').click(function(e) {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
// Responsive menu
$(function() {
var pull = $('#pull'),
menu = $('nav ul'),
menuHeight = menu.height()
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
});
But it pulls through with this error:
Uncaught TypeError: Cannot read property 'top' of undefined
This is preventing my next piece of Jquery to work.
I was wondering if anyone could let me know why, or give me a solution?
Many Thanks

You are trying to get the selector from href which isn't there in many of your menu items.
i.e:
<li>Home</li>
<li>About us</li>
<li>Portfolio</li>
<li>Contact us</li>
and
$(href).offset().top //here offset() of an empty jquery object is undefined.
Not an issue but you can just do this.href instead $.attr(this, 'href')
Try this:
$('.scroll a').click(function(e) {
var href = $(this).attr("href"), $el = $(href), top=0; //default top to 0
if($el.length) //if there is element matching the href
top = $el.offset().top; //set the top
$root.animate({
scrollTop: top //now scroll
}, 500, function () {
window.location.hash = href;
});
return false;
});
Fiddle

var href = $(this).attr('href');
update as comment
for
scrollTop: $(href).offset().top
to work, the
href
variable has to be an element on page.
so if your link is like
...
it will be fine.
jquery dom object creation
$(dom_element)
targets html tags, classes, id's or existing Dom objects ( window, document .. )

Is there a more elegant way to write this in javascript?

$(function () {
$('#button').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
400);
return false;
});
$('#top').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
400);
return false;
});
});
I'm using that code to scroll to the bottom/top of the page. I'm wondering if there is a better way to write that? I'm new to jquery so I'm not sure but I've heard using event.preventDefault() may be better instead of return false? If so, where would I insert that?

How about just using a ternary to select the scroll? eg
$(function () {
$('#button').add('#top').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='button') ? $(document).height() : '0px')
},
400);
return false;
});
});
JSFiddle for this code here
You could make this better by adding a class eg 'navButton' to each of these buttons and then using that as the selection ie $('.navButton') - This will eliminate the .add() call.
Also I'd recommend giving the bottom button the id bottom rather than button :) eg
$(function () {
$('.navButton').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='bottom') ? $(document).height() : '0px')
},
400);
});
});

Sure:
$(function() {
var map = {'#button': $(document).height, '#top': '0px'};
jQuery.each(map, function(k, v) {
$(k).click(function() {
$(document.body).animate({
scrollTop:(typeof v === 'function') ? v() : v
},
400);
});
});
});

According to jQuery manual return false and preventDefault does different things:
Example: Cancel a default action and prevent it from bubbling up, return false:
$("a").live("click", function() { return false; })
Example: To cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){
event.preventDefault();
});
So preventDefault is more limited.

Using a specialized plugin jquery.scrollTo.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
Makes code nice and easy
$(function() {
$('#button').click(function() {
$.scrollTo('max', 400);
return false;
});
$('#top').click(function() {
$.scrollTo(0, 400);
return false;
});
});
Demo: http://jsfiddle.net/disfated/mkZp3/
Also if you want a more flexible code, you could do something like
$(function() {
$(document).on('click', '[data-scroll]', function(e) {
e.preventDefault();
$.scrollTo($(this).data('scroll'), jQuery.fx.speeds._default);
});
});
Then, define scroll behaviour directly in html, example
<button data-scroll="max">scroll to page bottom</button>
<button data-scroll="0">scroll to page top</button>
<button data-scroll="#my_selector">scroll to #my_selector element</button>
Demo: http://jsfiddle.net/disfated/Sj8m7/