www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to insert slideshow controllers into a div properly using DOM

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    1

    How to insert slideshow controllers into a div properly using DOM

    I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they mirror each other on the opposite ends of the slideshow div

    So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 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 instead of declaring vertical and horizontal positions)

    I feel like it might have something to do with the styling, but I could be horribly wrong. Anyone have any ideas?

    HTML:

    HTML Code:
    <div id="pageContainer">
    
     <!-- Slideshow HTML -->
      <div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
        <div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">
    
          <div class="slide">
    
            <h2>Web Development With PHP</h2>
            <p><a href="#"><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></a></p>
    
          </div>
    
          <div class="slide">
    
            <h2>Database Design with MySQL Workbench</h2>
            <p><a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></a></p>
    
          </div>
    
          <div class="slide">
    
            <h2>Web Design With CSS and HTML</h2>
            <p><a href="#"><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></a></p>
    
          </div>
        </div>
    
      </div> 
      <!-- Slideshow HTML -->
    
      </div>
    CSS:
    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;
    }
    Javascript (Running from HTML file):
    Code:
    // Insert controls in the DOM
      $('#slideShow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');

  2. #2
    Join Date
    Oct 2012
    Posts
    36
    I'd lose the floats on the #leftControl and #rightControl and try adding:

    top:50%;
    margin-top:-50px;

    to .control


    The top:50% positions the TOP of each control half way down the browser window, to centre them vertically you then need to apply a negative top margin equal to HALF the height of each control. From the CSS above the height appears to be equal to the height of the slideshow 263px, is this right?

    If not, for example if your controls are 100px high, set the top margin to -50px to centre them, assuming that your control images are not supposed to be the same height as the slideshow.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles