I have a webpage where I have a set of nav tabs on the home page that have a link to where the user can click to obtain more information. I want the site to then to to the correct nav tab on another page with the additional information as per the link they clicked. Here is the link to the github repo:
https://github.com/rise-and-shane93/Clean-Sweep-Products-Current
The way I do this is to add a # fragment identifier to the URL of the page I'm calling with the tab name, like https://page.html#tab1 . Then, in your called page, on document ready, you can search the URL for the #tab1 and if it's present, open tab1:
$(document).ready(function() {
hashValue = window.location.hash;
if(hashValue != undefined && hashValue == "#tab1"){
$("#tab1").show();
}
});
Related
I am creating links to sections on the same page in HTML. By default they are not visible display : none. I want when my user clicks on the link (URL) which included id so it should set display : block. For example opening is the id when window.location.href includes #opening so content should be visible. User can simply hit mydomain#opening in the browser without clicking <a> or #id.
HTML
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
<p>My Name is XYZ...</p>
CSS
#opening {display : none;}
Try this :-
<a href="#opening" onclick="$('#opening').css({display: 'block'})" >Take me to the opening paragraph.</a>
OR
$("a").click(function() {
var href = $(this).attr("href");
href = href.replace("#","");
$("#"+href).css("display","block");
})
On window load :-
$(document).ready(function() {
var hash = window.location.hash.substr(1);
if (hash) {
$("#"+hash).css("display","block");
}
});
I have one page with list of reports and after clicking on report it redirects me to internal report page in new tab with:
window.open(reportIdUrl,reportId);
So when i am back on report list and i want to open same report i will use
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
But when someone from new tab with internal report page navigates somehow to report list page (within this tab) and then tries to open internal report page it will open it in same tab as it is tab reference not content reference.
Does anybody know some way to drop reference when i access if condition?
Something like:
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
window.dropReference(reportId) //change_me
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
So it will create new tab with new reportId reference?
Thanks
EXAMPLE
--reportlistpage
linkToReport1 (window.open(report1Url,1))
linkToReport2 (window.open(report2Url,2))
.
.
.
You click on linkToReport1 - 2 tabs are opened. One with reportlistpage and one with internal-report/report1.
You go back to parent tab and click to linkToReport1. Tab is opened with reference to "1" and will focus to it and no new tab is opened (this is ok).
You are on linkToReport1 and you redirect with some menu hyperlink to reportlistpage (within linkToReport1 tab). Url changed to /report-list
You click to linkToReport1. Nothing happen (this is not ok) because you are on the tab with reference to 1 (content and url changed), now you want to open a new tab with /internal-report/report1 url and store it as 1 with window references.
I figured it out. It is bit simple when you realize you can set or reset window.name. So there is nothing like references from parent.
Based on content you can do something following. In the page you want to keep track in tab,
at the beginning (in my case internalReport id):
var currentWindow = window.self;
currentWindow.name = reportId; //this is in case someone manually opened it without window.open(internalReportUrl, reportId)
then bind resetting of window.name on beforeunload event (e.g.):
var resetWindowName = function() {
var currentWindow = window.self;
currentWindow.name = ""
}
window.addEventListener('beforeunload', resetWindowName);
So when you redirect from internalreportpage somewhere, name is cleared and you can repeadetly call
window.open(internalReportUrl,reportId)
which will open new tab for you.
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!
}
};
I use Fancybox to display external html pages in fancybox, for example : In page1 I set a link, which opens page2 in fancybox iframe mode, and that works fine.
The question is :
Is it possible that if somebody tries to enter the URL of page2, make page2 to always open in fancybox from within page1 instead of the browser window like a normal page?
Yes, it's possible.
So page one (parent.html), will open page two (iframed.html) in fancybox from a link like
<a id="openIframe" class="fancybox" href="iframed.html">Open page inside fancybox iframe</a>
Notice that I set an ID and a class to the link that will open the iframed page.
Then the script for each page:
parent.html
parent page should have two specific codes :
a code to initialize fancybox
a code to detect when a hash is present in the URL so it can fire fancybox
so :
// initialize fancybox
$(".fancybox").fancybox({
// API options
type: "iframe" //<== at least this one
});
if (window.location.hash) {
// detect if URL has hash and trigger fancybox
$(window.location.hash + ".fancybox").trigger("click");
// remove hash after fancybox was opened
// two methods to cover most browsers
if (navigator.userAgent.match(/msie/i)) {
var loc = window.location.href;
index = loc.indexOf('#');
if (index > 0) {
window.location = loc.substring(0, index);
}
} else {
history.pushState("", document.title, window.location.pathname);
};
};
Then the second page (iframed.html) should have a code that detects if itself has been opened inside an iframe or not (the fancybox iframe in our case).
If not, it should redirect to the parent page, targeting the ID of the link that opens fancybox so :
iframed.html
if (self == top) {
window.location.href = "parent.html#openIframe";
};
Notice that self == top will return true if the page wasn't opened inside an iframe so it redirects to parent.
See JSFIDDLE (and try also opening the link in a new window/tab)
I have a page http://bartle96.narod2.ru/demo.html there are 4 links to the hidden content
Is it possible to make a direct link to the content such as "dolphin".
So that when you click on a link http://bartle96.narod2.ru/demo.html#delfin immediately opened a photo with a dolphin
Yes, you can define and open needed content on onload event.
Check this post where you can find the same behaviour:
jQuery when pointed to a link should show a div that's hidden by default
You can get the hash value using window.location.hash. Then set the pic you want based on the value.
window.onload = function() {
var pic = window.location.hash;
if ( pic === "#delfin" ) {
// Show picture of dolphin
}
}