This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 8 years ago.
I'm trying to get a really simple to alert() to pop up as soon as a div loads. Unfortunately it is not working, and I can't figure out why.
Here is the code:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo" onload="pop_alert();">
<img src="mysiteLogo.png">
</div>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
And the JavaScript is just this:
function pop_alert(){
alert("This is an alert");
}
It cannot be used for div tags. This is the following list it can be used on:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">,
<link>, <script>, <style>
You can't attach onload to a div. Try putting it in the <body>:
<body onload="pop_alert();">
You can't use onload on a div. The best way to do this is to add a script element after the div to run the function.
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo">
<img src="mysiteLogo.png">
</div>
<script>
pop_alert();
</script>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
See How to add onload event to a div element?
OnLoad is used on body or windows not the div etc. If you want then use event handler to alert the pop up for example assign some id and use that to bind the event.
That is because onload is a document(body) event.
demo: http://jsbin.com/benosofo/1/
The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.
from: https://stackoverflow.com/a/4057251/2213706
onload is fired when the browser has loaded all content (including images, script files, CSS files, etc.)
http://www.w3schools.com/jsref/event_onload.asp
Poor source I know.
Related
while trying to build an UI for an android and ios app with phonegap i got stuck:
my function getFocus() tries to get the tagName and/or id of the element in focus by using
document.activeElement.tagName
but all browsers seems to get different results:
Chromium (54.0.2840.87 (64-bit)) and androids Webkit return what I would expect: "BUTTON"
Safari (10.0), Firefox (49.0.2) and the ios Webkit return: "DIV"
they all seem to look from a different starting point in the DOM.
How can i be more precise in order to get at least BUTTON from safari/ios webkit as well as chromium/ android webkit?
here is the complete example code:
[edit] I edited one line in response to the helpful comment by user the8472 and took out an tag that was around the tag [/edit]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="add">
<div data-role="header">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content">
<p></p>
<p>
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton" onclick="javascript:getFocus()">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
button inside a does not seem to be valid anyway. If you're doing non-specified things you shouldn't expect consistent behavior.
https://html.spec.whatwg.org/#the-a-element
4.5.1 The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.
https://html.spec.whatwg.org/#interactive-content-2
Interactive content is content that is specifically intended for user interaction.
a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), [...]
i got it:
as the8472 pointed out, i should check the html specs:
button is (understandably) not properly specified in its focus behaviour:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button tells me that do not give focus to a button when clicked. that explains the described behaviour.
when i transfer the onclick="javascript:getFocus()" to the tag for example and click on input fields (not the button of course) i get the correct and to be expected elements in focus returned:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body id="mybody" onclick="javascript:getFocus()">
<div data-role="page" id="add">
<div data-role="header" id="myheaderDiv">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content" id="mydiv">
<p id="myp">
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
to identify the different elements i will later use .activeElement.id
I'm trying to grab a specific div container of an external source. But unfortunately there are also div IDs inside this div container, which aren't needed.
The grabbing works, but the blocking doesn't. FYI: I'm new to JavaScript and searched already for a solution.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="LinkToExternal.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container');
});
document.getElementsByClassName('NotNeededClass').style.visibility = 'hidden';
document.getElementById('NotNeededID').style.visibility = 'hidden';
</script>
</head>
<body>
<div id="container">
<div id="article"></div>
<div id="article2"></div>
</div><!--container-->
</body>
The code you have for hiding the elements is firing right after the load function. The likely cause is that the elements you are trying to hide have not been loaded into the DOM. Place your code in a callback function of the load function, this will ensure that your elements have been loaded into the DOM.
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container',function(){
$('.NotNeededClass, #NotNeededID').hide();
});
});
</script>
I try to show this page inside iframe:
<html>
<head>
<script type="text/javascript"
src="<c:url value="/resources/js/jquery.mobile-1.2.1/jquery.mobile-1.2.1.js"/>"></script>
<link href="<c:url value="/resources/js/jquery.mobile-1.2.1/jquery.mobile-1.2.1.css"/>" rel="stylesheet"
type="text/css"/>
<script>
jQuery(document).ready(function () {
$('#listView').listview();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title></title>
</head>
<body>
<div data-role="content">
<ul data-role="listview" id="listView">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
</body>
</html>
This page contains some javascript that must be executed for applying style within this page (not in the parent page). But it simply doesn't work. Page looks like simple html.
What I'm doing wrong? Thanks!
Since you are including jQuery Mobile on the page, you also need to include the jQuery plugin before that. You should be getting a JavaScript error that jQuery is undefined.
I think your jQuery(document).ready part is firing before the iframe actually gets loaded. If that's right, you'll have to do a custom function to handle it. You can find something like that here: jQuery .ready in a dynamically inserted iframe.
<body onload="javascript function"> is working well on desktop browser, but is not working on iPhone. My iPhone seems like it can read external CSS files and JS files, since when I click button from page, it fires JS functions. But oddly, only onload event is not working. I am so clueless now. Can anybody tell me why can't I fire onload event on iPhone? Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 연습</title>
<meta name="viewport" content="width=480, user-scalable=1"/>
<link rel="stylesheet" href="../styles/test1.css" />
<script type="text/javascript" src="../scripts/fbsdk.js"></script>
<script type="text/javascript" src="../scripts/initcss.js"></script>
<script>
//document.addEventListener('DOMContentLoaded', checkLoginCase, false);
</script>
</head>
<body onload="checkLoginCase()">
<div id="wrap">
<header id="top">
<img src="../fbimg/logo.png" alt="상단이미지" title="상단이미지">
</header>
</div>
<button onclick="checkLoginCase()"> check fxn1</button>
<button onclick="checkAlert()"> check fxn2</button>
</body>
</html>
It should be working, but try to avoid inline JavaScripts.
Try this:
window.onload = (function(){
checkLoginCase();
});
//-or-
window.onload = checkLoginCase;
Any one help me. I have described the problem in the following lines.
I want to call the second.html with in one.html.
Inside the second.html ,I have included the second.js using script tag.
When I call the second.html in the browser(safari,chorme,firefox) directly,It works FINE.
But If I call the second.html inside the one.html then the second.js(cannot call by second.html) does not work.
Please Help me. I have attached the code.
one.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="Scripts/one.js"></script>
</head>
<body>
<div data-role="page">
One
</div>
</body>
</html>
Second.html
<!DOCTYPE html>
<html>
<head>
<title>Sample </title>
<link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
<script src="../jquery-1.4.4.min.js"></script>
<script src="../jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="../Scripts/second.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="button" id="link" >Second</div>
</div><!-- /page -->
</body>
</html>
one.js
$(document).ready(function()
{
alert('one.js');
});
second.js
$(document).ready(function()
{
alert('second.js');
});
THanks
From what I have read, jQuery mobile Ajax pages do not fire the ready event when the new content is displayed. You will most likely need to bind to the pagecreate event for all 'data-role="page"' elements, and check whether an id of an element on second.html is there.
The comments section of this documentation page has some potential fixes for this:
http://forum.jquery.com/topic/mobile-events-documentation
A link is just a reference to another page; the browser doesn't actually load it before you click it (as far as the scripts on the first page are concerned, anyway).
If you want to access scripts on another page, two conditions must be met:
The two pages must come from the same domain (for security reasons).
The two pages must be loaded in the same window (for example using an iframe).
Please post a new question asking what you want to achieve, maybe there is a different solution.