Jump to content

Need help, I know it's probably javascript but I can't find any clues to how


Havoc10K
 Share

Recommended Posts

So, i'm trying to make a website but I am fairly new to this and I can't find what I'm looking for, I probably seen reference but i don't know well enough to know if I was looking at the right thing. I'll explain what I intend to do: Mainly I want to work on divs, I used to work with tables but they annoyed the ###### out of me so I learned divs and am in awe. Anyways, this is the basic layout of the site: <body><div class="container"> <div class="side_menu">button 1 button 2 button 3 etc</div> <div class="content">on click on button 1-3(+) display content</div> <div class="footer"></div> </div> </body> What I want to do is allow the user to view the links sites in the content without reloading the entire thing (site) So basically I want the user to be able to simply click on the menu button and the "content" displays what's in the link (a gallery or some other stuff) I know it's related to java script but I can't find anything to help me.

Edited by Havoc10K
  • Like 1
Link to comment
Share on other sites

Not exactly what I want, I am aware of this one. What I want is left side menu directing clicks into the right content window Tabs will make it look exactly what I don't want it to be like, I don't want a header menu but a side menu http://img808.images...3/examplets.jpg Edited by Havoc10K
Link to comment
Share on other sites

What if you simply used .innerHTML to load an entire div worth of stuff? That would be very straightforward but I don't know how long a javascript string can be or how slow the loading process would be. Or what about the css style display:none ? I've never messed with it.

Edited by davej
Link to comment
Share on other sites

All you do is change the css styling to the tab/menu links so they appears at the SIDE as a vertical menu instead as horizontal menu, you are basically removing float, or display:inline; so the menu stack above each other, and then moving content to the left. After this it will work exactly as it originally did. IF you use javascript to insert content, and javascript is disabled, you will see nothing, but with the other option you will see all content displayed in one go

Edited by dsonesuk
Link to comment
Share on other sites

Is it true that there is no way to do this without javascript? Css can do something like this with hover, for something like a drop-down menu, but only for the period of time of a hover, right?

Link to comment
Share on other sites

Yes, but the tagging is still not giving me what I wanted. Tables would help me with this idea but I so much want to avoid using them at all. Is there any other way to do it ? No matter what the difficulty, if it's what I need to get what I want, I'm willing to work on it for a longer time.

Link to comment
Share on other sites

a general rule would be if you want to manupulate different element than the element which trigger the event js is only way. else if it is on element itself many of things you can do with css(3).

but only for the period of time of a hover, right?
till you hover over the element
Link to comment
Share on other sites

CSS is easy to work around with, but JavaScript is completely new to me so I want to learn, but I have to get some pointers, and tabs will not give me what I need, I tried many ways with it, it's just not what I want. On Hover I could use a preview of what's in the content but that's still not exactly what I want.

Link to comment
Share on other sites

