i've got problem with scroll script for menu on my github page. Each browser constantly block js script due to pop-up window. Everything works like a charm on localhost and mobile devices like tablet or smartphone
There's code and i am wondering how to fix that issue cuz its just nav scroll script with anchors and i have no idea why whole browsers are recognizing it as pop-up window
$(function() {
$('#sidenav a').click(function (e) {
e.preventDefault();
simpleScrollTo($(this).attr('href'), 500);
});
$(window).scroll(function() {
var ds = $(document).scrollTop();
if (ds == 0) {
$('#sidenav a').removeClass('active');
$('#sidenav a[href=#' + $('.anchor').eq(0).attr('id') + ']').addClass('active');
return false;
}
$('.anchor').each(function() {
var $this = $(this), offset = Math.round($this.offset().top), height = $this.outerHeight() + offset;
if (offset <= ds && height > ds) {
$('#sidenav a').removeClass('active');
$('#sidenav a[href=#' + $this.attr('id') + ']').addClass('active');
if (document.location.hash != '#' + $this.attr('id')) {
var cds = $(document).scrollTop();
document.location.hash = $this.attr('id');
$(document).scrollTop(cds);
}
return false;
}
return true;
});
return true;
});
var ds = $(window).scrollTop();
if (ds == 0) {
$('#sidenav a').removeClass('active');
$('#sidenav a[href=#' + $('.anchor').eq(0).attr('id') + ']').addClass('active');
} else {
$('.anchor').each(function() {
var $this = $(this), offset = Math.round($this.offset().top), height = $this.outerHeight() + offset;
if (offset <= ds && height > ds) {
$('#sidenav a').removeClass('active');
$('#sidenav a[href=#' + $this.attr('id') + ']').addClass('active');
return false;
}
return true;
});
}
if (document.location.hash != '') {
var el = $(document.location.hash);
if (el.length > 0) {
$(window).scrollTop(0);
$(window).load(function() {
simpleScrollTo('#' + el.attr('id'), 1000);
});
}
}
});
function simpleScrollTo(element, speed) {
$('html:not(:animated), body:not(:animated)').animate({scrollTop: $(element).offset().top}, speed, function() {
document.location.hash = $(element).attr('id');
});
}
I've forgotten to mention. My github page is shown as "unsafe". When i allow to use unsafe script then it works. Is it caused by Github security restriction?
Solved, hadn't noticed there was "http" link for jquery instead of "https" :)
Related
var tab = null;
var menuSelector = null;
jQuery(function ($) {
console.log('test');
//howtos tab
function changeMenuSelector() {
if ($( document ).width() > 967) {
menuSelector = 'top-menu-nav';
} else {
menuSelector = 'mobile_menu';
}
}
changeMenuSelector();
$( window ).resize(function() {
changeMenuSelector();
});
$('#'+menuSelector+' a[href*="howtos"]').on('click', function(event){
var e = event;
var $ = jQuery;
setTimeout(function () {
e.preventDefault();
console.log('pluto');
window.localStorage.setItem('tab', 'et_pb_tab_0');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
window.localStorage.removeItem('tab');
}
},1000);});
$('#'+menuSelector +' a[href*="projects"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_1');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="reviews"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_2');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="elearning"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_3');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="others"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_4');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
if (!!localStorage.getItem('tab')) {
tab = localStorage.getItem('tab');
console.log(tab);
setTimeout(function(){$("li."+tab+">a")[0].click();}, 1)
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
localStorage.removeItem('tab');
}
});
I have created a script to show tabs in Divi when you click on a menu entry. Divi does not use ids and hrefs for this, so I had to use a script.
The problem that I am facing is that this script that I made does not work with Divi's mobile menu.
I checked if menuSelector changed properly and if changeMenuSelector got executed as expected.
Furthermore, $('#'+menuSelector+' a[href*="howtos"]').length returns 1 in console and if I run $('#'+menuSelector+' a[href*="howtos"]')[0] in console I obtain the expected DOM element whehter I have the browser window sized for mobile or for desktop devices.
I also tried using setTimeout in case the issue was that it needed some time to accomplish an earlier action without any luck.
Therefore, is there anyone that could tell me why this does not work when the website is running in mobile mode?
I solved the issue by refactoring the code like this:
jQuery(function ($) {
console.log('test');
var tab = null;
var menuSelector = null;
var guard = false;
function changeMenuSelector() {
if ($(document).width() > 967) {
menuSelector = 'top-menu-nav';
guard = false;
initEventListeners(guard);
} else {
menuSelector = 'mobile_menu';
guard = true;
initEventListeners(guard);
}
}
function initEventListeners(guard) {
var localGuard = null;
if (localGuard != guard) {
var hrefs = ['howtos', 'projects', 'reviews', 'elearning', 'others'];
hrefs.forEach(
function (element, index, array) {
$('#' + menuSelector + ' a[href*="' + element + '"]').off();
console.log(element);
$('#' + menuSelector + ' a[href*="' + element + '"]').on('click', function (e) {
e.preventDefault();
console.log('pluto');
window.localStorage.setItem('tab', 'et_pb_tab_' + index);
if (window.location.pathname.indexOf('blog-posts') === -1) {
window.location.href = 'http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li." + tab + ">a")[0].click();
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
window.localStorage.removeItem('tab');
}
});
});
localGuard = guard;
}
}
changeMenuSelector();
initEventListeners();
$(window).resize(function () {
changeMenuSelector();
});
if (!!localStorage.getItem('tab')) {
tab = localStorage.getItem('tab');
console.log(tab);
setTimeout(function(){$("li."+tab+">a")[0].click();}, 1)
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
localStorage.removeItem('tab');
}
});
I'm working on a project based on Opencart with the theme Tranda Social (I think it's deprecated). The problem I'm facing is that at Home page ONLY I can't get the scroll-effects (eg. When scrolling-down keep the navbar in fixed position, or getting to the TOP by just clicking the button with the UP-arrow). After some research I've concluded that for some reason a Javascript function isn't get called correctly.
setTimeout(function () {
/* Menu */
$('#menu ul > li > a + div').each(function (index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
/* Fixed Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
/* Margin Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
}, 500);
The functions after fixed-menu and margin-menu comments are NOT working when I'm navigating in Home page. Also if you notice, there is a duplicate of each function (don't know for what reason). Have you any ideas? Any help will be greatly appreciated.
It was a problem caused by Slidesshow module (Nivo Slider) because of a JS error related to it. Uninstall-reinstall the module fixes the problem.
Here's the plugin in case anyone finds it useful. http://silvestreh.github.io/onScreen/
Thanks again!
So, I'm trying to write my very first jQuery plugin and I already found my first road block. The plugin is supposed to do something to an element when it's visible (as in the view port area, not CSS visibility)
This is what the plugin looks like:
(function($) {
$.fn.onScreen = function(options) {
var self = $(this);
params = $.extend({
doIn: function(){
console.log('on screen');
},
doOut: function(){
console.log('off screen');
},
offset: 0
}, options);
return this.each(function() {
var $el = $(this);
var elTop = $el.offset().top;
$(window).scroll(function() {
var pos = $(window).scrollTop();
if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
if (typeof(params.doOut) == 'function') {
params.doOut.call($el[0]);
}
}
});
});
};
})(jQuery);
And this is how I'm trying to use it:
$(function(){
$('div').onScreen({
doIn: function() {
$(this).stop().animate({
left: 20
},500)
},
doOut: function() {
$(this).stop().animate({
left: 0
},500)
}
});
});
The problem is that $(this) refers to the window object (because of the $(window).scroll() in the plugin) and not the matched elements. What am I doing wrong? How do I tell my plugin that I want to do stuff to the matched elements instead?
Thanks in advance :-)
EDIT: I just created a JSFiddle so you can check it out. http://jsfiddle.net/FBEFJ/3/
EDIT 2: bfavaretto fixed the code. I updated the question with the working code. Thank you!
The problem is how you're calling doIn and doOut in the plugin. Perhaps the simplest solution is to enforce a this value with Function.prototype.call:
if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
if (typeof(params.doOut) == 'function') {
params.doOut.call($el[0]);
}
}
I'm having an odd problem on Safari (Mac OS only, Windows works fine), where my smooth scroll is not scrolling. It just jumps to the link, but works in all other browsers, even on windows Safari.
My jQuery is
<script type="text/javascript">
(function($){
$.extend({
smoothAnchors : function(speed, easing, redirect){
speed = speed || "slow";
easing = easing || null;
redirect = (redirect === true || redirect == null) ? true : false;
$("a").each(function(i){
var url = $(this).attr("href");
if(url){
if(url.indexOf("#") != -1 && url.indexOf("#") == 0){
var aParts = url.split("#",2);
var anchor = $("a[name='"+aParts[1]+"']");
if(anchor){
$(this).click(function(){
if($(document).height()-anchor.offset().top >= $(window).height()
|| anchor.offset().top > $(window).height()
|| $(document).width()-anchor.offset().left >= $(window).width()
|| anchor.offset().left > $(window).width()){
$('html, body').animate({
scrollTop: anchor.offset().top,
scrollLeft: anchor.offset().left
}, speed, easing, function(){
if(redirect){
window.location = url
}
});
}
return false;
});
}
}
}
});
}
});
})(jQuery);
</script>
and my HTML looks like this
<nav id="nav">
<ul id="navigation">
<li> ABOUT</li>
<a name="About"></a>
If anybody knows what the issue, please let me know!
Much appreciated.
Works great for me!
(function($) {
$.fn.SmoothAnchors = function() {
function scrollBodyTo(destination, hash) {
// Change the hash first, then do the scrolling. This retains the standard functionality of the back/forward buttons.
var scrollmem = $(document).scrollTop();
window.location.hash = hash;
$(document).scrollTop(scrollmem);
$("html,body").animate({
scrollTop: destination
}, 200);
}
if (typeof $().on == "function") {
$(document).on('click', 'a[href^="#"]', function() {
var href = $(this).attr("href");
if ($(href).length == 0) {
var nameSelector = "[name=" + href.replace("#", "") + "]";
if (href == "#") {
scrollBodyTo(0, href);
}
else if ($(nameSelector).length != 0) {
scrollBodyTo($(nameSelector).offset().top, href);
}
else {
// fine, we'll just follow the original link. gosh.
window.location = href;
}
}
else {
scrollBodyTo($(href).offset().top, href);
}
return false;
});
}
else {
$('a[href^="#"]').click(function() {
var href = $(this).attr("href");
if ($(href).length == 0) {
var nameSelector = "[name=" + href.replace("#", "") + "]";
if (href == "#") {
scrollBodyTo(0, href);
}
else if ($(nameSelector).length != 0) {
scrollBodyTo($(nameSelector).offset().top, href);
}
else {
// fine, we'll just follow the original link. gosh.
window.location = href;
}
}
else {
scrollBodyTo($(href).offset().top, href);
}
return false;
});
}
};
})(jQuery);
$(document).ready(function() {
$().SmoothAnchors();
});
https://github.com/alextrob/SmoothAnchors
could some one please integrate my code with keyboard arrows to navigate the menu up and down with less code as possible. i've tried some plugins and searched alot but my little experience does not help me!
$(function() {
$('ul.nav a').each(function(i, elem) {
$(elem).bind('click', function(event) {
event.preventDefault();
var offset = i * 38;
$('ul.nav').stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 2000,'easeOutQuart');
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2000,'easeOutQuart');
$('ul.nav a').css({'cursor': 'pointer', 'color': '#643D21'});
$anchor.css({'cursor': 'default', 'color': '#995D32'});
event.preventDefault();
});
});
});
HTML code
<ul class="nav">
<li>what</li>
<li>who</li>
<li>portfolio</li>
<li>contact</li>
appreciated,
UPDATE: Why don't I just give you the whole thing? http://jsfiddle.net/MwMt3/2
$(function() {
var hgt = $('ul li:first').height();
$('ul.nav a').each(function(i, elem) {
$(elem).bind('click', function(event) {
event.preventDefault();
var offset = i * hgt;
animate_bg(offset);
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 800);
$('ul.nav a').css({
'cursor': 'pointer',
'color': '#643D21'
});
$anchor.css({
'cursor': 'default',
'color': '#995D32'
});
event.preventDefault();
});
});
$(document).keydown(function(e) {
var bgtop = parseInt($('ul.nav').css("backgroundPosition").split(" ")[1], 10);
var sel = Math.ceil(bgtop / hgt);
if (e.keyCode == 39 || e.keyCode == 40) { // right, down
if (sel < 0) {
animate_bg(0);
} else if (sel < $('ul.nav li').length - 1) {
var offset = (sel + 1) * hgt;
animate_bg(offset);
}
} else if (e.keyCode == 37 || e.keyCode == 38) { // left, up
if (sel < 0) {
var maxoffset = $('ul.nav li').length * hgt;
animate_bg(maxoffset);
} else if (sel > 0) {
var offset = (sel - 1) * hgt;
animate_bg(offset);
}
}
});
});
function animate_bg(offset) {
$('ul.nav').stop().animate({
backgroundPosition: '0 ' + offset + 'px'
}, 800);
}
It would help if you could describe a bit more clearly what you mean by "navigate the menu up and down", but here's my interpretation: http://jsfiddle.net/ebiewener/NknCW/2/
We essentially just bind the keydown event to the page and check if either of the keys pressed were the up or down arrow:
$(function(){
$(document).keydown(function(e){
if(e.which === 38){ //up
var currentLI = $('li.selected');
var currentLIprev = currentLI.prev();
if(currentLI.length > 0 && currentLIprev.length > 0){
currentLI.removeClass('selected');
currentLIprev.addClass('selected');
}else{
$('li:first').addClass('selected');
}
}else if(e.which === 40){ //down
var currentLI = $('li.selected');
var currentLInext = currentLI.next();
if(currentLI.length > 0){
if(currentLInext.length > 0){
currentLI.removeClass('selected');
currentLInext.addClass('selected');
}
}else{
$('li:first').addClass('selected');
}
}
});
});