I try build app by JQM and I use widget Navbar, until now I used by IFrame but it works not good.
My question is, what can I replace instead of IFrame ?
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li>
<a href="#info_tab" class="infoButton ui-btn-active" data-icon="custom"
id="infoMenu"> </a></l`enter code here`i>
<li><a href="#calendar_tab" class="calendarButton"
data-icon="custom" id="calendarMenu"></a></li>
<li><a href="#picture_tab" class="picturesButton" data-icon="custom"
id="pictureMenu"> </a></li>
<li></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- iFrames -->
<div id="iFramesDIV">
<div id="info_tab" class="fullScreen ">
</div>
<div id="calendar_tab" class="fullScreen hide">
<iframe id="calendarFrame" src="tab_pickadate/calendar.html"
scrolling="no" frameborder="0" class="fullScreen"></iframe>
</div>
<div id="picture_tab" class="fullScreen hide">
<iframe id="pictureFrame" src="" scrolling="no" frameborder="0"
class="fullScreen"></iframe>
</div>
<div id="buy_tab" class="fullScreen hide">
<iframe id="buyFrame" src="tab_buy/buy.html" frameborder="0"
class="fullScreen"></iframe>
</div>
</div>
<!-- End iFrames -->
</div>
<!-- End Content-->
Please help me :)
To use iframes you will need to include JQM library in the source of Iframe. Try including JQM in "tab_pickadate/calendar.html" path. I also worked with Iframes and JQM together.
Related
I am working on a mobile web app and have different seperated pages and some with multipages inside.
The footer contains links to the external pages. When im trying to put an anchor link, it wont work. Any solution?
Here are the codes for my footer and my anchor
<div data-role="footer" data-position="fixed" data-id="myfooter">
<div data-role="navbar" id="mainnavbar">
<ul>
<li><a rel="external" href="home.html" class="ui-btn-active ui-icon-fa"><img src="../img/icons/home#2x.png"></a></li>
<li><a rel="external" href="search.html" ><img src="../img/icons/lista#2x.png"></a></li>
<li></li>
<li><a rel="external" href="location.html"><img src="../img/icons/location#2x.png"></a></li>
<li><a rel="external" href="settings.html" ><img src="../img/icons/profile#2x.png"></a></li>
</div>
</div>
Anchor code:
<div role="main" class="ui-content">
<div id="logo">
<img src="../img/LogoSF.png" style="text-align:center" height="auto" width="60%">
</div>
<div id="contenido">
<h1> Bienvenido a Chooser </h1>
<p> Estas a 10 preguntas de encontrar tu plan ideal. </p>
<div id="continuar">
A
</div>
</div>
any solutions?
If you want to disable the ajax link behaviour from an anchor tag, you can put rel=external in the link and the link will load without ajax and your url will then be usual.
http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
like :
<a href="User/somepage" rel="external" />I wont be using ajax for navigation</a>
and here is solution using jquery
$(function(){
$(".content a").each(function(){
$(this).attr("rel","external");
});
});
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I make a test.html file like below:
<body>
<div data-role="page">
<!--Head of the main web-->
<div data-role="header" data-position="fixed">
<h2><img src="pic/jquery-logo.png" alt="1"></h2>
</div>
<div role="main" class="ui-content">
<div data-role="tabs" id="tabs">
<!--3 row navbar--!>
<div data-role="navbar">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
<!--first nav bar of the 3-->
<div id="one" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true">
<li><img src="pic/business_standard_room.png"></li>
</ul>
</div>
<div id="two">
<ul data-role="listview" data-inset="true" class="ui-alt-icon">
</ul>
</div>
<div id="three">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
</ul>
</div>
</div>
<!--footer of the page-->
<div data-role="footer" data-position="fixed">
<h5>Powered by Atek</h5>
</div>
</div>
I put the order.html and the test.html in the same folder.but when I click the link in the first tab.it returns me error.here is the error the chrome developer console showed
XMLHttpRequest cannot load file:///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html. Received an invalid response. Origin 'null' is therefore not allowed access.
jQuery Mobile uses AJAX for the navigation inside the website, so when you press the link an AJAX call is done in order to get the new page.
I suppose that you are not using a server to test your website (just the file:/// protocol), and I think that is the problem. It has been reported a bug that local files are not loaded correctly using AJAX on Chrome, so you should use other browser or deploy a server to test it on Chrome.
Or in case you don't want to use the AJAX navigation, you could add the atribute data-ajax to the link in order to disable it:
<a href="order.html" data-ajax="false">
Hope this helps!
I have one iframe on my index page that I want to have links to different pages. But I also want the link when clicked to navigate down to the actual frame, as right now it is just staying at the top of the page. I am quite confused about this.
Here is my code:
HTML
<header>
<div id="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>Gallery</li>
</ul>
</nav>
<div id="mainInfo">
<iframe src="about:blank" name="iframe"></iframe>
</div>
I think you're thinking of anchored links:
<li>Gallery</li>
And iframegallery.html:
<div id="mainInfo">
<iframe src="about:blank" name="iframe" id="iframe"></iframe>
</div>
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)