Javascript “confirm” in IE6 and IE7

Javascript “confirm” in IE6 and IE7 - javascript

Why doesn't this code work in IE6 or IE7?
$('a').click(
function()
{
var urlIsExternal = true;
var urlMedicareDir = '/medicare/';
var urlMedicareHost = 'health.healthcare.com';
var urlMedicare = 'https://' + urlMedicareHost + urlMedicareDir;
var urlAppsHost = 'apps.healthcare.com';
var urlCurrent = String( window.location );
var urlCurrentPrefix = urlCurrent.substring( 0, urlMedicare.length );
var urlCurrentURL = $.url( urlCurrent );
var urlClicked = $(this).attr('href');
var urlClickedURL = $.url( $(this).attr('href') );
var urlHost = urlClickedURL.attr('host');
if( !urlHost.length )
{
urlHost = urlCurrentURL.attr('host');
}
var urlConfirmMessage = 'You are now leaving the Medicare website.';
if( urlCurrentPrefix == urlMedicare )
{
if( urlClicked.substring( 0, 1 ) == '/' ) // starts with slash
{
if( urlClicked.substring( 0, urlMedicareDir.length ) == urlMedicareDir )
{
urlIsExternal = false;
}
}
if( urlClicked.substring( 0, urlMedicare.length ) == urlMedicare )
{
urlIsExternal = false;
}
if (
urlClicked.substring( 0, 1 ) != '/' &&
urlClicked.substring( 0, 4 ) != 'http' &&
urlClicked.substring( 0, 4 ) != 'file'
)
{
urlIsExternal = false;
}
if( urlAppsHost == urlHost )
{
urlIsExternal = false;
}
if( urlClicked.substring(urlClicked.length-4) == '.pdf' )
{
urlIsExternal = false;
}
}
else
{
urlIsExternal = false;
}
if( urlIsExternal )
{
if( confirm( urlConfirmMessage ) )
{
window.open( urlClicked );
return false;
}
else
{
return false;
}
}
else
{
return true;
}
}
);
For some reason when the links are clicked in IE6 or IE7, they do not direct the user to the link and it does not prompt a confirm dialog. It should prompt a confirm dialog, but for some reason, it is not.

