JMRKER's Profile User Rating: -----

Reputation: 129 Stalwart
Group:
Active Members
Active Posts:
836 (0.38 per day)
Joined:
25-October 08
Profile Views:
9,480
Last Active:
User is offline Yesterday, 06:56 PM
Currently:
Offline

Previous Fields

Country:
US
OS Preference:
Who Cares
Favorite Browser:
FireFox
Favorite Processor:
Who Cares
Favorite Gaming Platform:
Who Cares
Your Car:
Who Cares
Dream Kudos:
0

Latest Visitors

Icon   JMRKER has not set their status

Posts I've Made

  1. In Topic: Limit text and add ellipsis global function

    Posted 26 Oct 2014

    I maybe going a bit crazy with this, but I've tried to make it more programmer friendly. :)/>

    The following code:
    1. Can have Vertical and Horizontal displays using <ul> and <li> tags
    2. May use Single or Multiple ellipse displays placed as desired using <div> tags
    3. No longer uses a required correct index to saved .innerHTML text display.
    4. Can have variable number of words shown before ellipse display
    5. Allows different widths/colors via use of CSS element changes

    As far as tested, still degrades to visible HTML if JS not enabled.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Multiple Ellipse Horiz/Vert Displays </title>
    
    <style type="text/css">
     .msgSH { border:1px solid black; width:175px; background-color:#ffffdd; margin:3px 0px; }
       #msg li { list-style-type:none; }                     /* horiz & vert display */
       #msg li { display:inline-block; vertical-align:top; } /* horiz display only */
    </style>
    
    </head>
    <body>
    <h2>Ellipse Horizontal/Vertical Displays</h2>
    <ul id="msg">
    
    <li id="msg0" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display #0 without ellipse ending.
    </li>
    
    <li id="msg1" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display #1 without ellipse ending and additional text.
    </li>
    
    <li id="msg2" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display #2 without ellipse ending.
     <p>Multiple lines can be shown.
     <p>Could also include links: <a href="http://www.yahoo.com">Yahoo Homepage</a>
    </li>
    
    <br>
    
    <li id="msg3" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display #3 without ellipse ending.
    </li>
    
    <li id="msg4" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display #4 without ellipse ending and additional text.
    </li>
    
    </ul><p>
    <div id="msgDIV" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
     Sample display (#5) of DIV without ellipse ending.
     Multiple lines can be shown including links to
     <a href="http://www.google.com">Google</a>
    </div>
    
    <script type="text/javascript">
    
    var limitText = function (text, limit) {
        var words = text.split(' ');
        var newWords = [], str = '';
        if (limit == 0) { newWords = words.slice(0); }  // copy ALL words
                   else { newWords = words.slice(0,limit); str = ' ...'; } // limit word copy
        return newWords.join(' ')+str;
    };
    
    var txtLimit = [];  // Holds initial contents of displays in case JS is enabled
    function toggleLimit(IDS) {
      var sh = document.getElementById(IDS).sh;
      var ndx = document.getElementById(IDS).ptr;
      var txt = txtLimit[ndx];  
      if (sh == 'hide') {
        document.getElementById(IDS).sh = 'show';
        document.getElementById(IDS).innerHTML = limitText(txt,0);  // show ALL words
      } else {
        document.getElementById(IDS).sh = 'hide';
        document.getElementById(IDS).innerHTML = limitText(txt,4);  // limit display to 4 words
      }
    }
    window.onload = function() {
      var sel = document.getElementsByClassName('msgSH');
      for (var i=0; i<sel.length; i++) {
        txtLimit.push(document.getElementById(sel[i].id).innerHTML);
        sel[i].ptr = i.toString();
        toggleLimit(sel[i].id);
      }
    }
    </script>
    
    </body>
    </html>
    
    
  2. In Topic: Limit text and add ellipsis global function

    Posted 26 Oct 2014

    @laytonsdad:

    That last post was very interesting to me. I played with it to create MULTIPLE ellipse displays.
    Pretty easy to change sizes and colors within the display as well as add other elements
    if you don't plan on doing much additional processing.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Multiple Ellipse Displays </title>
    <style type="text/css">
     .msgSH { border:1px solid red; width:175px; background-color:#fff000; }
    </style>
    
    </head>
    <body>
    <h2>Ellipse Displays</h2>
    <div id="msg0" sh='show' class="msgSH" onclick="toggleLimit(this.id,0)">
     Sample display #0 without ellipse ending.
    </div><p>
    <div id="msg1" sh='show' class="msgSH" onclick="toggleLimit(this.id,1)">
     Sample display #1 without ellipse ending and additional text.
    </div><p>
    <div id="msg2" sh='show' class="msgSH" onclick="toggleLimit(this.id,2)">
     Sample display #2 without ellipse ending.
     <p>Multiple lines can be shown.
     <p>Could also include links <a href="http://www.nova.edu/~rumsey">Homepage</a>
    </div><p>
    
    <script type="text/javascript">
    
    var limitText = function (text, limit) {
        var words = text.split(' '),
        wordsStart = words.length,
        newWords = words.slice(0, limit);
        
        if (wordsStart > limit) { return newWords.join(' ') + " ..."; }
                           else { return newWords.join(' '); }
    };
    
    var txtLimit = [];  // Holds initial contents of displays incase JS is enabled
    
    function toggleLimit(IDS,ndx) {
      var sh = document.getElementById(IDS).sh;
      var txt = txtLimit[ndx];  
      if (sh == 'hide') {
        document.getElementById(IDS).sh = 'show';
        document.getElementById(IDS).innerHTML = limitText(txt,1000);  // txt.length);
      } else {
        document.getElementById(IDS).sh = 'hide';
        document.getElementById(IDS).innerHTML = limitText(txt,4);
      }
    }
    
    window.onload = function() {
      var sel = document.getElementsByClassName('msgSH');
      for (var i=0; i<sel.length; i++) {
        txtLimit.push(document.getElementById(sel[i].id).innerHTML);
        toggleLimit(sel[i].id,i);
      }
    }
    
    </script>
    
    </body>
    </html>
    
    



    I then went on to create a multiple column drop display with a bit more modifications to your code.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Ellipse Horizontal Displays </title>
    <style type="text/css">
     .msgSH { border:1px solid black; width:175px; background-color:#ffffdd; }
     #msg li { list-style-type:none; display:inline-block; vertical-align:top; }
    </style>
    
    </head>
    <body>
    <h2>Ellipse Horizontal Displays</h2>
    <ul id="msg">
    <li id="msg0" sh='show' class="msgSH" onclick="toggleLimit(this.id,0)">
     Sample display #0 without ellipse ending.
    </li>
    <li id="msg1" sh='show' class="msgSH" onclick="toggleLimit(this.id,1)">
     Sample display #1 without ellipse ending and additional text.
    </li>
    <li id="msg2" sh='show' class="msgSH" onclick="toggleLimit(this.id,2)">
     Sample display #2 without ellipse ending.
     <p>Multiple lines can be shown.
     <p>Could also include links <a href="http://www.nova.edu/~rumsey">Homepage</a>
    </li>
    </ul>
    
    <p>
    
    <script type="text/javascript">
    
    var limitText = function (text, limit) {
        var words = text.split(' '),
        wordsStart = words.length,
        newWords = words.slice(0, limit);
        
        if (wordsStart > limit) { return newWords.join(' ') + " ..."; }
                           else { return newWords.join(' '); }
    };
    
    var txtLimit = [];  // Holds initial contents of displays incase JS is enabled
    
    function toggleLimit(IDS,ndx) {
      var sh = document.getElementById(IDS).sh;
      var txt = txtLimit[ndx];  
      if (sh == 'hide') {
        document.getElementById(IDS).sh = 'show';
        document.getElementById(IDS).innerHTML = limitText(txt,1000);  // txt.length);
      } else {
        document.getElementById(IDS).sh = 'hide';
        document.getElementById(IDS).innerHTML = limitText(txt,4);
      }
    }
    
    window.onload = function() {
      var sel = document.getElementsByClassName('msgSH');
      for (var i=0; i<sel.length; i++) {
        txtLimit.push(document.getElementById(sel[i].id).innerHTML);
        toggleLimit(sel[i].id,i);
      }
    }
    
    </script>
    
    </body>
    </html>
    
    


    Both forms of display seem to degrade well in the case where JS is not enabled.

    Thanks for the idea. :)/>
  3. In Topic: I need to delete min and max values from array

    Posted 16 Oct 2014

    One (of many) possible solution...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    
    <script type="text/javascript">
    
    Array.prototype.removeMin = function() {
      var p = 0,  min = this[p], arr = [];
      for (var i=0; i<this.length; i++) { arr.push(this[i]);
        if (this[i] < min) { p = i; min = this[i]; }
      }
      arr.splice(p,1);
      return arr;
    }
    Array.prototype.removeMax = function() {
      var p = 0,  max = this[p], arr = [];
      for (var i=0; i<this.length; i++) { arr.push(this[i]);
        if (this[i] > max) { p = i; max = this[i]; }
      }
      arr.splice(p,1);
      return arr;
    }
    var origArray = [5,4,3,2,1,10,9,8,7,6];
    var minRemoved = origArray.removeMin();
    var maxRemoved = origArray.removeMax();
    
    alert('orig: '+origArray+'\n\nmin removed: '+minRemoved+'\n\nmax removed: '+maxRemoved);
    </script>
    
    </body>
    </html>
    


    You could combine the two functions into one, if desired.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    
    <script type="text/javascript">
    
    Array.prototype.removeMin = function() {
      var p = 0,  min = this[p], arr = [];
      for (var i=0; i<this.length; i++) { arr.push(this[i]);
        if (this[i] < min) { p = i; min = this[i]; }
      }
      arr.splice(p,1);
      return arr;
    }
    Array.prototype.removeMax = function() {
      var p = 0,  max = this[p], arr = [];
      for (var i=0; i<this.length; i++) { arr.push(this[i]);
        if (this[i] > max) { p = i; max = this[i]; }
      }
      arr.splice(p,1);
      return arr;
    }
    Array.prototype.MinMaxRemove = function() {
      var min = this[0], max = this[0], arr = [];
      for (var i=0; i<this.length; i++) { // arr.push(this[i]);
        if (this[i] < min) { min = this[i]; }
        if (this[i] > max) { max = this[i]; }
      }
      for (var i=0; i<this.length; i++) { 
        if (this[i] != min && this[i] != max) { arr.push(this[i]); }
      }
      return arr;
    }
    
    
    var origArray = [5,4,3,2,1,10,9,8,7,6];
    var minRemoved = origArray.removeMin();
    var maxRemoved = origArray.removeMax();
    var minmaxOut  = origArray.MinMaxRemove();
    
    alert('orig: '+origArray+'\n\nmin removed: '+minRemoved+'\n\nmax removed: '+maxRemoved+'\n\nUnique: '+minmaxOut);
    </script>
    
    </body>
    </html>
    
  4. In Topic: Double dropdown list layout (first javascript project)

    Posted 15 Oct 2014

    This part of your code ...

    SList.scontent = {
    078	 "145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/145/">Jetzt suche</button> ',
    079	  "146": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/146/">CJetzt suche</button> ',
    080	   "145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/155/">Jetzt suche</button> ',
    081	 
    082	};
    
    

    ... will not work even if you get the display as you desire.
    You have the wrong syntax for the onclick assignment.
  5. In Topic: Jumping to next input field when enter is clicked

    Posted 15 Oct 2014

    View PostXorana, on 14 October 2014 - 03:29 AM, said:

    Hi,

    I have the below code. I want the cursor to jump to the next input field when the user clicks enter.
    It all works, ...???
    [snip]


    How does it work?
    Where does the keycode for the event of the key being pressed get sampled or passed to the 'jump' function?
    How is it supposed to get back to the not-select after the 1st 3 entries when there is no directing to the 1st tabindex?

My Information

Member Title:
D.I.C Addict
Age:
Age Unknown
Birthday:
Birthday Unknown
Gender:
Location:
Florida
Programming Languages:
javascript, perl, java, forth, basic, fortran, assembly (several)

Contact Information

E-mail:
Private
Website URL:
Website URL  http://

Comments

JMRKER has no profile comments yet. Why not say hello?