Help - Search - Members - Calendar
Full Version: iframe from a navbar link with div
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
rawka
i have a navbar that is jquery run with animating bars i would like if possible to maintain the navbar selection at its location when clicked with just using an iframe loading in a div. not sure if this is possible or not. i looked around for a while but cant find much.
Christian J
The question is a bit too broad to answer, but in principle it should be possible.
rawka
well ill post a demo and you can see what i mean its a pretty basic understanding of the layout left nav bar with jquery vertical nav bar but when clicking a link it gives sublinks also when clicking a sublink it would in turn change the page but the nav bar woudl reset. hence why i want to load the right column section with a iframe i am just in a simple sense wanting to do this. but instead of the links i have there now i want them to use an iframe for the right column where it says opening soon.
CODE
<div id="leftColumn">
    <h1><img src="ht.png" width="150" alt="Horimono Tattoo"/></h1>
<div id="w">
    <nav>
      <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Tattoos</a>
          <ul>
            <li><a href="inprogress.html">In Progress</a></li>
            <li><a href="sleeves.html">Sleeves</a></li>
            <li><a href="backpieces.html">Back Pieces</a></li>
               <li><a href="coverups.html">Cover Ups</a></li>
             <li><a href="misc.html">Miscellaneous</a></li>
           </ul>
        </li>
        <li><a href="#">Paintings</a>
          <ul>
            <li><a href="cgpaintings.html">CG Paintings</a></li>
            <li><a href="canvas.html">Canvas</a></li>
            <li><a href="customs.html">Custom Sneakers</a></li>
           </ul>
        </li>
        <li><a href="sketches.html">Sketches</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</div>
<div id="rightColumn">
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div class="clear">shop opening soon.    
    </div>
</div>
rawka
so essentially i want the page to stay on index.html and just load iframes on the one column so that the nav bar doesnt change around.
pandy
Well, add the iframe to start with and then change the menu links so they update the iframe.

http://htmlhelp.com/faq/html/frames.html#frame-target
Christian J
Also be aware of all the problem involved in using frames and iframes: http://htmlhelp.com/faq/html/frames.html#frame-problems

Personally I disable iframes by default, since they're mostly used for loading advertizing. To prevent your page from becoming non-functional for people like me, please add some alternative content between the iframe tags:

CODE
<iframe src="...">
<p><strong>Note:</strong> links in the navigation menu open in an inline frame.</p>
</iframe>


Side note: wouldn't it be practical if browsers open links in new windows when their iframe target is disabled?
Christian J
QUOTE(rawka @ Feb 19 2013, 09:00 AM) *

i have a navbar that is jquery run with animating bars i would like if possible to maintain the navbar selection at its location when clicked with just using an iframe loading in a div.

You don't have to use iframes for this. There are nav menu scripts that show the link to the current URL when each page is loaded, even if the link is in a sub menu (at least I've done menus like that myself). That should be a much more usable solution than using an iframem, but of course it requires finding such a menu.
rawka
well here is a look at the site i have it up right now just havent added the iframes yet. im just looking for a way to post the content on the right side without loading the nav menu selection.

http://www.horimonotattoo.com

personally i was never a big fan of iframes when i used to do sites before but with html 5 and jquery and all these other cool little things i wouldnt be surprised if there is an easier or better way of getting around this situation im just unaware of which to use. because im still getting re-antiquated with html5 and css3. Id love to hear any ideas people would have to solve this dilemma im having right here. thanks for the input
rawka
and ideally i would like to have it load something like the frame page i made earlier where im using lightbox but iw ant it to cover the whole page and not just the frame page. not sure if it will function like that and only work in the frame but the jquery codes are on both pages so i would assume it works on the main page over the framed paged also.


http://www.horimonotattoo.com/inprogress.html

and original nav bar i used was this but i changed alot of the css to make it the way i wanted it.

http://vandelaydesign.com/blog/web-develop...#comment-337111
rawka
so i did a lot of reading and turns out what i really want to do is use ajax to call up my information without reloading the page. i have some ajax functions implamented on the page already that were from the original color box jquery i added but it was a popup window fuction that it used. kinda like lightbox. i know little to nothing about ajax i just know that it does pull up info via database html xml ext without having to reload the page. if anyone knows much about ajax id really appreciate the help.
Christian J
Ajax includes might work, but just like frames they don't let the user bookmark the included content. One way around that is to use hash URLs like

CODE
<a href="#foo">foo</a>

and show the corresponding content when the URL is loaded, using javascript location.hash or the CSS3 :target selector (not supported by older browsers). You don't have to load content from another file with Ajax though, you might as well hide all the content on the same static page from the start (in your case I think Ajax is only useful if you need to get content from a database).

If you use javascript, make sure the page still works in search engines and browsers that disable javascript.

If you use CSS3 :target, make sure that only browsers that support it hide content to begin with. The following appears to work, but I've only tested briefly:

CODE
<style type="text/css" media="screen">
.dynamic_content:not(foo) {display: none;}
.dynamic_content:target {display: block;}
</style>

<a href="#foo">foo</a>
<a href="#bar">bar</a>

