How to implement Packery library with Tumblr - javascript

I followed the 'Getting started' tutorials on the Packery website, but I still can't get my tumblr photo posts to work at all with the library. I'm not sure what I need to change or add since the Packery tutorials are pretty vague.
<!DOCTYPE html>
<html>
<head>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script>
var postsContainer = document.querySelector('#posts');
var pckry = new Packery( postsContainer, {
//options
itemSelector: '.container',
gutter:5
});
pckry.bindResize(postsContainer);
</script>
<link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow' rel='stylesheet' type='text/css'>
<!-- fonts
font-family: 'Monofett', cursive;
font-family: 'Varela', sans-serif;
font-family: 'Londrina Shadow', cursive;
-->
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<style type="text/css">
*{margin:0px;
padding:0px;}
html{height:100%;}
body{
background-color:{color:Background};
margin:0px;
height:100%;
}
#sideBar{
background-color:{color:Content Background};
width:150px;
height:100%; ;
margin:auto 0;
margin-right:20px;
padding-left:10px;
float:left;
}
h1{font-family: 'Monofett', cursive;;
font-size:43px;
margin-bottom:25px;
color:black;}
h2{ font-family: 'Varela', sans-serif;
font-size:12px;
margin-bottom:10px;}
p{margin-bottom:10px;}
a:link, a:visited{font-family: 'Varela', sans-serif;
font-size:.95em;
text-decoration:none;
color:black;
-webkit-transition:margin-left 1s, margin-right 1s, color .5s;
-webkit-timing-function:ease;}
#arrow{color:black;
font-family: 'Varela', sans-serif;
fonr-size:.95em;
-webkit-transition:color.5s;
-wekit-timing-function:ease;}
a:hover{color:white;
margin-left:10px;
margin-right:40px;}
nav{margin-left:0px}
#posts{
float:left;
list-style:none;
}
.postPhoto{
float:left;
margin:5px;
}
#wrapper{
height:100%;
width:700px;
}
.pagination{display:none;}
</style>
</head>
<body>
<div id="wrapper">
<div id="sideBar">
<h1>{Title}</h1>
<nav>
<p> Music <span id="arrow"> >> </span> </p>
<p> Code <span id="arrow"> >> </span> </p>
<p> Shop <span id="arrow"> >> </span> </p>
<p> About <span id="arrow"> >> </span> </p>
</nav>
</div>
<div id="posts"> <!--content -->
{block:Posts}
<div class="container">
{block:Photo}
<div class="postPhoto">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Video}
<li class="post video">
{Video-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
</div><!--end container -->
{/block:Posts}
</div>
</div>
</body>
</html>

A couple things.
1) Your #posts container is floated and therefore is only as wide as the content within it. Even if Packery was working it would just line them all up in a single column. You'll need to apply it a width. If you're not concerned with IE8, you can do something like this:
#posts {
width: -webkit-calc(100% - 180px);
width: -moz-calc(100% - 180px);
width: calc(100% - 180px);
}
2) The Packery error is odd, I'm not entirely sure what's causing it. But by butting this simple bit of JS through the Console, I was able to get it running:
var container = document.querySelector('#posts');
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
Make sure this code comes at the end of your document, right before the closing </body>.
3) Since your posts are images, you'll need to make sure you're providing them a width and height so that Packery knows how big each post is. Unfortunately, since you're not using a standard Tumblr width, you'll need to include the imagesLoaded plugin and place your code inside its callback.
Easy way using jQuery:
var container = document.querySelector('#posts');
container.imagesLoaded( function() {
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
});
If you were using a standard Tumblr size (like 250px) you'd be able to simply add a width and height attribute to each image and not need to worry about using imagesLoaded, like this:
<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />

Related

Changing font size of a particular div that is built in run-time

