We Keep Coding

Link to open tab from menu help. jQuery Tabslet

I'm wanting to link to a certain tab (Portfolio Tab) on a page from the main menu of a website, so when clicked it goes to that page with that portfolio tab open.
So far I've come up with this (using jQuery Tabslet) which works when not on the same page, but doesn't work if the user happens to be on the same page as the tabs, and so does nothing.
The link I use in the main menu is /about/#tab-3 which is doing the job of going to the about page with the portfolio tab open.
I thought I may need to trigger a page refresh when on the same page? And perhaps remove the #tab-3 from the url too.
Not being a jQuery expert, I unfortunately just don't know.
Here is the code so far
Thanks in advance.
jQuery(document).ready(function($){
$('.tabs').tabslet({
active :1,
animation : true,
container: '.tabs-container'
});
var hash = $.trim( window.location.hash );
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
});

Advise: Always mention a reference to the plugin you use. I assume here you talk about this one.
This plugin acts on tab click only.
So when using a window hash in a link from another page like you do, you have to "simulate" a click on the tab.
So you will use an attribute selector to find the anchor having a href corresponding to the hash...
And click it.
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
$("a[href='"+location.hash+"']").click(); // Add this!
}
};

sessionStorage not persisting when I return to page

I am using a popup when visitors get to a certain section of the site. When a visitor hits the x the popup closes, and I want this state to persist throughout their visit so they don't get annoyed. But if they close their browser and come back to the site another day, I would like the popup to show again.
In Chrome desktop browser: Right now, it is working where the popup shows, if I click the x it closes and if I click deeper into other pages on the site, it doesn't show again, but if I go back to the top-level page it pops up again. And vice versa, if I enter on an interior page and hit close it works, but if I get to the top level page it shows again. What am I doing wrong?
require(["jquery", "domReady!"], function ($) {
// mobile
$(window).on('touchmove', function () {
if (($(window).scrollTop() > $(window).height() / 2) &&
sessionStorage.getItem('semCroPopupDisabled') !== "true" ) {
$('#croWrapper').animate({
bottom: 0
}, 'fast');
}
});
// desktop
$(window).on('scroll', function () {
if (($(window).scrollTop() > $(window).height() / 2) &&
sessionStorage.getItem('semCroPopupDisabled') !== "true" ) {
$('#croWrapper').animate({
bottom: 0
}, 'fast');
}
});
$('#croWrapper').on('click', '#xclose', function () {
sessionStorage.setItem('semCroPopupDisabled', "true");
$('#croWrapper').hide();
});
});

Session storage is for a single session, which ends when the browser is closed. What you're looking for is local storage, which has the same API and does not end with the session (browser close)

Scroll top after popping up a new window. - Jquery [duplicate]

This question already has answers here:
How to check if element is visible after scrolling?
(46 answers)
Closed 5 years ago.
So currently on button click I'm popping up a new window that goes to some website. But not only do I need to pop open to this new site but I also need to scroll down a little on the popped up screen. Here is what I'm currently doing:
$(document).ready(function () {
$('.popup').click(function(event) {
event.preventDefault();
window.open("https://www.spmet.aspx", "popupWindow", "width=1400,height=600,scrollbars=yes");
setTimeout(function() { scrollTo(0,150) }, 1000);
});
});
This currently opens the window successfully but how do I amend a change that will scroll to a particular spot in the site.

your code is runnning in the parent window, not in the pop up one. If you can´t put int in the pop up target, try scrolling by reference adding "#btnLogin_div" top the url like this:
$(document).ready(function () {
$('.popup').click(function(event) {
event.preventDefault();
window.open
("https://www.spmet.aspx",
"popupWindow", "width=1400,height=600,scrollbars=yes");
setTimeout(function() { scrollTo(0,150) }, 1000);
});
});

Because You open a new window, js is loaded second time and click event wasn't executed. You can use something like:
$(document).ready(function () {
if (window.location.href.indexOf("my_url") > -1) {
$('html,body').animate({ scrollTop: "0px" }); // or 150px
}
});
or use some global variable for setTimeout and break it after execution.

Since you are opening a new window; the js on your old page is not used; you have to add the scroll js on the new page you are loading. This is good cause otherwise I could have you go to a page and phantom click on stuff, which would not be good.
You can get around it by opening the page in an iframe; where you can scroll your iframe window.

