How Do I Get A Script To Load Before Masonry?
I'm quite new to javascript so bear with me if this is described quite horribly... I'm sure there's a simple solution if someone could take the time to check this code for me: http
Solution 1:
Hi it's me @Rishit Bansal again! I finally looked into your problem in detail and got the tested solution! There was a lot of new edits than the previous anser so i posted a new answer.... Ok anyway here is what you have to do- 1. Make a new js file and call it arrangemasonry.js . Here is the code in arrangemasonry.js-
var container = document.querySelector('#container');
var msnry = newMasonry( container, {
itemSelector: '.item'
});
2.save the file in the same folder as index.html. 3.Here is the index.html edited correct code-
index.html-
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" /><title>Masonry</title><styletype="text/css">body {
background-image: url(http://www.nang-nang.net/concrete3.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'bebas_neueregular';
src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot');
src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.woff') format('woff'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.ttf') format('truetype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: "bebas_neueregular", Arial Narrow, Arial;
font-size: 60px;
font-weight: 100;
line-height: 0px;
margin-bottom: 10px;
color: #666666;
text-transform: uppercase;
}
h2 {
font-family: "bebas_neueregular", Arial;
font-size: 20px;
font-weight: 100;
line-height: 20px;
color: #a80000;
text-transform: uppercase;
}
a:link {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
a:active {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
a:hover {
color: #a9a9a9;
border-bottom: 0px;
text-decoration: none;
}
a:visited {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
.item {
width: 300px;
left: 0px;
margin-right: 10px;
margin-bottom: 10px;
padding: 20px;
background-image: url(http://www.nang-nang.net/portfolio/images/80bg.png);
font-family: Lucida Grande, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style></head><body><divid="container"><!-- ///// ONE /////--><divclass="item"><h1>Nang-nang</h1><fontface="Times New Roman, Times, serif"size="5">
..................................................
</font><divstyle="font-size:14px;">nang-nang.net is the portfolio of digital designer Sam Roberts, who also goes by the online moniker <em>bubblejam</em></div></div><!-- ///// TWO /////--><divclass="item"><ahref="http://bubblejam.tumblr.com/tagged/places-I-have-worked"target="_blank"><h1>Worked for</h1></a><fontface="Times New Roman, Times, serif"size="5">
..................................................
</font><spanstyle="font-family:Lucida Grande, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;"><ahref=""target="_blank"style="text-decoration:none;">Ted Baker</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/ASOS"target="_blank"style="text-decoration:none;">ASOS</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/by-the-scruff"target="_blank"style="text-decoration:none;">By The Scruff</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/joythestore"target="_blank"style="text-decoration:none;">JOY</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/vice"target="_blank"style="text-decoration:none;">Vice</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/tv-print-factory"target="_blank"style="text-decoration:none;">TV Print Factory</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/buballs"target="_blank"style="text-decoration:none;">Buballs</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/don%27t-panic"target="_blank">
Don't Panic</a><fontcolor="#000000"size="-3">•</font><ahref="http://bubblejam.tumblr.com/tagged/twentysix-london"target="_blank">
Twentysix Digital</a></span></div><!-- ///// THREE /////--><divclass="item"><h2>Nang-nang photoblog</h2><!--start of tumblr script
taken from http://jiapps.com/free-stuff/tumblr-widget-for-your-website.html
--><divclass='ji-tumblr-photos'style="max-width:280px; overflow:hidden; border:solid 10px white; text-align:center;"><aid='ji-tumblr-url--1'href=''><imgborder='0'style='margin-left:-25%;'id='ji-tumblr-photo--1'src=''alt='' /></a></div><scripttype='text/javascript'src='http://bubblejam.tumblr.com/api/read/json?number=1&type=photo'></script><scripttype='text/javascript'>document.getElementById('ji-tumblr-photo--1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-400']);
document.getElementById('ji-tumblr-url--1').setAttribute('href', 'http://bubblejam.tumblr.com');
</script><!-- end of tumblr script--><br />A collection of illustration, art, GIFs, cartoons, music, fashion, videos & all round design that I find candid or inspirational. <em>Since Aug 2012.</em><br /><br /><ahref="http://bubblejam.tumblr.com"target="_blank"title="bubblejam on Tumblr">bubblejam on tumblr >></a></div><!-- ///// FOUR /////--><divclass="item"><h2>Instagram</h2><!-- SnapWidget --><iframesrc="http://snapwidget.com/in/?u=bmFuZ25hbmduZXR8aW58MjgwfDF8MXx8bm98MHxub25lfG9uU3RhcnR8bm8=&v=19414"title="Instagram Widget"allowTransparency="true"frameborder="0"scrolling="no"style="border:solid 10px white; overflow:hidden; width:280px; height:280px"></iframe><br /><br /><ahref="http://instagram.com/nangnangnet"target="_blank"title="nangnangnet on Instagram">nangnangnet on Instagram >></a></div><!-- ///// FIVE /////--><divclass="item"><iframewidth="300"height="300"src="tweets2.html"frameborder="0"scrolling="no"></iframe><br /><br /><ahref="http://twitter.com/bubblejam"target="_blank"title="bubblejam on twitter">bubblejam on twitter >></a></div></div><scripttype="text/javascript">functiondownloadJSAtOnload() {
var element = document.createElement("script");
element.src = "arrangemasonry.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
elseif (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
elsewindow.onload = downloadJSAtOnload;
</script><scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script><scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scriptsrc="masonry.pkgd.min.js"></script></body></html>3.This should work as i have tested it.Wait patiently for the page to load as the images will get arranged only after the images have full loaded.Tell me if you have any further problems.
Solution 2:
I think this might work out for you- Keep the tumblr code in the index.html file itself between some script tags. Now you can write some javascript like this so that the external masonry file is loaded only after the index page has loaded-
<scripttype="text/javascript">functiondownloadJSAtOnload() {
var element = document.createElement("script");
element.src = "masonry.pkgd.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
elseif (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
elsewindow.onload = downloadJSAtOnload;
</script>I hope this solved your problem! If you didnt understand a part of my answer i am free to more edits, just comment.... PS:Be sure to remove any script tags you added before to masonry.pkgd.min.js
Post a Comment for "How Do I Get A Script To Load Before Masonry?"