Making divs act like proper links - javascript

I'm using a JavaScript (jQuery) calendar where some calendar events act as links. The calendar events are divs that have onclick triggers that point the browser to the correct page.
The problem is that since the calendar event's aren't <a href=".."> links the user can't ctrl+click to open the link to a new tab or shift+click to open to a new window. I'm looking for a way to get this functionality to the calendar and it seems like my options are:
Detect whether the user has shift pressed and open to a new window or ctrl pressed and open to a new tab - I'd rather not do this because opening to a new tab will probably have to be coded separately for each browser (?) and it might override user's preferences.
Remove the onclick triggers and wrap the div content inside <a></a> that fills the entire enclosing div.
Hack the calendar library to use <a> tags instead of divs for clickable calendar events.
Is there by any chance any other method to tell the browser to consider divs as regular links? Are there any foreseeable side effects to methods #2 or #3?

I'd say your easiest/most complete solution would be to use anchors just as they are (e.g. no script required), just use CSS to do the work here, with display: block or display: inline-block and style them like <div> elements.
This way, all the native clicking behavior can be handled by the browser and the user's preferences as well as Ctrl, Shift, etc clicking is whatever the user is expecting it to do.

Find a calendar that uses proper markup, or fork the plugin and go for #3. The down side to the later is that since you're forking, you cut yourself off from upgrades

Related

Open a "popup" without focusing it

I've been trying to open a "popup" [1] without it taking the focus automatically.
I tried to blur it, from the opener or from the popup itself unsuccessfully.
I also looked for pop-under but didn't find anything relevant on Google about both topic.
I'm using Firefox. (Well… Palemoon 24.7.1 for x64 actually)
My goal is to be able to open a bunch of tabs (with middle click for instance) and having them closing on their own a bit later.
To do so in Firefox, and afaik, you MUST use a popup (right?). But everytime I open a new tab (with middle click) it focuses on it which is very annoying.
[1] Or anything else that could match my expectations.
EDIT: NOTE: This is for personnal use. :)
First the easy one: For mouse-middle-click: In Tools->Options on the "Tabs" tab, there is an option "When I open a link in a new tab, switch to it immediately". After un-checking this option, links followed by selecting "Open in new Tab", or mouse-middle-click will open in a new tab without being focused. On the same option tab, you will also want "Open new windows in a new tab instead" checked (first checkbox).
This will work for most normal links. Links which are actually JavaScript code snipits will not work in a new tab because they rely on the code existing in the current page.
A change that I find useful in Firefox is to have the cursor change depending on what type of link it is hovering over. This will allow you to visually distinguish, at a basic level, what will happen when the link is clicked without having to look at the destination address. I originally found this at askvg. It is an addition to the file <profile directory>/chrome/userContent.css (create the directory and file if they do not exist):
/* Change mouse cursor for hyperlinks that open in a new window or tab */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"], :visited[target="_new"] {
cursor: crosshair;
}
/* Change mouse cursor for JavaScript links */
a[href^="javascript:"] {
cursor: move;
}
/* Cursor types
default - Normal select cursor
text - Text select cursor (I bar)
vertical-text - Vertical text select cursor
progress - Working in background cursor
wait - Busy cursor
help - Help cursor
crosshair - Precision select cursor
move - Move cursor
no-drop - Unavailable cursor
not-allowed - Unavailable cursor
e-resize - Horizontal resize cursor
n-resize - Vertical resize cursor
nw-resize - Diagonal resize 1 cursor
ne-resize - Diagonal resize 2 cursor
col-resize - Column resize cursor
row-resize - Row resize cursor
*/
Beyond that, it is unclear in what context you want to do this in, or at least to what extent you are willing to go to accomplish this. Your mentioning having windows/tabs open in the background and closing on their own implies that you do not actually need the user to view the window/tab. Is it that you just want a request to have been made of some URLs? Would using XMLHttpRequest be sufficient?
You want this for yourself, so if you go the route of a Firefox extension then it is quite easy to open tabs and windows and not have them be focused. It can be done with addTab().
It would be helpful for you to describe what it is that you are overall attempting to accomplish and the context in which you are doing so.
Additional information:
Based on the additional information which you have described what you need is to write a Firefox extension which can give you complete control of popups and tabs to have them work the way you desire. For what it sounds like you desire you should see (at least) the following Mozilla documentation:
Tabbed browser (Contains explicit examples of how to open a tab (w/o selecting it) and how to do so and also select it.)
BrowserApp
addTab
closeTab
tab
Copying an example on Tabbed browser:
// Add tab (without it becoming active)
gBrowser.addTab("http://www.google.com/");
// Add tab, then make active
gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
From Tabbed browser:
Opening a URL in the correct window/tab
There are methods available in
chrome://browser/content/utilityOverlay.js that make it easy to open
URL in tabs such as openUILinkIn and openUILink.
openUILinkIn( url, where, allowThirdPartyFixup, postData, referrerUrl
)
where:
"current" current tab (if there aren't any browser windows, then in a new window instead)
"tab" new tab (if there aren't any browser windows, then in a new window instead)
"tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa
"window" new window
"save" save to disk (with no filename hint!)
Also from Tabbed browser, an example of code for an overlay extension which
will open a URL in a new tab, an existing tab, or an existing window
based on which mouse button was pressed and which hotkeys (ex: Ctrl)
are being held. The code given is for a menuitem, but will work
equally well for other XUL elements. This will only work in an overlay
of browser.xul.
XUL:
<menuitem oncommand="myExtension.foo(event)" onclick="checkForMiddleClick(this, event)" label="Click me"/>
JS:
var myExtension = {
foo: function(event) {
openUILink("http://www.example.com", event, false, true);
}
}
In the end, I think I used this technique to get more or less what I wanted to achieve:
The opened tab ("popup") would communicate with a webserver (in my case, in Python) thanks to a JavaScript loaded on it by using an addon like GreaseMonkey.
The server would then tell the popup when to close itself: Worked great!
EDIT: I just thought of an alternative way of doing it (faking it) that might or might not suit your needs (depends on your app).
Open a "popup" (new tab) with the current URL (that's where it might do the trick for you or not) then change the URL of your first page to the "popunder" you were looking for.

How to emulate click on anchor tag with javascript?

On my site, I have a div container, which contains a <input>, and a <a onclick="DoSomeStuff();" href="#" target="_blank"> element, which acts as a button. Now, DoSomeStuff(); modifies the href attribute based on the value of the input element.
I need to emulate click on this anchor tag after user pressed enter on an input element. I know how to detect this enter, but I don't know how to click this anchor. jQuery's .click() is not working in here, it only fires onclick() of the anchor tag, but does not actually click the anchor.
Edit: Here is an example on what I want to do: http://jsfiddle.net/JZYWZ/. It triggers the onclick event of the anchor tag, but does not follow the link in new tab.
Browsers are very strict about opening links in new tabs/windows through javascript.
If they allowed you to have javascript click and open a new tab when the user presses enter (for what you know to be legitimate reasons), that feature could be abused by spammers to have javascript click ads and spam links when the user does anything. Sadly there's no way the browser can tell your linked page is legitimate and not spam or monetised clickbait.
Pretty much the only option to open the url in new tab using javascript is window.open which you've already tried: the browser will always look to the user's settings on popup blocking and on whether to open in tabs or windows - and the default settings are strict, particularly in Firefox and Internet Explorer (less so in Chrome and Safari).
A possible alternate approach where you won't be fighting the browser's anti-spam defences is to open the content in a modal overlay (iframe-based if you need multiple pages). Here's one example library.
It'll be similar from a UI point of view - giving the user related content in a form where they can just close it and return to the main page when they're done with it.
Modal overlays are widely used and likely to be familiar with users. For example, they're now pretty standard for sharing pages, logins and other pieces of simple interaction or side content. Example:
EDIT
After some additional testing....
$('input[type="text"]').on('keyup', function(event){
if(event.keyCode === 13){
DoSomeStuff();
window.open($('a').attr('href'));
}
});

How to capture open link in new tab or window using jQuery?

Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.

JavaScript click event

My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).
I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above.
Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.
Do you have any idea as how to solve my problem ?
Thanks.
have you tried window.open('url')?
see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.
You might also try removing the onclick, and using
EDIT
There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links
As that site says, you can instead create an id for the element and bind it through javascript.
**Taken from that link:
...
And then in your JS, hook the link via it's ID to do the AJAX call.
Remember that you need to stop the click event from bubbling up. Most
frameworks have an event killer built in that you can call (just look
at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Without jQuery, it might look like this:
document.getElementById('thisLink').onclick = function(e)
{
//do someting
e.stopPropagation();
}
Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.

how to disable default context menu for certain elements in mozilla using Prototype?

I'm trying to expand navigation options of the context menu on certain elements (specifically, h1 and h2 tags)
I want to prevent the browser's default action when right-clicking on those elements.
I found nice information at this page.
However, I couldn't find how to disable the context menu for certain elements. Does someone know how to do it?
I'm using prototype as my javascript API.
This will prevent the context menu from appearing on a particular element
$(it).observe("contextmenu", function(e){
e.stop();
});
So, for example stop all H1/H2 tags from showing a context menu
$$('h1, h2').each(function(it){
$(it).observe("contextmenu", function(e){
e.stop();
});
})
You can obfuscate it a bit, but ultimately your page is only a guest in the browser in, (and you can take that to mean in the same manner that a prisoner is a "guest" of the state, if you wish). Therefore the page must rely on the browser to play nice. If the user wants to run a browser that doesn't play nice, or customize their existing browser to do so, that is always their option. You can never force a browser to do anything. Nothing you can do will be able to stop the user from performing a given activity with their browser if they really want to, once they view a page on their local machine. More than that, most recent browsers have facilities already built in to make it very easy for the user to override the normal behavior when something seems out of the ordinary.

Categories