I have a little piece of javascript to support couple of functions such as navigation on my jquery slider. Recently I have noticed that when you click on the navigation button it does what it suppose to do but also creates an extra character in URL "#". I have checked the script and found where and why it is being added, but how to fix it's not added when navigation is clicked, I have no idea. is there any chance that someone can help or at least point me to the right direction. Please see the full code below
var fadeTimer;
var slideSpeed = 8000;
jQuery(document).ready(function() {
// add nav buttons
var slideCount = jQuery('#fader ul li').length;
var randomnumber=Math.floor(Math.random()* slideCount);
for ($i = 0; $i < slideCount; $i++) {
jQuery('#faderNav').prepend('<a href="#"><\/a>');
}
jQuery('#faderNav a').eq(randomnumber).addClass('active');
jQuery('#fader ul li').eq(randomnumber-1).addClass('active');
var next = jQuery('#fader ul .active').next();
if (next.length > 0) {
} else {
var next = jQuery('#fader ul li:first');
}
jQuery('#fader ul .active').fadeOut().removeClass('active');
next.fadeIn().addClass('active');
// work out nav width
var navBtn = jQuery('#faderNav a');
var navBtnWidth = navBtn.outerWidth(true);
var navWidth = navBtn.length * navBtnWidth;
// set nav width
jQuery('#faderNav').width(navWidth);
// add negative margin to center the nav
var negMarg = navWidth / 2;
jQuery('#faderNav').css({'margin-left':'-'+negMarg+'px'});
// start timer
var fadeTimer = setInterval("faderTimer()", slideSpeed);
jQuery('#faderNav a').live('click',function() {
clearInterval(fadeTimer);
var index = jQuery(this).index('#faderNav a');
jQuery('#faderNav a').removeClass('active');
jQuery('#faderNav a').eq(index).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
jQuery('#fader ul li').eq(index).fadeIn('slow').addClass('active');
});
});
// FADE FUNCTION
function faderTimer() {
var next = jQuery('#fader ul .active').next();
if (next.length > 0) {
} else {
var next = jQuery('#fader ul li:first');
}
var navIndex = next.index('#fader ul li');
jQuery('#faderNav a').removeClass('active');
jQuery('#faderNav a').eq(navIndex).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
next.fadeIn('slow').addClass('active');
}
A click on an anchor with href="#" will add the hashsign to the url.
Use preventDefault or return false:
jQuery(document).on('click', '#faderNav a', function(e) {
e.preventDefault();
clearInterval(fadeTimer);
var index = jQuery(this).index('#faderNav a');
jQuery('#faderNav a').removeClass('active');
.eq(index).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
jQuery('#fader ul li').eq(index).fadeIn('slow').addClass('active');
});
$(document).on("click", "a[href=#]", function(e) {
e.preventDefault();
});
http://jsfiddle.net/RhNDB/show/
Add a return false; to the end of your click handler. This will prevent the page from navigating to the href attribute's value.
Related
I have this HTML page:
https://shibbir.dev/demo-work/html-one-page/
On this page, you will see a second sticky sidebar whose title is "Credit ipotecar"
In this sidebar, I have a few li elements. If you click on any li element you will scroll down to the corresponding div on the right side.
But the problem is I can see only a few li elements on the sidebar thus I can't click on other li elements to see another corresponding div.
So, how can I make the last li element scroll up once I click on the last viewable li element?
Something like this example:
https://discount.ro/cataloage/pepco-ro/cupon-de-reducere-pepco-colectia-de-rochii-din-bumbac-organic-02-15-iunie-2022-16353/#section11
My JS Code:
(function ($) {
"use strict";
$(document).ready(function () {
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
var navigate = document.querySelector(".sh-body-container div").offsetTop
$(".sh-body-container div").each(function (index) {
var elTop = $(this).offset().top;
var elHeight = $(this).height();
if (scrollBar >= elTop - navigate && scrollBar < elTop + elHeight) {
$(".sh-body-sidebar ul li").eq(index).addClass("sidebarActive").siblings().removeClass("sidebarActive");
}
});
});
$(".sh-see-more").click(function(e){
e.preventDefault();
var that = $(this);
that.prev(".sh-see-more-details").toggleClass("is-active");
});
$(".hide-show").click(function(e){
e.preventDefault();
var that = $(this);
var plusSign = that.children("a").text();
if( "+" == plusSign ) {
that.children("a").text("-");
} else {
that.children("a").text("+");
}
var faq = that.next(".sh-faq-answer").toggleClass("faq-active");;
});
$(".sh-mobile-calculator-icon").click(function() {
$(".sh-calculator").addClass("show-calculator");
$(".show-filter").show();
$(".show-filter a").click(function() {
$(".sh-calculator").removeClass("show-calculator");
});
});
});
})(jQuery);
I wasn't sure exactly how to phrase this question, so here's the details:
This little thing I've written up here: https://jsfiddle.net/f8thL83r/1/
works great, as long as you only want to show elements in the top menu.
Click on anything under "Graphic Design", and it won't display anything in the pane to the right. Why is it working for the first category and not the second?
Here's some code. I know the way I've done this is probably awful, but I'm just beginning to find my feet with jQuery.
$('#Menu h3').click(function () {
$("#Menu ul ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index()); //index of the li to show
var i = $(this).parent().parent().parent().index(); //index of the ul to show
$currPage = $('#ServMain .list' + i).find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});
It seems other HTML elements of the selected page are not visible.
Below code should fix them
$('#Menu ul ul li a').click(function (e) {
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain ul').not('.list'+i).hide();
$lastPage = $('#ServMain .list' + i).find('.page' + j);
$lastPage.parent().show();
$lastPage.show();
$lastPage.find('div').show();
});
DEMO
The problem is the ul.list is hidden
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain > ul').not('.list'+i).hide();
$currPage = $('#ServMain .list' + i).show().find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});
Demo: Fiddle
I made a simple code :
JSFiddle: http://jsfiddle.net/xmocartx/sr194nsb/4/
The problem is that when you hover the mouse fast blocks mixed.
In Jquery I am a newbie. Please tell me how to fix this? Thank you.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval)
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenu ul li").removeClass("active");
$(this).addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});
give this a try.
This should fix the display Issue while preserving the 500 sec fade in.
It basically clears the display contents when moving the mouse fast so you dont get the messy transitions.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval);
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
$(".slideMenu ul li").removeClass("active");
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item").stop().fadeOut(500);
$(".slideMenuCont .item").css("display","none");
$(this).addClass("active");
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});
Update: trying Combining both $(".slideMenuCont .item").stop().fadeOut(500); and
$(".slideMenuCont .item").css("display","none");
Here's the FIDDLE.
List item that appears on clicking the up and down arrows.
When I click on it. It appears instantly which I don't want it to be like that.
I wanted to add a transition to it but I don't have any clue whether to apply it on a li or a tag.
Besides I'm here hiding and revealing li items on click. But I need the transition like when I click on the up arrow, I want the hidden element to push the active element downwards and vice versa.
Someone help me in this.
I updated your FIDDLE
you may check it out.
var
cur = 2,
$container = $('.dropdown-container'),
$ul = $('.dropdown'),
$ul_length = $('.dropdown li').children().length,
$up = $('.up'),
$down = $('.down'),
changeLi = function (cur) {
var $cur_li = $('.dropdown li:nth-child(' + cur + ')');
$('.current_selected').removeClass('current_selected');
$cur_li.addClass('current_selected');
$container
.height($cur_li.outerHeight())
.width($cur_li.outerWidth());
$up.offset({
left: ($container.outerWidth() - $up.outerWidth()) / 2
});
$down.offset({
left: ($container.outerWidth() - $down.outerWidth()) / 2
});
$ul.animate({
top: -$cur_li.position().top
}, 200);
};
$up.on('click', function () {
cur--;
if (cur < 1) {
cur = 1;
return false;
}
changeLi(cur);
});
$down.on('click', function () {
cur++;
if (cur > $ul_length) {
cur = $ul_length;
return false;
}
changeLi(cur);
});
changeLi(cur);
You can add animatation like slideUp, slideDown etc.
var cur = 2;
$('.up').click(function() {
if(cur <= 0) return;
var last = cur;
cur --;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});
$('.down').click(function() {
if(cur >= $('.dropdown li').length - 1) return;
var last = cur;
cur ++;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});
I want the menu items to look like they are selected when you are scrolling through certain sections of a single page website
I tried capturing the position of each element and store it in a variable and then apply a class when the top of that element passes the top of the page.
Java Script:
var blockone = Math.abs($("#one").position().top);
var blocktwo = Math.abs($("#two").position().top);
var blockthr = Math.abs($("#thr").position().top);
var blockfou = Math.abs($("#fou").position().top);
var blockfiv = Math.abs($("#fiv").position().top);
var blocksix = Math.abs($("#six").position().top);
function removeSelected() {
$('#menu li').removeClass('selected');
}
$("#frame").scroll( function() {
$("#menu li:nth-child(1)").addClass('selected');
var value = $(this).scrollTop();
if ( value < blocktwo ){
removeSelected();
$("#menu li:nth-child(1)").addClass('selected');
} else if (value < blockthr){
removeSelected();
$("#menu li:nth-child(2)").addClass('selected');
} else if (value < blockfou){
removeSelected();
$("#menu li:nth-child(3)").addClass('selected');
} else if (value < blockfiv){
removeSelected();
$("#menu li:nth-child(4)").addClass('selected');
} else if (value < blocksix) {
removeSelected();
$("#menu li:nth-child(5)").addClass('selected');
} else {
removeSelected();
$("#menu li:last-child").addClass('selected');
}
});
What am I missing? I have a working jfiddle here: http://jsfiddle.net/zer0ruth/pgbef/1/
The only problem is that you bind the scroll even on #frame while it should be on window.
But well, I saw that only after playing around with you code, so I have a free optimised code for you: http://jsfiddle.net/pgbef/15/.
Saving you position in array is better than having 6 var and you can had a section without changing code:
var position = [];
$('.block').each(function(){
position.push(Math.abs($(this).position().top))
})
Then your scroll function is way shorter too!
$(window).scroll( function() {
var value = $(this).scrollTop() + $('#menu').height();
$.each(position, function(i){
if(this > value){
$('.selected').removeClass('selected');
$("#menu li").eq(i-1).addClass('selected');
return false;
}
})
});