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>
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
I am unable to link to html5 section within same page.
Here's the code:
<div id="nav">
<ul>
<li>Contact</li>
<li>Services </li>
<li>About</li>
<li>Home</li>
</ul>
</div>`
<div id="contact">
<h2 id="contact">How to find Us?</h2>
Why is not going to the section "Contact" on the same page but it's trying to open new page: "http://example.com/contact ?
Contact
<div id="contact">my contact</div>
you forgot the #
<ul>
<li>Contact</li>
</ul>
<a name="yourAnchor"></a>
<div id="contact">
<h2>How to find Us?</h2>
</div>
Try this.
Thanks for help. Yes, I forgot to put # (due too many changes/toubleshooting).
I've put the # and I've used unique id for href - that worked like a charm!
Thanks again #TypedSource and #user3713452 for your help!
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 want my Header text (Events, Blog, About) to LAY ON TOP OF the "Images/Damask.png" image. Instead the image is displayed at the very top of the header with the text BELOW the image.
<header>
<header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header">
<a href="index.html" id= "logo">![enter image description here][1]
<h1>J Barnes Events</h1>
<h2>Indianapolis's Finest<h2>
</a>
<nav>
<ul>
<li>Events</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
</header>
Instead of separately adding an image, you can simply add the following CSS to your stylesheet and that would achieve what you're trying to do:
header {
background-image: url('Images/Damask.png');
}
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.