Have to wait to execute jQuery till the service is loaded - javascript

I am trying to open the hyper links in a new tab. For loading in a new tab I am using the following code, which will run once and adds target="_blank" in the anchor tags:
<script>
$(document).ready(function(){
alert("ready");
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
</script>
but the jQuery is executed before the contents is retrieved from the service call and I cannot open the hyperlinks in a new tab, so I tried using the below code:
$(window).bind("load", function() {
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
here it fails as some of the images or the files fails to load, or it will take more time?
I need to find a way to call the jQuery to open the "ahref" tag in a new tab.

Try this one. Maybe this will solve the problem
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
})

Without seeing more of the code I'd have a hard time deciphering exactly what the best step would be, but it sounds like you are having images with links load after your code runs. You could always try something that would update the click handler on load:
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
Or you could look into a function that checks if your images are loaded and sets a timeout until they are all set.
var changeTarget = function() {
if ($('body').find('#img')) {
//do code it's loaded
} else {
//repeat in 100 miliseconds
setTimeout(changeText,100);
}
}
changeTarget();

the below code works fine for opening the hyperlink in a new tab.
if only certain anchor tags(hyperlinks) in the page has to be opened in a new window then the below code can be used
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
});
where "myCustomContent" is the id given to the division or the tag where the hyper link is present.
or
if all the anchor tags in a page has to be opened in a new tab then the below code can be used.
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
thanks for the help, #JeremyS and #doniyor

Related

Rails:-location.Href not working in project

