Creating new tab / switching between Tabs in Firefox? - javascript

I am looking for a way to improve the workflow in a PHP based CMS. There is a lot of switching between the editor mode and the preview mode of the page. The editor mode is huge to load, and so I would like to open the preview mode in a different window.
I don't want to use new windows or an iframe within the current window to keep the workflow simple and to avoid confusion.
Is there a way to explicitly open a new tab (not window), and to jump to that tab from a document, in Firefox? The number of users is limited, so there is the possibility to set up the client with the necessary extensions / permissions.
I know Firefox can be forced to open all links in tabs, but I think that won't cut it, as I still can't address and focus the newly opened window.
Thanks for all the great answers everyone. I have now enough material to decide whether I'll take the greasemonkey approach, rely on the user to set up "open in tabs" and address the window by name, or use a "inline" HTML solution as so many of you suggested. I am accepting the answer that I feel went most effort into.

There is no way to force a window to open as a tab. It's all dependent on the user's preference settings.

I second the answers that say you should do this in HTML using Javascript. Then it can work in all browsers that support JS.
I would put two divs on the page and show/hide each div depending on which tab is selected. If you are clever about this you could trap the click on the tab and determine if the user left-clicked or middle-clicked. If they left click you load that tab on the page. If they middle-click you let the browser open a new tab/window (according to the user's prefs, don't try to force it), and leave the current window unchanged (that is, don't switch to the new tab). The action for clicking on the tab would be to use AJAX to load the contents of the remote document and put it into the tab. Use Javascript to modify the URL before submitting the AJAX request so that the server knows to send a web page fragment instead of the whole page.
The advantage of this dual-natured solution is that the tabbed approach will work the way you want it to work for the majority of cases, but for users with, say, two screens, or who prefer switching between browser tabs, they will still have the flexibility to work in multi-window mode. This can all be done without any browser extensions and it should work equally well in IE as well as Firefox, Opera, etc. Avoid locking yourself into one browser, even one as excellent as Firefox. One day a customer will need to use Opera or Safari and you'll be stuck.

You say you don't want to use an iframe to avoid confusion. Now I don't know about the layout of your website, but I've been using the approach that the editor opens in its own div right next to the content being edited and the content is being live updated as you edit. No need to change tabs.
(If the window is too narrow there are HTML tabs Edit and Preview)
It does not seem to add confusion to the user and for me this approach works really well. Maybe it's worth considering in your case.

What about using iframes and JavaScript?
I know you said you want to avoid 'confusion using iframes', but in my opinion if you really need to load different pages at the same time this is the best option.
In theory, you could create your own tab system using javascript or even better, using jQuery, because its UI module offers pretty cool tab control.
For every tab you could load separate "headerless-footerless" version of your specific admin page inside <iframe> element. If user wanted to modify something different, he will simply click on the tab and bring different iframe.
All this could also be done using AJAX, but iframe solution is quite easy as you just need to load ready page and all postbacks are already handled by original page and separated from master-admin-page.
You might also need to play a little bit to set correct height of your iframe to fit all the content without scrollbars, but this again, is just bit of javascript.

Nope, there's no way to force the opening of a new tab, simply because this would be unsupported by un-tabbed browsing
You can only set it to open a new window, not a new tab.

Greasemonkey springs to mind - a quick google gives open in tabs on left click. I think you could modify that so it only runs on one particular page, and you'd be up up and away.

This question made me wonder if HTML 5 allows that sort of specification, and it doesn't (nothing in one of the other hyperlink attributes, either). A new browsing context is a new browsing context, there's no way to express a preference for tab over window or foreground over background.

You can't force a tab, but if you use a target with a specific name, like target="my_cms_window", many browsers will open this as a new tab. Additionally, they will remember the name and if you use the target repeatedly, put the contents in the same tab. I have found that this works pretty well in the real world.

Related

Use window.open to a tab in the background (not switch focus)

I'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.

Open multiple pages in once with javascript/ jquery

I want to create elements which (when clicked) will guide visitors towards two differenct websites (both in new windows). How can I do this? Below are the two ways which I tried, which both do not work as only one page/ window is opened. Thanks in advance!
Timo
The solution as suggested here: How to make a link open multiple pages when clicked . But maybe the solution is outdated, but for me only the first webpage is openend (with all the indicated solutions. (for example the code which is suggested there)
HTML Click Here
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('https://www.youtube.com/watch?v=H9XIXFwpyEc');
window.open('https://stackoverflow.com/search?q=open+multiple+pages');
});
While both using a class and an id with both a different a href and both with the extra options of opening new window also does not work as it only opens the first window
HTML Click Here
$('.yourlink').html(''); // Add page
$('.yourlink a').attr('target', '_blank');// Make sure it opens in new window
$('#extra').html(''); // Add page
$('#extra a').attr('target', '_blank');// Make sure it opens in new window
Using Chrome, I'm not seeing the problem you describe. But when I tested it in IE, I suddenly got a "popup blocked" message.
It's not strange though. I'd hate it if a single click on a link could suddenly spawn 10 new windows. In this scenario I actually think IE handles it better (by blocking the second window).
The thing is that window.open will only work if the action that invokes it is a trusted event. That usually means a user-initiated event, like click. But what Chrome doesn't account for (I assume) is that a single trusted event can then invoke several window.open.
I've tried to work around this feature, but have not (yet) been able to fool IE. The options, as I see it, are:
Ask users to add your site to the popup exceptions (internet settings).
Spawn the pages in iframes within your own site
Ask users to use another browser ;)
Or the obvious:
Use separate links for the windows

