jQuery Mobile basics - html

I am trying to learn how to program with jQuery Mobile and I cannot understand why this code doesn't work:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="First">
<div data-role="header">
<h1>First</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>First Page</p>
<p>View page called Second</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="Second">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Second Page</p>
<p>Back to First</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Thank you very much for helping!
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

The markup you have posted works fine using JSFiddle.
The only difference between the example you have posted and the one I have created on JSFiddle (apart from the missing closing HTML tag) is the path references to the external libraries:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
Replace your script and stylesheet references with the block above and see if it works. These libraries are hosted on Google's Content Delivery Network (CDN). If this works, the paths to your local versions of these files are wrong and you will need to correct them.
Here is a page explaining about file paths:
http://css-tricks.com/quick-reminder-about-file-paths/

Related

Laravel 5: Class 'HTML' not found even though package has been installed

I know that this isn't an embedded package any more. In my composer.json I have:
"require": {
...stuff...
"illuminate/html": "5.*"
}, etc.
In app.php I have:
'providers' => [
...stuff...
'Illuminate\Html\HtmlServiceProvider',
...more stuff...
],
'aliases' => [
...stuff...
'Html' => 'Illuminate\Html\HtmlFacade'
], etc.
I have run composer update, so why is it not recognising when I use HTML::script()? This is the Blade template that is throwing the error:
<!DOCTYPE HTML>
<html lang="en">
<!-- USER LOGIN SECURITY -->
<!-- require('redis-session.php');
RedisSession::start();
#if (!isset($_SESSION['HTTP_SHIB_EP_EMAILADDRESS']))
header('Location: https://resviz.ncl.ac.uk/signin?redirect=https://resviz.ncl.ac.uk/wos/index.php');
die();
#endif -->
<head>
<title>Academic Intelligence</title>
<!-- LINKS -->
<!-- local css file -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Corporate visual identity -->
<link href="//resviz.ncl.ac.uk/static/style/cvi.css" media="screen" rel="stylesheet" type="text/css" />
<!-- bootstrap css -->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css" rel="stylesheet">
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<!-- META -->
<meta charset="UTF-8"/>
<!-- ensure proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BREADCRUMBS -->
<div class="sg-orientation">
Skip to Content
<span class="sg-breadcrumbs">
Newcastle University >>
Research Visualisation >>
<strong href="#">Academic Intelligence</strong>
</span>
</div>
<!-- TITLE BAR -->
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2>Academic Intelligence</h2>
</div>
<div class="sg-navigation"> </div>
<div class="sg-content">
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
</nav> <!-- navbar -->
<!-- main content -->
<section class="container">
{{-- unique section to other pages --}}
#yield('content')
</section> <!-- main content; container -->
</div> <!-- sg-content -->
<!-- FOOTER -->
<div class="sg-clear"> </div>
<div class="sg-footer">
<p>Research & Enterprise Services<br/>Newcastle University, Newcastle Upon Tyne,<br/>NE1 7RU, United Kingdom<br/>Email Webmaster<br/><br/>© {{ date('Y') }} Newcastle University</p>
</div>
<!-- SCRIPTS -->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- local script -->
{{ HTML::script('js/script.js') }}
<!-- bootstrap js -->
{{ HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')}}
<!-- angularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- check browser version, if outdates, prompt for update -->
<script src="//browser-update.org/update.js"></script>
</body>
</html>
I am moving this existing web application into Laravel and so am trying to implement the various Blade components. In this case changing what was <script src="script.js"></script> to {{ HTML::script('js/script.js') }}. I cannot understand why the HTML Class is not being recognised though...
You can use the {!! HTML::script('whatever') !!}.
In Laravel 5 or 5.1, mostly you can use {!! codes !!} instead of {{ codes }}.

JQuery mobile multi-page

When run the following code, firefox 17.0.5 gives an "error loading message", when I want to open the car page. But it works properly in IE8.
Then I found an example here
http://jquerymobile.com/demos/1.0/docs/pages/multipage-template.html
I opened that website with firefox 17.0.5, works. Then I viewed the source code, almost the same structure as mine. But when I download the html and run it, neither IE8 nor FF works. What's wrong here? I m linked to jQuery moible from another project, know nothing about web development. Please help. :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header">
<h1>Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p>What vehicles do you like?</p>
<p>Cars</p>
<p>Trains</p>
<p>Planes</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- / Page 2 -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Cars</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content about cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Cars</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
I had the same problem too, And I found that the problem is using the protocol file://, You can’t work with jquerymobile with the protocol file:// it has to be a web address. After moving my project to my local server, with protocol http:// it worked immediately.
Source : http://doeswhat.com/2011/03/08/jquery-mobile-error-loading-page/
EDIT:
In your case, avoiding spaces in URL address solves your problem

Compiling html templates to complete website

I'm used to using ASP.NET and visual studio to develop websites. I'm trying to develop a plain .html website in a similar matter. What I mean is use master pages etc so there is code reuse and maybe deploy these template files to a group of .html files.
For example
head.html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
header.html
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
footer.html
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
layout.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#include(head.html)
</script>
</head>
<body>
<div data-role="page">
#include(header.html)
#include_body()
#include(footer.html)
</div><!-- /page -->
</body>
</html>
index.html
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
and combine all of these into a single output file....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Does anything like this exist? I'm not familiar with ruby or anything...
Server-side includes (SSI) may meet your needs. With some basic server requirements met, you can do, for example:
<!--#include virtual="includes/my_file.html" -->
You could use a little PHP to do this using includes.
Header, footer etc could be created as new .php files where you place everything you want to be displayed in that section in.
Then, in say your index.php file you do something like
<?php
include ('header.php');
?>
<html>
<head>
</head>
<body>
</body>
<?php
include ('footer.php');
?>
Everything inside the header and footer PHP files will be included.

Right markup for HTML5 website?

I developing my new website in HTML5/CSS3.
When converting my PSD files to HTML5 / CSS3 I wonder what the correct markup for an HTML5 website.
Below is a simple wireframe of my website, as you can see I want the website to make full width, at least in the different areas.
This is the layout:
As you can see here, I want to have some different section on my homepage for the information.
And I came up with this markup:
Because when I copy all the list no longer be seen, I have the
content, text and images in this code omitted. Where an image or a
text would face with a comment below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<!-- Meta Tags -->
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">
<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Start container website -->
<header id="header">
<div class="container_12">
<div class="grid_12">
<!-- // Here will be position the logo with a link \\ -->
<nav id="primary-navwrapper">
<!-- // Here will be an unordered list with menu items \\ -->
</nav>
</div><!-- End .grid_12 -->
<div class="clear"></div><!-- End .clear -->
</div><!-- End .container_12 -->
</header><!-- End header -->
<section id="hero">
<div class="sliderbox">
<!-- // An list of image for a slider \\ -->
</div><!-- End .sliderbox -->
</section><!-- End section#hero -->
<section id="introduce">
<article class="container_12">
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- // A image tag \\ -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#introduce -->
<hr class="dark-grey"> <!-- Divider for the section -->
<section id="work" class="alt">
<article class="container_12">
<!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->
</article><!-- End article.container_12 -->
</section><!-- End section#work.alt -->
<hr> <!-- Divider for the section -->
<section id="blog" class="even">
<article class="container_12">
<aside class="grid_4">
<!-- Sidebar with some text -->
</aside><!-- End aside.grid_4 -->
<ul class="recentbox">
<!-- List of 2 latest blog items -->
</ul><!-- End ul.recentbox -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- Contact banner -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#blog.even -->
<footer id="footer">
<!-- Footer markup here -->
</footer><!-- End footer -->
</body>
</html>
Some extra information. As you can see I start with the <header> -tag for the header, after that I set some areas up with the <section> -tag inside that I will at the <article> -tag with a class of <article class="container_12"> to be able to use the grid 960. Inside that <article> -tag I will be set text, image etc.
Good to know is that I tag the article in some sections often use, I do this because for several articles in a specific section to distinguish. With Articles do have a connection with each other but are different in one article to post.
I love to hear your opinions regarding my markup so far and how you would tackle.
Thank you.
You're mark up is totally acceptable. I would suggest maybe not going so heavy with the id tags, but instead going for a more OO approach to come of your CSS. For information go here: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
Otherwise your mark up is fine.

iFrame not loading on page load (jQuery Mobile)

I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});