I'm very new to polymer, based on starter kit 1.3.0, by default, on desktop view show like this:
Desktop View (with toggle menu button)
On mobile:
Mobile View (toggle menu button is missing!)
How can I force the webpage to show the toggle menu button on desktop view ?
Here is index.html, just a default from starter kit, no change at all.
<!doctype html>
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Polymer Starter Kit</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">The future of the web today</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" tabindex="-1">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
<p>Looking for more Web App layouts? Check out our layouts collection. You can also preview them live.</p>
</paper-material>
<paper-material elevation="1">
<p>This is another card.</p>
</paper-material>
<paper-material elevation="1">
<h2 id="license">License</h2>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
<p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
<p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
<ul>
<li>Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.</li>
<li>Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.</li>
<li>Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.</li>
</ul>
<p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
</paper-material>
</section>
<section data-route="users" tabindex="-1">
<paper-material elevation="1">
<h1 class="page-title" tabindex="-1">Users</h1>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info" tabindex="-1">
<paper-material elevation="-1">
<h1 class="page-title" tabindex="-1">User: {{params.name}}</h1>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact" tabindex="-1">
<paper-material elevation="1">
<h1 class="page-title" tabindex="-1">Contact</h1>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
In app-theme.html add this css:
#paperToggle {
display: inline-block !important;
}
At the bottom of app.js add:
app.toggleDrawer = function() {
var panel = app.$.paperDrawerPanel;
var responsiveWidth = parseInt(panel.responsiveWidth);
if (window.innerWidth > responsiveWidth) {
if (panel.forceNarrow) {
panel.forceNarrow = false;
panel.togglePanel();
} else {
panel.forceNarrow = true;
panel.togglePanel();
}
}
}
In index.html change the line:
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
to include on-tap="toggleDrawer"
<paper-icon-button id="paperToggle" icon="menu" on-tap="toggleDrawer" paper-drawer-toggle></paper-icon-button>
If this doesn't work, please comment and I'll look in to the problem.
Related
I downloaded the Intermediate - Advanced users version of polymer-starter kit version 1.2.3. I then ran
bower install a-dot
in the polymer-starter-kit directory.
I then added
<script src="../bower_components/platform/platform.js"></script>
before
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
in app/index.html
I also added
<paper-material elevation="1">
<a-dot dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
</paper-material>
in the
<section data-route="home">
</section>
I do not see the graph according to what I saw at:
a-dot webcomponents page
Does anyone out there know what I am missing?
Thank you
Update:
I also have:
<link rel="import" href="../bower_components/a-dot/a-dot.html"/>
in elements/elements.html.
Here is the full index.html:
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="generator" content="Polymer Starter Kit"/>
<title>Power X Hub</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1"/>
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json"/>
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF"/>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="application-name" content="PSK"/>
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"/>
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit"/>
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"/>
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"/>
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Power X Hub</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">PowerXHub is a platform that connects and links the enterprise assets like logical models, databases, services, code components and documents and creates an interwoven knowledgebase of the enterprise.</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
<p>Looking for more Web App layouts? Check out our layouts collection. You can also preview them live.</p>
</paper-material>
<paper-material elevation="1">
<p>This is another card.</p>
</paper-material>
<a-dot dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
<paper-material elevation="1">
<h1 id="license">License</h1>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
<p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
<p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
<ul>
<li>Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.</li>
<li>Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.</li>
<li>Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.</li>
</ul>
<p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="page-title">Users</h2>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="page-title">User: {{params.name}}</h2>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="page-title">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
I found the solution. It was working correctly, but the width and height for the a-dot was not set.
This is the solution:
<paper-material elevation="1">
<a-dot style="width:100%;height:300px;" dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
</paper-material>
I have found this very great looking Polymer-starter-kit-lite V1.0.1 here. When trying to create my own page some text appears while loading the page. Here is mine:
and here is the Polymer Starter Kit that i downloaded from github, it comes in with a smooth fading effect:
Maybe someone knows how this is done!
<!DOCETYPE html>
<!-- General -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-size=1.0, minimum-size=1.0, user-scalable=no">
<title>Foodify - Einfach Einkaufen!</title>
<!-- SEO Tags -->
<meta name="author" content="Andre Kuhlmann">
<meta name="page-topic" content="Branche Produkt">
<meta name="page-type" content="Private Homepage">
<meta name="audience" content="Alle">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<!-- Don't forget to place the favicon and the apple-touch-icons -->
<!-- Chrome ThemeColor for Android -->
<meta name="theme-color" content="#2ECC71">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Title Color for Windows 8 -->
<meta name="msapplication-TintColor" content="#2ECC71">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Polymer Starter Kit">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild-->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- endbuild -->
</head>
<body fullbleed layout vertical>
<!-- Drawer -->
<paper-drawer-panel>‚
<paper-header-panel drawer mode="seamed">
<paper-toolbar class="tall green">
<div horizontal layout end>
<div>Menu</div>
</div>
</paper-toolbar>
</paper-header-panel>
<paper-header-panel main class="main" mode="seamed">
<paper-toolbar>
<paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
<div class="flex">Foodify</div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</body>
Thanks, André
To replicate how the starter kit fades in on load, change the body by adding an unresolved attribute as follows:
<body class="fullbleed layout vertical" unresolved>
// ... content here
</body>
from the docs:
The unresolved attribute on the element is used to prevent a
flash of unstyled content (FOUC) on browsers that lack native support
for custom elements. For details, see the Polymer styling reference.
Note that this documentation refers to version 0.5 but this works in version 1.0 as well.
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 }}.
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/
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