dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: New to Javascript need some help

  1. #1
    Join Date
    May 2015
    Location
    London
    Posts
    1

    New to Javascript need some help

    I want to make a read more/less link on my website. I have made a start but it doesn't seem to be working. Please could someone help?
    I am probably doing this all wrong but could someone point me in the right direction. Thanks

    HTML Code:
    <section class="Reveal">
            <p>tkihihjkldf;hsdjfgkjhnjgdfjjlkd;glkfdjdfjkghfglfhdglkfnjglkhglkdfglkfklgjflkgfjkgjfdlgkjfg
                tkihihjkldf;hsdjfgkjhnjgdfjjlkd;glkfdjdfjkghfglfhdglkfnjglkhglkdfglkfklgjflkgfjkgjfdlgkjfg
                tkihihjkldf;hsdjfgkjhnjgdfjjlkd;glkfdjdfjkghfglfhdglkfnjglkhglkdfglkfklgjflkgfjkgjfdlgkjfg
                tkihihjkldf;hsdjfgkjhnjgdfjjlkd;glkfdjdfjkghfglfhdglkfnjglkhglkdfglkfklgjflkgfjkgjfdlgkjfg
                tkihihjkldf;hsdjfgkjhnjgdfjjlkd;glkfdjdfjkghfglfhdglkfnjglkhglkdfglkfklgjflkgfjkgjfdlgkjfg</p>
            
            <p><a class="more" href="#">Read More</a></p>
        </section>
    [JAVASCRIPT]
    function test() {
    var Char = document.getElementsByClassName(".Reveal").length;
    if (Char.length < 100) {
    (".more").style.display = "none";
    }
    else {
    (".more").style.display = "normal";
    }
    }
    [/JAVASCRIPT]

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,596
    Welcome to the forums.

    Consider this for a start...
    PHP Code:
     
    <!DOCTYPE html>
    <
    html lang="en">
    <
    head>
    <
    meta charset="UTF-8" />
    <
    title>read more</title>

    <
    style type="text/css">
     
    body {
           
    font-size:80%;
           
    font-family:'Lucida Grande'VerdanaArialSans-Serif;
          }
     .
    read {
            
    position:relative;
            
    width:25em;
            
    border:1px solid #9cf;
            
    padding:0.5em;padding-bottom:1.2em;
           }
     .
    more height:auto; }
     .
    less {
            
    height:4em/* lines of text shown + link */
            
    overflow:hidden;
           }
     .
    readmore {
                
    position:absolute;
                
    width:25em;
                
    bottom:0;left:0;
                
    cursor:pointer;
                
    color:blue;
                
    background:#fff;
                
    padding:0 0 0 0.5em;
               }
    </
    style>
    </
    head>
    <
    body>
     <
    class="read">
      
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh 
      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
    Duis autem vel eum iriure dolor 
      in hendrerit in vulputate velit esse molestie consequat
    vel illum dolore eu feugiat nulla facilisis 
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
      dolore te feugait nulla facilisi
    Mirum est notare quam littera gothicaquam nunc putamus parum claram
      
    anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decimaLorem ipsum 
      dolor sit amet
    consectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet 
      dolore magna aliquam erat volutpat
    Mirum est notare quam littera gothicaquam nunc putamus parum claram
      
    anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decimaEodem modo typi
      
    qui nunc nobis videntur parum clarifiant sollemnes in futurumEodem modo typiqui nunc nobis videntur 
      parum clari
    fiant sollemnes in futurumMirum est notare quam littera gothicaquam nunc putamus parum claram
      
    anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
     </
    p>
     <
    class="read">
      
    Eodem modo typiqui nunc nobis videntur parum clarifiant sollemnes in futurum
      
    Typi non habent claritatem insitamest usus legentis in iis qui facit eorum claritatemEodem modo typi
      
    qui nunc nobis videntur parum clarifiant sollemnes in futurumLorem ipsum dolor sit ametconsectetuer 
      adipiscing elit
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
      
    Investigationes demonstraverunt lectores legere me lius quod ii legunt saepiusNam liber tempor *** 
      
    soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum
      
    Eodem modo typiqui nunc nobis videntur parum clarifiant sollemnes in futurumUt wisi enim ad minim veniam
      
    quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat
      
    Claritas est etiam processus dynamicusqui sequitur mutationem consuetudium lectorumUt wisi enim 
      ad minim veniam
    quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea 
      commodo consequat
    Typi non habent claritatem insitamest usus legentis in iis qui facit eorum claritatem
      
    Claritas est etiam processus dynamicusqui sequitur mutationem consuetudium lectorumNam liber tempor *** 
      
    soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
     </
    p>

    <
    script type="text/javascript">

    function 
    moreLess(obj) {
      var 
    cn=obj.parentNode.className;
      var 
    txt='';
      if(
    cn.indexOf('less')!=-1) {
        
    cn=cn.replace(/less/g,'more');
        
    txt='Read less ...';
      } else {
        
    cn=cn.replace(/more/g,'less');
        
    txt='Read more ...';
      }
      
    obj.parentNode.className=cn;
      
    obj.firstChild.data=txt;
    }
    function 
    Init() {
      var 
    read document.body.getElementsByTagName('p');
      for(var 
    i=0i<read.lengthi++) {
        if(
    read[i].className=='read') {
          
    read[i].className+=' less';
          var 
    more=document.createElement('span');
          
    more.appendChild(document.createTextNode('Read more ...'));
          
    more.className='readmore';
          
    more.onclick=function(){moreLess(this);};
          
    read[i].appendChild(more);
        }
      }
    Init();
    </script>

    </body>
    </html> 
    Note: There are no [JAVASCRIPT] tags on the forum.
    You can use [ code] and [ /code] or [ php] and [ /php] tags (without the spaces)
    to make your script stand out in the post.

  3. #3
    Join Date
    May 2015
    Posts
    14
    One thing you could is take the link element and add an event listener to it that just sets the visibility of the elements you want from the mousedown event or something like that.

  4. #4
    Join Date
    Sep 2007
    Posts
    328
    The code I try:
    Code:
      
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>read more</title>
    
    <style type="text/css">
     body {
           font-size:80%;
           font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
          }
     .oku {
            position:relative;
            width:24em;
            border:40px dotted #932;
            padding:0.5em;padding-bottom:1.2em;
            overflow:hidden;
          color:#911d12;
    
    /*
    http://www.w3schools.com/cssref/pr_pos_overflow.asp
    http://www.w3schools.com/cssref/pr_dim_height.asp
    */
    
           }
     
     .azcok {
                position:absolute;
                width:25em;
                bottom:0;left:0;
                cursor:pointer;
                color:#5e3ada;
                background:white;
                padding:0 0 0 1.5em;
    
               }
    .az { }
    .cok { }
    
    </style>
    </head>
    <body>
    <div class="oku" style="height:143px">
    Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur.Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur.Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur.Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur.Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur.Ne güneş, aya yetişebilir ve ne gece, gündüzü geçebilir; hepsi de bir gökte yüzüp durur. <span class="azcok" onclick="gizlegoster(0)"><span style="display:none" id="az0"> Az </span><span style="display:inline" class="cok" id="cok0">Çok</span> oku ...</span>
     </div>
      <div class="oku" style="height:143px">
      Karanlığı yarıp tan yerini ağartan, geceyi dinlenme zamanı kılan, ay ve güneşi belli bir hesaba göre hareket ettiren , onları zamanı hesaplama ölçütü yapan O'dur. Evrendeki bu düzen, her şeyi bilen ve kudreti her şeyi kuşatan  Allah'ın takdiriyle oluşmuştur.   Karanlığı yarıp tan yerini ağartan, geceyi dinlenme zamanı kılan, ay ve güneşi belli bir hesaba göre hareket ettiren , onları zamanı hesaplama ölçütü yapan O'dur. Evrendeki bu düzen, her şeyi bilen ve kudreti her şeyi kuşatan  Allah'ın takdiriyle oluşmuştur.  <span class="azcok" onclick="gizlegoster(1)"> <span style="display:none" id="az1"> Az </span><span style="display:inline" class="cok" id="cok1">Çok</span> oku ...</span>
     </div>
    
    <script type="text/javascript">
    
    
    function gizlegoster(num) {
    //http://www.webdeveloper.com/forum/showthread.php?311613-New-to-Javascript-need-some-help
    
    // alert(num);
    
    var el = document.getElementsByTagName('div')[num];
    var deger1 = el.style.height;
    
    if(deger1 =="auto"){ el.style.height = "143px";}
    if(deger1 =="143px"){ el.style.height ="auto";}
    
    
     
    
    var sa=document.getElementById('az'+num);  // alert(sa);
    var sc=document.getElementById('cok'+num);
    
    var deger2= sa.style.display;
    // alert(deger);
    var deger3 = sc.style.display;
    sa.style.display = deger3;
    sc.style.display = deger2;
    
    
    }
    </script>
    
    </body>
    </html>
    Last edited by Ayşe; 06-02-2015 at 05:44 AM.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,596
    Quote Originally Posted by Ayşe View Post
    The code I try:
    Code:
      
    ...
    What was wrong with the code I posted?
    For what purpose did you decide to go with a different solution?
    It does not matter to me, but I like to know why the change?

  6. #6
    Join Date
    Mar 2009
    Posts
    559
    Although there isn't currently support for this in IE or Firefox you might look at the HTML5 DETAILS/SUMMARY tags. I'm not totally sure but I think there is a polyfill which implements them if the browser doesn't naturally support them.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,596
    Quote Originally Posted by Tcobb View Post
    Although there isn't currently support for this in IE or Firefox you might look at the HTML5 DETAILS/SUMMARY tags. I'm not totally sure but I think there is a polyfill which implements them if the browser doesn't naturally support them.
    What is this in reference to? It appears to be totally off-topic to the OP's dilema.

  8. #8
    Join Date
    Mar 2009
    Posts
    559
    What is this in reference to? It appears to be totally off-topic to the OP's dilema.
    Maybe I misunderstood what the OP was asking for. I was under the impression he wanted to have a mechanism for allowing a user to click on an element if they wanted more information in which case more text would appear, which is exactly what the DETAILS/SUMMARY tags do and are for.

    My apologies for my stupidity. I won't pollute this forum with my input again.

    Adios.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,596
    Sorry. No offense intended.

    It could be that I don't understand the problem either
    and your opinion/help/suggestions are better than mine.
    Can you reference the new tags you are recommending?

    I'll leave it to OP for further clarification.

  10. #10
    Join Date
    Sep 2007
    Posts
    328
    I tried jmrker's code. The code is working. But I wanted to try el.style...


    I searched "HTML5 DETAILS/SUMMARY " at Google.
    I loot at these:
    http://www.w3schools.com/tags/tag_summary.asp
    http://www.w3schools.com/jsref/dom_obj_summary.asp // var x = document.createElement("SUMMARY");

    http://www.w3schools.com/tags/tag_details.asp

    http://www.w3schools.com/jsref/dom_obj_details.asp
    http://www.w3schools.com/jsref/tryit...details_create

    I open this page
    http://www.w3schools.com/tags/tryit....yhtml5_summary
    in chrome. when I click the <summary> tag, <p> tag is displayed or hidden.

    I open the page in firefox 38.0.5 and internet explorer 11. I click the <summary> tag. Nothing happens.

    I write new code:

    Code:
      
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    .gizle {display:none;}
    .goster { display:block;}
    </style>
    
    
    <body>
    
    <details>
      <summary>Konunun özeti burada</summary>
      <p> Konu ile ilgili açıklamalar burada.</p>
      <p>Değerlendirme ve sonuç.</p>
    </details>
    
    
    
    
    <script type="text/javascript">
    
    
    var el = document.getElementsByTagName('details');
    /*
    alert(el); // object HTMLCollection;
    alert(el[0]); // object HTMLUnknownElement
    alert(el.length);//1
    alert(el[0].innerHTML);
    */
    
    el[0].setAttribute("style","color:blue");
    
    var su= el[0].getElementsByTagName("summary")[0];
    
    var pp = el[0].getElementsByTagName("p");
    //alert(pp.length);//2
    
     for(var i=0; i< pp.length; i++) {
      var b= pp[i].setAttribute("class","gizle"); 
     }
    
       su.onclick=function() {
       var cls= pp[0].getAttribute('class');
       // alert(cls);
    
         for(var i=0; i< pp.length; i++) {
         if(cls=="gizle" ) { pp[i].setAttribute("class","goster");    } 
         if( cls=="goster" ) { pp[i].setAttribute("class","gizle");   } 
         }
       }
    
    
    // This code is working in internet explorer 11 and firefox 38.0.5
     
    </script>
    
    </body>
    </html>


    Code:
      
    <!DOCTYPE html>
    <html>
    <body>
    
    <script type="text/javascript">
    var d= document.createElement("details");
    var s= document.createElement("summary");
    var p= document.createElement("p");
    var p2= document.createElement("p");
    
    
    var ozet = document.createTextNode("Burada özet var.");
    var metin = document.createTextNode("Burada metin var.");
    var sonuc = document.createTextNode("Sözün bittiği yer.");
    
    s.appendChild(ozet);
    p.appendChild(metin);
    p2.appendChild(sonuc);
    
    p.setAttribute("hidden",""); // http://www.w3schools.com/tags/att_global_hidden.asp
    
    p2.setAttribute("hidden",""); // http://www.w3schools.com/jsref/met_element_setattribute.asp
    
    s.setAttribute("style", "background-color: blule;");
    s.style.color= "#ada";
       s.onclick=function(){
       // alert( p.hasAttribute("hidden")); // http://www.w3schools.com/jsref/met_element_hasattribute.asp
       if( p.hasAttribute("hidden") ){
       p.removeAttribute("hidden");      // http://www.w3schools.com/jsref/met_element_removeattribute.asp
       p2.removeAttribute("hidden");
       }
       else{
       p.setAttribute("hidden","");
       p2.setAttribute("hidden","");
       }
    
    
      // alert(document.body.innerHTML);
      // alert(this); // object HTMLUnknownElement
      //alert(this.parentNode); // object HTMLUnknownElement
      //alert(this.nextSibling);  // object HTMLParagraphElement
      // http://www.w3schools.com/jsref/prop_node_nextsibling.asp
    
      }
    
    d.appendChild(s);
    d.appendChild(p);
    d.appendChild(p2);
    
    document.body.appendChild(d);
    //alert(document.body.innerHTML);
    
    </script>
    
    </body>
    </html>

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,596
    I open the page in firefox 38.0.5 and internet explorer 11. I click the <summary> tag. Nothing happens.
    If you look a bit further, you will find that the <summary> and <details> tags are NOT supported in IE or FireFox yet.

    See: http://www.w3schools.com/tags/tag_summary.asp
    and http://www.w3schools.com/tags/tag_details.asp

    Limited to Chrome (12), Safari (6) and Opera (15) at this time.
    Last edited by JMRKER; 06-04-2015 at 03:58 PM.

Thread Information

Users Browsing this Thread

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

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