Works with jquery to show only selected content by menu, with js disabled show all three, the clicking of menu will take you that specific content to view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>dsonesuk tabber</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){$(".content div").not($(".content div").eq(0)).hide();$(".side_menu a").bind("click", function(e){e.preventDefault();$(".content div").hide();$($(this).attr("href")).show();})});/*--*//*]]>*/</script><style type="text/css">.container {width:960px; margin: 0 auto; background-color:#9999FF; border: 1px solid #9999FF;}.side_menu { width: 200px; float: left; margin-top: 10px;}.side_menu ul, .side_menu li {padding:0; margin:0; text-indent:0; list-style-type: none;}.side_menu a {display: block; background-color: navy; color: white; height: 30px; line-height: 30px; padding: 0 10px; border:1px solid #fff; text-decoration:none;}.side_menu a:hover { background-color:#3366FF; text-decoration:underline;}.content { margin-left:200px; background-color:#FFF; overflow: hidden; margin: 10px 10px 10px 210px;}.content div, .content h1{ margin:10px;}.footer { background-color:#330099; color: #FFF; text-align:center; height: 100px;}.footer p {line-height: 100px;}</style></head><body><div class="container"><div class="side_menu"><ul><li><a href="#text1">Button1</a></li><li><a href="#text2">Button2</a></li><li><a href="#text3">Button3</a></li></ul></div><div class="content"><h1>My Content</h1><div id="text1"><h2>Button1 Content</h2>  <p>Velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate    cupidatat non proident, excepteur sint occaecat. Mollit anim id est laborum.</p>  <p>Quis nostrud exercitation sunt in culpa in reprehenderit in voluptate. Ut    aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt duis aute    irure dolor cupidatat non proident. Lorem ipsum dolor sit amet, qui officia    deserunt eu fugiat nulla pariatur. In reprehenderit in voluptate.</p>  <p>Lorem ipsum dolor sit amet, ullamco laboris nisi quis nostrud exercitation.    Duis aute irure dolor cupidatat non proident, sed do eiusmod tempor incididunt.    In reprehenderit in voluptate eu fugiat nulla pariatur.</p>  <p>Ut aliquip ex ea commodo consequat. Duis aute irure dolor excepteur sint    occaecat mollit anim id est laborum. In reprehenderit in voluptate quis nostrud    exercitation sunt in culpa. Qui officia deserunt ut enim ad minim veniam.    Quis nostrud exercitation in reprehenderit in voluptate velit esse cillum    dolore.</p>  <p>Duis aute irure dolor cupidatat non proident, sunt in culpa. Eu fugiat nulla    pariatur. Ut aliquip ex ea commodo consequat.</p></div><div id="text2"><h2>Button2 Content</h2>  <p>Id quod maxime placeat facere possimus, accusantium doloremque laudantium,    et expedita distinctio. Dicta sunt explicabo. Quis nostrum exercitationem    quia voluptas sit aspernatur ###### soluta nobis est eligendi optio. Ullam corporis    suscipit laboriosam, ut enim ad minima veniam, dicta sunt explicabo. Itaque    earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus    maiores alias sed ut perspiciatis unde omnis.</p>  <p>Qui in ea voluptate qui ratione voluptatem sequi nesciunt. Consequatur aut    perferendis doloribus asperiores repellat. Sed quia non numquam eius modi    dicta sunt explicabo. Et expedita distinctio. Eaque ipsa quae ab illo inventore    veritatis id quod maxime placeat facere possimus, consectetur, adipisci velit.</p>  <p>Quia voluptas sit aspernatur accusantium doloremque laudantium, sed quia    consequuntur magni dolores eos. Vel illum qui dolorem eum fugiat dicta sunt    explicabo. Iste natus error sit voluptatem id quod maxime placeat facere    possimus, cumque nihil impedit quo minus. Quis nostrum exercitationem sed    ut perspiciatis unde omnis aut odit aut fugit.</p>  <p>Iste natus error sit voluptatem saepe eveniet ut et voluptates repudiandae    sint dicta sunt explicabo. Neque porro quisquam est, similique sunt in culpa    qui officia deserunt mollitia animi, sed ut perspiciatis unde omnis. Velit    esse quam nihil molestiae consequatur, praesentium voluptatum deleniti vel    illum qui dolorem eum fugiat. Quis nostrum exercitationem ###### soluta nobis    est eligendi optio tempora incidunt ut labore et dolore. Velit esse quam    nihil molestiae consequatur, et quasi architecto beatae vitae nisi ut aliquid    ex ea commodi consequatur? Et harum quidem rerum facilis est.</p>  <p>Sed ut perspiciatis unde omnis ut enim ad minima veniam, omnis voluptas    assumenda est. Id quod maxime placeat facere possimus, qui ratione voluptatem    sequi nesciunt. Quia voluptas sit aspernatur neque porro quisquam est, similique    sunt in culpa qui officia deserunt mollitia animi.</p></div><div id="text3"><h2>Button3 Content</h2>  <p>Building a dynamic relationship between the main players. Organizations    capable of double-loop learning, motivating participants and capturing their    expectations, exploitation of core competencies as an essential enabler.    That will indubitably lay the firm foundations for any leading company an    important ingredient of business process reengineering empowerment of all    personnel, not just key operatives. Combined with optimal use of human resources,    to focus on improvement, not cost, by moving executive focus from lag financial    indicators to more actionable lead indicators.</p>  <p>Building a dynamic relationship between the main players. As knowledge is    fragmented into specialities an investment program where cash flows exactly    match shareholders' preferred time patterns of consumption building flexibility    through spreading knowledge and self-organization. Benchmarking against industry    leaders, an essential process, should be a top priority at all times organizations    capable of double-loop learning, highly motivated participants contributing    to a valued-added outcome.</p>  <p>Exploitation of core competencies as an essential enabler, whether the organization's    core competences are fully in line, given market realities working through    a top-down, bottom-up approach. Taking full cognizance of organizational    learning parameters and principles, motivating participants and capturing    their expectations, maximization of shareholder wealth through separation    of ownership from management. The three cs - customers, competition and change    - have created a new world for business exploitation of core competencies    as an essential enabler, defensive reasoning, the doom loop and doom zoom.    Benchmarking against industry leaders, an essential process, should be a    top priority at all times empowerment of all personnel, not just key operatives,    in a collaborative, forward-thinking venture brought together through the    merging of like minds.</p>  <p>By moving executive focus from lag financial indicators to more actionable    lead indicators, in order to build a shared view of what can be improved,    whether the organization's core competences are fully in line, given market    realities. Quantitative analysis of all the key ratios has a vital role to    play in this the strategic vision - if indeed there be one - is required    to identify maximization of shareholder wealth through separation of ownership    from management. That will indubitably lay the firm foundations for any leading    company the components and priorities for the change program by adopting    project appraisal through incremental cash flow analysis. To ensure that    non-operating cash outflows are assessed. Motivating participants and capturing    their expectations.</p>  <p>To ensure that non-operating cash outflows are assessed. As knowledge is    fragmented into specialities quantitative analysis of all the key ratios    has a vital role to play in this benchmarking against industry leaders, an    essential process, should be a top priority at all times. Motivating participants    and capturing their expectations, whenever single-loop learning strategies    go wrong, maximization of shareholder wealth through separation of ownership    from management. To ensure that non-operating cash outflows are assessed.</p></div></div><div class="footer"><p>Umm I would be the footer</p></div></div></body></html>

Link to comment
Share on other sites

Being the stupid I am, this is exactly what I needed :)An example :) Now I can analyze this and learn properly :) Sorry for being an ###### probably, but I am the type of person that needs to be shown what he has to do, and do it himself to learn :)I dunno if that's good or bad, but that certainly works for me :) So, again, sorry for being an ######, but I am grateful :)I think I will show you guys what I am trying to achieve after I am done :) For now, enjoy this little lady swirling happily as my thanks, did it myself :)http://dl.dropbox.com/u/38202095/Mini_Ika_Musume.zip roll over the banner to make her swirl, file is incredibly small (3 megs) and is an executable, provided sfv crc checker. It's my thanks :)

