Develop Reference

Jquery scroll to tab module and open tab with anchor link

I am using anchor links (on my main menu) to scroll to a tab module and open the correct tab.
I have some code that works well but with one issue.
If there is an anchor link inside the tab then the code will no longer scroll to that tab (although it does open).
Test site here. First 2 tabs have no anchor link inside and work fine. Last 3 tabs have anchor links and have lost their scroll.
Can anyone see any red flags or issues in the code that might be causing this behaviour?
Thanks
<script type="text/javascript">
(function($) {
$( document ).ready(function() {
$('.et_mobile_menu li a').click(function(){
$('.et_slide_in_menu_container .mobile_menu_bar').trigger('click');
console.log('done');
});
});
})(jQuery);
function _setTab(){
// get current hash value
var curHash = window.location.hash.substr(1);
// only continue if hash provided and scoped to member tabs
if( !curHash || !curHash.match('my-tabs') ){ return false; }
// split and int val tab num
curHash = parseInt(curHash.split('|')[1]);
// ignore if tab is current state
if( curHash === window._tabSelected ){ return false; }
// set current tab to window
window._tabSelected = curHash;
// add click event to tab selected
switch(curHash){
case 0:
case 1:
case 2:
case 3:
case 4:
jQuery('#my-tabs .et_pb_tab_'+curHash+' a').trigger('click');
break;
default:
return false;
break;
}
// scroll to tabs container
_scrollToTabs();
}
// scroll to member tabs container with 50px offset
function _scrollToTabs(){
var oTabs = jQuery('#my-tabs');
if( oTabs.length > 0 ){
jQuery('html,body').animate({
scrollTop: (oTabs.offset().top - 50)
}, 1000);
}
return false;
}
// set falsey state for tab selected on load
window._tabSelected = false;
// attach to window load because the tabs functions are initialized later in document
jQuery(window).on('load', function(){
// check for initial hash state
_setTab();
// add hash change window listener
jQuery(window).on('hashchange', function(){
_setTab()
});
// void submenu when we are in member section
var curPath = window.location.pathname;
if( curPath.match('midtown') ){
// only change hash and do not reload page
jQuery('#menu-item-665 ul li a').on('click', function(e){
e.stopImmediatePropagation();
window.location.hash = jQuery(this).prop('hash');
return false;
});
}
});

Found the issue. Was not correctly calling the right div container in the click event;
// add click event to tab selected
switch(curHash){
case 0:
jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
break;
case 1:
jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
break;
case 2:
jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
break;
case 3:
jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
break;
case 4:
jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
break;
default:
return false;
break;
}

jquery mobile toPage select attribute doesn't work

i have a jquery mobile app with some pages. the first page is a login page and after the user logged in i dont want the user to go back to the login page again.
after the user logged in a div called #map will be shown.
to prevent this is have the following code:
$(document).on('pagecontainerbeforechange', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'map') {
var test = ui.toPage;
console.log(test.attr('id');
// if(test.attr('id') === 'login' && login.status === true) {
// console.log('you are alrady logged in');
// e.preventDefault();
// e.stopPropagation();
// }
}
});
When i click previous page to go to the login page again i get this error: Uncaught TypeError: test.attr is not a function
What is wrong and how can i select the attr id of test

Sometimes the ui.toPage is a string and sometimes it is a jQuery object representing the page. Sometimes the pagecontainerbeforechange runs twice, once with the string and once with the object. So try this:
$( document ).on( "pagecontainerbeforechange", function( e, ui ) {
var from = ui.prevPage ? ui.prevPage.prop("id") : '';
var to = '';
if (typeof ui.toPage === 'string') {
var u = $.mobile.path.parseUrl(ui.toPage);
to = u.hash || '#' + u.pathname.substring(1);
} else {
to = '#' + ui.toPage.prop("id");
}
if (from === 'map' && to === '#login') {
alert('Cannot change to login from map');
e.preventDefault();
// remove active class on button
// otherwise button would remain highlighted
$.mobile.activePage
.find('.ui-btn-active')
.removeClass('ui-btn-active');
}
});
DEMO
Also, .attr("id") will work, but in newer versions of jQuery it is more correct to use .prop("id"): http://api.jquery.com/prop/

normalizeLink function not working, breadcrumb links not working javascript html