Consider this:
<div>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
The h and m classes are built by a tool that I am not permitted to modify.
I would like to change the 'h' font size in this and only this place. All other places that use the 'h' class must keep the same font size.
I was thinking about adding my own class like this:
<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
and define this in my .css file like this:
.myheader > * {
}
.myheader.h {
font-size:20px;
}
Unfortunately it does not work for it does not 'see' .myheader.h. It applies only style read from .h and .myheader but not both at the same time.
Is there any other way to change the header font size?
Before you say "modify <div class='h'>header</div>" like I need to reiterate - these likes are being created by a tool - in run-time - so I cannot modify them.
PS. I am using angularJS, but I am not allowed to use jQuery calls.
Thank you in advance!
- Greg,
See http://plnkr.co/edit/R0elLsOdcOfsLpHB1NT1 for an example.
I am able to change font size, and that's cool, but when I add change of a color, it spreads down, and I don't want it. I want in this example to change Level 3, and that's it.
looking at this .myheader.h is inccorrect, what you need is .myheader .h
.myheader .h {
font-size: 20px;
color: red;
}
<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
Next css children elements will inherit certain attributes, of their parents
The div .level4 is inside level3 so it will inherit from its parent (.level3) unless you override this behaviour.
You have the text content Level 3 in .level4 and afterwards a single div with class level4.You can simply override the inherited rule but making the children elements retain their "default" using color:initial
.level3 > * {
color:initial;
}
Snippet below
/* Put your css in here */
.level1 {
font-size: 10px;
}
.level2 {
font-size: 20px;
}
.level3 {
font-size: 30px;
}
.level4 {
font-size: 40px;
}
.changer .level3 {
font-size: 100px;
color: red;
}
.level3 {
border: solid green;
}
.level3>* {
color: initial;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class='level1, changer'>
Level 1
<div class='level2'>
Level 2
<div class='level3'>
Level 3
<div class='level4'>
Level 4
</div>
</div>
</div>
</div>
</body>
</html>

Get particles.js on the correct layer?

I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible.
The code below is what I'm trying to set as background for <section id="services">.
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
The problem is that it covers everything inside <section> as well, not sure why.
The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes.
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
<div class="container" style="padding-top:10px;margin-top:10px;">
<div class="row text-center" style="margin-left:auto;margin-right:auto;">
<div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
<button id="reload" onclick="return returnGame();clearDescr();">
<div class="notspinning" id="theSpinner"></div>
</button>
<span id="findMe">
<a href="" id="steamLink" style="color:#333" target="_blank">
<h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
</a>
</span>
<p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
</div>
</div>
</div>
</section>
Any sort of guidance just in the right direction would be much appreciated.
have you tried setting an element as the background, e.g. position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0 and then another div for your content position: relative?
e.g. http://codepen.io/alexander-holman/pen/rebroK
In its simplest form your markup would look like:
<style>
#particle {
background-color: #b61924;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
#overlay {
position:relative;
}
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
var options = {};
particlesJS("particle", options);
</script>

after giving the transition-duration property i cant able to use the jQuery functions properly

jQuery functions like .hide(),.fadeIn(),.fadeOut() are not properly working after giving the transition duration property.
example : hide(2000) then after 2 second it is hiding but the animation is not getting applied and it is the common problem i am having with all the jQuery functions
if i delete the transition-duration then all working with animation. Why this is happening? Someone explain it to me and also give solution to solve this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Opening Sequence </title>
<link rel="stylesheet" href="open.css">
<script src="jquery.js"></script>
<script src="open.js"></script>
</head>
<body>
<br><br>
<section id="container">
<p id="content"> This is cool </p>
</section>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
#container
{
width:600px;
height:600px;
margin:0 auto;
border:1px solid red;
line-height:500px;
}
#content
{
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
transition-duration:3s;
}
JS
$(document).ready(function()
{
//alert("Application has been started");
$i=0;
var ob=$('#content');
ob.slideUp(4000);
//ob.hide(2000);
});
problem is after 4 seconds it is hiding but not sliding up, in the sense not animating like hiding from the down to the top

Font size unusually changes

