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");
});
});
Related
I have the main HTML page and another HTML page are located in the C:\Users\computer\Pictures. When I run the main HTML page and click on the link to another HTML page, it says "file not found. It may have been moved or deleted. ERR_FILE_NOT_FOUND."
I haven't moved and deleted the files since I saved HTML files in the C:\Users\computer\Pictures.
Here is the HTML code
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
Here is another HTML page
<style>
#Content{margin:5px auto;padding:0;width:600px;height:auto;border:1px solid #666;background-color:#f1f1f1}
#col{margin:5px;padding:0;width:590px;height:auto;}
</style>
<body>
<div id="Content" class="">
<div id="col" class="">
<p><font size="5" >
Hello, Welcome to my home page
</font>
</p>
<h1 align="center"> Activities </h1>
<p><font size="5" >
<ul id="ActivitiesList" class="">
<li> Soccer </li>
<li>Football</li>
</ul>
</font></p>
<p>
</div>
</div>
Try this: I use URIs like this all the time.
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If your index.html is in the same folder this should work:
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If you get "File not found." As I see you got from the other post, go to the file, shift right click and select "Copy Path" Paste that into a notepad to verify the path is correct.
You have a formatting error in C:\\Users\\computer\\Pictures\\home.html. You should use C:/Users/computer/Pictures/home.html. HTML counts C:\\... as 2 slashes, not one. Also, HTML uses forward slashes (/) instead of backslashes (\).
I'm creating a hybrid app for iOS and Android and I'm using framework7 to create it. The thing is I have a media list view that onclick should redirect to a page.html, and it doesn't. I've triple-checked every-name to see if it was a capital letter thing but every name was written correctly. This is the media list view code:
<li>
<a href="Page.html" class="item-link item-content">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Does someone know what might be the problem?
Framework7 uses ajax pages by default, so your target page should be formatted for this, or you can add the class name external to the href tag to open directly.
<li>
<a href="Page.html" class="item-link item-content external">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Check the documentation note: http://framework7.io/docs/pages-ajax.html
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 am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.