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.
Related
So I've been trying to make pjax work on my website but with little luck.
What I want to do is very basic and simple. I just want to create two links on my home page which both load a common page. But one link would load it using pjax, thus only change the contents of the div, and the other one would not use pjax and thus load the whole page.
This is the code of my main page (main.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
</body>
</html>
and this is the code of the common page both links refer to (first.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">This is the first page! If you came here from the first link, then you can notice that the page didn't load but only the URL and the contents of this div were changed. Yay! If you came here from the second link then you can notice that the page actually loaded and each and everything was re-executed(JS) and re-applied(CSS) again. Boo!</div>
</body>
</html>
and this is the javascript that I'm using (main.js) -
var a = new Pjax({
elements: "a.js-Pjax",
selectors: ["#first-div"]
});
What it should do is if I click on first link, it should just replace the content of div and change the URL of the page whereas if I click on second link, it should load the page instead of just changing the div and URL.
I've written identical code in play framework (MVC) and it's working perfectly but according to me I should not be needing an MVC to run only this much of code.
I have got the Pjax from here: https://github.com/MoOx/pjax . Installed it through npm.
I've run Pjax.isSupported() command and that returned true.
Any help is appreciated!
Well two things to notice here, combination of which solved my problem.
First, The call to main.js or the javascript file I have written has to be done at the end of the body tag. Something like this -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
And second, I do need a server running to make pjax work. It's working with both play framework and npm. Doesn't work without a server.
Hope this helps somebody.
I can not connect an external JavaScript file to my html page.
When I put the script in the page with the tag it all works
but when I insert it in an external file is not working, what is wrong?
<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>
<body>
<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>
<div id="info">
<ul class="infomenu">
<li class="newsletter">NEWSLETTER</li>
<li>PRIVACY</li>
<li>CONTACT</li>
<li>FOLLOW US</li>
</ul>
</div>
</body>
</html>
Javascript
//Jquery Info
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Welcome</title>
<link type="text/css" href="styles/default.css">
</head>
<body>
<!-- HTML Content -->
<script type="text/javascript" src=".."></script>
<script>
// Javascript inside this file
</script>
</body>
</html>
The link- and script part is not necessary, but you mostly will need it so I put it in the right order in.
Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.
If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.
But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.
<script>
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
</script>
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.
Im trying to build a basic page with the Addthis code inside.
The code I am using is :
<html>
<HEAD>
<TITLE>test </TITLE>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'> </script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"> </script>
</HEAD>
<body>
<div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"> </a>
<a class="addthis_button_tweet"> </a>
<a class="addthis_button_pinterest_pinit"> </a>
<a class="addthis_counter addthis_pill_style"> </a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true}; </script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"> </script>
<!-- AddThis Button END -->
</div>
</body>
</html>
However when I run the page in a browser I get a blank screen. Am I missing anything obvious ?
Thanks,
It won't work locally because the src tag is using "//s7..." and trying to determine the protocol based on the parent page. In your case, while running locally, the parent page probably looks like:
file://c:\blahblah\index.html
and therefore the protocol is file:// which doesn't work (it needs to be http or https). This is done to make it easy for users to copy the code into a site that is either http or https without having to make changes to the code.
To fix this locally, just prepend http so it looks like:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=felix001"></script>
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.