I have a fixed navbar in the footer that looks like this (except I have a header aswell):
http://brooky.cc/wp-content/uploads/2011/04/nav_icon.png
When I change page from the homepage, users get the back button in the header. The problem is when the back button is tapped, the entire footer navbar disappears. I want the navbar there at all times. This problem occurs on the iPhone, but my desktop browsers work no problem.
My page setup is seperate files (one page per file) so I have index.php and products.php which are currently identical except for the header changed. The code is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div><!-- /header -->
<div data-role="content">
<p>Home screen.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul id="footernav">
<li>Home</li>
<li>Products</li>
</ul>
</div><!-- /navbar -->
</div>
</div><!-- /page -->
</body>
</html>
Chris, I fear that this is an unresolved issue, see
https://github.com/jquery/jquery-mobile/issues/1047
Some folks have recommended IScroll, which you might want to check out.
http://cubiq.org/iscroll
I've had the same problem, but was able to use another workaround for my case, which might be too much overhead for your case.
In our project, we decided to use jQuery templating, so all content of a page is created dynamically. See
http://api.jquery.com/category/plugins/templates/
I registered a callback with the pageshow event, and then filled a template. This is pretty straightforward as described in the jQuery template documentation. With this technique, I was able to avoid the bug, but I think checking IScroll might be worthwhile for you unless you already use jQuery templates.
Related
Basically I need a way to inherit one HTML template(file) from another. The way I see it: parent.html:
<h1><!-- header --></h1>
<div class="container">
<!-- container -->
</div>
child.html:
<!-- extends: ./parent.html -->
<!-- <header> -->
Child Page
<!-- </header> -->
<!-- <content> -->
<span>Content</span>
<!-- </content> -->
Total duplicate of master page feature available in ASP .NET MVC or layouts of RoR.
Can anyone point me to a library that does something similar? (I going to use it as a loader for webpack, so if there is already a loader for this it would be perfect).
I recommend Nunjucks from Mozilla. You can use it via NPM or browser, also it is compiled.
https://mozilla.github.io/nunjucks/templating.html#template-inheritance
I have been working on large angularJs application which have multiple modules. Problem is that now I have to include static website in that application and that website have whole different layout than my application.
I did some R&D and found some answers which were mostly dependent on angular.bootstrap
https://docs.angularjs.org/api/ng/function/angular.bootstrap
but my application's ng-view is declared in html tag not in body and further my layout is like mentioned below.
<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper" ui-view="sidebar">
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ui-view="content">
</div>
</div>
<!-- END CONTENT -->
</div>
but website structure is totally different from this structure so can anyone please suggest how tackle this situation
should I use two ng-views in my index.html if yes than how can I use two ng-views while declare in html tag.
Thanks
What you're describing is like nested views? which the default router does not support so if you want to use of nested views for that you have to use third-party module.
I'm currently evaluating Zurb Foundation and tried to create a top bar with a menu. Somehow the links in my dropdown menus didn't work so I went basic:
I downloaded the zip, took their index.html and replaced the contents with the example from the top bar documentation. After removing everything that's unnecessary for the example, I got this:
<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
Go to
<ul class="dropdown">
<li>Google</li>
<li>Yahoo!</li>
</ul>
</li>
</ul>
</section>
</nav>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
This works: the menu opens (on hover) and I can click the links. But if I remove the JavaScript initialization
$(document).foundation();
the menu still opens (but now only after a click and not a hover) and when I hover the menu entries, the status bar shows the appropriate links but clicking on them doesn't do anything.
I thought we were over that that we need JavaScript for the most basic things. I mean we can even do animations without JavaScript nowadays but here I can't even open a link? Am I doing something wrong or is this really intended behavior? As a NoScript user this would be a no go for me.
Yes, you are right. These features in ZURB Foundation don't work without JavaScript. In addition, mobile menu doesn't work without JavaScript correctly too so definitely you need JavaScript to get Top Bar work properly.
By the way, you can see JS icon in Foundation documentation next to every Foundation item which need JavaScript to work properly - Top Bar has it.
Okay, I'm currently working on a website and I wanted to embed a timeline into each post. I am using WordPress. The timeline I insert would differ from post to post so this timeline cant be inserted into the actual theme I'm using? I'm also very new to PHP, HTML, and JS. But I have searched a ton of forums and cannot for the life of me figure out how to do this. Anyway Here is a link to my timeline. http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html
And here is a link to the timeline embedded on my website using iFrame. http://www.derikgrass.com/events/?p=526
iFrame would work great only that the iframe needs to be much bigger than the timeline itself as the timeline extends when you click on events in the timeline as you can see from the links I provided. Here is the timelines html code:
<meta charset="utf-8">
<title>TimelineXML</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/timelinexml.sleek.css">
<section class="demo">
<p> <br/><br/> </p>
<div class="demo-box">
<div id="my-timeline">
<div class="timeline-html-wrap" style="display: none">
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script defer src="js/mylibs/timelinexml.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts -->
I want to embed this directly into specific posts I create. If anyone would be able to help me write the code in order to embed this timeline, I would be EXTREMELY appreciative. Thanks.
I think what you mean is that you just want to put his in your html
<iframe src="http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html" scrolling="no" height="400" width="900"> </iframe>
And change the width.
But you should go to the source (so follow that link) and you'll see he uses a nice js file to make it work. If you do that you'll see he's using this script:
http://codecanyon.net/item/jquery-timelinexml/1448100
I don't like scripts from there seeing I believe they are funky websites, but hey, it's your computer and server. You decide.
I've been writing a simple four-screen Android application using Cordova and jQuery Mobile. The different screens are arranged inside a single page of HTML as DIVs with the data-role="page" attribute. I basically copied the multi-page sample template from the jQuery Mobile documentation.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Navigation between the pages happens via a persistent navbar stuck to the bottom of each page. Again, I used the code suggested in the jQuery Mobile docs with little modification.
<div data-role="footer" data-id="appNavBar" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>History</li>
<li>Settings</li>
<li>About</li>
</ul>
</div>
</div>
The various Javascript libraries are included in the head section of the HTML page, as follows (application.js contains the logic of the app).
<head>
<title>Redacted</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="application.css" />
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>
When Cordova is finished loading and is ready for use, it emits the "deviceready" signal. the Cordova docs recommend binding all setup code to an event listener tied to that signal. I have done it like this in application.js:
function onDeviceReady() {
console.debug("Cordova initialized.");
setup();
}
document.addEventListener("deviceready", onDeviceReady);
setup() is a function that reads information from the browser Web SQL database and storage (using the Cordova API defined here) in order to maintain user preferences and usage information between application launches.
Now for the problem: I was under the impression that jQuery Mobile would use the jQuery ajax method to load any subsequent pages after the first page, and that in doing so it would strip out the head section and skip straight to the DIV with the data-role="page" attribute and the appropriate ID. What I am observing instead is that the scripts in the head section appear to be reloaded whenever I visit a new page of the application. This happens the first time the page is visited in the session and then stops happening.
It appears that Cordova is being reinitialized and that it is emitting the deviceready signal again. Using LogCat in Eclipse, I can see the debug message I placed in the onDeviceReady function. the setup() function is also being called again. This slows things down considerably.
Does anybody know where I'm going wrong? Is there a way to ensure that Cordova only loads once?
Thanks,
Evan
I'm having the same problem using the phonegap facebook connect plugin. The only workaround is to design the entire app to be one html document with panels that are shown and hidden as your different screens. If you want to keep the panels in separate files, you could use something like require.js
I know that this issue is about 9 months old, but just in case my solution helps someone else with the same issue
Don't build your pages with display per HTML, instead build one long HTML page with each display part in it's own DIV with data-role="page"
Now, when you're changing page, you can use JQM's call of $.mobile.changePage() to change the display page
e.g. your page could look like this:
<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>
<div data-role="page" id="page2">
<p>more content here</p>
</div>
I know this seems counter-intuitive for most web development, but working with PhoneGap & JQM means NOT working in standard web development