Search code examples
cssresizejsfiddletilemasonry

Code works in JSFiddle but doesn't work in Dreamweaver (no jquery involved)

I understand this question has been asked before but most of them ended up having some illegal characters or a missing jquery call which I don't.

THE STORY:

I wanted to use Masonry to create a cascading grid tile layout with gaps in-between the tiles filled. In addition, I wanted the tiles to be manually resizable with the CSS3 'resize' property. I wrote the code in Dreamweaver but couldn't get the Masonry feature to work, so I thought I would paste my code on jsFiddle and post a question here asking for advice.

To my surprise, the code managed to work on jsFiddle. However, when I went back to try it again on Dreamweaver it didn't work.

As you can see in the screenshots below, in jsFiddle the code works fine and the Masonry feature works (the gap in between the tiles are filled), whereas in Dreamweaver Masonry doesn't work.

This is a screenshot of the code in jsfiddle - Masonry works and the gaps between tiles are filled:

http://postimg.org/image/5zb1nrd1f/

And here is a screenshot of the code in Dreamweaver - Masonry not working

http://postimg.org/image/qyr5f9epv/

This is my code:

<!doctype html>
<html>
<head>

<script src="masonry.pkgd.min.js"></script>

<script>

var container = document.querySelector('.wall');
var msnry = new Masonry( container, {
  // options
  columnWidth: 20,
  itemSelector: '.box'
});

</script>

<style>

.box
    {background-color:purple;
    text-align:center;
    border: 4px solid aquamarine;
    height:250px;
    width:250px;
    float:left;
    margin:5px;
    }


.box.b
    {background-color:yellowgreen;
    text-align:center;
    border: 4px solid pink;
    height:400px;
    width:250px;
    float:left;
    margin:5px;
    }

</style>
</head>
<body>

<div class="wall">


    <div class="box "></div>


    <div class="box b "></div>


    <div class="box"></div>


    <div class="box b "></div> 


    <div class="box b"></div>


    <div class="box"></div>


    <div class="box"></div>

</div> 

</body>
</html>
Solution

  • Place your Masonry code just before </body>, not in <head>, it works in JSFiddle because it loads your code onLoad.

    Here's your case (it doesn't work):

    http://jsfiddle.net/bartkarp/umnh1d0c/1/

    And here's the same code in body tag:

    http://jsfiddle.net/bartkarp/umnh1d0c/2/

    Code in Body vs Header

    So your code should look more like:

    <!doctype html>
<html>
<head>

<script src="masonry.pkgd.min.js"></script>

<style>

.box
    {background-color:purple;
    text-align:center;
    border: 4px solid aquamarine;
    height:250px;
    width:250px;
    float:left;
    margin:5px;
    }


.box.b
    {background-color:yellowgreen;
    text-align:center;
    border: 4px solid pink;
    height:400px;
    width:250px;
    float:left;
    margin:5px;
    }

</style>
</head>
<body>

<div class="wall">


    <div class="box "></div>


    <div class="box b "></div>


    <div class="box"></div>


    <div class="box b "></div> 


    <div class="box b"></div>


    <div class="box"></div>


    <div class="box"></div>

</div> 

<script>

var container = document.querySelector('.wall');
var msnry = new Masonry( container, {
  // options
  columnWidth: 20,
  itemSelector: '.box'
});

</script>

</body>
</html>

    Basically you were trying to run Masonry before the DOM was ready, by placing your JS right before </body> closing tag you can be sure the DOM is ready before you attempt to modify it.