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>
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>
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);
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.
Hi all I am navigating from index.html to test.html as $.mobile.changePage("test.html", {transition : "slide"}); which works fine. But in my test.html there are multiple html pages in different div. In test.html I am calling different html page which is in different div in same html file (i.e.test.html ) as $.mobile.changePage("#secondtestPage", {transition : "slide"}); But here it is not navigate to secondtestPage. My index.html is as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
Now page navigate to test.html and my test.html looks as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
But now on click of button it is not navigating to "callSecondPage". and if I call $.mobile.changePage("index.html", {transition : "slide"}); then it navigate to index.html properly, then why in multipage changePage is not working? one more thing If I replace index.html code with test.html code then $.mobile.changePage("#secondtestPage", {transition : "slide"}); works perfectly.
I am confused why it is behaving like this? Any suggestion will be appreciated. Thanks in advance.
jQuery Mobile will asynchronously load the contents of your test.html file in order to transition to it. You have a callSecondPage() function defined within the same scope in both index.html and test.html which is probably at fault. Try naming it something different in test.html and report back.
EDIT:
OK, it turns out that jQuery Mobile does not actual load all of your other data-role="page" pages other than the first. If you inspect the DOM while transitioning from index.html to test.html, you'll notice the second, third and forth pages are missing.
This is from the jQuery Mobile documentation:
http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html
It's important to note if you are linking from a mobile page that was
loaded via Ajax to a page with multiple internal pages, you need to
add a rel="external" or data-ajax="false" to the link. This tells the
framework to do a full page reload to clear out the Ajax hash in the
URL. This is critical because Ajax pages use the hash (#) to track the
Ajax history, while multiple internal pages use the hash to indicate
internal pages so there will be a conflicts.
I added false value to end of the method, which solved the problem:
$.mobile.changePage("#secondtestPage", {transition : "slide"}, false);