I have a list where are li with triger id. I need, when you click on li you scroll down the page to the container with the same id. I have this script, but, when I click on liyou scroll on the top page.
(function($) {
$(function() {
var lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop+="<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop+="</ol>";
$('.listofparticipants').html(lop).show();
$(".listofparticipants ol li").click(function() {
var extraspace = $('header#header').height()+$('#wpadminbar').height()+$('#wpfront-notification-bar').height();
extraspace = extraspace+40;
$('html, body').delay(2000).animate({scrollTop: $("#"+$(this).attr('data-trigger')).offset().top-extraspace }, 1000);
});
});
})(jQuery);
You can try this
$(function() {
let lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop += "<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop += "</ol>";
$('.listofparticipants').html(lop).show();
$(document).on("click", ".listofparticipants ol li", function() {
var extraspace = $('header#header').height() + $('#wpadminbar').height() + $('#wpfront-notification-bar').height();
extraspace = extraspace + 40;
$('html, body').delay(2000).animate({scrollTop: $("#" + $(this).attr('data-trigger')).offset().top - extraspace}, 1000);
});
});
Related
I've been designing a web infographic with some animations within the page. So I added some JavaScript code in order to trigger the animations as the user reaches them on screen.
My question is how to add many div names in a JavaScript sentence?
The name of the div is "box_info_a", I just need to add some more, but have no idea how.
This is the code:
$(function()
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) {
$('.revealOnScroll').addClass('box_info_a');
}
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.box_info_a)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function() {
$this.addClass('box_info_a ' + $this.data('animation'));
}, parseInt($this.data('timeout'), 10));
} else {
$this.addClass('box_info_a ' + $this.data('animation'));
}
}
}); // Close Showed...
// Hidden...
$(".revealOnScroll.box_info_a").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('box_info_a lightSpeedIn')
}
});
}
revealOnScroll();
});
Just do this:
$(document).ready(function () {
$('#trigger').click(function () {
$('#target').addClass("oneClassToAdd anotherClassToAdd");
});
});
All you have to do is put two classes in the parentheses.
I do have a strange problem with my jquery script on the following site: http://www.zugestellt.com
When I scroll down or up, the current area is highlighted correctly in menu (added class "current-menu-item").
Now the strange thing:
If I choose a menu item by click the class "current-menu-item" isn't deleted anymore from the menu item that I clicked.
Here is my code:
(function($){
var lastId,
topMenu = $("#header #menu"),
topMenuHeight = topMenu.outerHeight() + 15,
menuItems = topMenu.find("a"),
scrollItems = menuItems.map(function(){
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var item = $( $(href) );
if (item.length) { return item; }
});
menuItems.parents('li').removeClass("current-menu-item");
$(document).on('click', "#header #menu a" ,function(e) {
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function(){
var fromTop = $(this).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length-1];
var id = '';
if(cur && cur.length) {
id = $.grep(cur[0].className.split(" "), function(v, i){
return v.indexOf('scroll-') === 0;
}).join();
}
if (lastId !== id) {
lastId = id;
var new_url = id.replace('scroll-','/#');
menuItems
.parents('li')
.removeClass("current-menu-item")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");
}
});
})(jQuery);
Now,if you are wondering why I don't work with hashes to choose the right section, this is a template from themeforest and the sitebuilder from this theme doesn't allow to add ids but classes.
Hope anyone can help me.
when you click again on menu it add .sfHover class .. So you need to remove it as well .. try this
menuItems
.parents('li')
.removeClass("current-menu-item")
.removeClass("sfHover")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");
Good afternoon,
I'm trying to make jquery lavalamp effect working, but I've got stucked at one point. When I click on an item, it's marked as active, it changes color, but the arrow under menu doesn't stay under the active one and every time returns out of the page. There is my code, where is set what happens with arrow while hover and while active. I must edit settings for active, but I have no idea how...
Thanks for all your advices! (btw. page with problem - www.idealcars.cz)
EDIT: OK I've solved problem with arrow place after click, but there is still issue that arrow doesn't change her place during scrolling.
Here is my code now, the "scroll" part doesn't work.. Any help please?
var foundActive = false, activeElement, indicatorPosition, indicator = $('#cssmenu #menu-indicator'), defaultPosition, storage;
$("#cssmenu > ul > li").each(function() {
if ($(this).hasClass('active')) {
$(this).addClass('active');
activeElement = $(this);
foundActive = true;
} else {
}
});
if (foundActive === false) {
activeElement = $("#sipka").first();
}
defaultPosition = indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
storage = defaultPosition;
console.log(activeElement);
console.log(activeElement.position().left);
console.log(activeElement.width());
indicator.css("left", indicatorPosition);
$("#logo").hover(function() {
activeElement = $("#sipka");
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
indicator.css("left", indicatorPosition);
},
function() {
indicator.css("left", defaultPosition);
});
$("#logo").click(function () {
//reset the selected item
activeElement = $("#sipka").first();
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
});
function scrollOn(event){
var scrollPos = $(document).scrollTop();
$('#cssmenu > ul > li').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
activeElement = currLink;
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
}
else{
}
}
);
}
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
indicator.css("left", indicatorPosition);
},
function() {
indicator.css("left", defaultPosition);
});
$("#cssmenu > ul > li").click(function () {
activeElement = $(this);
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
});
Hi #Hynek I have done some fixes in your script as per your previous question (that was deleted)try with the following script hope this might help.
<script>
var is_click = 0;
var anchor_name = '';
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
is_click = 1;
anchor_name = $(this).html();
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
$('#cssmenu ul li').on('click', function (e) {
is_click = 1;
anchor_name = $(this).find('a').html();
});
$('a[href^="#"]').blur(function() {
addPointer();
});
$('#cssmenu ul li').blur(function() {
addPointer();
});
});
function addPointer(){
$('#menu-indicator').removeAttr('style');
$('.menu-indicator').removeAttr('style');
if(anchor_name == 'O nás'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 622px;');
$('.menu-indicator').attr('style', 'left: 622px;');
}else if(anchor_name == 'Ceník') {
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 713.5px;');
$('.menu-indicator').attr('style', 'left: 713.5px;');
}else if(anchor_name == 'Služby'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 809px;');
$('.menu-indicator').attr('style', 'left: 809px;');
}else if(anchor_name == 'Kontakt'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 912px;');
$('.menu-indicator').attr('style', 'left: 912px;');
}
}
</script>
Can someone please put me out of my misery and 'fix' or 'solve' my issue: as you can see via my JSfiddle link
http://jsfiddle.net/SJkmh/312/
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
I can't seem to get it to work - all I want to do is change the colour of the link text to identify what section of the page the user is on. please help me?
Thanks in advance
UPDATE : Select menu item on scroll
[UPDATED] jsFiddle : http://jsfiddle.net/thecbuilder/Qtjx6/2/
added js
$(window).scroll(function () {
// Get container scroll position
var topHeight = $(this).scrollTop() + h + 10;
var onTopId;
$(".testx").each(function () {
var curTop = $(this).offset().top;
var curBottom = curTop + $(this).height();
if (curTop < fromTop && curBottom > topHeight) {
onTopId = $(this).attr("id");
}
});
$selLink.removeClass("selected");
$selLink = $("a[href=#"+onTopId+"]").addClass("selected");
});
This should do the task : http://jsfiddle.net/thecbuilder/Qtjx6/
js
var $selLink = $("ul li a");
$(function(){
$("ul li a").click(function(){
$selLink.removeClass("selected");
$selLink = $(this);
$selLink.addClass("selected");
});
});
css
.selected{
color : #4B85C3;
}
You are checking the offset of the links not the content sections. Working fiddle:
http://jsfiddle.net/SJkmh/315/
$(document).scroll(function () {
var h = $("#main-menu").height() * 1.5;
var link1 = $("#home").offset().top;
var link2 = $("#about").offset().top;
var link3 = $("#work").offset().top;
var selectedColor = "#4B85C3";
var defaultColor = "#2e375b";
var top = $(this).scrollTop() - h;
$("#main-menu li a").css('color', defaultColor);
if (top <= link1) {
$("#link1").css('color', selectedColor);
} else if (top <= link2) {
$("#link2").css('color', selectedColor);
} else {
$("#link3").css('color', selectedColor);
}
});
The way to do this would be to reset the color of all the links, and then set the color of the $(this) to the new color
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
$('a.scroll').css({"color": "#2e375b"});
$(this).css({"color": "#4B85C3"});
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
});
JSFiddle
hi I tried to show the div (blue one) on mouseenter but only then, when ul has class hidden.
I have done it but how i dont know how can i bind again function which will show the blue div on mouseenter ..
To test it hover on the white li, then click the violet button and try to hover white li again - in the last step should show blue li but ii wont :(
this is my fiddle
fiddle
$(document).ready(function(e){
$('li').each( function() {
var elem_number = $(this).index();
$(this).html(elem_number + 1);
});
$('.left-panel-toggle').on('click', function () {
if($('ul').hasClass('hidden')) {
$('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
$('li').animate({height:'100px',width:'150px'}, 200);
$('li').unbind("mouseenter");
} else {
$('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
$('li').animate({height:'30px', width:'30px'}, 200);
}
});
$( "li" ).bind('mouseenter',function(e) {
if($('ul').attr('class') == 'hidden') {
$('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
var tooltip_height = $('.tooltip').height();
var tooltip_width = $('.tooltip').width();
var viewHeightY = $(window).height();
var li_position = $(this).position();
var li_height = $(this).height();
var li_width = $(this).width();
var tooltip_position = $('.tooltip').position();
var tt = tooltip_position.top + tooltip_height
if(li_position.top < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - li_position.top, 'left':li_position.left + li_width + 15});
}
if(li_position.top > tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top -((li_position.top + tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});
}
}
// $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault();
});
$( "ul" ).bind('mouseleave', function() {
$('.tooltip').animate({'left':'56px','opacity':'0'},60);
});
});