javascript - jQuery's plugin Isotope, cutting parts of images -
firstable, being on page! working on application launcher. won't talk much. thing have is bugging. isotope bugged.
you can watch yourself: http://cloudje.nl/beta/launcher.php
thank taking @ ;).
does have answer on question: why bugging?
please, give answer if think know more , know how fix it. can view sourcecode of page below.
it's dutch page , it's full of html/css errors, know.
thanks, amanush!
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>cloudje.nl, van harte welkom!</title> <meta name="description" content="cloudje.nl een manier om als consument of bedrijf veilig in de cloud te werken! al uw bestanden staan veilig in onze kluis."> <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" type="text/css" media="all" href="css/global.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" language="javascript" charset="utf-8" src="js/bootstrap.min.js"></script> <style type="text/css"> html, body { margin: 0px; padding: 0px; border: 0px; background: url('./images/bg.jpg') no-repeat; filter: progid:dximagetransform.microsoft.alphaimageloader(src='./images/bg.jpg', sizingmethod='scale'); -ms-filter: "progid:dximagetransform.microsoft.alphaimageloader(src='./images/bg.jpg', sizingmethod='scale')"; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #container { width: 100%; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #fff; } #container h1 { margin: 0; padding: 0; width: 100%; text-align:center; color:lightblue; } #container #col1 { width: 15%; float: left; } #container #col2outer { width: 85%; float: right; margin: 0; padding: 0; } #col2outer #col2mid { width: 60px; float: left; } #col2outer #col2side { width: 25%; float: right; color: lightblue; } #container #footer { float: left; width: 870px; border-top: #c00 solid 3px; } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px arial,helvetica,sans-serif; color: #d7d7d7; width:150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: 0.7s ease 0s; -moz-transition: 0.7s ease 0s; -o-transition: 0.7s ease 0s; transition: 0.7s ease 0s; } #search input[type="text"]:focus { background: url(search-dark.png) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); } </style> </head> <body> <br/> <div id="container"> <div id="col1"> <p></p> </div> <div id="col2outer"> <div id="col2mid"> <p><h1>applicaties</h1></p> <div id="apps"> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'skype'> <div class="app"> <img src="./img/apps/skype.png"> <p id="text">skype</p> </div> </a> <a onclick="openwindow('http://tumblr.com/','tumblr')"> <div class="app"> <img src="./img/apps/tumblr.png"> <p id="text">tumblr</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'firefox'> <div class="app"> <img src="./img/apps/firefox.png"> <p id="text">firefox</p> </div> </a> <a href="cloudje:gnome-calculator"> <div class="app"> <img src="./img/apps/calculator.png"> <p id="text">rekenmachine</p> </div> </a> <a href="cloudje:teamviewer"> <div class="app"> <img src="./img/apps/teamviewer.png"> <p id="text">teamviewer</p> </div> </a> <a href="#"> <div class="app"> <img src="./img/apps/appmarket.png"> <p id="text">app market</p> </div> </a> <a href="cloudje:googleearth"> <div class="app"> <img src="./img/apps/googleearth.png"> <p id="text">google earth</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'gedit'> <div class="app"> <img src="./img/apps/notepad.png"> <p id="text">kladblok (gedit)</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'gimp'> <div class="app"> <img src="./img/apps/gimp.png"> <p id="text">gimp</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'openshot'> <div class="app"> <img src="./img/apps/openshot.png"> <p id="text">openshot</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'filezilla'> <div class="app"> <img src="./img/apps/filezilla.png"> <p id="text">filezilla</p> </div> </a> <a onclick="openwindow('http://google.com/','google')"> <div class="app"> <img src="./img/apps/google.png"> <p id="text">google (zoeken)</p> </div> </a> <a href="cloudje:spotify"> <div class="app"> <img src="./img/apps/spotify.png"> <p id="text">spotify</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'libreoffice_--writer'> <div class="app"> <img src="./img/apps/word.png"> <p id="text">word (writer)</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'libreoffice_--calc'> <div class="app"> <img src="./img/apps/excel.png"> <p id="text">excel (calc)</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'libreoffice_--impress'> <div class="app"> <img src="./img/apps/powerpoint.png"> <p id="text">powerpoint (im.)</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'geany'> <div class="app"> <img src="./img/apps/geany.png"> <p id="text">geany</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'vlc'> <div class="app"> <img src="./img/apps/vlc.png"> <p id="text">vlc</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'geogebra'> <div class="app"> <img src="./img/apps/geometric.png"> <p id="text">geogebra</p> </div> </a> <a onclick="openwindow('http://twitter.com/','twitter')"> <div class="app"> <img src="./img/apps/twitter.png"> <p id="text">twitter</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'blender'> <div class="app"> <img src="./img/apps/blender.png"> <p id="text">blender</p> </div> </a> <a onclick="openwindow('http://chrome.angrybirds.com/','angry birds')"> <div class="app"> <img src="./img/apps/angrybirds.png"> <p id="text">angry birds</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'calibre'> <div class="app"> <img src="./img/apps/calibre.png"> <p id="text">calibre</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'keepassx'> <div class="app"> <img src="./img/apps/lock.png"> <p id="text">keepassx</p> </div> </a> <a onclick="openwindow('http://linkedin.com/','linkedin')"> <div class="app"> <img src="./img/apps/linkedin.png"> <p id="text">linkedin</p> </div> </a> <a href=cloudje:xchat> <div class="app"> <img src="./img/apps/xchat.png"> <p id="text">xchat (irc)</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'liferea'> <div class="app"> <img src="./img/apps/liferea.png"> <p id="text">liferea (rss)</p> </div> </a> <a onclick="openwindow('http://facebook.com/','facebook')"> <div class="app"> <img src="./img/apps/facebook.png"> <p id="text">facebook</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'pidgin'> <div class="app"> <img src="./img/apps/pidgin.png"> <p id="text">pidgin messenger</p> </div> </a> <a href="cloudje:steam"> <div class="app"> <img src="./img/apps/steam.png"> <p id="text">steam</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'inkscape'> <div class="app"> <img src="./img/apps/inkscape.png"> <p id="text">inkscape</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'gnome-mplayer'> <div class="app"> <img src="./img/apps/mplayer.png"> <p id="text">mplayer</p> </div> </a> <a onclick="openwindow('http://youtube.com/','youtube')"> <div class="app"> <img src="./img/apps/youtube.png"> <p id="text">youtube</p> </div> </a> <a href=cloudje:sshpass_-p_"d44n"_ssh_-yc_d.gonning@ssh.cloudje.nl_'nautilus'> <div class="app"> <img src="./img/apps/filemanager.png"> <p id="text">bestandsbeheer</p> </div> </a> </div> </div><br/> <div id="col2side"> <form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="search..." /> </form> <p><h4>alles</h4><h4>spellen</h4><h4>grafisch</h4><h4>internet</h4><h4>kantoor</h4><h4>media</h4></p> </div> </div> </div> <script src="js/jquery.js"></script> <script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script> <script src="js/bootstrap.js"></script> <script> function openwindow(url,name){ window.open(url,name,'width=1080,height=550,scrollbars=no,toolbar=no,location=no'); return false; } //$(document).ready(function(){ $(window).load(function(){ var $container = $('#apps'); $container.isotope({ itemselector: '.app' }); }); //}); </script> </body> </html>
because explicitly asking width: 60px #col2outer #col2mid rule. developer tools these situations. f12 opens them in browsers. change larger 600px , icons arranged in grid.
Comments
Post a Comment