Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ iframe from a navbar link with div
Posted by: rawka Feb 19 2013, 03: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. not sure if this is possible or not. i looked around for a while but cant find much.
Posted by: Christian J Feb 19 2013, 10:16 AM
The question is a bit too broad to answer, but in principle it should be possible.
Posted by: rawka Feb 19 2013, 03:11 PM
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.
<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>
Posted by: rawka Feb 19 2013, 03:12 PM
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.
Posted by: pandy Feb 19 2013, 03:16 PM
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
Posted by: Christian J Feb 19 2013, 03:36 PM
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:
<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?
Posted by: Christian J Feb 19 2013, 03:41 PM
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.
Posted by: rawka Feb 19 2013, 04:46 PM
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
Posted by: rawka Feb 19 2013, 05:10 PM
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-development/vertical-accordion/#comment-337111
Posted by: rawka Feb 19 2013, 08:20 PM
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.
Posted by: Christian J Feb 19 2013, 09:26 PM
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
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:
.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).
Posted by: rawka Feb 19 2013, 10:16 PM
will the content always show though with that css3 style? or is it like invisible with the display: none.
Posted by: Christian J Feb 19 2013, 10:33 PM
Not sure how you mean, but see http://www.w3.org/TR/CSS21/visuren.html#propdef-display
Posted by: rawka Feb 19 2013, 11:37 PM
so kinda like this you mean? http://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDMQFjAA&url=http%3A%2F%2Fcss-tricks.com%2Fdynamic-page-replacing-content%2F&ei=AUokUfzIC-mViAL7kYHoBw&usg=AFQjCNFxCblxfnpnM-iA-4TXlZ8-SaYL8g&sig2=KsOt8iON3jbmC97DN05Spw&bvm=bv.42661473,d.cGE&cad=rja
Posted by: rawka Feb 20 2013, 01:49 AM
so if this is my code and i changed my current:
<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 :
<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 :
<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??:
<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.
<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
Posted by: Frederiek Feb 20 2013, 03:20 AM
See http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
Posted by: Christian J Feb 20 2013, 11:10 AM
so kinda like this you mean? http://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDMQFjAA&url=http%3A%2F%2Fcss-tricks.com%2Fdynamic-page-replacing-content%2F&ei=AUokUfzIC-mViAL7kYHoBw&usg=AFQjCNFxCblxfnpnM-iA-4TXlZ8-SaYL8g&sig2=KsOt8iON3jbmC97DN05Spw&bvm=bv.42661473,d.cGE&cad=rja
Yes that looks like a jQuery equivalent.
Posted by: Christian J Feb 20 2013, 11:18 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
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
Posted by: rawka Feb 20 2013, 01:04 PM
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.?
Posted by: Christian J Feb 20 2013, 05:51 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.
Afraid I didn't understand a word of that...
Posted by: rawka Feb 21 2013, 12:20 AM
what i am saying is doesnt this code only bring info up but not make it disappear.
Posted by: Frederiek Feb 21 2013, 02:30 AM
How about this: http://alistapart.com/article/eatcake ?
Posted by: rawka Feb 21 2013, 03:52 AM
i got it working and without even loading things on to the same page. just added a variable to 2 sections on the page.
// Set the Nav Menu variables for the current page.
currentSubMenu = "paintings";
and added a class="current" to which page i am on.
Posted by: Christian J Feb 21 2013, 11:27 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
or better
as explained on http://webtips.dan.info/subdir.html#LinkHome
Posted by: Christian J Feb 21 2013, 11:30 AM
How about this: http://alistapart.com/article/eatcake ?
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.
Posted by: Frederiek Feb 21 2013, 03:09 PM
Right! Never thought about that. Never noticed either... 
Posted by: rawka Feb 21 2013, 09:58 PM
How about this: http://alistapart.com/article/eatcake ?
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.
Posted by: rawka Feb 21 2013, 09:59 PM
Thanks for the effort on the help though all.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)