|
JavaScript - Getting Multiple Javascripts All Using Window.onload To Work In Ie
Similar TutorialsI don't get to use javascript as much as I would like, but I am having a problem with a page so I stripped out all the extras and got down to just the part I am having a problem with and I think this should fill the div with the id testingdiv when the page loads but it doesn't. Any help would be appreciated. Code: <script type="text/javascript">
function getClientList(listtype) {
document.getElementById('testingdiv').innerHTML = listtype;
}
window.onload = getClientList('own');
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="hidden" name="hidden" id="hidden" value="99" />
<title>untitled</title>
</head>
<body>
<div id="testingdiv"></div>
</body>
</html>
I am trying to pop up a window and then do stuff(set flags) when the content of the new window is done loading. For this I am trying to detect the window.onload of the pop-up child window but so far I am unsuccessful. I believe my problem is that the URL of child window is on different domain, than the one of the opener(parent) so that the window.onload is not being called. Thought this may change, at the moment I do not have access to the code for the page I'm opening up in the pop-up. Im pretty new to web development. Any help is appreciated. Heres my js code Code: //globals
var popupHandle = null;
var openingWindow = false;
function popWindow(URL){
var windowId="sameid";
if (openingWindow == true)
{
alert("Please wait, content is still loading")
return;
}
if ((popupHandle == null || popupHandle.closed)){ //is first time run or window was closed
openingWindow = true;
popupHandle = window.open(URL, '" + windowId + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=900,height=500');
popupHandle.onload = function(){
//this is the code that never executes even if I all I put in here is simple alerting
openingWindow = false;
windowHandle.focus();
};
}
else{// window still exists, reset attributes
if (popupHandle != null)
{
popupHandle.location.href = URL;
popupHandle.focus();
}
}
}
Note: The whole reason why I am doing this is because if its the first time I am clicking on the button that will open this pop up window and I click it repeatedly very quickly, a new pop up is opened for each time I clicked eventhough the window.open is supposed to reuse the window if it has the same windowId. The first call to window.open takes long enough to not have a window handle ready and this allows other clicks to get through. 0 down vote favorite share [g+] share [fb] share [tw] I have a fairly large program that I have simplified to show the problem that I am having. I have 2 div's under which I have an image and some text. When I hover on the image, the jQuery hover over image event fires. Through all this, I am able to get the Id's of both the images & their parent div's. However, when I try to get the index value of the Id's in an array, it always returns -1 ie... not found. Can you please help. The code is enclosed below. I am new to javascript & jQuery and hence the need of some help. Maybe the solution is very trivial. Thanks in advance. Regards, sbguy <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var input_array = new Array("input1_Id", "input2_Id"); var div_array = new Array("div1_Id", "div2_Id"); window.onload=function(){ jQuery.ready(); img_hover_event_handler(); } //________________________________________________ function img_hover_event_handler() { var input_id = ""; var div_id = ""; var input_index, div_index; $("input.Lrollover").hover( function() { input_id = new String(this.id); input_index = new String(input_array.indexOf(div_id)); div_id = new String($(this).closest('div').attr('id')); // id of the parent div div_index = new String(div_array.indexOf(div_id)); alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index); }, function() { }); } </script> </head> <body> <div id="div1_Id"> <input class="Lrollover" id="input1_Id" type="image" src="images/LGbtn_off.png" alt="Image1" /> <p id="myp1_Id">"Hello World 1"</p> </div> <br><br><br> <div id="div2_Id"> <input class="Lrollover" id="input2_Id" type="image" src="images/LGbtn_off.png" alt="Image2"/> <p id="myp2_Id">Hello World 2"</p> </div> </body> </html> Hello, A client asked me to create this site with modals that each contain a small gallery. I used Colorbox to create the windows and Highslide for the galleries. See link; http://www.garrigan.net/Furryteeth/ Then he saw an example of a script named Mosaic and wanted it incorporated into the original design. Mosaic creates sliding boxes that pop up with captions when you rollover an image. Working from the base html file I got everything to work perfectly locally on my machine. After I uploaded everything to my site to test it out things went very wrong. See link; http://www.garrigan.net/Nakata/ Everything works until you click on one of the images to launch a gallery. Then the entire site seems to fall to pieces. Any idea what I did wrong or where I can correct my mistake? I am assuming there is a server issue since it works on my machine. Thanks for any help you can offer. These are the JQuery scripts I used; http://buildinternet.com/project/mosaic/ http://highslide.com/ http://colorpowered.com/colorbox/ I'm sure people have answered this question multiple times but I have done all the research and tried everything but nothing works. My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery. I'll post the html and javascript files as txt files since I can't attach them in their normal form. Index.txt is my HTML Sliding_effect.txt is the Javascript for the menubar Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body> The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long. Any help is appreciated I have an HTML page that is making use of JQUERY and many other JQUERY plugins. Inside this HTML page there are 2 different types of iFrames that display PHP forms. One is a normal iFrame: Code: <iframe height="740" allowTransparency="true" frameborder="0" scrolling="auto" style="width:100%;border:none;overflow-x:hidden" src="https://www.website.com/machform/embed.php?id=9" title="Contact Us"><a href="https://www.website.com/machform/view.php?id=9" title="Contact Us">Contact Us</a></iframe> The other makes use of a JQUERY plugin called Shadowbox: Code: <a href="https://www.website.com/machform/embed.php?id=8" rel="shadowbox;width=1100;height=950;player=iframe" class="button1"><span></span><strong>Click Here</strong></a> Inside these iFrames are PHP forms from a PHP form application called MachForm, which is highly customizable. Here are the questions. Ultimately, I want to accomplish 2 things: 1. I would like to send variable information from the PHP form in the iFrame to my HTML page, to be displayed within javascripts. For example: If someone fills out a PHP form in my iFrame and clicks submit, I want to have a JQUERY popup say, "Thank you, [NAME]". 2. When the user submits the form, the action of clicking the submit button in the PHP form should enable #1, above. There needs to be a way to tell the HTML/Javascript that the submit button on the PHP form in the iFrame has been clicked. I realize this is all fairly vague, especially without the addition of more code. However, I am not even sure if I am posting this in the correct forum, since it incorporates a little of several languages and styles. From this point any direction or idea would be very helpful! Hello All, I seem to be stuck on a page for my site: The idea was to have a page with a google map and a java-powered custom twitter feed on the page. However, when I got the map embedded, it seems to interfere with the spry navigation menu, and the twitter feed is not working either. I've tried combining commands and tying each script to an event, but I just don't understand enough to get them all to work. I'm a comic artist by trade, so I'm a little new to coding. Any help would be greatly appreciated! you can find the page here./ Thanks in advance for any help! Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate. script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page. The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting). At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads. Any help would be appreciated! while decomplicating things I putted into single jsp code like that: Code: <script language="javascript" src="../js/A.js" type="text/javascript">
</script>
<script language="javascript" src="../js/B.js" type="text/javascript">
</script>
The prob here is that both A and B contains window.onload, and only the one from A gets executed. All things that come to my mind is back to complications, loosing track of things. Any advice ? Hi I am in need of some help with my Javascript code, basicly I am creating a Javascript SDK for my site and I am trying to make is a little like jQuery in which you check if the document is ready such as $('document').ready(function(){}); which my SDK looks like this $.functions.push(function(){}); the only thing is when using it like this each function push gets added to the functions array which i then need to use on the documents load. With my SDK I use $.onload.ready();, which should act as window.onload and run all the functions with-in the array but I cant seem to get it to work. This is what I currently have. Code: $.functions =new Array();
$.onload = {};
$.onload.ready = function(){
if(window.onload !== undefined && window.onload != '')
{
window.onload=function(){for(var i=0;i<$.functions.length;i++){$.functions[i];}};
}
};
Can anyone help me out? Thank You DJCMBear EDIT: Don't worry I have found the solution and it works! This is the code for the onload. Code: $.onloadAdd = function(func)
{
if(typeof onload == 'function')
{
var oldonload = onload;
onload = function()
{
oldonload();
func();
}
}
else
{
onload = func;
}
};
$.onload = function(){
if(window.onload !== undefined && window.onload != '')
{
for(var i=0;i<arguments.length;i++)
{
$.onloadAdd(arguments[i]);
}
}
};
And this is the onload functions that get added to the list to be run. Code: $.onload(function(){if($.Class('Listener')){for(i=0;i<$.Class('Listener').length;i++){$.Class('Listener')[i].onclick=function(){alert($.getInfo(this).innerHTML);};}}},function(){if($.Class('Add')){for(i=0;i<$.Class('Add').length;i++){$.Class('Add')[i].innerHTML=$.Class('Add')[i].innerHTML+'...';}}});
Hi everyone, I am at the last leg of getting my code to run. I have a window.onload function, but right now it is working only when I fill in all the field in the drop down list, hit a refresh and then hit submit button. What changes should I implement in the code? The code after the window.onload function runs as follows: Code:
window.onload = function() {
age = 0;
groom_age = getvalues();
caste = 0;
groom_caste = getvalues_1();
profession = 0;
groom_profession = getvalues_2();
bachelor = 0;
groom_bachelor = getvalues_3();
master = 0;
groom_master = getvalues_4();
doc = 0;
groom_doc = getvalues_5();
country = 0;
groom_country = getvalues_6();
color = 0;
groom_color = getvalues_7();
height = 0;
groom_height = getvalues_8();
marriage = 0;
groom_marriage = getvalues_9();
father = 0;
groom_father = getvalues_10();
switch(groom_age)
{
case "23" : age = 1.6;
break;
case "24" : age = 1.2;
break;
case "25" : age = 1.7;
break;
case "26" : age = 1.8;
break;
case "27" : age = 1.9;
break;
case "28" : age = 1.75;
break;
case "29" : age = 1.7;
break;
case "30" : age = 1.4;
break;
case "31-35" : age = 1.8;
break;
case "36-40" : age = 1.9;
break;
case "41-45" : age = 1.75;
break;
case "46-50" : age = 1.7;
break;
case "51+" : age = 1.4;
break;
default: age = 1;
}
switch(groom_caste)
{
case "Brahmin" : caste = 1.6;
break;
case "Bania" : caste = 1.2;
break;
case "Kayastha" : caste = 1.6;
break;
case "Kshatriya" : caste = 2.0;
break;
case "Dalit" : caste = 1.8;
break;
case "Maravar" : caste = 1.6;
break;
case "Mudaliar" : caste = 2.0;
break;
case "Jat" : caste = 1.8;
break;
case "Labanas" : caste = 1.6;
break;
case "Rajput" : caste = 1.6;
break;
default : caste = 1;
}
switch(groom_profession)
{
case "Engineer" : profession = 1.6;
break;
case "Doctor" : profession = 1.2;
break;
case "Lawyer" : profession = 1.65;
break;
case "CA" : profession = 1.7;
break;
case "IAS" : profession = 2.0;
break;
case "Family Business" : profession = 1.5;
break;
case "Engineer + MBA" : profession = 1.95;
break;
case "None of the above" : profession = 1.95;
break;
default: profession = 1;
}
switch(groom_bachelor)
{
case "BTech/BE/BS" : bachelor = 1.6;
break;
case "MBBS" : bachelor = 1.2;
break;
case "BA" : bachelor = 1.1;
break;
case "B.Com" : bachelor = 1.4;
break;
case "BSc" : bachelor = 1.9;
break;
case "BBA" : bachelor = 1.1;
break;
case "Diploma" : bachelor = 1.4;
break;
case "Certification Course" : bachelor = 1.4;
break;
default: bachelor = 1;
}
switch(groom_master)
{
case "MS" : master = 1.6;
break;
case "MBA" : master = 1.2;
break;
case "MHA" : master = 1.4;
break;
case "MTech" : master = 1.4;
break;
case "M.Ed" : master = 1.4;
break;
case "No Master degree" : master = 1.4;
break;
default: master = 1;
}
switch(groom_doc)
{
case "Doctor of Philosophy (Phd)" : doc = 1.6;
break;
case "Doctor of Medicine (MD)" : doc = 1.2;
break;
case "No Doctorate Degree" : doc = 1.4;
break;
default: doc = 1;
}
switch(groom_country)
{
case "India" : country = 1.6;
break;
case "USA" : country = 1.2;
break;
case "Any European Country" : country = 1.7;
break;
case "Australia" : country = 1.7;
break;
case "Canada" : country = 1.7;
break;
case "Any Country more developed than India" : country = 1.7;
break;
case "Any Country less developed than India" : country = 1.2;
break;
default: country = 1;
}
switch(groom_color)
{
case "Fairy White" : color = 1.6;
break;
case "Black" : color= 1.2;
break;
case "Wheatish (Almost White. Would need some Fair n Lovely)" : color= 1.4;
break;
case "Brown": color= 1.4;
break;
case "White": color= 1.9;
break;
case "Pitch Black (Not visible on a moonless night)" : color= 0.6;
break;
default: color = 1;
}
switch(groom_height)
{
case 'Less than 5\'4"' : height = 1.6;
break;
case '5\'4"' : height = 1.2;
break;
case '5\'5"' : height = 0.8;
break;
case '5\'6"' : height = 1.0;
break;
case '5\'7"' : height = 1.4;
break;
case '5\'8"' : height = 1.5;
break;
case '5\'9"' : height = 1.6;
break;
case '5\'10"' : height = 1.7;
break;
case '5\'11"' : height = 1.8;
break;
case '6' : height = 1.85;
break;
case '6\'1"' : height = 1.9;
break;
case 'Greater than 6\'1"' : height = 1.8;
break;
default: height = 1;
}
switch(groom_marriage)
{
case "0" : marriage = 1.6;
break;
case "1" : marriage = 1.2;
break;
case "2" : marriage = 0.4;
break;
case "More than 2" : marriage = 0.2;
break;
default: marriage = 1;
}
switch(groom_father)
{
case "Doctor" : father= 1.6;
break;
case "IAS" : father = 1.2;
break;
case "Engineer" : father= 1.7;
break;
case "Lawyer" : father= 1.65;
break;
case "CA" : father= 1.8;
break;
case "Engineer + MBA" : father= 1.9;
break;
case "Family Business" : father= 1.2;
break;
default : father = 1;
}
};
function processOrder() {
var total = age + caste + bachelor + master + doc + color + profession + father + marriage + height + country;
var pageNumber = Math.floor((20 - total) / 2 + 1);
// pageNumber = 6;
// alert(pageNumber);
window.open ("Page " + pageNumber + ".html");
}
</script>
<center> <INPUT TYPE="button" VALUE="Calculate" onClick="processOrder()">
</center>
I would really appreciate any kind of help. Thanks a lot! Hei, On my website , I have certain things that happen in the function window.onload. I need them to happen only the first time when the user acceses the page . Do you have any idea how to do this? Thanks The site i am building uses a large content slider as its main navigation. There is an absolutely positioned header on the page, and the slider sits underneath. This all works perfectly once i am linking (to named anchors) within the same page However when an external pages links to one of the anchors, the top of the slider content is hidden underneath the header - the user need to scroll down to get the content to start below the header. Long story short, I have used the following to force the browser to scroll to the top of the page when it loads: <script type="text/javascript"> window.onload = function(){ window.scrollTo(0,0); } </script> This doesnt load until everything else on the page has loaded though, is there a way to force the browser to scroll to the top BEFORE everything else loads? Or better yet not to scroll at all but to make sure the window is positioned at (0,0) automatically when it loads? Also, this doesnt seem to be working at all in IE Thanks in advance! Hello, I have a bit of javascript that automatically loads Shadowbox on load. It works perfectly in Firefox, Chrome but NOT IE. If I put a standard link to open Shadowbox does work in IE, so it's not the shadowbox, it's definitely the window.onload bit which isn't working. Here is my code. Code: <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<!--this bit is for a link to open the Shadowbox from a link elsewhere on the page -->
<script type="text/javascript">
Shadowbox.init({players:['swf']});
</script>
<script type="text/javascript">
window.onload = function() {
Shadowbox.open({
content: 'flash/flash002.swf',
player: "swf",
title: 'Open Shadowbox',
width: 1200,
height: 800,
});
};
</script>
This DOES work though, so I know it's not the Shadowbox with the issue Code: <a href="flash/flash002.swf" rel="shadowbox;height=800px;width=1200px">Open Shadowbox</a> Really appreciate your help! Nicola Hi, I am learning Javascript and place the script tag in the head of my document and the code doesnt work as it loads the page. I understand that the window.onload function must call the function when the page has loaded but i cant seem to get it to work, I have wrapped my changeImage function in the onload function and it still doesnt work. where am i going wrong? I would like the script tag in the head of the document and understand how to use the window.onload function with my changeImage function. Thank you. Code: window.onload = function () {
changeImage();
}
var myImage = document.getElementById("image");
var imageArray = ["images/leaf.jpg","images/sky.jpg","images/tree.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}// changeImage ... end
setInterval(changeImage, 3000);
I wrapped the whole of the code in the function but then in the console it doesnt do the setInterval it just stops at that break point. I am something of a javascript noob - I write mostly PHP and don't do a lot in javascript. Anyway, I Googled what I wanted to do and found an example that uses window.onload = function() { ... whatever ... } which seems to work fine, but the brower's error console tells me that the use of captureEvents (which I presume includes window.onload()) is deprecated and that I should use addEventListener instead. I've had a look on google for examples of addEventListener for the equivalent of document.onload and although I understand the difference and I see how both mechanisms work, I'm struggling to understand why one is better than the other? Please enlighten me! Is there a way to make 2 functions load at the same time using window.onload? I have to seperate functions which rotate images, then another that rotates text. Functions: showQuote() iAnimate() Hi I've got a javascript that searches for a Youtube video. This script gets called by a window.onload action. The function actually works just fine, but IE (not in FF) still throws me an "Not Implemented" error at my window.onload action. the code is this: Code: window.onload = GetYoutubeVideo('Alice Cooper Poison');
Find it he http://www.muzikum.eu/en/123-3496-44...son-lyric.html I can't seem to get rid of it. Can anyone explain me why it's triggered? Even as the code does get executed it's still annoying me. thanks in advance Walter I found this beautiful fade-in/fade-out jQuery pop-up bubble and all I need to know is how to make the bubble animate on window.onload. If there's a better pop-up bubble than this that someone knows of offhand, that'd be great too. I haven't tested this one out and am a little wary about potential problems that the non-animated part of the bubble may or may not present. All I want to have happen is, when you visit the site, a div automatically fades in and stays near the top of the page for a minute to guide viewers to a specific area of the site, and then fades out. Thanks for any help!! Much appreciated. If I use a window opener to open a new window, is there a way to detect that the new window is finished loading before carrying out some other directive in the opener window? Can I access the remote window's onload event from the opener window? I need to know that the website has loaded before moving to the next page. something like: remoteWindow.onload = goToPage(url); Is this even possible? |
|||||||