load website in to a page via ajax or iframe and avoid navigation

This is what i need to do.
there is a web page and another website, both are hosted in same domain. i want to load that whole web site in to a div or iframe of that web page. similar example for this is a free proxy browser like hidemyass.com.
i know this can be easily done but the point is that i also need to avoid navigation. say that the web site has 2 pages called a.htm and b.htm . there is a link to b.htm from a.htm. so when some one click the link on a.htm, the browser will redirect to b.htm
when i embed that a.htm in a part of my page, if some one click the link; it will redirect to the b.htm in browser. what i want to do is that avoid that redirect and when some one click on the link, b.htm should load in my page itself.
i have no way to change that website(in this case a.htm and b.htm), everything should be done in that page.
how can i achieve this?

If you are only looking at link clicks and not navigation via JavaScript then the following code should do:
<iframe id="frame" src="a.html"></iframe>
<script type="text/javascript">
function onClick(event)
{
var link = event.target;
while (link && link.localName != "a")
link = link.parentNode;
if (link && !link.hasAttribute("target"))
link.setAttribute("target", "_parent");
}
// Listen to clicks inside the frame
document.getElementById("frame").contentWindow.addEventListener("click", onClick, false);
</script>
This will check the links the user clicks on and add target="_parent" attribute to them if no explicit target is defined. This means that links targeted at a new window/tab will still work as usual, links meant to replace the current page will replace the parent document instead. But this only works of course as long as the JavaScript code in a.html doesn't interfere.

If you only want to skip the link from your page only, you can add onclick handle to you link and return false when the frame has not completely loaded
this is the script
function checkLink(){
if (canNavigate){
return true;
}
return false;
}
but if you want to disable navigation on browser address you have to do like linkbuck website
http://c6f11ddd.linkbucks.com/url/http://www.google.com
linkbuck will not allow you to navigate away while ads has not been loaded yet.
They archive this by using these code, you should investigate it
Buster: function () {
var interval = setInterval(function () {
if (Lbjs.IsClick) {
clearInterval(interval);
}
else if (Lbjs.Unload > 0) {
Lbjs.Unload -= 2;
window.top.location.replace("/cancelnavigation/");
Lbjs.NavigationNotice();
}
}, 1);
var clearDelay = (this.Countdown > 0) ? this.Countdown : 8;
setTimeout(function () { clearInterval(interval); }, clearDelay * 1000);
},
NavigationNotice: function () {
var navNotice = document.getElementById("navNotice");
navNotice.innerHTML = "<span class=\"warning\" style=\"text-align:center;height:20px;width: 400px;padding: 10px;\"><b>Request Cancelled</b> - Navigation is disabled for 8 Seconds...</span>";
if (navNotice.style.display == "none") {
this.Fader.FadeIn(navNotice, 200, function () {
setTimeout(function () {
Lbjs.Fader.FadeOut(navNotice, 200, null);
}, 1500);
});
}

Is there a way track the focus on tab with Javascript?

We need to track the EFFECTIVE time on site of our users
Most users, when they're done, leave the tab open and move to another tab
Time on site it's extremely inaccurate
Is there a Javascript Event to track the "loss of focus" of the current tab ?

This should work both on tab switch and on browser window losing focus:
function onBlur() {
document.body.className = 'blurred';
};
function onFocus(){
document.body.className = 'focused';
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}

I would do something with mousemove and scroll and count a visitor as active as long as either of those trigger within some interval. That will also cover them leaving the browser open and leaving the computer.

Which tab you are talking about? Is it your Nav/menu tab or Browser tab. I feel, you mean browser tab!
I think it is not possible accurately. But what if you track few events like mousemove, focus etc and then fire an event that same some data (counter) on server. When user is on your page then he will do something something like move mouse, click somewhere etc. So difference in first page load and last event can tell the usage stat.

Though question was asked long ago, it might still be found by someone. In this case, use Page Visibility API:
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
document.visibilityState - to get a current tab state.
document.onvisibilitychange - to add a callback for state change.

<script>
document.onvisibilitychange = () => {
if (document.visibilityState === "hidden") {
console.log("tab inactive");
}
if (document.visibilityState === "visible") {
console.log("tab active");
}
};
</script>