We Keep Coding

Modifying the value of a href attribute of an anchor element

I have a script that modifies the value of a href attribute of an anchor <a> element. It supposed only triggers below a certain browser window size for mobile development. Below is the script I'm currently working on.
JS - http://jsfiddle.net/eof8kpsj/1/
(function($){
'use strict';
var mobileMenuDrawer = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
$(this).closest('.mobile-menu-item').toggleClass('-active');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
// console.log($(this).attr('href'));
let currentUrl = $(this).attr('href');
if($(this).prop('href') != '#' + currentUrl) {
$(this).prop('href', '#' + currentUrl);
}
});
}
else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
$(this).removeAttr('#');
});
}
}
}
$(document).ready(function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
}
else {
mobileMenuDrawer.clear();
}
addHash.init();
});
$(window).on('resize', function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
addHash.init();
}
else {
mobileMenuDrawer.clear();
}
});
})(jQuery)
This logic right here basically modifies the href attribute value on an anchor <a> element. It only adds a hash to the existing href value. The only problem is whenever I try resizing it keeps firing the logic or event. I've already added a condition to the check value if it has a hash contained within the href attribute but the problem still persists.
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
// console.log($(this).attr('href'));
let currentUrl = $(this).attr('href');
if($(this).prop('href') != '#' + currentUrl) {
$(this).prop('href', '#' + currentUrl);
}
});
}
else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
$(this).removeAttr('#');
});
}
}
}

