I have problem with jQuery Mobile. In jQuery Mobile to go to another page of site, I just need to add id of page block. But in the following code jQuery Mobile don't work, when i'm clicking on the list items. Here is my code:
<div id="all" data-role="page" data-url="all" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 642px;">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back" class="ui-link ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all" role="button">
Back
</a>
<h1 class="ui-title" role="heading" aria-level="1">All Notes</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" id="all_notes" class="ui-listview"><li class="ui-first-child">
Boris
</li><li>
Note
</li><li class="ui-last-child">
eferf
</li></ul>
</div>
</div>
<div id="note-detail-list"><div data-role="page" id="note_afed16af-9fea-03fc-9315-5ca1f690b665" data-url="note_afed16af-9fea-03fc-9315-5ca1f690b665">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>Boris</h1>
</div>
<div data-role="content">
The best
</div>
</div><div data-role="page" id="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" data-url="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>Note</h1>
</div>
<div data-role="content">
gjfth
</div>
</div><div data-role="page" id="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" data-url="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>eferf</h1>
</div>
<div data-role="content">
freferf
</div>
</div></div>
DEMO
There is a problem in the markup, so jquery mobile is not rendering correctly:
<div id="note-detail-list">
is out of all pages.
If you remove it everything works. Try:
http://jsfiddle.net/7M5c5/3/
Related
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.
I use this to load a page and replace the current page:
$.get('genres.html').done(function (data) {
$('#pagecontent').html(data);
})
When i do this everything in de body gets replaced with the new content.
I need to replace the full body except this footer.
I did see something about div:not but i think thats not working with ajax.
How can i replace everything except the footer:
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide"><a class="jp-video-play-icon">play</a></div>
<div class="jp-interface">
<div class="jp-controls">
<div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
</div>
<div><a class="jp-play"><i class="icon-control-play i-2x"></i></a>
<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
</div>
<div><a class="jp-next"><i
class="icon-control-forward i-lg"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a>
</div>
<div><a class="" data-toggle="dropdown" data-target="#playlist"><i
class="icon-list"></i></a></div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info"></div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"><a class="jp-mute" title="mute"><i
class="icon-volume-2"></i></a> <a class="jp-unmute hid"
title="unmute"><i
class="icon-volume-off"></i></a></div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div><a class="jp-shuffle" title="shuffle"><i
class="icon-shuffle text-muted"></i></a> <a
class="jp-shuffle-off hid" title="shuffle off"><i
class="icon-shuffle text-lt"></i></a></div>
<div><a class="jp-repeat" title="repeat"><i
class="icon-loop text-muted"></i></a> <a
class="jp-repeat-off hid" title="repeat off"><i
class="icon-loop text-lt"></i></a></div>
<div class="hide"><a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a> <a class="jp-restore-screen"
title="restore screen"><i
class="fa fa-compress text-lt"></i></a></div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide"><span>Update Required</span> To play the media
you will need to either update your browser to a recent version or update
your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash
plugin</a>.
</div>
</div>
</div>
</footer>
Just put everything outside the footer in a container, then replace the contents of that. Something like:
<div id="content">
...your content here
</div>
<footer>
</footer>
Then do:
$.get('genres.html').done(function (data) {
$('#content').html(data);
})
I need help with my web app I am working on NetBeans 7.4 and I can't get the header to appear on the first page and for some reason my links to the quiz page don't work even though the code is the same and it works for the other pages? if anyone could help me I would really appreciate it code is as follows.
<html>
<head>
<title>Poker Wizard</title>
<link rel ="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css"/>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div date-role="header">
<h1>Welcome to the Poker Wizard!</h1>
</div>
<div data-role="content">
Welcome to the Poker Wizard its still under construction...
<ul>
Poker Strategy</li>
</ul>
<ul>
Hints & Tips</li>
</ul>
<ul>
Rules of Poker</li>
</ul>
<ul>
Take Quiz</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h3>©Jack Leigh 2014</h3>
</div>
</div>
</div>
<div data-role="page" id="strategy" data-theme="a">
<div data-role="header">
<h1>Strategy</h1>
</div>
<div data-role="content">
First things first, you need to learn the strategies of Poker
in order to be able to play it. Decide whether you are going to play
for fun or money as the your approach to the game will be completely
different depending on your decision.
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
</div>
<div data-role="page" id="hints&tips" data-theme="a">
<div data-role="header">
<h1>Hints & Tips</h1>
</div>
<div data-role="content">
This page will be about Hints & Tips of Poker
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
<div data-role="page" id="rules" data-theme="a">
<div data-role="header">
<h1>Rules</h1>
</div>
<div data-role="content">
This page will be about the rules of poker
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
<div data-role="page" id="quiz" data-theme="a">
<div data-role="header">
<h1>quiz</h1>
</div>
<div data-role="content">
This page will be the Quiz!
</div>
<div data-role ="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
<div/>
</body>
</html>
<div data-role="page" id="home" data-theme="a">
<div date-role="header">
On the second line you maybe would like to fix spelling and change
date-role to data-role. I hope this is enough to accomplish what you need.
Be careful with the IDs too, double check everything. Working with jQuery Mobile is a very detailed activity.
I have a link.html and back.html and in link.html I have 2 pages
link.html
<div data-role="page" id="page1">
<div data-role="header">
</div>
<div data-role="content">
<img src="first.png">
</div>
<div data-role="footer">
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
</div>
<div data-role="content">
<img src="second.png">
</div>
<div data-role="footer">
</div>
</div>
and in back.html i have a single div page
<div data-role="page" id="back">
<div data-role="header">
<a href="#" data-role="button">back
</a>
</div>
<div data-role="content">
<img src="fire.png">
</div>
<div data-role="footer">
</div>
</div>
Is their a way when i click on back button i can display the page2 in link.html page??
Thanks:)
It appears that others have had this issue before but the only solution is to either combine all the pages into one HTML file or separate them all.
sourced from similar question:
How to link to jquery mobile subpage from external page?
<div data-role="header" id="commonHead">
<div data-role="navbar">
<h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</div>
</div>
This is my code but the buttons don't fit the content width, but are aligned to the left. I don't see why I wouldn't work. Any ideas?
UPDATE: I don't know why, but it wouldm't work. my workaround is the following
<div data-role="header" id="commonHead" data-theme="b" >
<div data-role="navbar" data-iconpos="right">
<h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;" data-mini="true">myRWTH</h3>
<ul>
<li>Anzeigeoptionen
<div data-role="popup" id="popupBasic" data-theme="b">
<a id="ownPosition" data-role="button" data-icon="home" data-inline="true">Eigene Position</a>
<a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Mensen</a>
<a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">HSP</a>
<a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Gebäude</a>
<a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Haltestellen</a>
<a id="ownPosition" data-icon="delete" data-icon="home" data-inline="true">Alle ausblenden</a>
</div>
</li>
</ul>
</div>
</div>
You might need to tweak it and it's a hack at that:
http://jsfiddle.net/kewRs/
JS:
// override the jQM CSS
var cbnb = $('#customButtonNavbar');
var numberOfButtons = ($('.customButton').length > 0) ? $('.customButton').length:1;
var widthOfButtons = (Math.round(100 / numberOfButtons));
cbnb.children('.ui-controlgroup-controls').attr('style', 'width:100%;');
cbnb.children().children().attr('style', 'width:'+widthOfButtons+'%;');
HTML:
<div data-role="header" id="commonHead">
<div data-role="navbar">
<h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3>
<div data-role="controlgroup" data-type="horizontal" id="customButtonNavbar">
Yes
No
Maybe
</div>
</div>
</div>
Many ways of doing this, here's one:
<div data-role="header" id="commonHead">
<div data-role="navbar">
<h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3>
<div data-role="controlgroup" data-type="horizontal">
<div style="width: 33%; float: left; text-align: center">
Yes
</div>
<div style="width: 33%; float: left; text-align: center">
No
</div>
<div style="width: 33%; float: left; text-align: center">
Maybe
</div>
</div>
</div>
</div>
try adding data-type="horizontal" to the buttons individually. Manual
<div data-role="header" id="commonHead">
<div data-role="navbar">
<h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3>
<div data-role="controlgroup" >
Yes
No
Maybe
</div>
</div>