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>
Related
I have a code that will active the anchored link everytime I scroll but instead of the a href to be active I want the li before the link here is my code
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('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);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.left-nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.left-nav a li').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Any one can help me solve this problem?
Within $('.left-nav a').each(function () { you need to traverse up to the li
Store the parent li
var currLink = $(this);
var currParent = $(this).closest('li');
and replace currLink.addClass and currLink.removeClass with currParent.addClass and currParent.removeClass
and let me tell you in advance that the no-conflict script didnt work either, my issue is this:
I have a site that i made, i made some animations for it, using the animate library and some other animations
$(document).ready(function ($) {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('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
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.nav-ul-home a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.navbar-home ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-home").addClass("navbar-section");
$(".nav-ul-home").addClass("nav-ul-section");
}
else{
$(".navbar-home").removeClass("navbar-section");
$(".nav-ul-home").removeClass("nav-ul-section");
}
});
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
// more then one submenu open?
this.multiple = multiple || false;
var dropdownlink = this.el.find('.dropdownlink');
dropdownlink.on('click',
{ el: this.el, multiple: this.multiple },
this.dropdown);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
//this is the ul.submenuItems
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple) {
//show only one menu at the same time
$el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('.accordion-menu'), false);
})
and this is my animations script
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#texto p').offset().top;
$('#texto p').toggleClass('animated fadeInUp', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in img').offset().top;
$('in img').toggleClass('magictime tinRightIn', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in p').offset().top;
$('in p').toggleClass('magictime puffIn', isVisible);
});
I only put some of it cause it basically repeats its self for every case....
now... I have links to both jquery and jquery-min i need the jquery for this code and the jquery-min for the contact form, the problem is that when i have both links the animations dont work...
if i remove the jquery-min link everything is fine but the contact form doesnt work...
maybe if someone has a contact form template that has JS but doesnt need jquery-min the problem is solve..
sorry for my aqward way to post im prety new here.
thanks!
As a beginner developer I'm trying to make a portfolio. I've added a little bit of code so that url changes on scroll. Active class also depends on this. Now while my code works fine on localhost, it stopped working after I uploaded it. I'd really appreciate some help. Code is like this:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('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);
});
});
});
$(document).bind('scroll',function(e){
$('section').each(function(){
if (
$(this).offset().top < window.pageYOffset + 10
&& $(this).offset().top + $(this).height() > window.pageYOffset + 10
) {
window.location.hash = $(this).attr('id');
}
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.sidebar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.sidebar ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
and this is the website:
I've tried to do this myself but I guess I'm not skilled enough, I quit trying and came to ask for help.
I got this script for my menu on a one page website.
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
And it works perfectly as I want BUT I also have links throughout my website that I want them to do the same.
I did that myself but the 2 scripts were coliding with each other, it was applying the class active to the link as well. When I tried to reverse the situation, it was working but it wasn't applying the class active on the menu...
I was really confused and I also am not that much of a js/jquery programmer.
Could anyone have a suggestion for how to separate the scripts? For example here: <span>SOLICITE A NOSSA VISITA</span>. This sends the user to the div contactos but it doesn't animate and I want it to do so.
Any ideas?
EDIT: for this second script I don't want to apply any active class. Just slide to the desired div.
EDIT 2: I believe I wasn't clear. I want something like this
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
//OTHER LINKS
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
BUT the "OTHER LINKS" script will interfere with the menu script. I don't know if I'm doing things right, what I know is that the way I do, it is not working.
You can use addClass and removeClass instead of attr.
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
I have this code which I have had help with: http://jsfiddle.net/spadez/2atkZ/embedded/result/
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
} else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
$('body').css('padding-top', 0);
}
//active state in menu
$('.section').each(function(){
var eleDistance = $(this).offset().top;
if (currentScrollTop >= eleDistance) {
var makeActive = $(this).attr('id');
$('#select a').removeClass('active');
$('#select a.' + makeActive).addClass('active');
}
});
});
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
Currently the seconds are defined when the yellow bar is fully inside that section. I want to make it so when I click on a section on the yellow bar to go to, the yellow bar sits on top of it, rather than inside it at the top. Is there a simple and elegant way of doing this, whilst still allowing the code to set the active state on the section which sits below it.
This will do the work:
HTML
Instead of the anchors, use this:
<span data-sec="#posting" class="nav posting">posting</span>
<span data-sec="#distribution" class="nav distribution">distribution</span>
<span data-sec="#application" class="nav application">applicantions</span>
JS
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
} else if (currentScrollTop <= init) {
isFixed = false;
$select.css('position', 'relative');
$('#select span').removeClass('active');
$('body').css('padding-top', 0);
}
//active state in menu
$('.section').each(function(){
var eleDistance = $(this).offset().top;
if (currentScrollTop >= eleDistance-$select.outerHeight()) {
var makeActive = $(this).attr('id');
$('#select span').removeClass('active');
$('#select span.' + makeActive).addClass('active');
}
});
});
$(".nav").click(function (e) {
console.log('hej');
var divId = $(this).data('sec'); console.log(divId);
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
jsFiddle demo