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!
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
I have a website with only one page. In nav bar, there are a links which leads to certain part of page. I'm using this code to help me with smooth scrolling and changing active a tag in nav bar:
$(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
}, 800, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#nav-bar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#nav #nav-bar ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
Everything work fine. But I have one problem. If you click on one page from nav bar, for example "About us", in url appears "/#about" from anchor id.
I would like to remove it, because I have only one page and it doesn't looks good.
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:
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>
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");
}
});
}