Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
    </script>
  
​
​
    <script type="text/javascript">
​
        $(document).ready(function(dis) {
            $("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
​
​
            for(var i=0; i<7; i++){
                $("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
            }
        });
​
​
    </script>
​
    <style type="text/css">
        div.movieListBox_trans{
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            background: yellow;
            opacity: 0,5;
            overflow: hidden;
        }
​
        div.filmdiv{
            float: left;
            width: 350px;
            height: 180px;
            margin: 15px;
        }
​
        div.metadiv{
            float: right;
            background: #DCDCDC;
            border-style: solid;
            border-width: 1px;
            border-color: #D3D3D3; 
            width: 200px;
            height: 180px;
            border-style:solid;
​
            background:rgba(0, 0, 0, 0.6);
            border-top: 2px solid rgba(255,255,255,0.5);
            color:rgb(255,255,255);
            box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
        }
​
        img.poster{
            float: left;
            border-style:solid;
            width: 115px;
            height: 180px;
​
            border-width: 1px;
            border-color: #D3D3D3; 
            background:rgba(0, 0, 0, 0.6);
            border-top: 2px solid rgba(255,255,255,0.5);
            color:rgb(255,255,255);
            box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
        }
​
        img.posterClickableNoMargin{
            float: left;
            border-style:solid;
            width: 115px;
            height: 180px;
​
            border-width: 3px;
            border-color: black; 
            box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
        }
​
​
    </style>
​
</head>
​
​
    <body>
           <div id="displayBoxFind" class="movieListBox_trans"></div>
    </body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers