Databases
StackOverflow2013
Postsdbo
POJavascript display and CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript display and CSS
    primarykey
    data
    text
    <p>I had to create a "fake" weather page using Javascript only. I am struggling with the layout and have a couple of questions:</p> <ul> <li><p>I tried everything to include padding above my "h1" title but nothing works. </p></li> <li><p>I want the weather photos and infos to display in the middle of the box (as it does in day0) but I cannot get it to do it.</p></li> <li><p>Would you recommend to break my .js file into different ones for each function or is it ok to put it all in one. I want to avoid it being confusing ?</p></li> </ul> <p>HTML: </p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;AccuMeteo&lt;/title&gt; &lt;meta name="description" content="AccuMeteo Weather Forecast"&gt; &lt;meta name="keywords" content="Daily and Weekly Weather forecast"&gt; &lt;link href="css/accumeteo.css" rel="stylesheet"&gt; &lt;script type="text/javascript" src="js/accumeteo.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- wrapper section starts --&gt; &lt;div id="wrapper"&gt; &lt;!-- header section starts --&gt; &lt;div id="header"&gt; &lt;img src="images/header.jpg" width="975" height="220" alt="Blue Sky Header" class="floatleft"&gt; &lt;/div&gt; &lt;!-- header section ends --&gt; &lt;!-- menu section starts --&gt; &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="vancouver.html" id="current" class="first"&gt;Vancouver&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="dallas.html"&gt;Dallas&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="ny.html"&gt;New York&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="placeholder.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- menu section ends --&gt; &lt;div id="content"&gt; &lt;div id="city"&gt; &lt;h1&gt;Vancouver, BC&lt;/h1&gt; &lt;/div&gt; &lt;div id="date"&gt; &lt;noscript&gt; &lt;div&gt;! JavaScript is not enabled.&lt;/div&gt; &lt;/noscript&gt; &lt;div id="PST"&gt;&lt;/div&gt; &lt;div id="year"&gt;&lt;/div&gt; &lt;div id="ordinal"&gt;&lt;/div&gt; &lt;div id="day"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="panel"&gt; &lt;div id="day0"&gt; &lt;/div&gt; &lt;div id="day1"&gt; &lt;/div&gt; &lt;div id="day2"&gt; &lt;/div&gt; &lt;div id="day3"&gt; &lt;/div&gt; &lt;div id="day4"&gt; &lt;/div&gt; &lt;div id="day5"&gt; &lt;/div&gt; &lt;div id="day6"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- footer section starts --&gt; &lt;div id="footer"&gt; &lt;p class="bottom"&gt;Copyright &amp;copy; 2012 JC Design | All Rights Reserved | &lt;a href="#"&gt;Terms and Conditions&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;!-- foot section ends --&gt; &lt;!-- wrapper section starts --&gt; &lt;script&gt; displayTime("PST"); &lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>.css</p> <pre><code>/*Homepage* / /*Body*/ html {background-color: #e2e2e2} body { color: #000; background: #fff; font-family: Verdana,helvetica,arial, sans-serif; font-size: 90%; text-align: left; width: 975px; margin-left: auto; margin-right: auto; } p { margin-left: 35px; margin-right: 25px; text-align: left; } /*---------------Navigation styles-------------------*/ #menu { float: left; margin:0; padding-top: 0px; width: 100%; background: #4186d3; color: #04356c; } #menu ul { margin: 0px; position: relative } #menu ul li { display: inline; } #menu ul li a { float: left; padding: 5px 16px; margin-right: 0px; background: #4186d3; color: #04356c; text-decoration: none; border-right: 1px solid #e2e2e2; } #menu ul li a:hover { color: #04356c; background: #fff; text-decoration: underline; } #menu li a#current { background: #0d56a6; color: #fff; } /*Bottom link formatting*/ p.bottom a:link { background: #04356c; color: #fff; } p.bottom a:visited { color: #ba1212; } p.bottom a:hover { color: #f9b41f; text-decoration: none; } p.bottom a:active{ background: #3ca0d0; color: #000; } /*Page wrapper*/ #wrapper { margin: 0 auto; width: 975px; text-align: left; } /*Banner styles*/ #header { background-color: #2d1d06; color: #7d890d; font-family: verdana, helvetica, arial, sans-serif; font-size: 150%; width: 925px; padding: 0px; } #footer { clear: both; background: #04356c; color: #fff; font-family: Verdana,helvetica, arial, sans-serif; font-size: 90%; font-weight: normal; width: 975px; padding-bottom: 3px; padding-top: 3px; } #footer p { text-align: center; } .content { padding: 0px 0px 0px 160px; position: relative; } /* Images*/ img { border: 0px; padding: 0px; } .floatleft { float: left; margin: 0px; padding: 0px; border: none; } /*Headings*/ hr{ position: absolute; width: 45%; margin-left: 35px; margin-right: 45px; border: 1px dotted #000; } h1{ color: #7d890d; font-size: 140%; font-weight: normal; margin-left: 35px; } h2{ color: #052a6e; font-weight: normal; font-size: 125%; margin-left: 35px; } /*********************/ /* Date Properties */ /*********************/ #date { float: right; margin: 10px; } #day, #ordinal, #year { float: right; } #ordinal { vertical-align: baseline; font-size: 0.8em; position: relative; top: -0.2em; } /* JavaScript Panel Properties */ #panel { font-size: 0.8em; width: 100%; float: left; margin: 5px; } #day0, #day1, #day2, #day3, #day4 { float: left; width: 181px; height: 355px; border: 1px solid black; margin: 4px; text-align: center; } td,th { width: 175px; height: 35px; font-size: 1.3em; } th { font-size: 1.5em; } #spacerCell { height: 70px; } .tempLow, .tempHigh { font-size: 2em; color: blue; } .tempHigh { color: red; } </code></pre> <p>.js</p> <pre><code>var thisDate = new Date(); var day = thisDate.getDate(); var dayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var sun = new Forecast( "sunny.png", "Sunny", 17, 31 ); var clouds = new Forecast( "cloudy.png", "Cloudy", 10, 23 ); var showers = new Forecast( "mix.png", "Mix of Sun and Cloud", 12, 20 ); var rain = new Forecast( "rain.png", "Rain", 6, 14 ); var fList = [ sun, clouds, showers, rain ]; var pList = [ "day0", "day1", "day2", "day3", "day4" ]; var low, high; // Functions function init() { displayDate(); displayForecast(); } window.onload=init; function Forecast( image, title, minTemp, maxTemp ) { this.image=image; this.title=title; this.minTemp=minTemp; this.maxTemp=maxTemp; } function randomNumber( min, max ) { var rand = Math.random() * (max - min + 1) + min; rand = Math.floor(rand) return rand; } function displayTime( timeZone ) { var timeE = document.getElementById( timeZone ); var offset, hh, mm, AMorPM; switch ( timeZone ) { case "PST": offset = -7; break; case "EST": offset = -4; break; case "CDT": offset = -5; break; default: timeE.innerHTML += "Error!"; } thisDate = calcTime( offset ); hh = thisDate.getHours(); mm = thisDate.getMinutes(); if( mm &lt; 10 ){ mm = "0" + mm; } if( hh &gt; 12 ) { hh -= 12; AMorPM = " PM"; } else { AMorPM = " AM"; } timeE.innerHTML += hh + ":" + mm + " " + AMorPM + " (" + timeZone + ")"; } // This will return a Date object with the city's current time based on that city's "offset" from the GMT. function calcTime( offset ) { var date = new Date(); date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000 + offset*60*60*1000); return date; } //This will return a new Date object for a single forecast function addDays(myDate,days) { return new Date(myDate.getTime() + days*24*60*60*1000); } function displayDate() { var dayE = document.getElementById("day"); var ordinalE = document.getElementById("ordinal"); var yearE = document.getElementById("year"); // Display the day of the week and the date (month, day) dayE.innerHTML = dayNames[ thisDate.getDay() ] +", "; dayE.innerHTML += monthNames[ thisDate.getMonth() ] +" "; dayE.innerHTML += " " +day; // Function determining which ending to use for the date and displaying it switch (day) { case 1: case 21: case 31: ordinalE.innerHTML += "st"; break; case 2: case 22: ordinalE.innerHTML += "nd"; break; case 3: case 23: ordinalE.innerHTML += "rd"; break; default: ordinalE.innerHTML += "th"; } // Display the year yearE.innerHTML = ", " +thisDate.getFullYear(); } function getDayTitle( i ) { var dayTitle; var dayOfWeek = addDays( thisDate, i ) var d = dayOfWeek.getDay(); if( d &gt; 6 ) { d -= 7; } // Function determining which title to use (today, tomorrow, day of the week) switch ( i ) { case 0: dayTitle = "Today"; break; case 1: dayTitle = "Tomorrow"; break; default: dayTitle = dayNames[d]; } return dayTitle; } function displayForecast() { for( i=0; i &lt; pList.length; i++) { displayDailyForecast( i ); } } function displayDailyForecast( i ) { var forecastE = document.getElementById( pList[i] ); var forecast = fList[ randomNumber(0,3) ]; var html = "&lt;table&gt;"; if( i == 0) { html += "&lt;tr&gt;&lt;td id='spacerCell'&gt;&lt;/td&gt;&lt;/tr&gt;" } html += "&lt;tr&gt;&lt;th colspan='2'&gt;" + getDayTitle(i) + "&lt;/th&gt;&lt;/tr&gt;"; html += "&lt;tr&gt;&lt;td colspan='2'&gt;&lt;img src='images/" + forecast.image + "' width='100' height='100'&gt;&lt;/td&gt;&lt;/tr&gt;"; html += "&lt;tr&gt;&lt;td colspan='2'&gt;" + forecast.title + "&lt;/td&gt;&lt;/tr&gt;"; getTemp( forecast.minTemp, forecast.maxTemp ); html += "&lt;tr&gt;&lt;td class='tempLow'&gt;"+ low +"&amp;degC&lt;/td&gt;"; html += "&lt;td class='tempHigh'&gt;"+ high +"&amp;degC&lt;/td&gt;&lt;/tr&gt;"; forecastE.innerHTML += html; } function getTemp( min, max ) { var t1, t2; t1 = randomNumber( min, max ); t2 = randomNumber( min, max ); if( t1 &lt; t2 ) { low = t1; high = t2; } else if( t1 &gt; t2 ) { low = t2; high = t1; } else // if t1==t2 { low = t1; high = t1 + 1; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USwizzme
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COAny chance you could knock-ip a http://www.JSFiddle.com/ for this?
      singulars
      1. POJavascript display and CSS
      1. USBarrie Reader
    2. COHave you tried adding a padding property to the css for h1 tags?
      singulars
      1. POJavascript display and CSS
      1. USAsad Saeeduddin
    3. COnot .com, http://jsfiddle.net, don't support domain spammers
      singulars
      1. POJavascript display and CSS
      1. USMichal Klouda
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload