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?
Related
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100
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'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>
Need: To show / replace an another DIV from existing DIV tag on the same page while using data-role="page">
Problem: While using hide/show method to the div for displaying the next page reg button(click)=>reg DIV content> but the Reg DIV Content is displayed for only 2 sec, and then the apps is exited and comes to the main menu in Emulator.
Code_STRUCTURE: (as i mentioned below)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
</div> <!-- page -->
// in J query call
// to show reg content then call
$('#log_in').hide(); // or also tried as $('#log_in').css('display','none');
$('#reg').show(); // or also tried as $('#reg').css('display','block');
Platform : Android
Compiled in: Eclipse Emulator
If any one have the answer, please post it! and if you prefer to give any more suggests and also be knowledgeable. Thank you for visiting this post!
Edited: (my old Code)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
<button id="login">Login</button>
<button id="reg">Register</button>
**</form>**
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
(Corrected Code):
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
**</form>**
<button id="login">Login</button>
<button id="reg">Register</button>
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
The problem is most certainly with your js code.
You should be able to successfully use both jQuery show()/hide() and display: none;.
Here is working example