SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Create an effect in javascript

    Good afternoon, this is my first post.

    I am studying javascript and I thought to use the same effect found in the iPad iBooks.

    It is a shelf (static object, even just an image), but when you buy a book you can put this shelf. You can also drag it, change the shelf and everything else just like a real bookshelf in the house of people.

    Thank you.

    Carlos Paiva

  2. #2
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hat sanatı örnekleri</title>
    <style type="text/css">
    #duvar {position: absolute;top:0px; left: 0px;}
    #duvar td  { width: 161px; height: 100px;border: 5px solid gold; text-align: center; vertical-align: top;}
    /*http://www.w3schools.com/css/css_table.asp*/
    #pano {position: absolute;top:350px; left: 0px; }
    img { width: 161px; height: 100px;  }
    
    </style>
    </head>
    <body>
    <table id="duvar">
    <tr>
    <td> o </td>
    <td> o </td>
    <td> o </td>
    <td> o </td>
    <td> o </td>
    </tr>
    </table>
    
    
    <div id="pano"> <h3>click images</h3>
    <span>
    <img  src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
    </span>
    <span>
    <img src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
    </span>
    <span>
    <img src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
    </span>
    <span>
    <img src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
    </span>
    <span>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQt47W1_aYnNfBfYqOLiaotnc8PHXXDPduNk76F6uxPqetP8K9BpQ" alt="besmele">
    </span>
    <span>
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSA5k-EGh_WH-v-qyOaBfYHRaKwK9WGENkzOh_-8Ip-g0VJWNgwCwg" alt="simetrik besmele">
    </span>
    <span>
    <img src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="hat ile Allah yazısı">
    </span>
    <span>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTdW2IUtlwY2ebN87Pv74cYukIwLwx9MQ6b97-ybKKErtI8zO_6" alt="besmele armut">
    </span>
    <span>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPDR-1C3O0kPbbuSBFGWCdc2yMTtVKUipPH6bqnTOvAiDodhkE" alt="besmele tuğrası">
    </span>
    <span>
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQtGzNfHNqHNPaJE8ei5U_QnexxeV2bUKlxmK6GL6Ai1n7zcOgIbw" alt="">
    </span>
    </div>
    
    <script type="text/javascript">
    // http://www.sitepoint.com/forums/showthread.php?809776-Create-an-effect-in-javascript&
    
    var A = [0,1,2,3,4];
    var B = [], r;
    var L = A.length;
    for(var i=0; i< L; i++) {
    r = Math.floor(Math.random() * A.length );
    B[B.length]= A[r];
    A.splice(r,1);    //  http://www.w3schools.com/jsref/jsref_splice.asp
    }
    // alert(B);
    
    var n=0;
    // resimleri duvara as
    function duvaraAs(resim) {
    
    var el= document.getElementById('duvar');
    var td = el.getElementsByTagName('td');
    //td[B[n]].innerHTML += resim.parentNode.innerHTML;
    td[B[n]].innerHTML = resim.parentNode.innerHTML;
    //resim.parentNode.innerHTML="";
    
    n++;
    if(n== B.length) {n=0; }
    }
    
    function imageClick() {
        duvaraAs(this);
    }
    
    var images = document.getElementsByTagName('img'),
        i;
    for (i = 0; i < images.length; i += 1) {
    	images[i].onclick = imageClick;
    }
    
    </script>
    
    </body>
    </html>
    search google
    drag and drop javascript
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry because I was on vacation and came back today. His response is brilliant. Will look into the best implementations that I can give.

    Again, thanks a lot.


Bookmarks

Posting Permissions

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