Link to comment
Share on other sites

Both of my ideas seem to work also. I have not yet delved into jQuery so that approach is still a mystery to me.

<html><head><title>modified innerHTML tabber</title><script type="text/javascript">var text1;var text2;var text3;window.onload = function(){hide();document.getElementById("btn1").onclick = load1;document.getElementById("btn2").onclick = load2;document.getElementById("btn3").onclick = load3;}function hide() {try{text1 = document.getElementById("text1").innerHTML;text2 = document.getElementById("text2").innerHTML;text3 = document.getElementById("text3").innerHTML;document.getElementById("text2").innerHTML = "";document.getElementById("text3").innerHTML = "";document.getElementById("btn1").href = "#top";document.getElementById("btn2").href = "#top";document.getElementById("btn3").href = "#top";}catch (err){alert('error:' + err.message);}}function load1(){document.getElementById("text1").innerHTML = text1;}function load2(){document.getElementById("text1").innerHTML = text2;}function load3(){document.getElementById("text1").innerHTML = text3;}</script><style type="text/css"> .container {width:960px; margin: 0 auto; background-color:#9999FF; border: 1px solid #9999FF;}.side_menu { width: 200px; float: left; margin-top: 10px;}.side_menu ul, .side_menu li {padding:0; margin:0; text-indent:0; list-style-type: none;}.side_menu a {display: block; background-color: navy; color: white; height: 30px; line-height: 30px; padding: 0 10px; border:1px solid #fff; text-decoration:none;}.side_menu a:hover { background-color:#3366FF; text-decoration:underline;}.content { margin-left:200px; background-color:#FFF; overflow: hidden; margin: 10px 10px 10px 210px;}.content div, .content h1{ margin:10px;}.footer { background-color:#330099; color: #FFF; text-align:center; height: 100px;}.footer p {line-height: 100px;}</style></head><body><a name="top"></a><div class="container"><div class="side_menu"><ul><li><a href="#text1" id="btn1">Button1</a></li><li><a href="#text2" id="btn2">Button2</a></li><li><a href="#text3" id="btn3">Button3</a></li></ul></div><div class="content"><h1>My Content</h1><div id="text1"><h2>Button1 Content</h2>  <p>Velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate	cupidatat non proident, excepteur sint occaecat. Mollit anim id est laborum.</p>  <p>Quis nostrud exercitation sunt in culpa in reprehenderit in voluptate. Ut	aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt duis aute	irure dolor cupidatat non proident. Lorem ipsum dolor sit amet, qui officia	deserunt eu fugiat nulla pariatur. In reprehenderit in voluptate.</p>  <p>Lorem ipsum dolor sit amet, ullamco laboris nisi quis nostrud exercitation.	Duis aute irure dolor cupidatat non proident, sed do eiusmod tempor incididunt.	In reprehenderit in voluptate eu fugiat nulla pariatur.</p>  <p>Ut aliquip ex ea commodo consequat. Duis aute irure dolor excepteur sint	occaecat mollit anim id est laborum. In reprehenderit in voluptate quis nostrud	exercitation sunt in culpa. Qui officia deserunt ut enim ad minim veniam.	Quis nostrud exercitation in reprehenderit in voluptate velit esse cillum	dolore.</p>  <p>Duis aute irure dolor cupidatat non proident, sunt in culpa. Eu fugiat nulla	pariatur. Ut aliquip ex ea commodo consequat.</p>  <p>Lorem ipsum dolor sit amet, ullamco laboris nisi quis nostrud exercitation.	Duis aute irure dolor cupidatat non proident, sed do eiusmod tempor incididunt.	In reprehenderit in voluptate eu fugiat nulla pariatur.</p></div><div id="text2"><h2>Button2 Content</h2>  <p>Id quod maxime placeat facere possimus, accusantium doloremque laudantium,	et expedita distinctio. Dicta sunt explicabo. Quis nostrum exercitationem	quia voluptas sit aspernatur ###### soluta nobis est eligendi optio. Ullam corporis	suscipit laboriosam, ut enim ad minima veniam, dicta sunt explicabo. Itaque	earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus	maiores alias sed ut perspiciatis unde omnis.</p>  <p>Qui in ea voluptate qui ratione voluptatem sequi nesciunt. Consequatur aut	perferendis doloribus asperiores repellat. Sed quia non numquam eius modi	dicta sunt explicabo. Et expedita distinctio. Eaque ipsa quae ab illo inventore	veritatis id quod maxime placeat facere possimus, consectetur, adipisci velit.</p>  <p>Quia voluptas sit aspernatur accusantium doloremque laudantium, sed quia	consequuntur magni dolores eos. Vel illum qui dolorem eum fugiat dicta sunt	explicabo. Iste natus error sit voluptatem id quod maxime placeat facere	possimus, cumque nihil impedit quo minus. Quis nostrum exercitationem sed	ut perspiciatis unde omnis aut odit aut fugit.</p>  <p>Iste natus error sit voluptatem saepe eveniet ut et voluptates repudiandae	sint dicta sunt explicabo. Neque porro quisquam est.</p>  <p>Sed ut perspiciatis unde omnis ut enim ad minima veniam, omnis voluptas	assumenda est. Id quod maxime placeat facere possimus, qui ratione voluptatem	sequi nesciunt. Quia voluptas sit aspernatur neque porro quisquam est, similique	sunt in culpa qui officia deserunt mollitia animi.</p></div><div id="text3"><h2>Button3 Content</h2>  <p>Building a dynamic relationship between the main players. Organizations	capable of double-loop learning, motivating participants and capturing their	expectations, exploitation of core competencies as an essential enabler.	That will indubitably lay the firm foundations for any leading company an	important ingredient of business process reengineering empowerment of all	personnel, not just key operatives. Combined with optimal use of human resources,	to focus on improvement, not cost, by moving executive focus from lag financial	indicators to more actionable lead indicators.</p>  <p>Building a dynamic relationship between the main players. As knowledge is	fragmented into specialities an investment program where cash flows exactly	match shareholders' preferred time patterns of consumption building flexibility	through spreading knowledge and self-organization. Benchmarking against industry	leaders, an essential process, should be a top priority at all times organizations	capable of double-loop learning, highly motivated participants contributing	to a valued-added outcome.</p>  <p>By moving executive focus from lag financial indicators to more actionable	lead indicators, in order to build a shared view of what can be improved,	their expectations.</p>  <p>To ensure that non-operating cash outflows are assessed. As knowledge is	fragmented into specialities quantitative analysis of all the key ratios	has a vital role to play in this benchmarking against industry leaders, an	essential process, should be a top priority at all times. Motivating participants	and capturing their expectations, whenever single-loop learning strategies	go wrong, maximization of shareholder wealth through separation of ownership	from management. To ensure that non-operating cash outflows are assessed.</p></div></div><div class="footer"><p>Umm I would be the footer</p></div></div></body></html>

and the alternative <head> is this...

<head><title>modified style.display tabber</title><script type="text/javascript"> window.onload = function(){hide();document.getElementById("btn1").onclick = load1;document.getElementById("btn2").onclick = load2;document.getElementById("btn3").onclick = load3;}function hide() {try{document.getElementById("text2").style.display = "none";document.getElementById("text3").style.display = "none";document.getElementById("btn1").href = "#top";document.getElementById("btn2").href = "#top";document.getElementById("btn3").href = "#top";}catch (err){alert('error:' + err.message);}}function load1(){document.getElementById("text1").style.display = "block";document.getElementById("text2").style.display = "none";document.getElementById("text3").style.display = "none";}function load2(){document.getElementById("text1").style.display = "none";document.getElementById("text2").style.display = "block";document.getElementById("text3").style.display = "none";}function load3(){document.getElementById("text1").style.display = "none";document.getElementById("text2").style.display = "none";document.getElementById("text3").style.display = "block";}</script><style type="text/css"> .container {width:960px; margin: 0 auto; background-color:#9999FF; border: 1px solid #9999FF;}.side_menu { width: 200px; float: left; margin-top: 10px;}.side_menu ul, .side_menu li {padding:0; margin:0; text-indent:0; list-style-type: none;}.side_menu a {display: block; background-color: navy; color: white; height: 30px; line-height: 30px; padding: 0 10px; border:1px solid #fff; text-decoration:none;}.side_menu a:hover { background-color:#3366FF; text-decoration:underline;}.content { margin-left:200px; background-color:#FFF; overflow: hidden; margin: 10px 10px 10px 210px;}.content div, .content h1{ margin:10px;}.footer { background-color:#330099; color: #FFF; text-align:center; height: 100px;}.footer p {line-height: 100px;}</style></head>

Edited by davej
Link to comment
Share on other sites

less need to create variables, function for every link and content container

<html><head><title>modified innerHTML tabber</title><script type="text/javascript">window.onload = function(){parent_menu_con = document.getElementById("side_menu");child_links = parent_menu_con.getElementsByTagName("a");parent_content_con = document.getElementById("content");child_div = parent_content_con.getElementsByTagName("div");for(i=0;i<child_links.length;i++){if(i>0){child_div[i].style.display="none";}child_links[i].id=child_div[i].id+"_menu";child_links[i].href="javascript:void(0);"child_links[i].onclick=function(){show(this.id)}}}function show(elem_id){parent_content_con = document.getElementById("content");child_div = parent_content_con.getElementsByTagName("div");for(i=0;i<child_div.length;i++){child_div[i].style.display="none";}document.getElementById(elem_id.replace("_menu","")).style.display="block";}</script><style type="text/css"> .container {width:960px; margin: 0 auto; background-color:#9999FF; border: 1px solid #9999FF;}#side_menu { width: 200px; float: left; margin-top: 10px;}#side_menu ul, #side_menu li {padding:0; margin:0; text-indent:0; list-style-type: none;}#side_menu a {display: block; background-color: navy; color: white; height: 30px; line-height: 30px; padding: 0 10px; border:1px solid #fff; text-decoration:none;}#side_menu a:hover { background-color:#3366FF; text-decoration:underline;}#content { margin-left:200px; background-color:#FFF; overflow: hidden; margin: 10px 10px 10px 210px;}#content div, #content h1{ margin:10px;}.footer { background-color:#330099; color: #FFF; text-align:center; height: 100px;}.footer p {line-height: 100px;}</style></head><body><a name="top"></a><div class="container"><div id="side_menu"><ul><li><a href="#text1">Button1</a></li><li><a href="#text2">Button2</a></li><li><a href="#text3">Button3</a></li></ul></div><div id="content"><h1>My Content</h1><div id="text1"><h2>Button1 Content</h2>  <p>Velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate	    cupidatat non proident, excepteur sint occaecat. Mollit anim id est laborum.</p>  <p>Quis nostrud exercitation sunt in culpa in reprehenderit in voluptate. Ut	    aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt duis aute	    irure dolor cupidatat non proident. Lorem ipsum dolor sit amet, qui officia	    deserunt eu fugiat nulla pariatur. In reprehenderit in voluptate.</p>  <p>Lorem ipsum dolor sit amet, ullamco laboris nisi quis nostrud exercitation.	    Duis aute irure dolor cupidatat non proident, sed do eiusmod tempor incididunt.	    In reprehenderit in voluptate eu fugiat nulla pariatur.</p>  <p>Ut aliquip ex ea commodo consequat. Duis aute irure dolor excepteur sint	    occaecat mollit anim id est laborum. In reprehenderit in voluptate quis nostrud	    exercitation sunt in culpa. Qui officia deserunt ut enim ad minim veniam.	    Quis nostrud exercitation in reprehenderit in voluptate velit esse cillum	    dolore.</p>  <p>Duis aute irure dolor cupidatat non proident, sunt in culpa. Eu fugiat nulla	    pariatur. Ut aliquip ex ea commodo consequat.</p>  <p>Lorem ipsum dolor sit amet, ullamco laboris nisi quis nostrud exercitation.	    Duis aute irure dolor cupidatat non proident, sed do eiusmod tempor incididunt.	    In reprehenderit in voluptate eu fugiat nulla pariatur.</p></div><div id="text2"><h2>Button2 Content</h2>  <p>Id quod maxime placeat facere possimus, accusantium doloremque laudantium,	    et expedita distinctio. Dicta sunt explicabo. Quis nostrum exercitationem	    quia voluptas sit aspernatur ###### soluta nobis est eligendi optio. Ullam corporis	    suscipit laboriosam, ut enim ad minima veniam, dicta sunt explicabo. Itaque	    earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus	    maiores alias sed ut perspiciatis unde omnis.</p>  <p>Qui in ea voluptate qui ratione voluptatem sequi nesciunt. Consequatur aut	    perferendis doloribus asperiores repellat. Sed quia non numquam eius modi	    dicta sunt explicabo. Et expedita distinctio. Eaque ipsa quae ab illo inventore	    veritatis id quod maxime placeat facere possimus, consectetur, adipisci velit.</p>  <p>Quia voluptas sit aspernatur accusantium doloremque laudantium, sed quia	    consequuntur magni dolores eos. Vel illum qui dolorem eum fugiat dicta sunt	    explicabo. Iste natus error sit voluptatem id quod maxime placeat facere	    possimus, cumque nihil impedit quo minus. Quis nostrum exercitationem sed	    ut perspiciatis unde omnis aut odit aut fugit.</p>  <p>Iste natus error sit voluptatem saepe eveniet ut et voluptates repudiandae	    sint dicta sunt explicabo. Neque porro quisquam est.</p>  <p>Sed ut perspiciatis unde omnis ut enim ad minima veniam, omnis voluptas	    assumenda est. Id quod maxime placeat facere possimus, qui ratione voluptatem	    sequi nesciunt. Quia voluptas sit aspernatur neque porro quisquam est, similique	    sunt in culpa qui officia deserunt mollitia animi.</p></div><div id="text3"><h2>Button3 Content</h2>  <p>Building a dynamic relationship between the main players. Organizations	    capable of double-loop learning, motivating participants and capturing their	    expectations, exploitation of core competencies as an essential enabler.	    That will indubitably lay the firm foundations for any leading company an	    important ingredient of business process reengineering empowerment of all	    personnel, not just key operatives. Combined with optimal use of human resources,	    to focus on improvement, not cost, by moving executive focus from lag financial	    indicators to more actionable lead indicators.</p>  <p>Building a dynamic relationship between the main players. As knowledge is	    fragmented into specialities an investment program where cash flows exactly	    match shareholders' preferred time patterns of consumption building flexibility	    through spreading knowledge and self-organization. Benchmarking against industry	    leaders, an essential process, should be a top priority at all times organizations	    capable of double-loop learning, highly motivated participants contributing	    to a valued-added outcome.</p>  <p>By moving executive focus from lag financial indicators to more actionable	    lead indicators, in order to build a shared view of what can be improved,	    their expectations.</p>  <p>To ensure that non-operating cash outflows are assessed. As knowledge is	    fragmented into specialities quantitative analysis of all the key ratios	    has a vital role to play in this benchmarking against industry leaders, an	    essential process, should be a top priority at all times. Motivating participants	    and capturing their expectations, whenever single-loop learning strategies	    go wrong, maximization of shareholder wealth through separation of ownership	    from management. To ensure that non-operating cash outflows are assessed.</p></div></div><div class="footer"><p>Umm I would be the footer</p></div></div></body></html>

Link to comment
Share on other sites

I'm using the other thing, but here is a problem:The site works fine on Chrome and waterfox, apparently it works well with flaps or something like that, maybe flocks, some browser, and it apparently works with IE9 (I don't check on mine IE cuz I never even launched it once so it's totally outdated :P)Everything else shows an empty iframe, in firefox you can make it work by refreshing the frame alone but I would like to make it work properly, on a side note also I noticed after I finished with the website project (it's still just a project) the <div class="container"> is marked as invalid, dreamweaver cs5.5 tells me that if the site is working with this, I can remove this tag altogether. Also <div class="content" > is underlined and I have no idea what that means as it doesn't explain, but I'm sure it has something to do with some errors that can happen, hopefully with IE :) I did my best to make this site not cooperate with IE but my friend told me it works with a fully updated 9.0 :( there goes my purpose in mocking microsoft :) I copied the code from the firs example and studied it a lot and wrote my own version and cross-referenced and I don't find any errors so I'm at a loss.

Link to comment
Share on other sites

There is nothing with css, javascript/jquery that i can see that will prevent this from working in all browsers, all versions of IE, and don't believe everything Dreamweaver tells you or advise you to do, view your pages within the browsers themselves NOT dreamweaver preview, and validate using firebug and http://validator.w3.org/. 'undefined' is usually given when a specific id reference cannot be found, IF the element with this id reference does exist! another reason is that javascript code was triggered to use this reference before the element with this id reference was create/rendered within the page. That is why you would place the could in function to run the code AFTER the page has fully loaded as in javascript

window.onload=function(){  //run code  }

jquery

$(document).ready(function(){//run code});

Link to comment
Share on other sites

A iframe inside any of the menu content section works fine for me in any browser, bit slow appearing in IE , but nothing new in that!, who are you linking to?? try linking to another site, if you have not already done that.
I've sent you a PM, if you could check and confirm how it works on your end, it works great on any chrome but other browsers have problems.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...