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
    SitePoint Addict
    Join Date
    Aug 2006
    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
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
  •