iframe from a navbar link with div Options

[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.

This post has been edited by rawka: Feb 19 2013, 03:13 PM

[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]

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

This post has been edited by rawka: Feb 19 2013, 04:55 PM

[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

This post has been edited by rawka: Feb 19 2013, 05:17 PM

[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

[Frederiek]

See http://www.456bereastreet.com/archive/2006...tors_explained/

[Christian J]

so kinda like this you mean? http://www.google.ca/url?sa=t&rct=j&am...cGE&cad=rja

Yes that looks like a jQuery equivalent.

[Christian J]

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]

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.

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...