I've a problem with my very simple website. It seems that the font size unusually changes in some cases. For instance, when I click on a link in the homepage, the new page opened has a different font size. And it seems that this behavior happens only on Chrome. Please, see the pictures below. For each picture, on the left you can see the font size in the homepage and on the right you can see the font size in the page opened clicking on a link.
Internet Explorer (font size ok)
Firefox (font size ok)
Chrome (font size is DIFFERENT)
This is my CSS code used by the two web pages (before this there's a reset standard file):
#charset "utf-8";
/* CSS Document */
body
{
background-color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
.centered
{
margin:0 auto;
}
.centered-content
{
text-align:center;
}
div.article-header
{
background-image:url(../img/articleheaderback.png);
background-position:bottom;
background-repeat:repeat-x;
width:100%;
margin-bottom:10px;
}
div.article-title
{
width:69%;
display:inline-block;
padding-left:1%;
padding-bottom:10px;
}
div.article-more
{
text-align:right;
font-style:italic;
display:inline-block;
color:#690000;
width:29%;
padding-right:1%;
}
div.article-content
{
width:94%;
padding-right:3%;
padding-left:3%;
}
div.article
{
padding-top:10px;
padding-bottom:10px;
padding-left:3%;
padding-right:3%;
width:94%;
}
div.section
{
padding-top:10px;
padding-bottom:10px;
width:100%;
text-align:center;
}
div.section-title
{
text-transform:uppercase;
width:100%;
}
div.container
{
width:100%;
margin:10px 0;
padding-top:20px;
padding-bottom:10px;
background-color:#cbcb63;
}
div.content
{
width:90%;
background-color:#fff59b;
margin:15px auto;
padding-top:10px;
padding-bottom:10px;
}
div#contacts
{
width:90%;
background-color:#fff59b;
margin:0 auto;
}
.dark-background
{
background-color:#1b5e5e;
}
div.header
{
text-align:center;
width:100%;
}
div.footer
{
text-align:center;
}
h1
{
font-size:1.5em;
font-weight:bold;
color:#690000;
}
img#logo
{
max-width:100%;
}
li.basic
{
padding-top:5px;
padding-bottom:5px;
line-height:1.5;
}
li.nav
{
color:#5c7304;
padding-top:25px;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
li.contacts
{
display:inline-block;
width:25%;
}
p
{
line-height:1.5;
}
ul.nav
{
margin-top:10px;
padding:0;
list-style:none;
width:100%;
}
ul.basic
{
list-style-type:disc;
list-style-position:inside;
}
ul.contacts
{
width:100%;
margin-top:30px;
margin-bottom:10px;
}
This is the html homepage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#section-list").hide();
$("#section-title").click(function(){
$("#section-list").toggle();
});
});
</script>
</head>
<body>
<!-- container contains HEADER + NAV + CONTENT-->
<div class="container">
<!-- header -->
<div class="header">
<img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png">
</div>
<!-- sections -->
<div class="content">
<!-- Article: sections -->
<div class="section">
<div id="section-title" class="section-title">
<h1>
Sections
</h1>
</div>
<div id="section-list">
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">Dati personali</li>
<li class="nav">Esperienze lavorative</li>
<li class="nav">Educazione</li>
<li class="nav">Passioni</li>
</ul>
</div>
</div>
</div>
<!-- content -->
<div class="content">
<!-- Article: personal data -->
<div id="personaldata" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Dati personali
</h1>
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">Data di nascita: 18-01-1987</li>
<li class="basic">Luogo di nascita: Lucca</li>
<li class="basic">Nazionalità: italiana</li>
<li class="basic">Residenza: [privata]</li>
</ul>
</div>
</div>
<!-- Article: work experiences -->
<div id="work" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Esperienze lavorative
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2011) Redattore per il portale Libro-Mania.</li>
<li class="basic">(dal 2007) Lavori occasionali.</li>
<li class="basic">(2011-2012) Tirocinio formativo presso l'azienda Intecs SpA.</li>
</ul>
</div>
</div>
<!-- Article: education -->
<div id="education" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Educazione
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2012) Laurea di secondo livello in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa.</li>
<li class="basic">(2012) Laurea in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa. Votazione 106/110.</li>
<li class="basic">(2007) Diploma di perito industriale capotecnico all'istituto industriale E. Fermi di Lucca con specializzazione Informatica. Votazione 100/100.</li>
</ul>
</div>
</div>
<!-- Article: passions -->
<div id="passions" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Passioni e Hobby
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<p>
prova
</p>
</div>
</div>
</div> <!--content end -->
</div> <!-- container end -->
<!-- footer -->
<div class="footer centered-content">
<ul class="contacts">
<li class="contacts"><img alt="facebook social icon" src="img/fbsmall.png"></li><!--
--><li class="contacts"><img alt="twitter social icon" src="img/twittersmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/rsssmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/mail.png"></li>
</ul>
<p title="copyright" style="margin-top:15px; margin-bottom:15px;">
Copyright 2013 Matteo Puccinelli
</p>
</div>
</body>
</html>
Thank you in advance!
Firstly, are you sure that the second page is at the same zoom level?
I would think that the problem is using % instead of em.
The first thing to do would be to determine if setting elements to em fixes the issue where the size changes on a new tab. After that, you can work out what em to set each element to.
*
{
font-size: 20em !important;
}
1- Font sizes in percentage are calculated based on a reference.
2- Font sizes are inherited.
In your case you have not defined a reference, so the browsers' default font sizes for the parent of those elements are the base for calculation.
Different browsers can have different default font sizes for the same element.
This is why you are seeing the difference.
You can set a font size on the body and then use percentages for anything else.
em and % are pretty much the same thing - 2em = 200%. Each browser has a default font-size for most things which are possible to overwrite. Using * with !important is a very crude way of doing things because you will have to use !important if you want to override anything subsequently.
What you ideally need to do is to use:
html, body, table {
font-size: 13px;
}
Additionally instead of using to blank out the space between you footer navigation you can do this:
.footer ul {
font-size: 1px;
}
.footer li {
font-size: 13px;
}
http://jsfiddle.net/hDLry/

Change image on mouseover for a button on another div

On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});​
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>

Categories

Resources