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.
Related
So I'm trying to hide a navbar when on the login page. I've put the navbar inside a nav-element, and putted a "ng-if" in the element to only render if the user is in the application(and not the login page).
<!DOCTYPE html>
<html lang="en" ng-app="demoapp">
<head>
<!-- Angular & jQuery -->
<script src="js/jquery-3.2.0.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><!-- load angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script><!-- load ngRoute -->
</head>
<body>
<nav ng-if=false>
/... nav elements inside here
</nav>
<!-- to load ngRoute-->
<div ng-view></div>
</body>
But when I'm on the login page, the navbar still shows up for a second, and then disappears. Why is it doing that? How do I stop it?
According AngularJS documentation "The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view."
Please refer https://docs.angularjs.org/api/ng/directive/ngCloak
This is what ngCloak is for:
<nav ng-cloak ng-if=false>
/... nav elements inside here
</nav>
Add ng-cloak to your body tag, this will prevent glitching for ALL elements that have an ng-if attribute attached to them.
Link to Fiddle
The prompt works when the 'Frameworks & Extensions' is set to jQuery 2.0.2
but when I add...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
...to replace JSFiddle's jQuery 2.0.2 and I set 'Frameworks & Extensions' back to 'No-Library (pure JS)' the prompt does not work anymore.
After trying dozens of variations the prompt still fails to run. What is causing this difference in behavior?
This happens due to the way JSFiddle "inserts" the code in the output page.
Your fiddle uses 4 ways to input code:
the HTML box (top left),
the CSS box (top right),
the JavaScript box (bottom left) and
the "External Resources" (left menu).
The output part (bottom right) will print what you place on the above boxes like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by Birdlaw</title>
<!-- Here goes the selected JS lib (jQuery 2.0.2 in your example) -->
<!-- Selected Extensions are here (in your case, bootstrap, then bootbox) -->
<style type="text/css">
<!-- Content of the CSS (top right) box goes here -->
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
//<!-- Content of the JavaScript (bottom left) box goes here -->
//<!-- Actually, this can be configured (the second combo at left menu - "onLoad") -->
});//]]>
</script>
</head>
<body>
<!-- Content of the HTML box goes here -->
</body>
</html>
As you can see, taking jQuery out of the selected framework and placing it in the HTML box has different outcomes.
Selecting it as framework places it before the Extension (bootstrap and bootbox) files. When it is in the HTML box, it is placed after the Extension files, thus yielding the error (because those files need jQuery).
How to make it work? If you want to place jQuery in the HTML box "manually", then place all of the Extensions files there as well, in the correct order. This will make it work as expected.
Here's an updated fiddle, containing the fix above.
Because when you do that, the order that the JS files are loaded is different. The bootstrap and other files are loaded BEFORE the jQuery file. So when it looks for the file, it is not there and throws an error. Look at the console.
The problem is that you had the bootstrap external library being loaded before jQuery was being load(if you didn't want it to be loaded by JSfiddle interface and on your HTML page), and bootstrap needed jQuery to be already loaded to be able to initialized.
ie: this can't be on the HTML section if you bootstrap to work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
I've updated your fiddle with the correct order:
http://jsfiddle.net/gjkooofv/13/
Notice on external libraries that jquery is the first then goes all the other ones.
I made a simple responsive page using Twitter Bootstrap: http://jsfiddle.net/5YNmm/3/
The responsive Nav and any collapse toggles work only once in FF and Chrome.
In IE they work perfectly.
The collapse example is copied from the bootstrap site:
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Press me to toggle</button>
<div id="demo" class="collapse in"> Collapsible Content, initially shown </div>
Since i don't include any other js, it shouldn't be the error here Bootstrap nav-collapse toggles once or here twitter-bootstrap Collapse stops working after first click, where $.support.transition gets overridden by another library.
Many thanks in advance for any advice!
Its something in the css files. All I have simply done in this fiddle update is to remove your two css files (that obviously weren't loading on the fiddle)
<link rel="stylesheet" type="text/css" href="./bootstrap_files/stylesheet_427bb03fe1.css" media="all">
<link rel="stylesheet" type="text/css" href="./bootstrap_files/frontend.css" media="all">
and replace it with the bootstrap CDN hosted CSS file
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
and it collapses and expands on chrome and firefox fine now. Fiddle Link here: http://jsfiddle.net/5YNmm/6/
Without any access to the css files I couldn't tell you more - but hopefully this should point you in the right direction!!
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
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.