Eehan
Reputation: 1
onclick function using html, div tags and css
I'm trying to get these:
<div id="navi"><br>
<a href="index.htm">Home</a><br>
<a href ="#" onClick="load_venues(); return false; ">venues</a><br>
<a href ="#" onClick="load_goals(); return false; ">Our Goals</a><br>
<a href ="#" onClick="load_rules(); return false; ">Rule Book</a><br>
<a href ="#" onClick="load_formats(); return false; ">formats</a><br>
<a href ="#" onClick="load_contact(); return false; ">Contact</a></div>
to load into this:
<div id="maindiv" class="divclass"></div>
this is my script:
function load_home(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="home.htm" ></object>';}
function load_venues(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="venues.htm" ></object>';}
function load_goals(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="goals.htm" ></object>';}
function load_rules(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="rules.htm" ></object>';}
function load_formats(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="formats.htm" ></object>';}
function load_contact(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="contact.htm" ></object>';}
I'm not the smartest, but I'm trying.
It'll load into the div correctly, but it doesn't show the entire page that it loads, it'll show a 150x150px box of the content with scrollbars on both y and x axis. I want it to fill a box with these properties.
.divclass {
color: #420F4A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 380;
line-height: 1.4;
overflow-y: auto;
overflow-x: hidden;
width: 567px;
height: 521px;
}
any advice is welcome :)
The website is http://www.pokerinforsterandtaree.com and if you go to the Contact section, you can see the thing that it's doing.
Upvotes: 0
Views: 356
Answers (3)
StillBuggin
Reputation: 280
EDIT 1: try this code, OP. Copy and paste it into your page.
<!DOCTYPE html>
<html>
<head>
<title>River Rat Poker League</title>
<!-- use HTML5 please -->
<meta charset="utf-8" />
<!-- place all of your external css below -->
<link href="//pokerinforsterandtaree.com/stylesheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//pokerinforsterandtaree.com/engine1/style.css" />
<style type="text/css">
object{
width:100% !important;
height: 100% !important;
}
#maindiv{
text-align: center;
}
#menu{
list-style: none;
}
td img {
display: block;
}
</style>
</head>
<body>
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_print"></a>
</div>
<table width="989" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="120" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="20" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="340" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="227" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="20" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="262" height="1" border="0" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="1" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="2">
<img name="index_r1_c1" src="//pokerinforsterandtaree.com/img/1rr.jpg" width="120" height="71" border="0" id="index_r1_c1" alt="" />
</td>
<td colspan="4">
<img name="index_r1_c2" src="//pokerinforsterandtaree.com/img/index_r1_c2.jpg" width="607" height="10" border="0" id="index_r1_c2" alt="" />
</td>
<td rowspan="6">
<img name="index_r1_c6" src="//pokerinforsterandtaree.com/img/index_r1_c6.jpg" width="262" height="258" border="0" id="index_r1_c6" alt="" />
</td>
<td>
<img src="img/spacer.gif" width="1" height="10" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="2" colspan="4"><!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller1.jpg" alt="scroller1" title="scroller1" id="wows1_0"/>
</li>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller2.jpg" alt="scroller2" title="scroller2" id="wows1_1"/>
</li>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller3.jpg" alt="scroller3" title="scroller3" id="wows1_2"/>
</li>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller4.jpg" alt="scroller4" title="scroller4" id="wows1_3"/>
</li>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller5.jpg" alt="scroller5" title="scroller5" id="wows1_4"/>
</li>
<li>
<img src="//pokerinforsterandtaree.com/scroller/scroller6.jpg" alt="scroller6" title="scroller6" id="wows1_5"/>
</li>
</ul>
</div>
<div class="ws_script" style="position:absolute;left:-99%"></div>
<div class="ws_shadow"></div>
</div>
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="61" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="6" background="//pokerinforsterandtaree.com/img/1navi.jpg" class="navi" align="right">
<div id="topnav">
<ul id="menu">
<li>
<a id="home" href="#"> Home</a>
</li>
<li>
<a id="venues" href="#"> Venues</a>
</li>
<li>
<a id="goals" href="#"> Our Goals</a>
</li>
<li>
<a id="rules" href="#"> Rule Book</a>
</li>
<li>
<a id="format" href="#"> Formats</a>
</li>
<li>
<a id="contact" href="#"> Contact</a>
</li>
</ul>
</div>
</td>
<td><img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="116" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4">
<img name="index_r4_c2" src="//pokerinforsterandtaree.com/img/index_r4_c2.jpg" width="607" height="13" border="0" id="index_r4_c2" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="13" border="0" alt="" />
</td>
</tr>
<tr>
<td colspan="4">
<img name="index_r5_c2" src="//pokerinforsterandtaree.com/img/index_r5_c2.jpg" width="607" height="20" border="0" id="index_r5_c2" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="20" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="6">
<img name="index_r6_c2" src="//pokerinforsterandtaree.com/img/index_r6_c2.jpg" width="20" height="521" border="0" id="index_r6_c2" alt="" />
</td>
<td colspan="2" rowspan="6" valign="top" bgcolor="#FFFFFF">
<div id="maindiv" class="divclass">
<div class="fb-page" data-href="https://www.facebook.com/river.rats.mnc" data-width="547" data-height="521" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"></div>
</div>
</td>
<td rowspan="6">
<img name="index_r6_c5" src="//pokerinforsterandtaree.com/img/index_r6_c5.jpg" width="20" height="521" border="0" id="index_r6_c5" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="38" border="0" alt="" />
</td>
</tr>
<tr>
<td>
<img name="index_r7_c6" src="maindivimg/index_r7_c6.jpg" width="262" height="30" border="0" id="index_r7_c6" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="30" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="4" align="left" valign="top" bgcolor="#FFFFFF">
<div class="rightbox">
<div class="rightbox2">Don't know how to play? Come to one of our games to find out.</div>
</div>
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="84" border="0" alt="" />
</td>
</tr>
<tr>
<td>
<img name="index_r9_c1" src="//pokerinforsterandtaree.com/img/index_r9_c1.jpg" width="120" height="48" border="0" id="index_r9_c1" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="48" border="0" alt="" />
</td>
</tr>
<tr>
<td>
<img name="index_r10_c1" src="//pokerinforsterandtaree.com/img/index_r10_c1.jpg" width="120" height="20" border="0" id="index_r10_c1" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="20" border="0" alt="" />
</td>
</tr>
<tr>
<td align="right" valign="top" background="//pokerinforsterandtaree.com/img/1bottom.jpg">
<div class="lefttbox">
<div class="leftbox2"><img src="//pokerinforsterandtaree.com/img/1aussie.jpg" />
<a href="http://www.aussieholdempoker.com.au/" class="leftboxnavi">URL</a>
-
<a href="https://www.facebook.com/AussieHoldemPoker/" class="leftboxnavi">FB</a>
</div>
</div>
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="301" border="0" alt="" />
</td>
</tr>
<tr>
<td colspan="6">
<img name="index_r12_c1" src="//pokerinforsterandtaree.com/img/index_r12_c1.jpg" width="989" height="15" border="0" id="index_r12_c1" alt="" />
</td>
<td>
<img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="15" border="0" alt="" />
</td>
</tr>
<tr>
<td colspan="3" align="left" class="footer">
<ul id="menu">
<li>
<a id="home" href="#"> Home</a>
</li>
<li>
<a id="venues" href="#"> Venues</a>
</li>
<li>
<a id="goals" href="#"> Our Goals</a>
</li>
<li>
<a id="rules" href="#"> Rule Book</a>
</li>
<li>
<a id="format" href="#"> Formats</a>
</li>
<li>
<a id="contact" href="#"> Contact</a>
</li>
</ul>
</td>
<td colspan="3" align="right" class="footer">2015 River Rat Poker League (C) Privacy Policy </td>
<td><img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="50" border="0" alt="" /></td>
</tr>
</table>
<script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/jquery.js"></script>
<!-- place all of your javascript below -->
<script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/wowslider.js"></script>
<script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/script.js"></script>
<script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
<script>
//site
var a2a_config = a2a_config || {};
a2a_config.linkname = "River Rat Poker League";
a2a_config.linkurl = "www.pokerinforsterandtaree.com.au";
//menu
$(function(){
/* when you click any link in the list... */
$('#menu li a').click(function(){
/* ...will get its ID attribute wich must be the same as the name of the page you are trying to load, so... */
var elementId = $(this).attr('id');
/* we can bring its content to the DIV tag specified */
$('#maindiv').load(elementId + '.htm');
});
});
//facebook
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>Try using jQuery (don't try to reinvent the wheel):
$(function(){
/* when you click any link in the list... */
$('#menu li a').click(function(){
/* ...will get its ID attribute wich must be the same as the name of the page you are trying to load, so... */
var elementId = $(this).attr('id');
/* we can bring its content to the DIV tag specified */
$('#result').load(elementId + '.html');
});
});<ul id="menu">
<li>
<a id="home" href="#"> Home</a>
</li>
<li>
<a id="venues" href="#"> Venues</a>
</li>
<li>
<a id="goals" href="#"> Our Goals</a>
</li>
<li>
<a id="rules" href="#"> Rule Book</a>
</li>
<li>
<a id="format" href="#"> Formats</a>
</li>
<li>
<a id="contact" href="#"> Contact</a>
</li>
</ul>
<!-- your pages will be loaded into the DIV tag below -->
<div id="result"></div>
Please refere to this page on Stack Overflow
Upvotes: 2
benchpresser
Reputation: 2188
use #maindiv instead of .maindiv when do you want to get by id.
# is id selector, . is class selector
or you could assign a class to your div,
<div id="maindiv" class="divclass"
then you would be able to reach by class notation . as:
.divclass {
color:..
Upvotes: 0
Andrea Martinelli
Reputation: 312
You CSS is not working because you are not connecting the right object. Try to edit with div#maindiv instead of div.maindiv in the CSS file.
Upvotes: 0