Databases
StackOverflow2013
Postsdbo
POHow to insert slideshow controllers into a div properly using DOM
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to insert slideshow controllers into a div properly using DOM
    primarykey
    data
    text
    <p>I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they are on the opposite ends of the slideshow div</p> <p>So far I've only gotten them either to display in the top corners of the browser window (Using <strong>top: 0; left: 0</strong> and <strong>top: 0; right: 0</strong> for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float in place of the previous formatting that I just mentioned) </p> <p>I feel like it might have something to do with the styling, but I could be horribly wrong. Anyone have any ideas? </p> <p>HTML:</p> <pre><code> &lt;div id="pageContainer"&gt; &lt;!-- Slideshow HTML --&gt; &lt;div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;"&gt; &lt;div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;"&gt; &lt;div class="slide"&gt; &lt;h2&gt;Web Development With PHP&lt;/h2&gt; &lt;p&gt;&lt;a href="#"&gt;&lt;img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /&gt;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class="slide"&gt; &lt;h2&gt;Database Design with MySQL Workbench&lt;/h2&gt; &lt;p&gt;&lt;a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"&gt;&lt;img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /&gt;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class="slide"&gt; &lt;h2&gt;Web Design With CSS and HTML&lt;/h2&gt; &lt;p&gt;&lt;a href="#"&gt;&lt;img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /&gt;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Slideshow HTML --&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>/* * Slideshow style rules. */ #slideShow { margin:0 auto; width:640px; height:263px; background:transparent url(bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideShow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideShow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display: block; width: 39px; height:263px; text-indent:-10000px; position: absolute; cursor: pointer; } #leftControl { float: left; /* top: 0; left: 0; */ background:transparent url(control_left.jpg) no-repeat 0 0; } #rightControl { float: right; /* top: 0; right: 0; */ background:transparent url(control_right.jpg) no-repeat 0 0; } </code></pre> <p>Javascript (Running in HTML document): </p> <pre><code> // Insert controls in the DOM $('#slideShow') .prepend('&lt;span class="control" id="leftControl"&gt;Clicking moves left&lt;/span&gt;') .append('&lt;span class="control" id="rightControl"&gt;Clicking moves right&lt;/span&gt;'); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoanne DeBiasa
    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
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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