I need to delay a little bit redirection to a new page after clicking on certain links.
Right now I'm using following jQuery:
$('.menu-element a').click(function(){
var src = $(this).attr('href');
$(this).removeAttr('href');
anim(src);
})
And it works fine. It runs really short animation and after that redirects to clicked page.
But I would like to keep the href attribute of link (i.e. in case when someone clicks twice very fast).
when I add $(this).attr('href', src); at the end of code listed above, it doesn't wait for animation to finish only redirects to new page right after clicking on the link.
How can I preserve the href property and avoid the page being redirected to new address by it?
add return false into your function. This prevents the browser following the link's href, and is then up to you to make that redirect in your javascript. e.g. by adding something to the end of your anim() function that updates the location.
It also means you don't need to remove the href from the link.
$('.menu-element a').click(function(){
var src = $(this).attr('href');
anim(src);
return false;
})
You can use event.preventDefault(). return false will also work, but it will also stop event bubbling (not a problem most of the time, you just should be aware of it).
$('.menu-element a').click(function(event){
anim($(this).attr('href'));
event.preventDefault();
})
Related
<html>
<body>
<a href="javascript:helloWorld()" >Hello world</a>
<script type="text/javascript">
function helloWorld(){
console.log("Hello world");
return true;
}
</script>
</body>
</html>
If open this page in firefox(not happening in chrome) and click on the link, I will get back new empty page, with "true" as a content. Why is this happening? Is this a expected behaviour or a bug. Although I was able to fix it by replacing it with helloWorld();void(0);.
This is expected behaviour.
The javascript: URL scheme is designed so you can generate content from JavaScript and have it rendered as a new page.
Using it to trigger effects on the current page is a hack.
If you want to trigger events on the current page then use a click event listener instead (and use a button instead of a link if you aren't going to have a fail-state of "visiting another page").
When the browser navigates to a javascript: URI, the code is evaluated and it's return value (the return value of the last expression) is used: If it's undefined, the the browser doesn't navigate, else the browser navigates to a page with the content of the conversion of that value to a string.
Since helloWorld() returns true and it's the last expression in your code, the browser creates a page with "true" as its content. void(0) returns undefined, so it doesn't navigate.
I recommend not using hyperlinks for triggering actions. That's not what they were made for. From the HTML standard:
[Hyperlinks] are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.
That's not what you're doing. Use the <button> element instead and style it like a link.
So I am trying to figure out why my page loads me back to the default tab after being refreshed.
I want to stay in the current tab even after the page is refreshed/reloaded
It will most likely be due to your tabs being loaded on the client side.
This means each time you switch to a different tab, your not actually making a new request, only showing and hiding different tabs. If you reload tabs, it will default back to first tab.
Easiest and most common way around this would be to use a URL hash to track the user's active tab. Then when you're loading your tabs after each request, can check the URL for a hash and if one exists, show the corresponding tab.
More info here: http://www.w3schools.com/jsref/prop_loc_hash.asp
Hope this helps :)
It was the easiest way to stay the tab. Look at the code like below.
Copy this code and paste in your js file.
Don't forget to understand how does this code running. Good luck!
$(document).ready(function() {
if (location.hash) {
$("a[href='" + location.hash + "']").tab("show");
}
$(document.body).on("click", "a[data-toggle='tab']", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on("popstate", function() {
var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
$("a[href='" + anchor + "']").tab("show");
});
When a user clicks on the browser icon for the extension, it brings up the Popup that has been defined.
I need to create a toggle button to turn on/off a stylesheet for a specific page/domain when a user clicks a button that is within the popup.
For example, when a user uses the Adblock extension, when the user clicks the browser icon, it brings up the popup, which has a series of links. One such link is "don't run on this page", which then changes to "enable" which the user can click to turn it back on.
Another example (much better example): Classic Popup blocker has a button on the popup that says "add this page to blacklist" and once clicked changes to "remove from blacklist".
The classic popup blocker is generally the functionality I want for my extension (it's not doing anything with ads or popup blocking, that was just an example), so that when a user clicks the button on the popup it will turn a stylesheet on or off that I have written and saved as a .css file in the extension.
I hope I have made this clear enough to understand.
SCREENS
Here is a photoshopped picture that I made so that you can see exactly what I am trying to do:
and photoshopped again to see what should happen once you click the buttons:
You can use the chrome.tabs.executeScript method to dynamically inject/remove CSS (requires the tabs permission in manifest.json):
chrome.tabs.executeScript(null, {code:
'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
chrome.tabs.executeScript(null, {file: 'myscript.js'});
});
In myscript.js, detect whether you have already inserted CSS. If not, add a new <style> or link element, and assign an id to it. Otherwise, replace the style sheet.
Example of myscript.js:
var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
id = 'RW_style_' + selectedStyle.replace(/\W/g,''); // Sanitize id
// Remove previous sheet, if available.
link = document.getElementById(id);
if (link) {
link.parentNode.removeChild(link);
}
}
if (id) {
// Insert new sheet
link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL(selectedStyle);
link.id = id;
(document.head||document.documentElement).appendChild(link);
}
// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');
In this example, the CSS files have to be defined in your extensions directory. Of course, you can also use <style> instead if <link>, and dynamically set the style's content.
Note: Do not forget to add the style sheet to the web_accessible_resources section of the manifest file.
I have created a HTML link (<a>) using the Extjs BoxComponent and it works just fine. But instead of having a fixed URL associated with the link, I want to be able to update the href property when the user clicks the link.
In the code below the href is updated when the user cliks the link and I can verify this using FireBug on the HTML element. But the new page opening is missing my addition to the href.
Question:
Is it too late to modify the href on onClick or is it because I am modifying the href in the wrong way?
Code:
xtype: 'box',
html: 'Link to google',
listeners: {
render: function (c) {
c.getEl().on(
'click',
function() {
this.el.child('a', true).href = 'www.google.com/#q=' + some_dynamic_value;
},
c,
{ stopEvent: false }
);
}
}
Looks like this can work by using the mousedown event, instead of the click event.
Check out: http://jsfiddle.net/sadkinson/rF5TQ/15/
Its possible that by the time the click has happened changing the URL within it is too late. Is it not possible that whatrever causes your link to need updating can be done when that is changed rather than waiting till the user has clicked the link?
I would imagine a number of browsers would ignore this, simply because it would be an efficient way of being malicious. Putting a link to say "google" and then redirecting you to some virus ridden site etc, as even the most sensible user looking to see where a link would take them would see google until it was too late.
I have a group of links on a page. when the user clicks a link it triggers an asynchronous request and a content area on the page is updated with the response html.
This works fine, except for if the user clicks the link with the 'middle-button' (or mouse wheel, whatever it's called!). Then a new tab opens and the response gets returned and rendered to that tab.
Is there any way for me to prevent this from happening?
catch the link with javascript and override the default link behaviour.
like this:
$('a.ajax').click(function(e){
e.preventDefault();
// do ajax stuff, and add an onfinish function that does
// something like document.location.href = this.attr('href');
});
You don't have to do the document.location.href, as I just noticed that a content area is updated. Just catch the default behaviour with the e.preventDefault();
// edit
The preventDefault won't stop the middle mouse button... Have you considered not using tags? I know it should be accessible so maybe a span containing the link, so you can add the onclick event on the span and hide the link with css?
Unfortunately no, Javascript wont have access to that sort of control for security reasons as it would be wide open for abuse.