Overlapping in Masonry onload - masonry

I'm having the classic overflow problem with masonry. I'm trying to load twitter cards but onload, they are still overlapping each other. They work once the screen is resized. FYI, I have imageLoad and masonry in there for sure. I'm doing this in rails so not sure how I would make a jsfiddle. Any help is much appreciated. Thanks!
here is my js code:
$(document).ready(function() {
$('.container').imagesLoaded( function(){
$('.container').masonry({
columnWidth: '.tweet-box',
itemSelector: '.tweet-box'
});
});
});
index.html.erb:
<main class="container">
<% #tweet.search("cnn").take(9).each do |j| %>
<section class="tweet-box">
<p>
<blockquote class="twitter-tweet"><p></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</section>
<% end %>
</main>

I ended up fixing my problem with some recursion. FYI, I don't know if this is the best fix but it got it working for me. Open to a better answer if someone has anything.
$(document).ready(function() {
check_size();
check_width();
});
function check_size()
{
if($('.tweet-box').first().height() == 0)
{
// alert('loop called: ' + $('.tweet-box').first().height())
setTimeout('check_size()', 20);
}
else
{
// alert('initialized!!!! boo-ya')
var $container = $('.container').imagesLoaded( function() {
$container.isotope({
// options
itemSelector: '.tweet-box',
layoutMode: 'masonry'
});
});
}
}

This Worked for me, with the imagesloaded script installed.
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
docReady(function() {
var grid = document.querySelector('.grid');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
});
});
</script>

For me a combination of the small script "imagesloaded" and a few additional lines of jQuery that fire masonry after all images are loaded did the trick. My page footer now looks like this:
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
$('#catalogue').imagesLoaded( function(){
$('#catalogue').masonry({
columnWidth: 10,
itemSelector: '.item',
isAnimated: !Modernizr.csstransitions
/* isFitWidth: true */
});
});
</script>
I don't remember where I got the pinter from, but the script imagesloaded can be found here: https://github.com/desandro/imagesloaded

Related

Accessing MongoDB Data in a <script> tag

