Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your css had issues, your html body elements were placed outside the &lt;body&gt;&lt;/body&gt; tags, and I changed everything to load within a single function passed to $(document).ready(). The following worked in my browser:</p> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;onLoad&lt;/title&gt; &lt;link href="style2.css" rel="stylesheet" type="text/css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="schedule"&gt; &lt;div class="event"&gt; &lt;ul class="guides"&gt; &lt;li class="icon"&gt;&lt;img src="" alt="" width="26" height="27" class="icon"/&gt;&lt;/li&gt; &lt;li class="time"&gt;&lt;span data-utc="9:05"&gt;&lt;/span&gt;&lt;/li&gt; &lt;li class="game"&gt;Team A vs Team B&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="place"&gt; &lt;ul class="venue"&gt; &lt;li class="field"&gt;Field A&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="schedule"&gt; &lt;div class="event"&gt; &lt;ul class="guides"&gt; &lt;li class="icon"&gt;&lt;img src="" alt="" width="26" height="27" class="icon"/&gt;&lt;/li&gt; &lt;li class="time"&gt;&lt;span data-utc="9:05"&gt;&lt;/span&gt;&lt;/li&gt; &lt;li class="game"&gt;player A vs Player B&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="place"&gt; &lt;ul class="venue"&gt; &lt;li class="field"&gt;Court 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id='out'&gt;&lt;/div&gt; &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt; &lt;script type='text/javascript' src='onLoad.js'&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>JavaScript:</p> <pre><code>$(document).ready(function () { $(".event").click(function () { //hide all rrshow $(".place").hide(); //show only required rrshow $(this).parent().find(".place").show(); }); function DisplayTimes() { //legal formats: 1/10-13:00 for date and time // : 13:00 for time - presumes utc date is same as local date var dd = new Date(); var list = document.getElementsByTagName('span'); var mon, date, hr, min; for (var i = 0; i &lt; list.length; i++) { if (list[i].hasAttribute('data-utc')) { var str = list[i].getAttribute('data-utc'); if (str.indexOf('/') &lt; 0) { mon = dd.getMonth() + 1; date = dd.getDate(); hr = str.substring(0, str.indexOf(':')); } else { mon = str.substring(0, str.indexOf('/')); date = str.substring(str.indexOf('/') + 1, str.indexOf('-')); hr = str.substring(str.indexOf('-') + 1, str.indexOf(':')); } min = str.substring(str.indexOf(':') + 1); dd.setUTCDate(mon); //date of month dd.setUTCHours(hr); //24hour hour dd.setUTCMinutes(+min); //minutes dd.setUTCSeconds(0); //seconds var h = leadzero(dd.getHours()); var m = leadzero(dd.getMinutes()); var s = leadzero(dd.getSeconds()); list[i].innerHTML += ' ' + h + ':' + m; } } } function leadzero(n) { var str1 = n.toString(); if (str1.length &lt; 2) { str1 = '0' + str1; } return str1; } DisplayTimes(); }); </code></pre> <p>CSS:</p> <pre><code>@charset "utf-8"; .event { width: 600px; height: 38px } .place{ display: none; width: 590px; height: 38px; text-align: center; font-size: 12px; font-weight: bold; color: #EB1D2D; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ul.guides { width: 570px; height: 34px; list-style: none; display: block; background-color: #D1E5FD; border-style: solid; border-width: 1px; border-color: black; border-spacing: 5px; padding-top:1px; border-radius:5px } ul.guides a, ul.guides a:visited, ul.guides a:link { display: block; text-decoration: none; background-color: #8090AB; color: black; } ul.guides a:hover, ul.guides a:active, ul.guides a:focus { background-color: #FFFFFF; } li.icon { display: inline-block; width: 24px; height: 24px; padding-left: 10px; } img.icon{ display:inline-block; padding-top:3px; } li.time{ display:inline-block; text-align:center; font-size: 12px; width: 70px; padding-left: 5px; color: #0000FF; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; } li.game{ display: inline-block; text-align:center; font-size: 12px; padding-left: 10px; background-color: #D1E5FD; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; } ul.guides a, ul.nav a:visited{ display: block; text-decoration: none; background-color: #8090AB; color: #000; } ul.guides a:hover, ul.guides a:active, ul.guides a:focus{ background-color: #6F7D94; color: #000; } ul.venue { width: 550px; height: 34px; list-style: none; display: block; background-color: #D1E5FD; border-style: solid; border-width: 1px; border-color: black; border-spacing: 5px; padding-top:1px; border-radius:5px } li.field{ width: 150px; display: inline-block; text-align:center; font-size: 12px; padding-left: 10px; background-color: #D1E5FD; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; } </code></pre> <p><a href="http://jsfiddle.net/aeoril/X5SVp/" rel="nofollow">FIDDLE</a></p>
    singulars
    1. This table or related slice is empty.
    1. POJquery and JS works onDOM not onLoad
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USAeoril
    1. USAeoril
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COI see it works as nowrap -in <body> and onDomready.. But then how would i enter the code in the site so it runs as onDomready or as nowrap - in <body>? You will see if you compile the source code and run the site that it does not show the hidden div and only shows the time
      singulars
      1. PO
      1. USuser2897821
    2. CO@user2897821 I updated the answer above to address your comment above
      singulars
      1. PO
      1. USAeoril
    3. CO@user2897821 I completely redid my answer better and checked it in my browser directly on my home pc without a fiddle. Seems to work now. You had a lot of issues with your code and I fixed the most direct ones.
      singulars
      1. PO
      1. USAeoril
 

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