<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;
Related
I am running XAMPP on a Windows box. Below is my test file:
<html>
<head>
<title>very nice file</title>
</head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<a class="expander" href="#">click me</a>
<div class="content">
I WANT TO HIDE THISSSS.
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://raw.githubusercontent.com/redhotsly/simple-expand/master/src/simple-expand.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.expander').simpleexpand();
});
</script>
When I surf to that file in Internet Explorer, I see 'click me' and 'I WANT TO HIDE THISSSS'. When I surf to it in other browsers, I see 'click me', and clicking it will un-hide the 'I WANT TO HIDE THISSSS' text.
Searched all night and still have nothing! Any thoughts? Thanks!
Do you really need that expander? If you are just to hide/show a content. You can create one with few lines of code since you are using jquery
You can try this simple fiddle here https://jsfiddle.net/yzdthzhL/
you can play the code you want.
and by the way. I'm not sure if this is helpful or not but. It would nice to add your script inside your html document.
<html>
<head>
<script src="somelibrarieshere"></script>
</head>
<body>
<script src="somelibrarieshere"></script>
</body>
</html>
and not outside html block. It's better that way. :) Have a great day pal.
So I was trying a little loading bar but my JQuery doesn't load when I try this in FireFox & Chrome, it only loads on Safari.
this is my code:
<html>
<head>
<title>Mijn eerste spel</title>
<link href="opmaak.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="knop">
<div id="textknop">Gooi Steen</div>
<div id="laadbalk"></div>
</div>
<h1 id="money">$0</h1>
</body>
</html>
and my jq code is:
$(Document).ready(function(){
alert("test")
});
In Safari it produces the popup but any other browser just ignores my code.
Very simple, just change Document to document in javascript code.
I am trying JQuery Mobile for the first time and have not been able to trigger a response to a button being pressed on my iphone 4S which runs iOS 7.1. The click event is triggered in the browser on my computer but not on the device. I can see that this is a common issue and have tried the various proposed solutions but they dont seem to work for me. My code is very simple. The markup is
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="javascript/idtest.js"></script>
</head>
<body>
<div data-role="page">
<div id='login'>
<center>
<a href="#" data-role="button" id='pincodebtn'>Identify</a>
</center>
</div>
</div><!-- /page -->
</body>
</html>
And the javascript, idtest.js, is
$(document).ready(function() {
$('#pincodebtn').css('cursor','pointer');
$(document).on('click','#pincodebtn',function(){
alert('clicked');
})
});
As you can see, I have tried the trick of setting the cursor to pointer. I have also tried catching the 'vclick', 'touchstart', 'touchend' and 'tap' events. None of which trigger the alert on the iOS device. Help would be appreciated.
Did you try this?
$('#pincodebtn').on('click',function(){
alert('clicked');
});
Try the below code
$('#pincodebtn').on('click touchstart',function(){
alert('clicked');
});
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.
I've found that if I load a web page in iOS, then if that page uses JQueryMobile it takes about 2 to 3 seconds longer to initially load. For example, the following page loads almost instantaneously:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
However this one takes a few seconds to load:
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Is there anything I can do to try to get rid of this delay?
Thanks
If it’s the scripts that are taking too long, you can move them to the bottom of the page:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
Then again, doing so will make it harder to predict exactly what happens and when it will happen. But the DOM should load and render before the blocking script tags load.
Now you just need to figure out how to deal with that.
jQueryMobile is not that famous for its responsiveness. Even after you have tried every optimization.
You could try loading the scripts via document.createElement() though. (Ideally, even this should go at the bottom)
function createScript(src){
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
What this effectively does is to start loading and executing the scripts only after the page has rendered. i.e. kind-of asynchronously.
If you have many like these.
var files = ['1.js', '2.js', '3.js'];
files.map(createScript);
Also, I would vouch for SenchaTouch(if that's an option you're willing to consider)
Try putting the JS at the bottom
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</body>
</html>
You Can Try and Put The Script Tag in The Bottom of The Page
<!DOCTYPE>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
<h1>Hello</h1>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</html>
and Everything Should Load Faster But The Scripts Gonna Take a 2-3 Seconds
JavaScript blocks the rendering of the page because the script may do document.write or do other modification that will invalidate the rendered page, so best practice is to put script tags at the bottom of the page. The drawback to this is that you won't be able to use jquery in the middle of the page, not even $(document).ready(). Instead you'll have to put all your scripts after jquery is loaded or you'd have to use native window.onload or write a lightweight handler to register your callbacks after jquery is loaded.