I am currently learning jQuery. I am having some problems with the following code. I am trying to make my website move using some buttons, but once i click them it does not seem to work. Below is my jquery code.
jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if(direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if(mywindow.scrollTop() === 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
});
It would be great if anyone can help me solve my problem.
Put your script before the closing tag body (</body>) and include Jquery library
You may have conflictions of jquery try to use jQuery.noConflict() after adding any version of jquery like,
<script>
jQuery.noConflict();
</script>
Related
I want to add slidetoggle only when screen size is less than 768px. I also want this to work when user for some reason would resize the window manually.
I have come across a bug with jQuery where my dropdown menu will keep toggling after I resize the window. I've looked up this issue and tried adding return false; to click function and adding position: relative; overflow:hidden; to toggleable div(these should be a workaround according to some forums). No luck there. What causes this bug. I will include the whole function with the click function
//Call function on ready and window resize
$(document).ready(navigationMobile);
$(window).on('resize', navigationMobile);
function navigationMobile() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(".js-second-title").click(function () {
$(this).siblings('.js-menu').slideToggle();
$(this).toggleClass('js-open');
});
} else {
//Add href back to main link
$('.js-second-title').each(function () {
if ($(this).attr('href') === undefined) {
const allHref = $(this).siblings('ul').find('.js-all-link').attr('href');
$(this).attr('href', `${allHref}`);
$(this).siblings('ul').find('.js-all-link').remove();
}
});
}
}
Cheers!
I don't exactly know what is causing this bug. But I came up with this workaround.
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
$(this).addClass('js-closed');
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(document).on("click", '.js-second-title.js-closed', function (e) {
$(this).removeClass('js-closed');
$(this).siblings('.js-menu').slideDown();
$(this).addClass('js-open');
});
$(document).on("click", '.js-second-title.js-open', function (e) {
$(this).siblings('.js-menu').slideUp();
$(this).removeClass('js-open');
$(this).addClass('js-closed');
});
So here I am basically extening SlideToggle function. Before I call slide functions on click I give each js-second-title classes an extra class .js-closed so the browser is aware that the menu is closed. After that I call slideDown function when I click on closed menu title and slideUp when I click on open menu title.
I do not think that this is the best or most sematic solution so I would like to keep this topic open.
I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});
It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})
I have a sidebar and I have a button which toggles the sidebar on click. I have a jQuery function which does that. I have a new functionality now, where, if the sidebar is open and the user clicks any of the list items in the sidebar, it toggles back and some function will be excecuted.
The Problem:
When I click the li inside the sidebar, the toggle button is waiting for it's second click (my guess). So if I add toggle on clicking sidebar li, the main toggle button functionality breaks. How do I keep both without affecting each other. I hope I have made myself clear. Here is the code.
JS
// code for sidebar toggle in jQuery
$.fn.toggleClick = function () {
var methods = arguments,
count = methods.length;
return this.each(function (i, item) {
var index = 0;
$(item).on('click', function () {
return methods[index++ % count].apply(this, arguments);
});
});
};
//for opening sidebar
function openSidebar() {
$('#sg-evm-sidebar').animate({
left: 0
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 300
}, 300)
$('.content-overlay').delay(300).show();
}
//closing sidebar
function closeSidebar() {
$('#sg-evm-sidebar').animate({
left: -300
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 0
}, 300)
$('.content-overlay').delay(300).hide();
}
//$(".empName").on("click", function () {
// closeSidebar();
//});
// calling toggleclick here
$('.toggle-box').toggleClick(openSidebar, closeSidebar);
Here is a JS FIDDLE. I created it from my huge website. So please ignore broken images.
I've updated your fiddle: http://jsfiddle.net/qvksx30g/4/
I've added some basic logic
var sidebarOpen = false;
function toggleSidebar()
{
if (sidebarOpen)
closeSidebar();
else
openSidebar();
}
And then inside openSidebar and closeSidebar I set sidebarOpen.
I also no longer use toggleClick. Instead I'm using:
$(document).on('click', '.toggle-box', toggleSidebar)
.on('click', '.list li', closeSidebar);
You could keep track of the sidebar state (open or close) using a class on the sidebar wrapper ("close" or "open"), and then use this class to determine in your click listener if you have to call closeSidebar or openSidebar.
I am using bootstrap's scrollspy to change the navbar item highlighting on page scroll, and then using history.replaceState to add the hash to the url. This question gave me the idea for that part. I also use some jquery to implement a 'smooth scroll' when a navigation item is clicked and I turn the scrollspy off while 'smooth scrolling' down to the anchor, then add the hash to the url and turn scrollspy back on.
The scrollspy part is working fine, the problem comes when clicking on a navigation link. It works as expected in Chrome and Firefox, but in IE 10 & 11 it adds undefined before the hash in the url when clicking on a link and I can't work out why.
Here's my script:
//initiate scroll spy
$('body').scrollspy({ target: '.spy-active', offset: $offset + 1 });
$('.spy-active').on('activate.bs.scrollspy', function (e) {
if (history.replaceState) {
history.replaceState(null, "", $('a[href*=#]:not([href=#])', e.target).attr("href"));
}
});
//smooth scroll
$('a[href*=#]:not([href=#])').click(function (e) {
e.preventDefault();
//deactivate scrollspy for duration of transition
$('nav').removeClass('spy-active');
//remove active class from all list items
$('li').each(function () {
$(this).removeClass('active');
});
//add active class to clicked item
$(this).parent().addClass('active');
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - $offset
}, 500, 'swing', function () {
if (history.replaceState) {
history.replaceState(null, "", target);
}
//reactivate scrollspy
$('nav').addClass('spy-active');
});
});
my site is here
This line is executed in IE right when you click on a navigation link:
history.replaceState(null, "", $('a[href*=#]:not([href=#])', e.target).attr("href"));
If no links are found inside e.target the result for .attr("href") is undefined. So you'll need to check if the link is found and then call history.replaceState:
var matchLink = $('a[href*=#]:not([href=#])', e.target);
if(matchLink.length) {
history.replaceState(null, "", matchLink.attr("href"));
}
I've got an accordion with arrow icons indicating when a section is open and closed. Once the accordion is opened the arrow points down showing the content below it.
However I've created a close button that gets appended into each section. This sits at the bottom of every section in the accordion.
I want it so that once the close button is pressed the arrow changes it's state back to closed.
$(function() {
$('#accordion h3').each(function(){
var $set = $(this).nextUntil("h3");
$set.wrapAll('<div />');
});
$('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
$('#accordion h3.ui-accordion-header').click(function(){
var _this = $(this);
$('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
_this.next().slideToggle();
return false;
});
$('.ui-accordion-content').append('Close<div class="clearfix"></div>');
$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
$(this).parent().slideUp('slow', function(){
$(window).scrollTop(theOffset.top - 50);
var hidecollapsebutton = true;
$('.ui-accordion-content').each(function(){
if($(this).css('display') == 'block')
{
hidecollapsebutton = false;
}
});
if(hidecollapsebutton)
{
$('.accordion-expand-all').show();
$('.accordion-collapse-all').hide();
}
});
return false;
})
});
Any help would be much appreciated. I can provide more information if it's needed. Thanks.
http://jsfiddle.net/EZT6A/
$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
As you could have found out yourself with a little simple debugging, $(this).closest('.ui-accordion-content') does not match any element here. (That’s because your close button is within div.ui-accordion-content, and the h3.ui-accordion-header is the previous sibling of that div element.)
Simple to fix: Go up to parent div (.ui-accordion-content), get previous h3 (.ui-accordion-header), and then the span (.ui-accordion-header-icon) element within it:
$(this).parents('.ui-accordion-content')
.prev('.ui-accordion-header')
.find('.ui-accordion-header-icon')
.removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-e');
http://jsfiddle.net/EZT6A/2/
I'd try changing click to on:
$(document).on("click", ".close", function(){
//change arrow state
});
It's because not every .close element exist as you binding click event.