Relatively quick question for you(Or so I think!), on my webpage it displays breadcrumb links when a certain topic is selected from an index. When these breadcrumb links are displayed and a user clicks on any of them, the page goes blank(its supposed to redirect them depending on which breadcrumb link they select). I've looked through the code of the webpage and I found the function that deals with that, the problem is im not the one that coded it so I dont know where to edit/what to do since currently i am just an intern. Here is the function:
// normalize links
$('#breadcrumbLinks a, #navigationLinks a').each(function () {
var oldLink = $(this).attr('href');
// we generate from oxygen '../'s in from of link
while (oldLink.indexOf('../') == 0) {
info('strip \'../\' from ' + oldLink);
oldLink = oldLink.substring(3);
}
$(this).attr('href', stripUri(oldLink));
});
if (navigator.appVersion.indexOf("MSIE 7.") == -1) {
showParents();
$('#frm').contents().find('table.nav').hide();
} else {
}
}
$('#frm').show();
$('div.tooltip').remove();
$('#breadcrumbLinks').find('a').after('<span> / </span>');
$('#breadcrumbLinks').find('span').last().html(' ');
$('.navparent a').click(function () {
if ($.cookie("wh_pn") != "" && $.cookie("wh_pn") !== undefined && $.cookie("wh_pn") !== null) {
currentTOCSelection = parseInt($.cookie("wh_pn"));
parentTOCSelection = $('#tree li:eq(' + currentTOCSelection + ')').parents('ul').parents('li').index('li');
$.cookie('wh_pn', parentTOCSelection);
}
});
$('.navprev a').click(function () {
prevTOCSelection = parseInt($.cookie('wh_pn')) -1;
$.cookie('wh_pn', prevTOCSelection);
});
$('.navnext a').click(function () {
nextTOCSelection = parseInt($.cookie('wh_pn')) + 1;
$.cookie('wh_pn', nextTOCSelection);
});
highlightSearchTerm(searchedWords);
The question is, how would i go about fixing this bug so that when the user selects a breadcrumb link they are redirected to that specific page?
Any help would be appreciated! thank you :)

How to detect a user clicked on an internal or external link

I need to know if users clicked on an internal or external link to alert them.
I have many internal and external links on my site.
My internal links are like this:
about
draw graph
I need to alert only when external links are clicked.

(I've included two methods here: One method uses jQuery, and the other doesn't use jQuery. Skip down to the bold heading if you don't want to use jQuery)
One way you could do this is by adding a class to each external link, and then attaching an event handler to everything in that class which raises an alert when you click the link. That's tedious, though, as you have to add the class to every external link, and it won't for user generated content.
What you can do is use jQuery, along with the CSS selector a[href^="http"], to select all the external links, and then attach an event handler that raises your alert when they're clicked:
$('a[href^="http"]').click(function() {
alert();
});
a[href^="http"] means "an a tag which has a link, and that link has to start with 'http'." So here we select all the elements which start with http - that is, every external link - and then set it so that when you click on them, an alert pops up.
Non-jQuery method
If you want to do this without jQuery, you'll want to use document.querySelectorAll('a[href^="http"]') and bind the click event of each element in the array that that function returns. That looks something like this:
var externalLinks = document.querySelectorAll('a[href^="http"]');
for (var i = externalLinks.length-1; i >= 0; i--) {
externalLinks[i].addEventListener("click", function() { alert(); }, false);
}

I had to do this from scratch on my own site so I'll just copy + paste it here for you. It came from inside one of my objects so if I left some this keywords you can remove them.
function leaving() {
var links = document.anchors || document.links || document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if ((links[i].getAttribute('href').indexOf('http') === 0 && links[i].getAttribute('href').indexOf('fleeceitout') < 0) && (links[i].getAttribute('href').indexOf('/') !== 0 && links[i].getAttribute('href').indexOf('#') !== 0) && links[i].className.indexOf('colorbox') < 0) {
addEvent(links[i], 'click', this.action);
}
}
}
function action(evt) {
var e = evt || window.event,
link = (e.currentTarget) ? e.currentTarget : e.srcElement;
if (e.preventDefault) {
e.preventDefault();
} else {
window.location.href = link.href;
return;
}
var leave = confirm("You are now leaving the _______ website. If you want to stay, click cancel.");
if (leave) {
window.location.href = link.href;
return;
} else {
return leave;
}
}
var addEvent = function (element, myEvent, fnc) {
return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};
Replace instances of 'fleeceitout' with your sites domain name (microsoft.com, etc) and you're set.

The easiest ways are with jQuery, using a special class for external links, or by checking for "http://" in the URL.
Like this, if using a special class:
$("a.external").on("click", function() {
//de Do something special here, before going to the link.
//de URL is: $(this).attr("href")
});
And then in HTML:
<a href="http://external.link" class='external'>external link</a>
Or, you can check for http:// in the URL! Then you don't need a special class.
$('a[href=^"http://"]').on("click", function() {
//de Do something special here, before going to the link.
//de URL is: $(this).attr("href")
});
Cite: My original method of testing for "http://" was a bit slower, actually doing an indexOf test on .attr("href") so I used #Matthew's selector choice instead. Forgot about the caret route! Props to #Matthew on that, and for the non-jQuery alternative.

$(document).ready(function() {
$('a').click(function() {
var returnType= true;
var link = $(this).attr('href');
if ( link.indexOf('http') >= 0 ) {
returnType=confirm('You are browsing to an external link.');
}
return returnType;
});
});`

iPad preventDefault action only on first link click

I have a link on my page which I want to behave as follows on the iPad.
On first click only, prevent default action (i.e. should not follow the href action) and on subsequent clicks, follow/allow default action (i.e. should follow the href action).
The code I have written is:
if (navigator.userAgent.match(/iPad/i) != null)
{
var clickCount = 0;
$("a").click(function(event) {
if (clickCount == 0)
{
event.preventDefault();
}
else{
return true;
}
});
clickCount++;
}
Now for some reason, even on first click, it follows the link. How can I fix this?

Try to move clickCount++; into the callback function from the click-event.
$("a").click(function(event) {
if (clickCount == 0){
event.preventDefault();
}
else{
return true;
}
clickCount++;
});
​
Currently, clickCount++; is called when the document is loaded and is already set to 1 when the event gets fired for the first time.