Here you go with the solution
(function($){
'use strict';
var mobileMenuDrawer = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
$(this).closest('.mobile-menu-item').toggleClass('-active');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
let currentUrl = $(this).attr('href');
if(currentUrl.indexOf('#') === -1) {
$(this).prop('href', '#' + currentUrl);
}
});
} else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
let currentUrl = $(this).attr('href');
currentUrl = currentUrl.replace('#', '');
$(this).attr('href', currentUrl);
});
}
}
}
$(document).ready(function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
} else {
mobileMenuDrawer.clear();
}
addHash.init();
});
$(window).on('resize', function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
addHash.init();
} else {
mobileMenuDrawer.clear();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="region-primary-menu primary-mobile-menu">
<li class="mobile-menu-item">
Link
</li>
<li class="mobile-menu-item">
Link
</li>
<li class="mobile-menu-item">
Link
</li>
</ul>
Hope this will help you

Adding additional case to script for onClick event

I have a pop-up for a website that asks the user to sign up if they aren't already signed in. I'm using a script called "subscribe-better.js" (https://github.com/peachananr/subscribe-better) and this works great for loading the popup when the user first enters the site.
However, I want this pop-up to show when a user clicks a button. This is my button:
<div id="popClick" class="button btn">Sign Up to Proceed</div>
and here is how I am calling the pop-up:
<script>
$(document).ready(function() {
$(".subscribe-me2").subscribeBetter({
trigger: "onclick",
animation: "fade",
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
});
});
</script>
<div class="subscribe-me2">
Sample Pop Up Content Here
</div>
And the code to make it pop-up. You'll see I've added the case for onclick but nothing is happening when I click my button. I also tried instead of document.ready() to call the pop-up within a $('#popClick').click() but that didn't make the pop-up appear either. How can I fix the switch statement to make the pop-up appear when the #popClick button is clicked?
!function($){
var defaults = {
trigger: "atendpage", // atendpage | onload | onidle
animation: "fade", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
};
$.fn.subscribeBetter = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
shown = false,
animating = false;
el.addClass("sb");
$.fn.openWindow = function() {
var el = $(this);
if(el.is(":hidden") && shown == false && animating == false) {
animating = true;
setTimeout(function() {
if (settings.scrollableModal == true) {
if($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div><div class='sb sb-withoverlay'>" + $(".sb").html() + "</div></div>");
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb.sb-withoverlay").closeWindow();
return false;
});
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
setTimeout(function(){
$(".sb.sb-withoverlay").show();
$("body").addClass("sb-open sb-open-with-overlay");
}, 300);
}
} else {
if ($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div></div>");
$(".sb").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb").closeWindow();
return false;
});
setTimeout(function(){
$(".sb").show();
$("body").addClass("sb-open");
}, 300);
}
}
if (settings.showOnce == true) shown = true;
animating = false;
}, settings.delay);
}
}
$.fn.closeWindow = function() {
var el = $(this);
if(el.is(":visible") && animating == false) {
animating = true;
if (settings.scrollableModal == true) {
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb.sb-withoverlay").hide();
$("body").removeClass("sb-open sb-open-with-overlay");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
} else {
$(".sb").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb").hide();
$("body").removeClass("sb-open");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
}
animating = false;
}
}
$.fn.scrollDetection = function (trigger, onDone) {
var t, l = (new Date()).getTime();
$(window).scroll(function(){
var now = (new Date()).getTime();
if(now - l > 400){
$(this).trigger('scrollStart');
l = now;
}
clearTimeout(t);
t = setTimeout(function(){
$(window).trigger('scrollEnd');
}, 300);
});
if (trigger == "scrollStart") {
$(window).bind('scrollStart', function(){
$(window).unbind('scrollEnd');
onDone();
});
}
if (trigger == "scrollEnd") {
$(window).bind('scrollEnd', function(){
$(window).unbind('scrollStart');
onDone();
});
}
}
switch(settings.trigger) {
case "atendpage":
$(window).scroll(function(){
var yPos = $(window).scrollTop();
if (yPos >= ($(document).height() - $(window).height()) ) {
el.openWindow();
} else {
if (yPos + 300 < ($(document).height() - $(window).height()) ) {
if(settings.autoClose == true) {
el.closeWindow();
}
}
}
});
break;
case "onload":
$(window).load(function(){
el.openWindow();
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onidle":
$(window).load(function(){
el.scrollDetection("scrollEnd", function() {
el.openWindow();
});
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onclick":
$('#popClick').click(function(){
el.openWindow();
});
break;
}
}
}(window.jQuery);

I believe the problem is that you're using 'showOnce' which globally limits the popup from showing more than once. So, your onclick probably is firing (I'd suggest adding a console.log in to be sure) but then if(el.is(":hidden") && shown == false && animating == false) { in the openWindow function is no longer true.

jQuery event.stopPropagation() and event issues

I'm creating a jQuery script that add a pin to a map on click event, the problem is that i need that event to work only on the map not his sons too..
This is my code:
$("div#map").click(function (e) {
$('<div class="pin"></div>').css({
left: a_variable,
top: another_variable
}).appendTo(this);
$("div.pin").click(function (e) { e.stopPropagation(); });
})
Another problem is that under this code i have something like this:
$("div.pin").mousedown(function (e) {
if(e.which == 1) {
console.log("down");
moving = true;
$(this).addClass("moving");
} else if(e.which == 3) {
console.log("right");
}
});
Will this work with pins created after the script load too?
JsFiddle: http://jsfiddle.net/vB2Gb/

I made a number of adjustments to your code:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vB2Gb/1/
$(function () {
var $map = $("div#map");
$map.click(function (e) {
var $pin = $('<div class="pin"></div>').css({
left: (((e.pageX + 3 - $map.position().left) * 100) / $map.width()) + "%",
top: (((e.pageY - 10 - $map.position().top) * 100) / $map.height()) + "%"
});
$pin.appendTo($map);
})
$map.on('click', "div.pin", function (e) {
e.stopPropagation();
});
var moving = false;
var pin_id;
var pin_left;
var pin_top;
$map.on('mousedown', "div.pin", function (e) {
if (e.which == 1) {
console.log("down");
moving = true;
$(this).addClass("moving");
} else if (e.which == 3) {
console.log("right");
}
});
$map.on('contextmenu', "div.pin", function (e) {
return false;
});
$(document).mousemove(function (e) {
if (moving) {
if (e.pageX <= $map.position().left) {
pin_left = 0;
} else if (e.pageY <= $map.position().top) {
pin_top = 0;
} else {
console.log("moving");
pin_id = 1;
pin_left = (((e.pageX + 3 - $map.position().left) * 100) / $map.width());
pin_top = (((e.pageY - 10 - $map.position().top) * 100) / $map.height());
$(".moving").css("left", pin_left + "%");
$(".moving").css("top", pin_top + "%");
}
}
});
$(document).mouseup(function (e) {
if (moving) {
console.log("up");
moving = false;
$(".moving").removeClass("moving");
dbMovePin(pin_id, pin_left, pin_top);
}
});
});
function dbMovePin(pin_id, pin_left, pin_top) {
$.post(
"mapsave.php", {
action: "move_pin",
id: pin_id,
left: pin_left,
top: pin_top
},
function (data, status) {
//alert("Data: " + data + "\nStatus: " + status);
});
}
This includes using delegated events (with on) for both the mouse down events and the pin click. Sharing a single variable for the map etc

Event Delegation does what i need:
I've changed
$("div.pin").mousedown(function (e) { ... });
with
$("div#map").on("mousedown", "div", function (e) {

Since you are dealing with dynamically added elements, you need to use event delegation.
$("#map").click(function (e) {
$('<div class="pin"></div>').css({
left: a_variable,
top: another_variable
}).appendTo(this);
}).on('click', '.pin', function (e) {
//have a single delegated click handler
e.stopPropagation();
}).on('mousedown', '.pin', function (e) {
//use a delegated handler for mousedown also
if (e.which == 1) {
console.log("down");
moving = true;
$(this).addClass("moving");
} else if (e.which == 3) {
console.log("right");
}
})
Also see
Event binding on dynamically created elements?

Navigating long un-ordered list

I have this long list with overflow: auto to scroll through it, i set it up for keyboard navigation, the problem is that when using the keyboard it doesn't scroll correctly!
check this jsFiddle
$('ul').keydown(function (e) {
if (e.keyCode == 38) { // up
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
} else {
selected.prev().addClass("selected");
}
}
if (e.keyCode == 40) { // down
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
} else {
selected.next().addClass("selected");
}
}
})
});
$listItems.click(function () {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
the behavior i'm looking for is the same behavior of the element when scrolling through a long list of elements using the keyboard this plugin SelectBoxIt show's what i'm looking for.

you can use this code instead, i used animate function to navigate inside the div if the list exceed the width of the ul tag :
http://jsfiddle.net/goldendousa/p6243/13/
$('ul').focus(function() {
if ($('ul li').is('.selected')) {
$('ul li').first().removeClass('selected');
} else {
$('ul li').first().addClass('selected');
}
});
$('ul').keydown(function(e) {
if (e.keyCode == 38) { // up
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
var selectedTopOffset = selected.siblings().last().offset().top;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
} else {
selected.prev().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
if (e.keyCode == 40) { // down
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
if (selected.siblings().first().offset().top < 0) {
$('div').animate({
scrollTop: selected.siblings().first().offset().top
}, 200);
}
} else {
selected.next().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
});
$('li').click(function() {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
});

jQuery Smooth Scroll issue on Safari (Mac OS)

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