I'm trying to make a really simple page using JQuery Mobile (it's my first time really playing with it). I can't seem to get the navbar to display properly. The code on the JQuery Mobile page looks dead simple and as best I can tell, I'm copying it verbatim. It displays like this though...
Here's my code (also, FYI, theme.css file is the default JQuery css file):
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/theme.css" />
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="../js/maptest.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</liI>
</ul>
</div>
<div data-role="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
Add the following to your page:
<code><meta http-equiv="X-UA-Compatible" content="chrome=1"></code>
It seems you're loading in IE. This page loads the Chrome frame activex in the IE page to render webkit stylesheet directives used by JQuery.
You should also seriously consider placing the navbar inside the content div.
Related
Hey guys I'm a beginner and currently my website is using this nav bar code on every page is there a way I can link this tag to other pages without repeating all this code on each page? There is a burger and a running sidebar popup. that hold their code in apps.js, currently every page of the project starts with this code, I would prefer to keep this code on index.html and import the to any new page I develop.
`<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<div class="navigationHeader">
<nav>
<div class="logo">
<a href="index.html"><img src="images/BannerWhiteInvert.png" alt="2505 Marketing"
style="height:60px; width:auto;"></a>
</div>
<ul class="nav-links">
<br>
<li>Home</li>
<br>
<li>Pricing</li>
<br>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
<script src="apps.js"></script>
<div class="sidebar">
<div class="sideIcons"> <img src="images/youtubeLogo.png" alt="Youtube"></div>
<div class="sideIcons"> <img src="images/instagramLogo.png" alt="Instagram">
</div>
<div class="sideIcons"><a href="https://facebook.com"> <img src="images/facebookLogo.png" alt="Facebook"
style="width: 70%;"></a></div>
</div>
<div class="body-text">
<div class="banner">
<img class="logos" src="images/2505 banner clear.png" alt="logo">
</div>
</div>
<div class="body-text">
<div class="container">
</head>`
There are several Solutions for this Usecase.
To name a few:
Templating Methods: PHP, Pug/Jade, Handlebars
Static Site Generators (Like Hugo, Nuxt.js)
Single-Page Applications (Like
Vue.js, React, Angular)
without using any programming language you cannot use one component on multiple pages, I suggest, you should use React js which is a javascript library, that is very simple, where you can use one header or any one component in multiple pages, if you don't know about React js, reach me out I will help you
I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.
I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.
The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.
I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.
Thanks a lot already!
Ina
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menü</span>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li>Start</li>
<li class="divider"><li>
<li>Angebot</li>
<li class="divider"><li>
<li>Aktuelles</li>
<li class="divider"><li>
<li>Über Mich</li>
<li class="divider"><li>
<li>Kontakt</li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Compare your line of code:
<nav class="top-bar data-topbar" >
with the corresponding one from Foundation's documentation:
<nav class="top-bar" data-topbar role="navigation">
Your error should be pretty obvious now and can prevent Top Bar from functioning correctly.
Additional advice: Next time you want to use a predefined feature of Foundation, copy and paste the code and then apply your changes to it. It seems you have rewritten it and accidentally believed "data-topbar" to be a class.
Additonal: to stick navigation at the top in small screens (up to 640px range)
"sticky_on: [small]; scrolltop: false"
and show parent link in mobile view you will need
"mobile_show_parent_link: true;"
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">
Ok,
I'm at my wit's end here. I've read the questions around anchor tags, base url's and the usage of / in a href. Yet no matter what I do, I still seem to get an anchor tag and base url added to the link.
Example below:
When I hover over the Link, it shows
http://www.localhost:8080/view/login.php
but when I click on the a href tag I get this below
http://www.localhost:8080/view/register.php#/view/login.php
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Food Loginator</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="../Javascript/gen_validatorv4.js" type="text/javascript"></script>
<script src="../Javascript/pwdwidget.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="home">
<header data-role="header">
<h1>Food Loginator</h1>
<div data-role="navbar">
<ul>
<li><a href="http://www.localhost:8080/index.php" data-icon="home" data-theme="b" >Home</a></li>
<li><a href="http://www.localhost:8080/view/login.php" data-icon="star" data-theme="b" >Login</a></li>
<li>Register</li>
</ul>
</div>
</header>
Any ideas are appreciated.
It seems this is a default part of the JQuery mobile functionality. Apparently, JQuery does an Ajax call to the object with the #tag in the a tag. It then dynamically add's that object to the DOM. In order to remove it i had to add rel="external" to my a tags.
https://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
set the links href='#'
and add an onclick event call that uses changePage
function pagechange () {
$.mobile.changePage('index.php');
}
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
I have a project with two html pages (bmi.html and 7min.html) and some javascript... I use footer to navigate between the pages.
1st issue: first time run the 7min.html, navigates to bmi.html using footer and the javascript in bmi doesn't work!
2nd issue: first time run the bmi.html, navigates to 7min.html and again back to bmi. Javascript works fine but after closing the popup dialog returns to 7min page.
Below is my code.
7min: http://jsfiddle.net/Rwf5G/
bmi: http://jsfiddle.net/snKyK/
<html>
<head>
<meta charset="utf-8">
<title>Body Trainer</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://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
</head>
<body>
<div data-role="page" id="7min-page" class="type-interior" >
<div data-role="header" data-position="fixed" data-id="appHeader" >
<h1>Workout</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Brief</h4>
<p>
Some bla bla...
</p>
</div>
<div data-role="footer" data-id="appFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
BMI
</li>
<li>
7min
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
(I am sorry that I use jsfiddle, I had some problems to add the code here.)
First issue:
jQuery Mobile uses Ajax Navigation system to load pages and change views/pages. When you start with bmi.html, all HTML tags are loaded. When you navigate from bmi.html to 7min.html, jQuery Mobile loads ONLY <div data-role="page"></div> and contents inside it. It neglects other HTML tags outside data-role=page div.
Solution: Place JS code inside <div data-role="page"></div>.
Option: To navigate without AJAX, add rel="external" or data-ajax="false" to anchor tag. Doing this, will load pages normally, however, you will lose page transition effect.
Second issue:
Add this attribute data-history="false" to <div data-role="popup"> div.