I don't think you're preventing the default action of the anchor ("a").
You should start $('a').click( function( event ) { so that when you get here:
if( urlIsExternal ) {
// This tells jQuery to NOT follow the hyperlink
event.preventDefault();
if( confirm( urlConfirmMessage ) ) {
window.open( urlClicked );
}
}
However, what's really missing is that this code needs to run after the document has loaded. So you just need to wrap your function with
$(document).ready(function(){
$('a').click( function( event ) {
/* your code */
}
});
Without the call to $(document).ready(), the JavaScript runs before the body of the document is rendered, so it doesn't find any <a> tags to which it can attach the click event.

It seems that if the user clicks on a link that has an href starting with some value other than the current host, you want offer a confirm dialog. That is a realy annoying strategy, why doesn't the user know before clicking on the link that it wil take them elsewhere?
Anyway, a simple version of what you are trying to do is:
function showPrompt() {
return confirm('Do you really want to leaving ' + window.location.host +
'?\nPress OK to continue or Cancel to stay on this page.');
}
window.onload = function() {
// The links collection is live and available as a property of window
var link, links = document.links;
// Include criteria for host, hostName, protocol, whatever as required
var re = new RegExp(window.location.host || 'no host');
for (var i=0, iLen=links.length; i<iLen; i++) {
link = links[i];
// Only add the listener to links that need it
if (!re.test(link.href)) {
// Add the listener however you want, this way is simple and robust
link.onclick = showPrompt;
}
}
}

Related

Back to previous page same scroll position with lazy load images on page using jquery

Working on scroll position when user goes back to the previous page then same scroll position of the product will show. I have tried like this
$('.test').on('click', function(e){
stateData = {
path: window.location.href,
scrollTop: $(window).scrollTop()
};
const url = new URL(window.location);
window.history.replaceState(stateData, '', url);
stateData = {
path: window.location.href,
scrollTop: 0
};
window.history.pushState(stateData, '', url);
e.preventDefault();;
});
But here I'm not getting the exact position due to lazy load images to scroll moving at the bottom of the page. Can anyone suggest to me how to handle it?

In my view, the reason you are not able to reach the exact position is due to image rendering later thus changing the height of the screen. What if you add a skeleton for all the images to be loaded, that can help you to make the screen height similar to that of the one you have when everything is loaded.

Maybe someone can figure out how to use https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration .. but my basic idea is to remember the scrollTop for each page.
This means we have to include a value for each URL, upon returning to a page we then need load the lazy items that establish the proper scrollTop.
I have used this MDN example and this debounce script as base and will only provide the necessary code changes - I included a number of images on "first_page" and "second_page". I used to provide link to a working example, but this was taken offline.
js/lazyload.js
'use strict';
// supports older browsers - no arrow functions, spread syntax or such *sigh*
var pLAZY = ( function(){
var version = "1.1.1"
, loadOffset = 512
, animatable = [ "IMG", "IFRAME" ] // tags that may/should be animated, e.g. *not* SOURCE
, loadingClasses = [] // [ 'animated', 'rubberBand' ] // change/disable animation style here
, lazyItems = {}
, lazyHandler_scroll = null
, lazyHandler_resize = null
, forceLoad_timer = null
;
function _debug(){ if( arguments.length ){ debug = parseInt( arguments[0] ); } return debug; }
function _version(){ return version; }
function docScroll(){ return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; } // cross-browser
function winHeight(){ return window.innerHeight || document.documentElement.clientHeight; }
function findLazyItems(){
lazyItems = {};
var candidates = document.querySelectorAll( '.lazyload,img[data-src],iframe[data-src],source[data-srcset]' );
for( var idx = 0; idx < candidates.length; idx++ ){
var domEl = candidates[idx]
, curTop = domEl.offsetTop // if you fail to ensure lazy loaded items do not force a reflow lower items may be loaded sooner
;
if( lazyItems.hasOwnProperty( curTop ) ){
lazyItems[curTop].push( domEl );
}else{
lazyItems[curTop] = [ domEl ];
}
}
}
function loadLazy(item){
var dsrc = item.getAttribute( 'data-src' )
, dset = item.getAttribute( 'data-srcset' )
, changed = false
, worked = false
;
if( dsrc && dsrc.length ){
item.setAttribute( 'src', dsrc );
item.removeAttribute( 'data-src' );
changed = true;
}
if( dset && dset.length ){
item.setAttribute( 'srcset', dset );
item.removeAttribute( 'data-srcset' );
changed = true;
}
if( changed ){
worked = true;
if( animatable.includes( item.nodeName ) ){
for( var lcx = 0; lcx < loadingClasses.length; lcx++ ){
item.classList.add( loadingClasses[lcx] );
}
}
}
return worked;
}
function checkShowItems(){
var curVisBar = docScroll() + winHeight() + loadOffset // winHeight, not docHeight!!
, worked = false
, str_pagePos = "0"
;
for( str_pagePos in lazyItems ){ // pagePos is a DOM.position().top value
var pagePos = parseInt( str_pagePos );
var lazy = lazyItems[ pagePos ]; // the items are constantly refreshed, double-effort is considered negligible
if( pagePos <= curVisBar ){
for( var idx = 0; idx < lazy.length; idx++ ){
if( loadLazy( lazy[idx] ) ) worked = true;
}
}
}
if( worked ){
findLazyItems();
if( Object.keys( lazyItems ).length == 0 ){
window.removeEventListener( 'scroll', lazyHandler_scroll );
window.removeEventListener( 'resize', lazyHandler_resize ); // this is not required anymore either
}
}
}
function waitForLoad(index,callback){
let count = 0
, done = 0
, str_pagePos = "0"
, worked = false
;
for( str_pagePos in lazyItems ){
var lazy = lazyItems[ parseInt( str_pagePos ) ];
for( let lx = 0; lx < lazy.length; lx++ ){
if( count <= index ){
if( lazy[lx].complete ) done++;
count++;
}
}
}
if( done == index ){
window.clearInterval( forceLoad_timer );
forceLoad_timer = null;
checkShowItems();
if(callback) callback();
}//else{ console.log( "%d/%d images done.", done, index ); }
}
function forceLoad(index,callback){
let count = 0
, str_pagePos = "0"
, worked = false
;
for( str_pagePos in lazyItems ){
var lazy = lazyItems[ parseInt( str_pagePos ) ];
for( let lx = 0; lx < lazy.length; lx++ ){
if( count <= index ){
if( loadLazy( lazy[lx] ) ) worked = true;
count++;
}
}
}
forceLoad_timer = window.setInterval( function(){ waitForLoad(index,callback); }, 50 );
}
function lowestSeenImage(){
var curVisBar = docScroll() + winHeight() + loadOffset // winHeight, not docHeight!!
, str_pagePos = "0"
, count = 0
;
for( str_pagePos in lazyItems ){
var pagePos = parseInt( str_pagePos );
var lazy = lazyItems[ pagePos ];
if( pagePos <= curVisBar ){
count += lazy.length;
}
}
return count;
}
function duringResizing(){
findLazyItems();
checkShowItems();
}
function hookListener( evtName, callback ){
var throttleTimer = arguments.length > 2 ? parseInt( arguments[2] ) : 250;
if( "Cowboy" in window ){
window.addEventListener( evtName, Cowboy.throttle( throttleTimer, callback ) );
}else{
//console.log( "without the Ben 'Cowboy' Almann throttle plugin we may choke the responsiveness of the user interface" );
window.addEventListener( evtName, callback );
}
}
function initialise(){
findLazyItems();
var seeTBjquery = ( ( "jQuery" in window ) && $.isFunction( $.throttle ) )
, seeTBplain = ( ( "Cowboy" in window ) && ( "throttle" in window.Cowboy ) )
;
if( seeTBjquery ){
lazyHandler_scroll = $.throttle( 250, checkShowItems );
lazyHandler_resize = $.throttle( 250, duringResizing );
}else{
if( seeTBplain ){
lazyHandler_scroll = Cowboy.throttle( 250, checkShowItems );
lazyHandler_resize = Cowboy.throttle( 250, duringResizing );
}else{
lazyHandler_scroll = checkShowItems;
lazyHandler_resize = duringResizing;
}
}
window.addEventListener( 'scroll', lazyHandler_scroll );
window.addEventListener( 'resize', lazyHandler_resize );
checkShowItems();
}
if( ! window.hasOwnProperty( "_pLAZY_disable_autoInit" ) ){
document.addEventListener( "DOMContentLoaded", function(){
initialise();
} );
}
return {
"debug": _debug
, "version": _version
, "findLazyItems": findLazyItems
, "checkShowItems": checkShowItems
, "forceLoad": forceLoad
, "lowestSeenImage": lowestSeenImage
, "duringResizing": duringResizing
, "hookListener": hookListener
, "initialize": initialise // american spelling
, "initialise": initialise
};
} )();
js/ajax_nav.js
"use strict";
const ajaxRequest = new (function () {
function closeReq () {
oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
bIsLoading = false;
}
function abortReq () {
if (!bIsLoading) { return; }
oReq.abort();
closeReq();
}
function ajaxError () {
alert("Unknown error.");
}
// NOT PART OF MDN EXAMPLE::
function restoreScroll(){
if( oPageInfo.url in oPageInfo.scrollTop ){
window.scrollTo( 0, oPageInfo.scrollTop[oPageInfo.url] ); // always left-most
}
}
function loadAndScroll(){
if( "pLAZY" in window ) pLAZY.forceLoad( oPageInfo.lowestSeenImage[oPageInfo.url], restoreScroll );
}
// ::NOT PART OF MDN EXAMPLE
function ajaxLoad () {
var vMsg, nStatus = this.status;
switch (nStatus) {
case 200:
vMsg = JSON.parse(this.responseText);
document.title = oPageInfo.title = vMsg.page;
document.getElementById(sTargetId).innerHTML = vMsg.content;
if (bUpdateURL) {
history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
bUpdateURL = false;
// NOT PART OF MDN EXAMPLE::
if( "pLAZY" in window ){
window.pLAZY.initialise();
if( oPageInfo.lowestSeenImage[oPageInfo.url] > -1 ){
loadAndScroll();
}else{
restoreScroll();
}
}//else console.log("without pLAZY no scrollPos restore possible");
ajaxRequest.rebuildLinks();
// ::NOT PART OF MDN EXAMPLE
}
break;
default:
vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
switch (Math.floor(nStatus / 100)) {
/*
case 1:
// Informational 1xx
console.log("Information code " + vMsg);
break;
case 2:
// Successful 2xx
console.log("Successful code " + vMsg);
break;
case 3:
// Redirection 3xx
console.log("Redirection code " + vMsg);
break;
*/
case 4:
/* Client Error 4xx */
alert("Client Error #" + vMsg);
break;
case 5:
/* Server Error 5xx */
alert("Server Error #" + vMsg);
break;
default:
/* Unknown status */
ajaxError();
}
}
closeReq();
}
function filterURL (sURL, sViewMode) {
return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
}
function getPage (sPage) {
if (bIsLoading) { return; }
oReq = new XMLHttpRequest();
bIsLoading = true;
oReq.onload = ajaxLoad;
oReq.onerror = ajaxError;
// NOT IN MDN EXAMPLE ::
oPageInfo.scrollTop[oPageInfo.url] = document.documentElement.scrollTop;
oPageInfo.lowestSeenImage[oPageInfo.url] = ( "pLAZY" in window ) ? pLAZY.lowestSeenImage() : 0;
// :: NOT IN MDN EXAMPLE
if (sPage) { oPageInfo.url = filterURL(sPage, null); }
oReq.open("get", filterURL(oPageInfo.url, "json"), true);
oReq.send();
oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
}
function requestPage (sURL) {
if (history.pushState) {
bUpdateURL = true;
getPage(sURL);
} else {
/* Ajax navigation is not supported */
location.assign(sURL);
}
}
function processLink () {
if (this.className === sAjaxClass) {
requestPage(this.href);
return false;
}
return true;
}
function init () {
oPageInfo.title = document.title;
for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
}
const
/* customizable constants */
sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
/* not customizable constants */
rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
oPageInfo = {
title: null,
scrollTop: {}, // NOT PART OF MDN EXAMPLE
lowestSeenImage: {}, // NOT PART OF MDN EXAMPLE
url: location.href
}, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
100: "Continue",
101: "Switching Protocols",
102: "Processing",
200: "OK",
201: "Created",
202: "Accepted",
203: "Non-Authoritative Information",
204: "No Content",
205: "Reset Content",
206: "Partial Content",
207: "Multi-Status",
208: "Already Reported",
226: "IM Used",
300: "Multiple Choices",
301: "Moved Permanently",
302: "Found",
303: "See Other",
304: "Not Modified",
305: "Use Proxy",
306: "Reserved",
307: "Temporary Redirect",
308: "Permanent Redirect",
400: "Bad Request",
401: "Unauthorized",
402: "Payment Required",
403: "Forbidden",
404: "Not Found",
405: "Method Not Allowed",
406: "Not Acceptable",
407: "Proxy Authentication Required",
408: "Request Timeout",
409: "Conflict",
410: "Gone",
411: "Length Required",
412: "Precondition Failed",
413: "Request Entity Too Large",
414: "Request-URI Too Long",
415: "Unsupported Media Type",
416: "Requested Range Not Satisfiable",
417: "Expectation Failed",
422: "Unprocessable Entity",
423: "Locked",
424: "Failed Dependency",
425: "Unassigned",
426: "Upgrade Required",
427: "Unassigned",
428: "Precondition Required",
429: "Too Many Requests",
430: "Unassigned",
431: "Request Header Fields Too Large",
500: "Internal Server Error",
501: "Not Implemented",
502: "Bad Gateway",
503: "Service Unavailable",
504: "Gateway Timeout",
505: "HTTP Version Not Supported",
506: "Variant Also Negotiates (Experimental)",
507: "Insufficient Storage",
508: "Loop Detected",
509: "Unassigned",
510: "Not Extended",
511: "Network Authentication Required"
};
var
oReq, bIsLoading = false, bUpdateURL = false;
oLoadingBox.id = "ajax-loader";
oCover.onclick = abortReq;
oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
oCover.appendChild(oLoadingImg);
oLoadingBox.appendChild(oCover);
onpopstate = function (oEvent) {
bUpdateURL = false;
oPageInfo.title = oEvent.state.title;
oPageInfo.scrollTop = oEvent.state.scrollTop; // NOT PART OF MDN EXAMPLE
oPageInfo.lowestSeenImage = oEvent.state.lowestSeenImage; // NOT PART OF MDN EXAMPLE
oPageInfo.url = oEvent.state.url;
getPage();
};
window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
// Public methods
this.open = requestPage;
this.stop = abortReq;
this.rebuildLinks = init;
})();

Perhaps save the scroll position in localStorage and then go to it when the page is reloaded?
as seen here
Check if the key exists (and if it does - scroll to it) right after DOMContentLoaded, i think, otherwise it will wait for all the images to load.
You can also choose to save the scroll position after every scroll, and not only on unload

Iterate over all Links in the Dom - Is there a more elegant solution?

I am looping over all elements on my page which is handled by pushState and preventing default behaviour. I assume my function is pretty expensive, so I tried different other solutions with eventlisteners which did not work as expected. This function is running on each link click after the readystate event of that xhr request. In the end I am changing the content of my element by xhr and run this function again.
I also tried to do it like this: https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
which adds a single listeners which looks where you clicked, but this end up showing me other elements I clicked and not my a-elements so this didn't work either.
var dragging = false;
function addPushStateActionToAllLinks() {
var e = Array.from(document.getElementsByTagName("a"));
for ( var i = 0; i < e.length; i++ ) {
e[i].ontouchmove = function () {
dragging = true;
};
e[i].ontouchstart = function () {
dragging = false;
};
e[i].onclick = function ( el ) {
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
if(e[i].getAttribute('rel') !== 'noopener noreferrer' && e[i].getAttribute('href') != "" ) {
e[i].ontouchend = function ( el ) {
if ( dragging === true ) {
return;
}
loadInternalLinkByXhr( this, true );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
} else {
e[i].ontouchend = function ( el ) {
if ( dragging === true ) {
return;
}
loadExternalLink( this );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
}
}
}
EDIT:
I also tried this, works as expected but i assume click is slower on mobile devices:
function someFunction( ) {
var e = document.getElementsByTagName("a");
for ( var i = 0; i < e.length; i++ ) {
if(e[i].getAttribute('rel') !== 'noopener noreferrer' && e[i].getAttribute('href') != "" ) {
e[i].onclick = function ( el ) {
if(typeof window.navigator.vibrate !== 'undefined') {
window.navigator.vibrate( 1 );
}
loadInternalLinkByXhr( this, true );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
} else {
e[i].onclick = function ( el ) {
if(typeof window.navigator.vibrate !== 'undefined') {
window.navigator.vibrate( 1 );
}
loadExternalLink( this );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
}
}
}
I want the most performant best practice for doing this. Only parts of my site is changing when you click a link, navigation, header etc. stay like they are. I tried adding eventlisteners to each element and it end up firing multiple xhr requests which got more and more and I was unable to figure out why this happens, I also tried removing the eventlistener before adding a new, but it still seemed to add multiple to it. This only worked on full page-requests for me, which I want to prevent. However, my function works as expected, before I was using onclick only, now I am trying ontouchend with move prevention because it might react a tiny bit faster. This project is new, so I am open to modern browser features and vanilla js.

You can use a single function for each event without duplicating them if you use function declarations in your original design.
function ontouchmove () {
dragging = true;
};
function ontouchstart() {
dragging = false;
};
function onclick( el ) {
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
for ( var i = 0; i < e.length; i++ ) {
e[i].ontouchmove = ontouchmove;
e[i].ontouchstart ontouchstart;
e[i].onclick = onclick;
if(e[i].getAttribute('rel') !== 'noopener noreferrer' && e[i].getAttribute('href') != "" ) {
e[i].ontouchend = function ( el ) {
if ( dragging === true ) {
return;
}
loadInternalLinkByXhr( this, true );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
} else {
e[i].ontouchend = function ( el ) {
if ( dragging === true ) {
return;
}
loadExternalLink( this );
el.preventDefault ? el.preventDefault() : (el.returnValue = false);
};
}
}
}
Else, using JQuery to select all your elements at once and setting the event on the whole selection makes better sense.
var allLinks = $('a');
allLinks.on('touchmove', function () {
dragging = true;
};)
allLinks.on('touchstart', function () {
dragging = false;
};)
allLinks.on('cick', function () {
this.preventDefault ? this.preventDefault() : (this.returnValue = false);
};)
You can use .each method to iterate your selection and perform actions based on attributes.
allLinks.each(function() {
if ($(this).attr('rel') !== 'noopener noreferrer' && $(this).attr('href') != "" ){
...
}
});

Open new tab onclick table row - plugin

I use a plugin so when I click on a table row it goes to that url. Now this works fine but I would like it to open as a new tab. I know that " window.open('urlhere','_blank');" opens the url into a new tab but I cant figure out where I should put it. Does anyone know how or has experience with this plugin?
Plugin I use : https://github.com/DeOldSax/clickable-tr-jquery
Plugin code:
(function ( $ ) {
var disableClickClass = 'disable-row-click';
var defaults = {};
var settings;
$.fn.clickableTable = function( options ) {
settings = $.extend( defaults, options);
var rows = this.find('tr[data-href], tr[data-event]');
rows.css("cursor", "pointer");
rows.find("td." + disableClickClass).css("cursor", "default");
addClickEvent(rows);
return this;
};
function addClickEvent(rows) {
rows.click(function(e) {
if (notClickable(e)) {
return;
}
var dataEvent = $(this).data("event");
if ( dataEvent ) {
if (settings && settings[dataEvent]) {
settings[dataEvent].call( this, e );
} else {
var fun = window[dataEvent];
if ( typeof fun === "function" ) {
fun.call( this, e );
}
}
}
var dataHref = $(this).data("href");
if ( dataHref ) {
var isRemote = $(this).data("remote");
var id = "uniquy-id-id";
var aTag = buildATag(id, dataHref, isRemote);
document.getElementById(id).click();
aTag.remove();
}
});
}
function notClickable(e) {
var target = $(e.target);
return e.target.localName == 'a' ||
e.target.localName == 'button' ||
target.hasClass(disableClickClass) ||
target.closest('td').hasClass(disableClickClass);
}
function buildATag(id, dataHref, isRemote) {
var a = $('<a></a>');
a.css('display', 'none');
a.attr('data-remote', isRemote);
a.attr('href', dataHref);
a.attr('id', id);
a.insertAfter($("body"));
return a;
}
}( jQuery ));

Just use this code: jsFiddle
$("tr").click(function(){
var $href = $(this).data("href");
window.open($href,'_blank');
});
Exclude the last td Element: jsFiddle
$("tr").click(function(){
var $href = $(this).data("href");
window.open($href,'_blank');
});
$("tr > td:last-child").click(function(event){
event.stopPropagation();
});

Feature detection for parallax / background-position

Ok, so I've created my own parallaxing jQuery/JS script, but I just don't know how to target browsers that will support the following (needs the following):
Supports transition for background-position
The site (preview) I'm trying this at is:
My Test Site
How can I detect whether a browser will support this though?
Can I run media queries bases on window width?
Do I have to browser sniff?
I can't see anything on the WWW that gives me clues as to how I can feature-detect for this.
Any help would be greatly appreciated.
My JS code is here: (please feel free to use it if you like it)
var goTop = 0;
var thisGoTop = 0;
var thisHeight = 0;
var thisWinH = 0;
var bottomIntrusion = 0;
var thisMax = 0;
var bgPos = 0;
function parallax(){
goTop = $(window).scrollTop();
thisWinH = $(window).height();
$('div.para').each(function(){
thisGoTop = $(this).offset().top;
thisHeight = $(this).height();
thisMax = Math.floor(thisHeight * 0.3);
bottomIntrusion = (thisGoTop + (thisHeight / 2) - goTop) / thisWinH;
if (bottomIntrusion > 0) {
bgPos = 0 - (Math.floor(thisMax * bottomIntrusion));
$(this).css('background-position','center ' + bgPos + 'px');
}
});
}
parallax();
$(window).scroll(function(){
parallax();
});
Edit:
I've looked into the Modernizr library, and I haven't found anything that gives me clues about background-position transform support for CSS3. I'm getting real close to brower sniffing at this point, and I'd hate to go there.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$( document ).ready( function() {
var Compatibility = function()
{
var context = this;
context.TestObject = function( id )
{
function CreateObject( id )
{
$('body').prepend('<div id="CompatibilityTestObject_' + id + '"></div>');
}
// Constructor
CreateObject( id );
return {
GetObject: function( id )
{
try
{
// Fetch with raw Javascript so if the javascript method does not exist it will throw an error
var fetchedDomElement = document.getElementById( "CompatibilityTestObject_" + id );
return fetchedDomElement;
}
catch( e )
{
// Failed to fetch DOM Element
return false;
}
},
DeleteObject: function( id )
{
try
{
$( "#CompatibilityTestObject_" + id ).remove();
return true;
}
catch( e )
{
// Failed to remove object
return false;
}
}
}
}
context.Factory = function()
{
return {
CreateTestObject: function( id )
{
var m_TestObject = new context.TestObject( id );
return m_TestObject.GetObject( id );
},
DeleteTestObject: function( id )
{
return context.DeleteObject( id );
}
}
}();
var CSS = function()
{
return {
BackgroundPosition: function()
{
var testObject = context.Factory.CreateTestObject( "BackgroundPosition" );
try
{
// My first try at testing for background positioning
testObject.style.backgroundPosition = "center";
return true;
}
catch( e )
{
// Implement the handling of this error
//alert( "Does not support backgroundPosition: " + e.message );
return false;
}
}
}
}();
return {
CheckCSS: CSS
}
}();
} );
</script>
Take a copy of the above script... place it in your code there, then call upon it like so:
if( Compatibility.CheckCSS.BackgroundPostion() )
{
// Compatible browser
}
else
{
// Not compatible
}

stand-alone lazy loading images (no framework based)

I look after a site which by nature has to load quite a lot of images and content on the page. We have decreased the number of elements and graphical layout images as much as we can, so we are now looking at ways to increase the page load in the browser.
Does anyone know any code for lazy loading images that doesn't require a framework such as jQuery?

Here is my own. Have Fun.
Tested: IE 5.5+, FF 2+, Chrome, Opera 9.6+
Usage:
your lazyloaded images should have their real src in a thumb attribute
Just include the javascript file inline or externally.
If you don't want to use it on your entire page, you can do:
LazyImg().destroy(); // stop global fetching
LazyImg("watch-only-this-div");
Note: when you include the file a global instance is already created watchin the whole document. You need to stop that first and start you own instance.
set a custom offset for prefetching (how far below the fold the image should be fetched)
// watch the whole document
// prefetch offset: 300px
LazyImg(document, 300);
Code:
//
// LAZY Loading Images
//
// Handles lazy loading of images in one or more targeted divs,
// or in the entire page. It also keeps track of scrolling and
// resizing events, and removes itself if the work is done.
//
// Licensed under the terms of the MIT license.
//
// (c) 2010 Balázs Galambosi
//
(function(){
// glocal variables
var window = this,
instances = {},
winH;
// cross browser event handling
function addEvent( el, type, fn ) {
if ( window.addEventListener ) {
el.addEventListener( type, fn, false );
} else if ( window.attachEvent ) {
el.attachEvent( "on" + type, fn );
} else {
var old = el["on" + type];
el["on" + type] = function() { old(); fn(); };
}
}
// cross browser event handling
function removeEvent( el, type, fn ) {
if ( window.removeEventListener ) {
el.removeEventListener( type, fn, false );
} else if ( window.attachEvent ) {
el.detachEvent( "on" + type, fn );
}
}
// cross browser window height
function getWindowHeight() {
if ( window.innerHeight ) {
winH = window.innerHeight;
} else if ( document.documentElement.clientHeight ) {
winH = document.documentElement.clientHeight;
} else if ( document.body && document.body.clientHeight ) {
winH = document.body.clientHeight;
} else { // fallback:
winH = 10000; // just load all the images
}
return winH;
}
// getBoundingClientRect alternative
function findPos(obj) {
var top = 0;
if (obj && obj.offsetParent) {
do {
top += obj.offsetTop || 0;
top -= obj.scrollTop || 0;
} while (obj = obj.offsetParent); //
return { "top" : top };
}
}
// top position of an element
var getTopPos = (function() {
var dummy = document.createElement("div");
if ( dummy.getBoundingClientRect ) {
return function( el ) {
return el.$$top || el.getBoundingClientRect().top;
};
} else {
return function( el ) {
return el.$$top || findPos( el ).top;
};
}
})();
// sorts images by their vertical positions
function img_sort( a, b ) {
return getTopPos( a ) - getTopPos( b );
}
// let's just provide some interface
// for the outside world
var LazyImg = function( target, offset ) {
var imgs, // images array (ordered)
last, // last visible image (index)
id, // id of the target element
self; // this instance
offset = offset || 200; // for prefetching
if ( !target ) {
target = document;
id = "$document";
} else if ( typeof target === "string" ) {
id = target;
target = document.getElementById( target );
} else {
id = target.id || "$undefined";
}
// return if this instance already exists
if ( instances[id] ) {
return instances[id];
}
// or make a new instance
self = instances[id] = {
// init & reset
init: function() {
imgs = null;
last = 0;
addEvent( window, "scroll", self.fetchImages );
self.fetchImages();
return this;
},
destroy: function() {
removeEvent( window, "scroll", self.fetchImages );
delete instances[id];
},
// fetches images, starting at last (index)
fetchImages: function() {
var img, temp, len, i;
// still trying to get the target
target = target || document.getElementById( id );
// if it's the first time
// initialize images array
if ( !imgs && target ) {
temp = target.getElementsByTagName( "img" );
if ( temp.length ) {
imgs = [];
len = temp.length;
} else return;
// fill the array for sorting
for ( i = 0; i < len; i++ ) {
img = temp[i];
if ( img.nodeType === 1 && img.getAttribute("thumb") ) {
// store them and cache current
// positions for faster sorting
img.$$top = getTopPos( img );
imgs.push( img );
}
}
imgs.sort( img_sort );
}
// loop through the images
while ( imgs[last] ) {
img = imgs[last];
// delete cached position
if ( img.$$top ) img.$$top = null;
// check if the img is above the fold
if ( getTopPos( img ) < winH + offset ) {
// then change the src
img.src = img.getAttribute("thumb");
last++;
}
else return;
}
// we've fetched the last image -> finished
if ( last && last === imgs.length ) {
self.destroy();
}
}
};
return self.init();
};
// initialize
getWindowHeight();
addEvent( window, "load", LazyImg().fetchImages );
addEvent( window, "resize", getWindowHeight );
LazyImg();
window.LazyImg = LazyImg;
}());

"thumb" does not validate when using XHTML. I changed it to "title" and it seems to be working ok.

Develop Reference

JavaScript is the programming language of the Web.

Javascript “confirm” in IE6 and IE7 - javascript

Related

Back to previous page same scroll position with lazy load images on page using jquery

Iterate over all Links in the Dom - Is there a more elegant solution?

Open new tab onclick table row - plugin

Feature detection for parallax / background-position

stand-alone lazy loading images (no framework based)

Categories

Resources