Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question Horizontal images using <LI> ... having problems

    The following code is just an example of what I'm trying to accomplish.

    I have 4 linear <UL> lists where the <LI> are side-by-side instead of a vertical alignment.

    I want to have the text description under the image in the <li>,
    but when I add a <br> it hoses the entire display.
    It makes the display vertical rather than horizontal.

    You will also see an attempt to put the image in the 'background-image:url(xxx)',
    but there I get no error and I get no displays either. (???)

    My problem is probably CSS, but I cannot figure out how to set it using JS.
    You can (un)comment the sections within the "addLI(s)" function to see the different attempts.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> LI Scroller </title>
    
    <style type="text/css">
    .LIpicks ul {
      white-space: nowrap;  /* width: 50%; */
      overflow-x: auto; 
    }
    .LIpicks ul li {
      display:inline;
      cursor:pointer;
      background-color: yellow;
    }
    </style>
    
    </head>
    <body>
    <div id="debug">
      <div id="Forums" class="LIpicks" ></div>
      <div id="NSU" class="LIpicks" ></div>
      <div id="OTM" class="LIpicks" ></div>
      <div id="Optics" class="LIpicks" ></div>
    </div>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=301611
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function addLI(s) {
      var tarr = s.split('|');
    // Following put text beside the image (want it to be under)
      return '<li><img src="'+tarr[2]+'" height="125" width="100">'+tarr[0]+'</li>';
    
    // Following gives horiz display without text
    //  return '<li><img src="'+tarr[2]+'" height="125" width="100"></li>'; 
    
    // Following is attempt to put image in background
    //  var tmp = '"background-image:url('+tarr[2]+')"';   
    //  var str = '<li style='+tmp+' height="125" width="100">'+tarr[0]+'</li>';  // alert(str);
    //  return str;
    }
    
    Array.prototype.toUL=function(es,ee){ 
      var tarr = [];
      var tar = liPicks.slice(es,ee);
      tarr = tar.map(addLI);
      var str = '<ul>\n' + tarr.join('\n') + '</ul><p>\n';
      return str;
    }
    
    var liPicks = [
    // Forums
       'webdeveloper |http://www.webdeveloper.com|http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'codeingforums |http://www.codingforums.com|http://www.nova.edu/hpd/otm/pics/4fun/12.jpg',
       'dreamincode |http://www.dreamincode.net|http://www.nova.edu/hpd/otm/pics/4fun/13.jpg',
       'dynamicdevice |http://www.dynamicdevice.com/forums|http://www.nova.edu/hpd/otm/pics/4fun/14.jpg',
    // NSU
       'NSU |http://www.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',
       'Library |http://www.nova.edu/library|http://www.nova.edu/hpd/otm/pics/4fun/22.jpg',
       'Optometry |http://optometry.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/23.jpg',
    // OTM
       'COP |http://www.nova.edu/hpd/otm/COP|http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'OTM-1 |http://www.nova.edu/hpd/otm/otm-a|http://www.nova.edu/hpd/otm/pics/4fun/32.jpg',
       'OTM-2 |http://www.nova.edu/hpd/otm/otm-b|http://www.nova.edu/hpd/otm/pics/4fun/33.jpg',
       'OTM-3 |http://www.nova.edu/hpd/otm/otm-c|http://www.nova.edu/hpd/otm/pics/4fun/34.jpg',
       'OTM-4 |http://www.nova.edu/hpd/otm/otm-d|http://www.nova.edu/hpd/otm/pics/4fun/35.jpg',
    // Optics
       'Optics I |http://www.nova.edu/hpd/otm/Optics/GOpt|http://www.nova.edu/hpd/otm/pics/4fun/41.jpg',
       'Optics II |http://www.nova.edu/hpd/otm/Optics/POpt|http://www.nova.edu/hpd/otm/pics/4fun/42.jpg'
    ];
    
    function liAction(msg) {
      var tarr = liPicks[msg].split('|');
      document.location.href = tarr[1];
    }
    
    window.onload = function() {
      var LIpicks = liPicks.toUL(0,4);   $_('Forums').innerHTML = LIpicks;  // Forums
          LIpicks = liPicks.toUL(4,7);   $_('NSU').innerHTML = LIpicks;     // NSU
          LIpicks = liPicks.toUL(7,12);  $_('OTM').innerHTML = LIpicks;     // OTM
          LIpicks = liPicks.toUL(12,14); $_('Optics').innerHTML = LIpicks;  // Optics
    
      var sel = $_('debug').getElementsByTagName('li');
      for (var i=0; i<sel.length; i++) {
        sel[i].value = i;
        sel[i].onclick = function() { liAction(this.value); }
      }
    }
    </script>
    
    </body>
    </html>
    Any suggestions will be attempted at this point (!!!)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Make the lis display: inline-block;?

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow

    Quote Originally Posted by VIPStephan View Post
    Make the lis display: inline-block;?
    I've never seen that particular configuration before...
    I tried it as:
    Code:
    .LIpicks ul li {
      display:inline-block;
      cursor:pointer;
      background-color: yellow;
    }
    and
    display:inline; // same display as above with 'inline-block'.

    and display:block; // gives vertical display (as before)

    Thanks, but no joy...

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there jmrker,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> LI Scroller </title>
    
    <style>
    .LIpicks ul {
        white-space: nowrap;  /* width: 50%; */
        overflow-x: auto; 
        list-style-type:none;
    }
    .LIpicks ul li {
        float:left;
        padding:10px;
        margin:2px;
        text-align:center;
        cursor:pointer;
        background-color:yellow;
    }
    .LIpicks img {
        display:block;
        height:125px;
        width:100px;
        margin:0 auto 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="debug">
      <div id="Forums" class="LIpicks" ></div>
      <div id="NSU" class="LIpicks" ></div>
      <div id="OTM" class="LIpicks" ></div>
      <div id="Optics" class="LIpicks" ></div>
    </div>
    
    <script>
    // For: http://www.codingforums.com/showthread.php?t=301611
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function addLI(s) {
      var tarr = s.split('|');
    // Following put text beside the image (want it to be under)
      return '<li><img src="'+tarr[2]+'" alt="">'+tarr[0]+'</li>';
    
    // Following gives horiz display without text
    //  return '<li><img src="'+tarr[2]+'"></li>'; 
    
    // Following is attempt to put image in background
    //  var tmp = '"background-image:url('+tarr[2]+')"';   
    //  var str = '<li style='+tmp+'>'+tarr[0]+'</li>';  // alert(str);
    //  return str;
    }
    
    Array.prototype.toUL=function(es,ee){ 
      var tarr = [];
      var tar = liPicks.slice(es,ee);
      tarr = tar.map(addLI);
      var str = '<ul>\n' + tarr.join('\n') + '</ul>\n';
      return str;
    }
    
    var liPicks = [
    // Forums
       'webdeveloper |http://www.webdeveloper.com|http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'codeingforums |http://www.codingforums.com|http://www.nova.edu/hpd/otm/pics/4fun/12.jpg',
       'dreamincode |http://www.dreamincode.net|http://www.nova.edu/hpd/otm/pics/4fun/13.jpg',
       'dynamicdevice |http://www.dynamicdevice.com/forums|http://www.nova.edu/hpd/otm/pics/4fun/14.jpg',
    // NSU
       'NSU |http://www.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',
       'Library |http://www.nova.edu/library|http://www.nova.edu/hpd/otm/pics/4fun/22.jpg',
       'Optometry |http://optometry.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/23.jpg',
    // OTM
       'COP |http://www.nova.edu/hpd/otm/COP|http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'OTM-1 |http://www.nova.edu/hpd/otm/otm-a|http://www.nova.edu/hpd/otm/pics/4fun/32.jpg',
       'OTM-2 |http://www.nova.edu/hpd/otm/otm-b|http://www.nova.edu/hpd/otm/pics/4fun/33.jpg',
       'OTM-3 |http://www.nova.edu/hpd/otm/otm-c|http://www.nova.edu/hpd/otm/pics/4fun/34.jpg',
       'OTM-4 |http://www.nova.edu/hpd/otm/otm-d|http://www.nova.edu/hpd/otm/pics/4fun/35.jpg',
    // Optics
       'Optics I |http://www.nova.edu/hpd/otm/Optics/GOpt|http://www.nova.edu/hpd/otm/pics/4fun/41.jpg',
       'Optics II |http://www.nova.edu/hpd/otm/Optics/POpt|http://www.nova.edu/hpd/otm/pics/4fun/42.jpg'
    ];
    
    function liAction(msg) {
      var tarr = liPicks[msg].split('|');
      document.location.href = tarr[1];
    }
    
    window.onload = function() {
      var LIpicks = liPicks.toUL(0,4);   $_('Forums').innerHTML = LIpicks;  // Forums
          LIpicks = liPicks.toUL(4,7);   $_('NSU').innerHTML = LIpicks;     // NSU
          LIpicks = liPicks.toUL(7,12);  $_('OTM').innerHTML = LIpicks;     // OTM
          LIpicks = liPicks.toUL(12,14); $_('Optics').innerHTML = LIpicks;  // Optics
    
      var sel = $_('debug').getElementsByTagName('li');
      for (var i=0; i<sel.length; i++) {
        sel.value = i;
        sel.onclick = function() { liAction(this.value); }
      }
    }
    </script>
    
    </body>
    </html>


    Note:-
    I have removed the img dimensions and an unnecessary p element from the script.

    coothead

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question

    Thank you 'coothead'. That is a lot closer to what I wanted than my feeble attempt.
    It will definitely do for my needs if I cannot get what I am trying to do.

    As a description, this is what I would like the final site to look like.

    Imagine a site that has a page layout like this
    PHP Code:
      [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ]  |  [ ] [ ] [ ] [ ] [ ]
    <-   
    scroll bar (if clipped)    ->

      [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ]  |  [ ] [ ] [ ] [ ] [ ]
    <-   
    scroll bar (if clipped)    ->

      [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ]  |  [ ] [ ] [ ] [ ] [ ]
    <-   
    scroll bar (if clipped)    ->

      [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ]  |  [ ] [ ] [ ] [ ] [ ]
    <-   
    scroll bar (if clipped)    -> 
    Where [ ] represents the current image and description you helped me set-up
    and the | represents the right side of the screen.

    I want the [ ] to scroll left and right to expose the longer [ ] icons.

    My idea is that this would work on both a normal monitor, even if the user shrinks the width of the page
    and that is would also work on a tablet computer without modification.

    Below is my latest attempt using your suggestions (modified for a <div> tag instead of a <li>)
    and minus the left-right scroll logic. When you reduce the width of the screen, the overflow
    of the [ ] icons drops down to the next row on the screen. That's the effect I'm trying to modify.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <style type="text/css">
    #Menu br { clear:both; } 
    .divImg img { height:125px; width:100px; }
    .divImg {
        float:left; 
        padding:10px;
        margin:2px;
        text-align:center;
        cursor:pointer;
        background-color:yellow;
    }
    </style>
    
    <title> DIV Menu </title>
    </head>
    <body>
    
    <div id="Menu">
      <div class="group" id="Forums"></div>  <!-- Forums -->
      <div class="group" id="NSU"></div>     <!-- NSU -->
      <div class="group" id="OTM"></div>     <!-- OTM -->
      <div class="group" id="Optics"></div>  <!-- Optics -->
    </div>
    
    <script>
    // For: http://www.codingforums.com/showthread.php?t=301611
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function addLI(s) {
      var tarr = s.split('|');
      return '<div class="divImg"><img src="'+tarr[2]+'" alt=""><br>'+tarr[0]+'</div>';
    }
    
    Array.prototype.toUL=function(es,ee){ 
      var tarr = [];
      var tar = liPicks.slice(es,ee);
      tarr = tar.map(addLI);
      var str = '<div class="group">' + tarr.join('\n') + '</div><br>';
      return str;
    }
    
    var liPicks = [
    // Forums - 0,4
       'webdeveloper |http://www.webdeveloper.com|http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'Codingforums |http://www.codingforums.com|http://www.nova.edu/hpd/otm/pics/4fun/12.jpg',
       'DreamInCode |http://www.dreamincode.net|http://www.nova.edu/hpd/otm/pics/4fun/13.jpg',
       'DynamicDrive |http://www.dynamicdrive.com/forums|http://www.nova.edu/hpd/otm/pics/4fun/14.jpg',
    // NSU - 4,8
       'NSU |http://www.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',
       'Library |http://www.nova.edu/library|http://www.nova.edu/hpd/otm/pics/4fun/22.jpg',
       'Optometry |http://optometry.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/23.jpg',
       'Homepage |http://www.nova.edu/~rumsey|http://www.nova.edu/hpd/otm/pics/4fun/24.jpg',
    // OTM - 8,13
       'COP |http://www.nova.edu/hpd/otm/cop|http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'OTM-1 |http://www.nova.edu/hpd/otm/otm-a|http://www.nova.edu/hpd/otm/pics/4fun/32.jpg',
       'OTM-2 |http://www.nova.edu/hpd/otm/otm-b|http://www.nova.edu/hpd/otm/pics/4fun/33.jpg',
       'OTM-3 |http://www.nova.edu/hpd/otm/otm-c|http://www.nova.edu/hpd/otm/pics/4fun/34.jpg',
       'OTM-4 |http://www.nova.edu/hpd/otm/otm-d|http://www.nova.edu/hpd/otm/pics/4fun/35.jpg',
    // Optics - 13,15
       'Optics I |http://www.nova.edu/hpd/otm/Optics/GOpt|http://www.nova.edu/hpd/otm/pics/4fun/41.jpg',
       'Optics II |http://www.nova.edu/hpd/otm/Optics/POpt|http://www.nova.edu/hpd/otm/pics/4fun/42.jpg'
    ];
    
    function liAction(msg) {
      var tarr = liPicks[msg].split('|');
      document.location.href = tarr[1];
    }
    
    window.onload = function() {
      var LIpicks = liPicks.toUL(0,4);   $_('Forums').innerHTML = LIpicks;  // Forums
          LIpicks = liPicks.toUL(4,8);   $_('NSU').innerHTML = LIpicks;     // NSU
          LIpicks = liPicks.toUL(8,13);  $_('OTM').innerHTML = LIpicks;     // OTM
          LIpicks = liPicks.toUL(13,15); $_('Optics').innerHTML = LIpicks;  // Optics
    
      var sel = $_('Menu').getElementsByClassName('divImg');
      for (var i=0; i<sel.length; i++) {
        sel[i].value = i;
        sel[i].onclick = function() { liAction(this.value); }
      }
    }
    </script>
    
    </body>
    </html>
    Keep in mind that the images and links are just examples at this time and will be changed to reflect actual needs.

    I appreciate your observations and modifications thus far.
    Last edited by jmrker; 10-09-2013 at 10:19 PM.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there jmrker,

    I cannot understand why you would change the uls to divs, it doesn't make sense.

    So I have amended my original coding suggestion to include the horizontal scrollbars...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> LI Scroller </title>
    
    <style>
    .LIpicks {
        height:195px;
        overflow:auto;
     }
    .LIpicks ul {
        height:175px;
        margin:0;
        padding:0; 
        list-style-type:none;
    }
    
    #Forums ul { min-width:496px;}
    #NSU ul    { min-width:376px;}
    #OTM ul    { min-width:620px;}
    #Optics ul { min-width:248px;}
    
    .LIpicks ul li {
        float:left;
        padding:10px;
        margin:2px;
        text-align:center;
        cursor:pointer;
        background-color:yellow;
        font-size:12px;
    }
    .LIpicks img {
        display:block;
        height:125px;
        width:100px;
        margin:0 auto 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="debug">
      <div id="Forums" class="LIpicks" ></div>
      <div id="NSU" class="LIpicks" ></div>
      <div id="OTM" class="LIpicks" ></div>
      <div id="Optics" class="LIpicks" ></div>
    </div>
    
    <script>
    // For: http://www.codingforums.com/showthread.php?t=301611
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function addLI(s) {
      var tarr = s.split('|');
    // Following put text beside the image (want it to be under)
      return '<li><img src="'+tarr[2]+'" alt="">'+tarr[0]+'</li>';
    
    // Following gives horiz display without text
    //  return '<li><img src="'+tarr[2]+'"></li>'; 
    
    // Following is attempt to put image in background
    //  var tmp = '"background-image:url('+tarr[2]+')"';   
    //  var str = '<li style='+tmp+'>'+tarr[0]+'</li>';  // alert(str);
    //  return str;
    }
    
    Array.prototype.toUL=function(es,ee){ 
      var tarr = [];
      var tar = liPicks.slice(es,ee);
      tarr = tar.map(addLI);
      var str = '<ul>\n' + tarr.join('\n') + '</ul>\n';
      return str;
    }
    
    var liPicks = [
    // Forums
       'webdeveloper |http://www.webdeveloper.com|http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'codeingforums |http://www.codingforums.com|http://www.nova.edu/hpd/otm/pics/4fun/12.jpg',
       'dreamincode |http://www.dreamincode.net|http://www.nova.edu/hpd/otm/pics/4fun/13.jpg',
       'dynamicdevice |http://www.dynamicdevice.com/forums|http://www.nova.edu/hpd/otm/pics/4fun/14.jpg',
    // NSU
       'NSU |http://www.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',
       'Library |http://www.nova.edu/library|http://www.nova.edu/hpd/otm/pics/4fun/22.jpg',
       'Optometry |http://optometry.nova.edu|http://www.nova.edu/hpd/otm/pics/4fun/23.jpg',
    // OTM
       'COP |http://www.nova.edu/hpd/otm/COP|http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'OTM-1 |http://www.nova.edu/hpd/otm/otm-a|http://www.nova.edu/hpd/otm/pics/4fun/32.jpg',
       'OTM-2 |http://www.nova.edu/hpd/otm/otm-b|http://www.nova.edu/hpd/otm/pics/4fun/33.jpg',
       'OTM-3 |http://www.nova.edu/hpd/otm/otm-c|http://www.nova.edu/hpd/otm/pics/4fun/34.jpg',
       'OTM-4 |http://www.nova.edu/hpd/otm/otm-d|http://www.nova.edu/hpd/otm/pics/4fun/35.jpg',
    // Optics
       'Optics I |http://www.nova.edu/hpd/otm/Optics/GOpt|http://www.nova.edu/hpd/otm/pics/4fun/41.jpg',
       'Optics II |http://www.nova.edu/hpd/otm/Optics/POpt|http://www.nova.edu/hpd/otm/pics/4fun/42.jpg'
    ];
    
    function liAction(msg) {
      var tarr = liPicks[msg].split('|');
      document.location.href = tarr[1];
     }
    
    window.onload = function() {
      var LIpicks = liPicks.toUL(0,4);   $_('Forums').innerHTML = LIpicks;  // Forums
          LIpicks = liPicks.toUL(4,7);   $_('NSU').innerHTML = LIpicks;     // NSU
          LIpicks = liPicks.toUL(7,12);  $_('OTM').innerHTML = LIpicks;     // OTM
          LIpicks = liPicks.toUL(12,14); $_('Optics').innerHTML = LIpicks;  // Optics
    
      var sel = $_('debug').getElementsByTagName('li');
      for (var i=0; i<sel.length; i++) {
        sel.value = i;
        sel.onclick = function() { liAction(this.value); }
      }
     }
    </script>
    
    </body>
    </html>
    coothead

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Thank you, "coothead".

    I've learned some more CSS commands I either had not seen or had not considered.
    I'll be taking some time now to study how you accomplished the various displays.

    Appreciate you time.

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts

    No problem, you're very welcome.

    You may also find the following links of interest...

    coothead


  •  

    Posting Permissions

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