<div id="foo" class="dynamic_content">foo content</div>
<div id="bar" class="dynamic_content">bar content</div>

(I'm naively assuming that the CSS3 :not selector is only supported by browsers that also support :target. In older browsers both DIVs will be visible).
rawka
will the content always show though with that css3 style? or is it like invisible with the display: none.
Christian J
Not sure how you mean, but see http://www.w3.org/TR/CSS21/visuren.html#propdef-display
rawka
so kinda like this you mean? http://www.google.ca/url?sa=t&rct=j&am...cGE&cad=rja
rawka
so if this is my code and i changed my current:
CODE
<li><a href="index.html">Home</a></li>
        <li><a href="#">Tattoos</a>
          <ul>
            <li><a href="inprogress.html">In Progress</a></li>
            <li><a href="sleeves.html">Sleeves</a></li>
            <li><a href="backpieces.html">Back Pieces</a></li>
               <li><a href="coverups.html">Cover Ups</a></li>
             <li><a href="misc.html">Miscellaneous</a></li>
           </ul>
        </li>


to this :
CODE
<li><a href="#index">Home</a></li>
        <li><a href="#">Tattoos</a>
          <ul>
            <li><a href="#inprogress">In Progress</a></li>
            <li><a href="#sleeves">Sleeves</a></li>
            <li><a href="#backpieces">Back Pieces</a></li>
        <li><a href="#coverups">Cover Ups</a></li>
        <li><a href="#misc">Miscellaneous</a></li>
          </ul>
        </li>

and the div tag at the bottom from this :
CODE


<div id="rightColumn">
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div class="clear">shop opening soon.    
    </div>
</div>


To this??:
CODE


<div id="rightColumn">
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div class="columnA"></div>
    <div id="sleeves" class="dynamic_content">shop opening soon.</div>
        <div id="coverups" class="dynamic_content">info goes here</div>
</div>


not sure if i got this right or not. and at the top just have the.
CODE

<style type="text/css" media="screen">
.dynamic_content:not(foo) {display: none;}
.dynamic_content:target {display: block;}
</style>


but im not sure what the :not(foo) does
Christian J
QUOTE(rawka @ Feb 20 2013, 05:37 AM) *

Yes that looks like a jQuery equivalent.
Christian J
QUOTE(rawka @ Feb 20 2013, 07:49 AM) *

im not sure what the :not(foo) does

It's a hack to hide the CSS rule from old browsers (including IE8). If you just use

CODE
.dynamic_content {display: none;}

the content is initially hidden in all browsers, but then the old ones can't show it when you click links, because they don't support the CSS3 :target selector. Since only new browsers support :not I assume that they will support :target too.

See also http://www.w3.org/TR/selectors/#target-pseudo and http://www.w3.org/TR/selectors/#negation


rawka
ok i read up on what you showed me there christian i get what your code does now i get how the not foo works and how targeting works also but lets just say for example. i have :not (index) as my code set for the index and then i click inprogress it will bring up the inprogress stuff. however would it not still have the index info on that page. wouldnt i need to have some kinda way when i say click this bring this up which i do but take away this which i dont.?
Christian J
QUOTE(rawka @ Feb 20 2013, 07:04 PM) *

i have :not (index) as my code set for the index

No, you don't need any particular values there. I choose the nonsense word "foo" because I know it isn't used for anything else, so you can keep that.

QUOTE
and then i click inprogress it will bring up the inprogress stuff. however would it not still have the index info on that page. wouldnt i need to have some kinda way when i say click this bring this up which i do but take away this which i dont.?

Afraid I didn't understand a word of that... blink.gif

rawka
what i am saying is doesnt this code only bring info up but not make it disappear.
Frederiek
How about this: http://alistapart.com/article/eatcake ?
rawka
i got it working and without even loading things on to the same page. just added a variable to 2 sections on the page.
CODE
$(document).ready(function(){
                // Set the Nav Menu variables for the current page.
                currentSubMenu = "paintings";


and added a class="current" to which page i am on.
Christian J
QUOTE(rawka @ Feb 21 2013, 06:20 AM) *

what i am saying is doesnt this code only bring info up but not make it disappear.

With my CSS idea, clicking another link should hide the rest. To hide all DIVs you just make a link that loads the original page URL without any hash, like

CODE
<a href="index.html">Home</a>

or better
CODE
<a href="./">Home</a>

as explained on http://webtips.dan.info/subdir.html#LinkHome
Christian J
QUOTE(Frederiek @ Feb 21 2013, 08:30 AM) *

I was going to suggest it, but since it doesn't change the URL (in fact it removes the URL hashes) the user can't back browse or bookmark page view states.
Frederiek
Right! Never thought about that. Never noticed either... blush.gif
rawka
QUOTE(Christian J @ Feb 21 2013, 09:30 AM) *

QUOTE(Frederiek @ Feb 21 2013, 08:30 AM) *

I was going to suggest it, but since it doesn't change the URL (in fact it removes the URL hashes) the user can't back browse or bookmark page view states.



yeah hence why i didnt use it either. but the one i got working now works great. its uploaded just gotta fill in all the contect now.
rawka
Thanks for the effort on the help though all.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.