I am a newbie on javascript and was implementing a loader in the project..
I have used the below code for the implementation of loader but it is not working:-
var url = "http://localhost:3500/#!/Movies";
<script>
$(function(){ //Loader implementation
if (location.href==url){
$(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
</script>
I am calling the loadindicator in the code as:-
<ul>
<li id="loadIndicator1" style="position:absolute ;top:50%;left:50%;z-index:99999;"></li>
</ul>
I am not very sure why this is giving an issue.I am using jquery-1.8.3.min.js and jqueryui-1.10.2.js
Also when I hover on location..I get unresolved variable location.Please help me with this.
use
if (window.location.href==url)
instead of
if (location.href==url)
var url = "http://localhost:3500/#!/Movies";
$(function(){
if (location.href==url){
$(window).load(function(){
$('#loadIndicator1').fadeIn(1000);
});
}
});
this will show your loader once the webpage is fully downloaded
use $('#loadIndicator1').fadeOut(1000); to hide the loader once the content is loaded.
Ignoring window ready, using only document ready
$(function() {
if (window.location.href === url){
// $(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
// });
}
});
You should remove the part I have commented out. The problem is, you attached an event handler to document ready, and if your are on a specific URL, you attach an event handler to window ready, but that event was already fired, and it won't be fired again.
Using window load after document ready
Another possible solution:
$(function() {
if (window.location.href === url){
$(window).load(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
The window load event fires later, than document ready - though this should be tested.
Ignoring document ready, using only window load
Third time is a charm, another solution which may be the best, simply ignore the document ready event, and only use the window load:
$(window).load(function () {
if (window.location.href === url) {
$('#loadIndicator1').fadeOut(1000);
return false;
}
});
This case though the loader only appears if everything is loaded on the page, so maybe this is not what you want -- in this case use the first option.

jQuery page transition makes previous page blank

I'm using the following script with jQuery to have a fade transition when navigating between pages:
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(200);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
It works fine when only using links to navigate between pages, but when using the back button on the browser, the page returned to is blank.
How can I get pages to be properly displayed when navigating to them via the back button?
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though.
In any case, I think repainting the DOM would solve your problem (taken from Coderwall):
$.fn.redraw = function(){
$(document).each(function(){
var redraw = this.offsetHeight;
});
};
And to call the function: $(document).redraw();
How about try using delegate
$("a").on('click', function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});

Page elements stop being responsive

I am newbie to the Asp.net so please bear with me for this :)
I added a hyperlink html tag like this
<h2><a class="iframe2 cboxElement" id="frameEdit" onclick="return OpenEditPage()">(EDIT)</a></h2>
Here is the OpenEditPage() method
<script>
function OpenEditPage()
{
var pid = document.getElementById("ProjId").value;
var link = document.getElementById("frameEdit");
link.setAttribute('href', "/Project_MainPageEdit.aspx?editpid=" + pid);
return false;
}
</script>
As soon as I click EDIT hyperlink, edit page is opened in Iframe. But when i close the edit page, I return back to MainPage but all the buttons and other elements on the page become unresponsive until I refresh the page.
What's the reason behind this?
I added following code inside the script and it worked like a charm
$(document).ready(function ()
{
$(".iframe2").colorbox({ onClosed: function () { window.location.reload(); } });
});

How do I run a jQuery function when any link (a) on my site is clicked

I have a new site build on corecommerce system which does not have much access to HTML and non to PHP. Only thing I can use is JavaScript. Their system is currently not great on page load speed so I wanted at least customers to know something is happening while they wait 5-8 seconds for a page to load. So I found some pieces of code and put them together to show an overlay loading GIF while page is loading. Currently it will run if you click anywhere on the page but I want it to run only when a link (a href) on the site is clicked (any link).
I know you can do a code that will run while page loading but this isn't good enough as it will execute too late (after few seconds)
Anyway, this is my website www.cosmeticsbynature.com and this is the code I use. Any help will be great.
<div id="loading"><img src="doen'tallowmetopostanimage" border=0></div>
<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
jQuery(document).click(function()
{
if(ns4){ld.visibility="show";}
else if (ns6||ie4)
var pb = document.getElementById("loading");
pb.innerHTML = '<img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0>';
ld.display="block";
});
</script>
Doing this will be easier if you include jQuery in your pages. Once that is done, you can do:
$('a').click(function() {
// .. your code here ..
return true; // return true so that the browser will navigate to the clicked a's href
}
//to select all links on a page in jQuery
jQuery('a')
//and then to bind an event to all links present when this code runs (`.on()` is the same as `.bind()` here)
jQuery('a').on('click', function () {
//my click code here
});
//and to bind to all links even if you add them after the DOM initially loads (`on()` is the same as `.delegate()` here; with slightly different syntax, the event and selector are switched)
jQuery(document).on('click', 'a', function () {
//my click code here
});
Note: .on() is new in jQuery 1.7.
what you are doing is binding the click handler to the document so where ever the user will click the code will be executed, change this piece of code
jQuery(document).click(function()
to
jQuery("a").click(function()
$("a").click(function(){
//show the busy image
});
How about this - I assume #loading { display:none}
<div id="loading"><img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0></div>
<script type="text/javascript">
document.getElementById('loading').style.display='block'; // show the loading immediately
window.onload=function()
document.getElementById('loading').style.display='none'; // hide the loading when done
}
</script>
http://jsfiddle.net/vol7ron/wp7yU/
A problem that I see in most of the answers given is that people assume click events only come from <a> (anchor) tags. In my practice, I often add click events to span and li tags. The answers given do not take those into consideration.
The solution below sniffs for elements that contain both events, which are created with jQuery.click(function(){}) or <htmlelement onclick="" />.
$(document).ready(function(){
// create jQuery event (for test)
$('#jqueryevent').click(function(){alert('jqueryevent');});
// loop through all body elements
$('body *').each(function(){
// check for HTML created onclick
if(this.onclick && this.onclick.toString() != ''){
console.log($(this).text(), this.onclick.toString());
}
// jQuery set click events
if($(this).data('events')){
for (key in($(this).data('events')))
if (key == 'click')
console.log( $(this).text()
, $(this).data('events')[key][0].handler.toString());
}
});
});
Using the above, you might want to create an array and push elements found into the array (every place you see console.log

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Categories

Resources