Jump to content
Sign in to follow this  
HankXavier

New coder seeking mentor

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

AHA!! WOOT!! :blink::) :) :) 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... :):blink: 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...