open browser tab/windows in background

I am stuck with a little problem from few days now.
There is some solution over internet but they don’t match what I need.
I’m on a Spring web application, using flex. For some reasons I need to load a new windows (or tab) in background.
For now I manage to write some JavaScript script that put the focus on the main window when the child one is created but when the main window get the focus back it select the whole text and so the user loose all his work.
It’s why the new window MUST NOT take the focus at any time.
I also tried to create a link and simulate the middle click on it so the tab is created in background, but it only work on Chrome, beside I see that on Internet Explorer the tab is sometime created in background sometime in foreground (even if the setting option: “Always switch to new tabs when they are created” is NOT setted on, i must miss something).
Of course like in a lot of company the main browser is IE, so the solution must work for it, i can specify some setting to make the thing work as every user get the same env.
i've also tried to set the registry to make no application take focus but on 7 or 2008 RT it's not really usefull.
I’m looking for a solution in javascript, flex/AS or even html to create that tab without interrupting the user. If the main window loose the focus 1 sec but I manage to not select the whole text in flex it will be good too.
Thanks in advance.

window.open() in IE 9

when i try to
window.open()
in IE 9 , it opens it with favorites sidebar (if it was present in parent window) this is behaviour unique to IE , and it breaks dialog windows as I envisioned them. Any hope to fix that?
Since you specified that you're using this for a dialog, I feel I should discourage this. Using window.open() is not ideal for creating dialog boxes.
Some browsers will ignore your 'new window' request, and open it as a new tab. This can be configured by the browser user, so is out of your control.
If the user has toolbars and side panels open, there's a strong likelyhood of them showing up in the new window, which will mangle your layout. Again, you'll need to test this in every browser, and even then you can't be sure without knowing all the config options that might affect it.
Opening a new window does not give you a modal dialog box. You can't prevent the user from clicking back to the parent window and ignoring the dialog box.
Therefore, if you want to make a dialog box, you would be much better off using a javascript library that opens a box inside the current page. It's much more flexible, and gives you much more control over the end result than window.open().
If you're using JQuery, you might want to start by looking here: http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/, but there are stacks of others available (it's a very easy thing to write, especially in JQuery, so there's plenty of plugins out there you can try till you find one which is perfect for you)
Try changing it to window.location.href= 'url + target="_blank"'

How can I stop google.com from pulling my cursor away from the URL with Greasemonkey (or Adblock)?

How can I stop google.com from pulling my cursor away from the URL and focusing it on the search box with Greasemonkey?
I use google as my home page and hit the home button to open a new tab, maybe not the best way to do it, but it is habit. I will start typing in a URL and when the page is done loading the Google search field pulls my cursor away when I'm half done typing.
I know a decent amount of javascript but I don't even know where to start when viewing Googles page source. If someone could write a script for this I would love you forever, and I'm sure many others would too!
EDIT:
Possibly the better question is how to do this with Adblock Plus?
EDIT#2:
Is it possible to run javascript before a specific page loads with a firefox plugin? Or, is it possible to block javascript on a page before it loads?
I am not looking for any "work arounds" I am looking for a fix. A fix to remove or disable "document.f.q.focus()".
Edit#3: What about a bookmarklet? Could it be possible with that?
See http://noscript.net/
It's a firefox plugin that disables javascript on sites. You could configure it to just run on google.com, I think (if you do not want it to interfere with other sites).
Noscript is more secure, but it can be a pain because it uses a whitelist approach.
Or you can use YesScript, which operates a blacklist instead.
Re: "I just want to blacklist a specific line of code on 1 site"...
There is no addon to do that. You can block all scripts from a site using NoScript or YesScript. Or you can block a specific JS file using Adblock.
You cannot selectively block bits of JS that are embedded in the main page, except in rare occasions GM can sometimes work around it.
This sounds like trying to use an anvil to smash an ant. Or some other, better, complex-tool-for-simple-job analogy. I would suggest either setting your home page to a blank page, or opening new tabs with a new tab button or Ctrl+T.
I do not believe it is possible, just looking around a bit. The focus actually comes from the onload attribute of the body element:
onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo27.png'"
As you can see, document.f.q.focus() is your issue. However, I can't get a GM script to run before that onload is executed. I'm not too experienced with that particular issue, though: any GM scripts I've written are novelties whose load order doesn't matter a great deal, so long as it's done after the page is loaded.
If you know how to make GM scripts run before an onload (on a very light webpage), then it's as simple as saying unsafeWindow.document.body.onload = null.
You cannot do this with Greasemonkey, because GM cannot manipulate chrome elements enough to set focus to the address bar.
You cannot do this with Adblock for the same reason, and because Adblock just stops external elements from loading.
None of the FF scripting add-ons could do this either, as far as I can tell.
You could write an extension/add-on to reset focus, but the real problem here is that the user is ignoring the tools in place for the job.
As Scott Cranfill said, use Ctrl T to open a new tab.
If a button is absolutely desired, Firefox already provides one. Do this:
In the Firefox menu, select View --> Toolbars --> Customize... .
Find the "New Tab" icon and drag it to your toolbar.
Click that icon, from now on, when you want a new blank tab.
Done!

Categories

Resources