I'm passing MongoDB data into my EJS file. I can access the data using the <% %> tags in my HTML. The issue I'm running into is I need to access the data inside my <script> tag and the <% %> tags no longer work.
Things I've tried:
Adding the data to a hidden input and accessing it with document.getElementById().value
I've tried researching any examples of using mongo data in a script tag but most answers are related to <% %> in HTML/EJS
locationSchema
const locationSchema = new Schema({
lat: String,
lng: String,
title: String
});
app.js
app.get('/', function(req,res){
Locations.find({}, (err, results) => {
if (err) {
return res.render.status(500).send('<h1>ERROR</h1>');
} else{
console.log(results)
res.render('homePage',{results, Locations, req});
}
});
});
ejs
<!-- ejs_views/homePage.ejs -->
<!doctype html>
<html lang = "en">
<!-- displays head.ejs-->
<head>
<% include head %>
<style>
#map{
height:400px;
width: 100%;
}
</style>
</head>
<!-- displays header.ejs-->
<body class = "container">
<header>
<% include header %>
</header>
<!-- Edit the body of the front end here-->
<main>
<div class = "jumbotron">
<h1>This is great</h1>
<p>Testing out EJS</p>
</div>
<div id = "map"></div>
<% for (const location of results) { %>
<h1> <%= location.title %></h1>
<h1> <%= location.lat %></h1>
<h1> <%= location.lng %></h1>
<% } %>
<script>
function initMap(){
//SYNTAX ERROR HERE ON <% AND %>
const locationResults = <% JSON.stringify(results) %>;
//Map Options to dictate zoom and position
var options = {
zoom: 16,
center: {lat:35.6543936, lng: -97.4714266}
}
//init map for view
var map = new google.maps.Map(document.getElementById('map'), options);
/*var marker = new google.maps.Marker({
position:{lat: 35.654243, lng: -97.472937 },
map: map,
title: 'Math And Computer Science'
});*/
//addMarker({coords:{lat:35.6543936, lng: -97.4714266}, title: "TestCase"});
//iterateFunc();
results.forEach(location => addMarker({coords: {lat: location.lat,lng: location.lng}, title: location.title}))
//Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
title: props.title
})
}
}
</script>
</main>
<!-- displays footer.ejs-->
<footer>
<% include footer %>
</footer>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAftGHvJnejXQm5k1jiLiBRsRwm5SXqzm8&callback=initMap">
</script>
</body>
</html>
Expected results:
able to loop through the mongodata in my script and use it in the addMarker function
Actual results: :[
Try this. In your app.js file render results as JSON string like this.
res.render('homePage',{results: JSON.stringify(results)});
Now in your homepage.ejs use this:
const locationResults = <%- results %>
Note that it may cause some errors like "Expression expected .js" in your IDE. Just ignore it. Probably is VS Code compatibility with ejs files
I would just write the variable out and use it in the function
<script>
const locationResults = <%= JSON.stringify(results, null, '\t\) %>;
// Now you don't have to loop in the template, you can loop on the client
locationResults.forEach(location => addMarker({ coords: {lat: location.lat, lng: location.lng}, title: location.title }));
</script>

Destroy Darkroom / Fabric JS Canvas

$(function() {
$('button').on('click', function() {
new Darkroom('#edit', {
plugins: {
save: {
callback: function() {
console.log('saving');
var darkroom = this.darkroom;
darkroom.canvas.clear().renderAll();
darkroom.selfDestroy();
return true;
}
}
}
});
});
});
<html>
<head>
<link href="https://rawgithub.com/MattKetmo/darkroomjs/master/build/darkroom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<script src="https://rawgit.com/MattKetmo/darkroomjs/master/build/darkroom.js"></script>
</head>
<body>
<div style="margin-top:50px">
<img id="edit" class="data-uri-example" src="data:image/gif;base64,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">
</div>
<button type="button">Edit</button>
</body </html>
Using darkroom js and fabric js. After I save the canvas data I want to remove the img/canvas from the page. The original img tag used in initialization '#edit' is no longer an element on the page. Seems it's replaces by a new img.
I've tried the .clear() also .clear().renderAll(). I get no error but the image still shows on the page.
Remove div element for control Darkroom and in code create again
$(function () {
$('button').on('click', function () {
$('#main-el').html('');
$('#main-el').append('<img id="edit" class="data-uri-example" src="...">');
new Darkroom('#edit');
});
});

Change polymer attributes externally

I see a lot of questions regarding on how to listen for changes in attributes. But none on how to actually change them.
Even in debug, I can't find the attributes in the object tree. How do I achieve this? is there a more polymeric way of doing the following ?
<polymer-element name="my-element" attributes="owner">
<template>
<p id="el">{{owner}}</p>
</template>
<script>
Polymer({
owner: "Miguel",
});
</script>
</polymer-element>
<my-element id="el1" owner="blabla"></my-element>
<script>
$(document).ready(function(){
$("el1").owner = "Mary"
})
</script>
It prints blablab, but doesn't change it to Mary
In 0.5, you need to wait for polymer-ready. See docs here.
<head>
<link rel="import" href="path/to/x-foo.html">
</head>
<body>
<x-foo></x-foo>
<script>
window.addEventListener('polymer-ready', function(e) {
var xFoo = document.querySelector('x-foo');
xFoo.barProperty = 'baz';
});
</script>
</body>
Ideally, your app would be one element like <my-app></my-app> so that you'd have a binding for the owner attribute like so:
<my-element owner="{{owner}}"></my-element>
And my-element would reside in another Polymer element in which you can set the owner attribute like so:
// Parent Polymer element
Polymer({
_someFunctionYouCall: function() {
this.owner = 'Mary';
}
});

template not rendering correctly

Can someone please point me in the right direction. I tried google and didn't find much regarding my issue. While the following code works perfectly fine when running the .html file directly, it doesn't while serving the file in a node express app. The problem is that with node I don't see any data. page loads fine but no data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="handlebars.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="moment.js"></script>
<!-- Setup our templates -->
<script id="PersonTemplate" type="text/x-handlebars-template">
<div>
Person:<br>
{{name}}
{{age}}
</div>
</script>
<!--
Note the [] this is important
because handlebars and backbone collections
dont play well with each other in regards
to naming JSON groups
-->
<script id="PeopleTemplate" type="text/x-handlebars-template">
<div>
People:<br>
{{#each []}}
{{this.name}}
{{this.age}}
<br/>
{{/each}}
</div>
</script>
<!-- End templates setup -->
<script>
// Stub out the person model
var Person = Backbone.Model.extend({
});
// Create a collection of persons
var People = Backbone.Collection.extend({
model: Person
});
// Define the view for a single person
var PersonView = Backbone.View.extend({
render: function() {
// This is method that can be called
// once an object is init. You could
// also do this in the initialize event
var source = $('#PersonTemplate').html();
var template = Handlebars.compile(source);
var html = template(this.model.toJSON());
$(this.el).html(html);
}
});
// Define the view for People
var PeopleView = Backbone.View.extend({
render: function() {
// This is method that can be called
// once an object is init. You could
// also do this in the initialize event
var source = $('#PeopleTemplate').html();
var template = Handlebars.compile(source);
var html = template(this.collection.toJSON());
$(this.el).html(html);
},
initialize: function(){
this.collection.on('add', this.render, this)
}
});
// Create instance of People Collection
var people = new People();
// Create new instances of the person models
var person = new Person({name: "Tim", age: 5});
var person2 = new Person({name: "Jill", age: 15});
// Create instances of the views
var personView = new PersonView({
model: person
});
var peopleView = new PeopleView({
collection: people
});
$(document).ready(function(){
// We have to do this stuff in the dom ready
// so that the container objects get built out
// Set el of the views.
personView.el = $('#personContainer');
peopleView.el = $('#peopleContainer');
// Add them to a new instance of the people collection
people.add(person);
people.add(person2);
// Render the views. If you are using the initialize
// method then you do not have to do this step.
personView.render();
//peopleView.render();
// Try on console!
// people.add(new Person({name: 'Rames', age:'23'}));
});
</script>
</head>
<body>
<div id='personContainer' ></div>
<hr>
<div id='peopleContainer' ></div>
</body>
</html>
Thanks in advance for your help.

nivo slider effects, in order rather than random firing of selected efects

is there a way of getting the nivo slider to use effects in order ie:
slideUp --> then slideDown --> then slide slideUp ect...
rather then using effect: "slideUp,slideDown" which randomly fires either effect.
regards sam
I wrote this for you. (Note, I have not tested it or validated it works, but the theory is sound)
<script>
var slideEffects = new Array('fade', 'slide', 'fade');
var currentEffectIndex = 0;
$(document).ready(function(){
$('#slider').nivoSlider({
effect: slideEffects[0],
afterChange: function(){
currentEffectIndex++;
$(this).effect = slideEffects[currentEffectIndex % slideEffects.length];
},
};
});
</script>
Here is a correct version.
<script type="text/javascript">
var slideEffects = new Array('fade', 'slide', 'fade');
var currentEffectIndex = 0;
$(document).ready(function(){
$('#slider').nivoSlider({
effect: slideEffects[0],
afterChange: function(){
currentEffectIndex++;
$(this).effect = slideEffects[currentEffectIndex % slideEffects.length];
},
});
});
</script>

Resources