New Topic/Question
Reply
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
tr{
border-color: black;
border-style: solid;
}
</style>
<script>
$(document).ready(function(){
//This a jquery function made to adjust to the screen width and rotate between code and stylesheets
// Based off the following article which was used for assistances
//http://css-tricks.com/resolution-specific-stylesheets/
alert("Running");
adjustStyle(($(this).width()),($(this).height()));
function adjustStyle(width, height) {
width = parseInt(width);
height = parseInt(height);
numberOfCellsWide = (width/10);
numberOfCellsHigh = (height/10);
alert("numberOfCellsWide:" + (numberOfCellsWide).toString());
alert("numberOfCellsHigh:" + (numberOfCellsHigh).toString());
var tableCode = '<tableCode class="mainTable">';
alert(tableCode);
for(var i = 0; i < numberOfCellsHigh ; i++){
tableCode = tableCode + '<tr class="row">';
for(var e = 0 ; e < numberOfCellsWide ; e++){
tableCode = tableCode + '<td class="box"></td>';
}
tableCode = tableCode + '</tr>';
}
tableCode = tableCode + '</table>';
alert("*");
//alert(tableCode);
document.getElementById("div1").innerHTML = tableCode;
}//end of function
$(function() {//runs this function everytime their is a change with the page
adjustStyle(($(this).width()),($(this).height()));//runs the adjust function sending in the window screen
$(window).resize(function() {
adjustStyle(($(this).width()),($(this).height()));
});
});
});
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
12 Replies - 2170 Views - Last Post: 09 April 2014 - 11:02 AM
#1
bowtie00
- New D.I.C Head
Reputation: 0
- Posts: 33
- Joined: 03-January 14
Filling the window with a table
Posted 08 April 2014 - 08:08 AM
I'm trying to build a website and I want the whole window to be filled with a table. Im trying to make it so that it changes based on window size. I don't know why my code isn't working. It is below.
Is This A Good Question/Topic?
0
MultiQuoteReplies To: Filling the window with a table
#2
ArtificialSoldier
- D.I.C Lover
-
Reputation: 3134
- Posts: 8,931
- Joined: 15-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 09:22 AM
I don't think there's any reason to use Javascript. If you use CSS to set the width and height of html, body, div, and table to 100% then that should be enough.
Was This Post Helpful?
0
#3
bowtie00
- New D.I.C Head
Reputation: 0
- Posts: 33
- Joined: 03-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 10:07 AM
The javascript is to add the correct number of cells for the window. So the cells never have to get bigger. It simply adds more cells.
Was This Post Helpful?
0
#4
ArtificialSoldier
- D.I.C Lover
-
Reputation: 3134
- Posts: 8,931
- Joined: 15-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 10:12 AM
Then the CSS should do it.
Was This Post Helpful?
0
#5
bowtie00
- New D.I.C Head
Reputation: 0
- Posts: 33
- Joined: 03-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 10:23 AM
Really? How would someone do this? Can this also have a unique id so it can be used like a button? Im trying to have the functionality to click a first square, then it highlights depending where your mouse is. (This has been made) Then you click a second square so its like selecting that section. With this, all cells have to have unique ids.
Thanks
Thanks
Was This Post Helpful?
0
#6
ArtificialSoldier
- D.I.C Lover
-
Reputation: 3134
- Posts: 8,931
- Joined: 15-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 10:30 AM
The CSS would just set the widths and heights of the html, body, div, and table elements to 100% each. That will cause the table to fill the page. It doesn't require using an ID. Building the cells with Javascript and attaching click events and things like that is a separate issue from getting the table to fill the page.
html, body, div, table { width: 100%; height: 100%; margin: 0; padding: 0; }
Was This Post Helpful?
0
#7
bowtie00
- New D.I.C Head
Reputation: 0
- Posts: 33
- Joined: 03-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 10:39 AM
Yes I understand by setting the width and height to 100% it will make it full screen. I am having an issue with building the cells. Like Im struggling with the javascript.
Was This Post Helpful?
0
#8
ArtificialSoldier
- D.I.C Lover
-
Reputation: 3134
- Posts: 8,931
- Joined: 15-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 11:03 AM
What happens when you run that code, are you checking the console for error messages? One problem is when you start the HTML for the table, you called the tag tableCode instead of table. That was probably a find and replace error.
Was This Post Helpful?
0
#10
ArtificialSoldier
- D.I.C Lover
-
Reputation: 3134
- Posts: 8,931
- Joined: 15-January 14
Re: Filling the window with a table
Posted 08 April 2014 - 11:12 AM
What actually happens? Do you see the alerts? The table doesn't have any content in it, you might want to add some test content to the cells to see if it shows up.
Was This Post Helpful?
0
#12
laytonsdad
- I identify as an attack helicopter!
-
Reputation: 467
- Posts: 1,998
- Joined: 30-April 10
Re: Filling the window with a table
Posted 08 April 2014 - 04:52 PM
Please post your fix for the next person to get some use of it.
Was This Post Helpful?
0
#13
bowtie00
- New D.I.C Head
Reputation: 0
- Posts: 33
- Joined: 03-January 14
Re: Filling the window with a table
Posted 09 April 2014 - 11:02 AM
It was simply removing the "table code" and putting the proper tags. Testing it by adding a character in each square. I didn't have the height of the cell in my css.
Was This Post Helpful?
0
Page 1 of 1
| 