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();
}
});
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 have an iframe that links to another internal web application.
There's a side panel with a list of links that changes the src of the iframe. Sometimes if there's a lot of data, the iframe site takes a while to load. I want to put a spinner icon when a link is clicked and hide it when the frame is loaded.
I change the src using $('#myiframe').attr('src', urlVar) in a click function for the links. I can show the spinner on click.
The problem is, how do I hide it? How do I find out that the iframe has finished loading?
I tried using $('#myiframe').load(function() { }) but that only works on the initial load (i.e. for the first link I click), not for subsequent loads (if I click on another link).
This javascript works for me :
function loadNewUrl (url){
if(url === undefined) url = 'http://example.com?v=' + Math.random();
var ifr = document.getElementById('myiframe');
ifr.setAttribute('src',url);
ifr.onload = function() {
alert('loaded');
};
}
I have a question about the new tab for the link.
Is there anyway I can set the browser tab title before user clicks a link? It seems like there is no way to debate the title for the new tab if the html contained in the new tab doesn't have title attribute. Am I right? How do I set the title?
//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
As you have it, this is not possible because your links are just normal HTML links. When the new page opens in a new tab, the current page will not have any reference to it and so cannot change it in any way. You will need to open the page using javascript and set the title that way.
You can dynamically set this up in window onload to find all a tags and add a click event whihc opens the window and sets the title.
If you want different titles for each page, you can store this in a data- attribute in the a tag.
Note tho that this will only work with pages in the same domain (for security), and that it does not handle people right clicking and pressing "Open in New Window". Middle click in Windows does seem to work however.
HTML
open me
JavaScript
window.addEventListener("load", function() {
// does the actual opening
function openWindow(event) {
event = event || window.event;
// find the url and title to set
var href = this.getAttribute("href");
var newTitle = this.getAttribute("data-title");
// or if you work the title out some other way...
// var newTitle = "Some constant string";
// open the window
var newWin = window.open(href, "_blank");
// add a load listener to the window so that the title gets changed on page load
newWin.addEventListener("load", function() {
newWin.document.title = newTitle;
});
// stop the default `a` link or you will get 2 new windows!
event.returnValue = false;
}
// find all a tags opening in a new window
var links = document.querySelectorAll("a[target=_blank][data-title]");
// or this if you don't want to store custom titles with each link
//var links = document.querySelectorAll("a[target=_blank]");
// add a click event for each so we can do our own thing
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", openWindow.bind(links[i]));
}
});
Sample JsFiddle
You can pass the title with hash and get it on another page, if this another page is yours and you can modify its code.
1st page:
...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...
2nd page - modify the body opening tag like this:
<body onload="document.title=window.location.hash.replace('#','');">
If the page you are linking to isn't yours, you can use window.open method:
open me
I have not seen addEventListener work reliably, especially when opening a new page using javascript. The best way to change the tab title and have it work reliably is to set a timeout until the page loads. You may have to play with the timeout value, but it works.
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
You have two options. Using pure HTML, you can let the user open up links, then later on change the title. Or you can change the title with inline JavaScript. Here's how you do both:
Method 1
Change your links by assigning a target attribute, and then later on use that window name to control the document. For instance in your links it would be: <a href="whatever" target="theNewWindow">. Whenever you want to change the title for this page, you'd use JavaScript as such: window.open("", "theNewWindow").document.title = "New Page Title!"; The problem with this method however is that all links with that target/window name will open in that same window. In addition, after the first time the link is clicked, your browser won't automatically switch to the new tab/window.
Method 2
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately. Basically it would come down to look like: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. This opens the window based on the href attribute, immediately changes the title, and sets the window to change the title to that when it finishes loading (just in case there really was a title tag).
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.
The simplest way is a follows:
var winTab = window.open("", "_blank")
//Open URL by writing iframe with given URL
winTab.document.write("write iframe with your url in src here")
//Set Title for the new tab
winTab.document.title = "Form Title"
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset. You can then either change the title dynamically when loading your page 2, or as others have suggested if you use window.open you can control the title from the parent page.
If you are in page 1, and opening page 2 in a new tab, you can't set title for page 2 from page 1.
If you have access to page 2 then it's possible, otherwise not.
I have a url that I want to load in an iframe that's inside a pop-up window. The parent window has a script that inserts a script to the pop-up window so that it the popup will refresh the parent window when the pop-up is closed.
function popUp(url) {
newwindow = window.open('', 'mypopup', '');
var tmp = newwindow.document;
tmp.write('<!DOCTYPE html><html><head><title>My Pop-Up</title></head>');
tmp.write('<body><iframe src="' + url + '" scrolling="no" frameborder="0"></iframe>');
tmp.write('<script type="text/javascript">window.onunload = function(){ window.opener.location.reload(); }</script></body></html>');
tmp.close();
}
I chose to write the html via javascript because I can't edit the page being loaded (I need to really reload the parent when the pop-up is closed.) This works on chrome and firefox but IE has an error 'SCRIPT5: Access is denied.' I'm not trying to access any part of the page that is being loaded in the iframe, I just want to load it.
When I open the page in a new IE tab, it loads fine. Also, if I load the url via showModalDialog(), the page loads. I wish I could just use showModalDialog() but when the save button is clicked on the pop-up page, another pop-up opens so I guess that's out of the question.
Help would be greatly appreciated.
Thank you :)
Well, if you want to check only when the pop up is closed then you can initiate external timer to check this:
var checkPopup = window.setInterval(function() {
if (newwindow.closed) {
window.clearInterval(checkPopup);
document.location.reload();
}
}, 100);
This way you don't rely on fancy scripting inside the pop up itself.