In my HTML5 / JQueryMobile app, I use several data-role="page" divs in the same index.html file:
<body>
<!-- Map page -->
<div data-role="page" data-theme="b" id="map">
<div data-role="header" data-theme="b">
<h1>Map</h1>
</div>
<div data-role="content">
<div id="map_canvas" style="width:320px; height:300px; float:left; border: 1px solid black;">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<!-- List page -->
<div data-role="page" data-theme="b" id="list">
<div data-role="header" data-theme="b">
<h1>List</h1>
</div>
<div data-role="content">
…
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
<!-- Settings page -->
<div data-role="page" data-theme="b id="settings">
<div data-role="header" data-theme="b">
<h1>Settings</h1>
</div>
<div data-role="content">
...
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
</body>
This code does not work very nicely. The selected item of the navigation is not well highlighted after several clicks.
Is this page structure (several data-role="page" in the body) the correct way to do ?
UPDATE
Seems to be the way to do it (http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html), so I must miss something.
You're using Alpha version 1, they have improved much with Alpha version 4: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html
You might also have a look at the toolbar section as well:
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/index.html
Demo: http://jsfiddle.net/jAwPR/3/
Related
I am not able to cope with the iframe. I am trying to insert my curriculum in it, but although the width seems easily managable, the height does not repond to increments in the feature. The result is an iframe that ocupies the width of the page but is wide too narrwo to confortably scroll down. Downhere I leave the code (The issue is halfway) and my webpage, https://rubencioak.github.io/cv2.html, in case it's of any help.
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWMMZHX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="header">
rubencioak.github.io
<ul class="icons">
<li><span class="label">Email</span></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Curriculum Vitae</h1>
</header>
<!-- About Container -->
<div class="w3-container">
<div class="w3-content w3-text-color2 w3-padding-64" style="max-width:700px">
<p>
<span> </span> Download [pdf]
</p>
</div>
</div>
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
<div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
<p> <iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<p>Your web browser does not support iframes. Please click at the pdf link above. </p> </iframe> </p>
</div>
</div>
<section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li>Homepage</li>
<li>Research</li>
<li>Curriculum</li>
<li>Teaching</li>
<li>Contacts</li>
<li>Referees</li>
<!--<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li> -->
</ul>
</nav>
<section>
<header class="major">
<h2>Contact</h2>
</header>
<p>Please, contact me with any question, specially those regarding my reseach. Your feedback will be much apreciated</p>
<ul class="contact">
<li class="icon solid fa-envelope">rubenprzsnz#gmail.com</li>
<!-- <li class="icon solid fa-phone">(000) 000-0000</li> -->
<li class="icon solid fa-building">
Departament d'Economia<br />
Edifici B<br />
Universitat Autònoma de Barcelona<br />
08193 Bellaterra, Barcelona, Spain</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: Unsplash. Design: HTML5 UP.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
Change your height in your inline style on your iframe to vh (viewport height)instead of %. I changed the height to 1000vh using Dev Tools and it nearly filled the whole screen. That's not the ideal fix, but it works.
<iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<!------Change height to vh------>
<iframe width="75%" height="500vh" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
I am attempting to add two {content} areas on my Weebly website that are separated by custom code in the HTML/CSS editor. I am not understanding the basic fundamentals to how {content} sections work in Weebly.
I initially copied and pasted:
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
But it simply duplicated the content on the page.
I am hitting a dead end in most of my searching. Please see the code below. I am trying to add a second editable (drag and drop) {content} section area between the "Portfolio" section and "footer" section. Thank you for your help in advance.
<body id="top" class="homepage-sections home-custom-header wsite-theme-light">
<!-- Pre Loader -->
<div id="loading" class="loading"></div>
<div class="wft-layout">
<!-- Main Wrapper -->
<div id="home" class="top">
<!-- Info Bar - Text, Social -->
<div class="info-bar">
<div class="row">
<div class="clearfix">
<div class="info-left">
<ul class="info-links clearfix">
<li><i class="typcn typcn-time"></i>{info:text}</li>
</ul>
</div>
<div class="info-right">
<ul class="info-links clearfix">
<li class="info-social">{social}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Top Bar & Menu -->
<div class="top-bar">
<!-- Logo, Menu, Cart-->
<div class="header-bar ib-large">
<div class="row d-table">
<div class="eq-col-left pad-0">
{logo}
</div>
<div class="eq-col-right pad-0">
<div class="details-bar">
<div class="row">
<div class="clearfix">
<div class="details-right">
<ul class="details-links clearfix">
<li class="t-address"><i class="typcn typcn-location-outline"></i>{details-address:text}<br>
<span>{detail-address:text}</span>
</li>
<li class="t-phone"><i class="typcn typcn-phone-outline"></i>{details-phone:text}<br>
<span>{detail-phone:text}</span>
</li>
<li class="t-email"><i class="typcn typcn-mail"></i>{details-email:text}<br>
<span>{detail-email:text}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="menu-container" class="menu-container">
<div class="row">
<span id="cart">{minicart}</span>
<!-- Menu Toggle -->
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle"></label>
<!-- Menu -->
<div class="menu relative">
<div class="nm-inner">
<!-- Scroller Menu Items -->
<div id="scroller-nav">
<ul id="nav">
<li class="home-nav">{menu1:text}</li>
<li class="sec1-nav">{menu2:text}</li>
<li class="sec2-nav">{menu3:text}</li>
<li class="sec3-nav">{menu4:text}</li>
<li class="sec4-nav">{menu5:text}</li>
<li class="sec5-nav">{menu6:text}</li>
<li class="blog-nav">{menu7:text}</li>
<li class="features-nav">{menu8:text}</li>
</ul>
</div>
<!-- Multi Page Menu -->
<div id="multi-nav">{menu}</div>
<!-- Mobile Menu -->
<div id="navmobile">
<div class="mb-inner">{menu}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Header -->
<section id="home" class="home">
<div class="wft-banner-wrap">
{{#header}}
<div class="container">
<div class="wft-banner">{content}</div>
</div>
{{/header}}
</div>
</section>
<!-- Sections -->
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
<!-- Portfolio Section 3 -->
<section id="section-three" class="portfolio pad-t100 relative wft-content-wrap" style="background-color: #ffffff;">
<div class="row wft-ph ph-standard-3">
{portfolio:content global="false"}
</div>
<div class="portfolio-img-row row wft-ph ph-standard-3">
<!-- portfolio starts here -->
<!-- Portfolio Filter -->
<!-- to add more title tabs, just add more <li> lines and give it a new class and {porttitle?:text}
<ul class="option-set" data-option-key="filter">
<li><a class="selected" href="#filter" data-option-value="*"><span></span>All</a></li>
<li id="filter1"><span></span>{porttitle1:text}</li>
<li id="filter2"><span></span>{porttitle2:text}</li>
<li id="filter3"><span></span>{porttitle3:text}</li>
<li id="filter4"><span></span>{porttitle4:text}</li>
<li id="filter5"><span></span>{porttitle5:text}</li>
</ul> -->
<!-- End Filters -->
<!-- Portfolio Items -->
<div id="posts" class="row isotope ph-portfolio">
<!-- Start Project -->
<div id="folio1" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio1:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio2" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio2:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio3" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio3:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio4" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio4:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio5" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio5:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio6" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio6:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio7" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio7:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio8" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio8:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio9" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio9:content global="false"}</div>
</div>
<!-- End Project -->
</div>
<!-- portfolio end -->
</div>
</section>
<!-- Contact Footer -->
<footer id="section-five" class="contact relative clearfix">
<div class="row pad-b100 relative wft-ph ph-standard-5">
{contact-one:content}
</div>
<div class="copyright">
<div class="row pad-tb25">
<div class="twelve text-center">
© {copyright:text}
</div>
</div>
</div>
</footer>
<!-- Back to top -->
<div class="back-top-wrap text-center">
<i class="back-top relative text-center typcn typcn-arrow-up-outline"></i>
</div>
</div>
<!-- End Layout --->
<div style='display:none'>{{footer}}</div>
<!-- Javascript -->
<script>
var para_one = jQuery('#wft-para-img1').find('img').attr('src');
jQuery("#parallax1").css('background-image', 'url("' + para_one + '")');
var para_two = jQuery('#wft-para-img2').find('img').attr('src');
jQuery("#parallax2").css('background-image', 'url("' + para_two + '")');
</script>
<script src="/files/theme/jquery.home-custom.js"></script>
<script src="/files/theme/jquery.owl.js"></script>
<script src="/files/theme/jquery.home-main.js"></script>
Technically, this is a Duplicate Question Answered Here
But, since it wasn't explained in the original, let me just point out the issue you are having. {content} can only be used once. For other content areas, you need a custom tag, like {content2:content global="false"} Notice the custom name before the :
So, in other words, each custom content area must have a it's own custom name. Then, global="false" means it will not be duplicated on other pages. See the: Answer Here
I wrote a website for a travel based start up. It is a static website, not a responsive website. The code is here.
Code:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="info">Fill your information here</div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
<div id="aboutUs">
About Us
</div>
<div id="aboutList">
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div id="accountInformation">
Account Information
</div>
<div id="accountList">
<ul>
<li>How to login</li>
<li>Create an account</li>
<li>Logout</li>
<li>Join us</li>
</ul>
</div>
<div id="marketInformation">
Market Information
</div>
<div id="marketList">
<ul>
<li>Shop</li>
<li>Shipping</li>
<li>My connection</li>
</ul>
</div>
</div>
</div>
Website in full screen browser appears like this:
Browser is resized like this:
You can see that elements are mixed up. How can I fix this?
This is because you are using position absolute in some elements.
You could try to use bootstrap.css and take off all the positions that you are using.
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?