Synook Posted September 5, 2007 Share Posted September 5, 2007 how do I make the div load from the tabs I've got?You can modify the function to have an extra argument, like function load_div(ele, page), then each tab will have an onclick function that calls the load_ele() function with a different page value (e.g. load_div('box_4', 'index.html') , load_div('box_4', 'about.html') , etc.). Then in your xmlHttp.open() line you replace "include.html" with the page variable.I see an input type designation there - how do I know what input type my tabs areYou tabs can be anything, even simple hyperlinks, I only used a button input there for example purposes. Anything that can handle onclick events you can use.Also, where do I put the file names of the new content I want to load into the div?As I mentioned earlier, with the additional page argument in load_div(), you can specify each of your page names from the tab onclick function.Is that represented by "include.html"?Yes, if you use the additional page argument you can replace that with page. Link to comment Share on other sites More sharing options...
HankXavier Posted September 7, 2007 Author Share Posted September 7, 2007 Ok- So I think I have got the idea about this. I recognize exactly what the script is doing now and how it's being done and can replicate it on my own. My last problem it seems is trying to get the script to work inside my page. There are some confusing elements and I am going to have to construct the schedule box this same way so I was wondering if you could do me one last favor and put that script in context with my code sheet. Like just drop it in how it should go. That way I can see how it looks in context with my own coding so when I go to build the schedule box script myself, I can reference how it was done.Here is my code sheet. If you wouldn't mind dropping the above script in where it should go. Because I don;t have any div id's - I have all classes it looks like, and when I tried to change a box to read ID instead of class, the box disappeared. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>Ruckus</title><style type="text/css">p {font-size : 13px;font-family : times new roman;color : #c0c0c0;text-align : left;margin : ;}h3 {font-family : times new roman;color : #ffffff;text-align : center;}h2 {font-family : times new roman;color : #ffffff;text-align : center;}h1 {font-family : times new roman;color : #ffffff;text-align : center;}body {font-size : 13px;font-family : times new roman;color : #c0c0c0;background : #000000 url() fixed repeat;}blockquote {font-size : 10px;font-family : arial;color : #c0c0c0;text-align : left;}a:hover {font-weight : normal;font-size : 13px;font-family : times new roman;color : #c0c0c0;background : normal;text-decoration : bold;}a:visited, a:link, a:active {font-weight : normal;font-size : 13px;font-family : times new roman;color : #ffffff;text-decoration : normal;}.tv {background-color:000000; color:000000;border:1px solid; border-color:silver;width:300px; height:275px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-620px; margin-top:20px;visibility:visible;}.banner {background-color:000000; color:000000;border:1px solid; border-color:silver;width:500px; height:50px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:110px; margin-top:20px;visibility:visible;}.content {background-color:000000; color:000000;border:1px solid; border-color:silver;width:500px; height:435px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:110px; margin-top:115px;visibility:visible;}.tabs {background-color:000000; color:000000;border:0px solid; border-color:silver;width:500px; height:35px; overflow:none;position:absolute; z-index:3; left:50%; top:0%;margin-left:110px; margin-top:70px;visibility:visible;}.chat {background-color:000000; color:000000;border:1px solid; border-color:silver;width:410px; height:530px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-310px; margin-top:20px;visibility:visible;}.schedule {background-color:000000; color:000000;border:1px solid; border-color:silver;width:300px; height:250px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-620px; margin-top:300px;visibility:visible;}</style><style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: [url="http://www.dynamicdrive.com/style/"]http://www.dynamicdrive.com/style/[/url] */.basictab{padding: 3px 0;margin-left: 0;font: bold 12px Verdana;border-bottom: 1px solid gray;list-style-type: none;text-align: left; /*set to left, center, or right to align the menu as desired*/}.basictab li{display: inline;margin: 0;}.basictab li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid gray;border-bottom: none;background-color: #B8B8B8;color: #2d2b2b;}.basictab li a:visited{color: ##000000;}.basictab li a:hover{background-color: #DEDEDE;color: black;}.basictab li a:active{color: black;}.basictab li.selected a{ /*selected tab effect*/position: relative;top: 1px;padding-top: 4px;background-color: #E0E0E0;color: black;}</style></head><body><div class="tv">This is box 1.</div><div class="banner">This is box 2.</div><div class="tabs"><ul class="basictab"><li class="selected"><li><a href="">Headlines</a></li><li><a href="">Network</a></li><li><a href="">TvGuide</a></li><li><a href="">Forums</a></li><li><a href="">Downloads</a></li><li><a href="">Contact</a></li></li></ul></div><div class="content">This is box 4.</div><div class="chat">This is box 5.</div><div class="schedule">This is box 6.</div></body></html> Link to comment Share on other sites More sharing options...
Synook Posted September 8, 2007 Share Posted September 8, 2007 The script is applied in this code, all you need to do is create the content pages for the different links <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Ruckus</title><style type="text/css">/* The stylesheet has been removed to save space. Put it back */</style><script type="text/javqascript">function load(page) {var xmlHttp;try { xmlHttp=new XMLHttpRequest();} catch (e) {try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("Your browser does not support AJAX!");return false;}}}xmlHttp.onreadystatechange=function() {if(xmlHttp.readyState==4) {document.getElementById('content').innerHTML = xmlHttp.responseText;}}xmlHttp.open("GET",page,true);xmlHttp.send(null);}</script></head><body onload="load('home.html')"><div class="tv">This is box 1.</div><div class="banner">This is box 2.</div><div class="tabs"><ul class="basictab"><li class="selected"><li><a onclick="load('headlines.html')">Headlines</a></li><li><a onclick="load('network.html')">Network</a></li><li><a onclick="load('tvguide.html')">TvGuide</a></li><li><a href="forum/"><!-- You can't use AJAX to load your forum -->Forums</a></li><li><a onclick="load('downloads.html')">Downloads</a></li><li><a onclick="load('contact.html')">Contact</a></li></li></ul></div><div class="content" id="content">This is box 4.</div><div class="chat">This is box 5.</div><div class="schedule">This is box 6.</div></body></html> Link to comment Share on other sites More sharing options...
HankXavier Posted September 8, 2007 Author Share Posted September 8, 2007 Thanks Synook - that is totally not how I thought it would be applied... lol. I get it now though. I'll be doing the schedule box this weekend. I'll show you when I'm done so you know that you've actually taught me how to do this and didn't just do it yourself. Question though.. how come I couldn't use AJAX to load a forum page in there? Is it because there would be multiple loads of different pages within that forum and not just the box?EDIT:Well I have uploaded this, it doesn't work. One problem is a weird hover thing on the tabs from the script along with the hover from the CSS. Another thing is that the loading into box4 doesn't work. I have a rudimentary page for the network tab made and uploaded to the site ftp (now I don't know if I have to make a subdirectory or not) and I have the tab line set to network.html like you have above, but it doesn't click. You can have a look here.http://dhost.info/theruckuz/and the page that the network tab should load is herehttp://dhost.info/theruckuz/network.htmlEDIT2:Figured out the weird hover issue Link to comment Share on other sites More sharing options...
Synook Posted September 9, 2007 Share Posted September 9, 2007 Whoops typo the line with the <script> tag should look like this: <script type="text/javascript"> And it will work.Umm... with AJAX, the pages that are loaded do not need to have the <html>, <head>, <body>, etc. tabs, they only need to have the content you need. So network.html should look like this: <h1><center><b><u>This is the webpage</u></b></center></h1>This is the page that will be loaded when you hit the network tab<script type="text/javascript" src="http://dhost.info/dh_pan.php"></script> With nothing else. Link to comment Share on other sites More sharing options...
HankXavier Posted September 9, 2007 Author Share Posted September 9, 2007 AHA!! WOOT!! :) You have got to be kidding me - one letter Q was all that wrong??? LOL!! I must have looked at that script sheet for 3 hours today trying to figure it out... And I got it about the other pages and no tags. Synook - wow - how can I repay you. I think I will try and pay it forward by summarizing this thread in a way that describes the problem and how it was solved in an organized format so that others can benefit.Thanks again friend. As I continue to develop the site, I will come back here and ask further questions or give updates. Link to comment Share on other sites More sharing options...
Synook Posted September 9, 2007 Share Posted September 9, 2007 Your welcome - glad I could help we will always be happy to assist you in any queries or problems you may have in the future. Link to comment Share on other sites More sharing options...
HankXavier Posted September 9, 2007 Author Share Posted September 9, 2007 Now... do you think I should put the divs inside a wrapper so that things display the same way across browsers? Because I notice it looks great in Firefox but not so great in IE/ Link to comment Share on other sites More sharing options...
HankXavier Posted September 9, 2007 Author Share Posted September 9, 2007 Also, is there any way to control horizontal and vertical overflow separately? Link to comment Share on other sites More sharing options...
Synook Posted September 11, 2007 Share Posted September 11, 2007 There is no way to directly individually set the overflow properties for horizontal and vertical in divisions, however you could have a division with overflow:auto;, then inside another div with a fixed width or height and overflow:hidden; for example <div style="overflow:auto; "><div style="width:300px; overflow:hidden; ">Some very long non-breaking text.Lots more rows.</div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.