daneden / baseline.js Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes
Home Page: http://daneden.me/baseline
A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes
Home Page: http://daneden.me/baseline
Fab little plugin but doesn't appear to work in Firefox 21: http://d.pr/i/zeOH
Seems fine in Chrome
Could you please add Bower and npm support? There is no way to use it in my project right now.
Hello!
Looks like this library is not working currently. I'm not sure why though. Is this library is still maintained?
Me and my colleague have created an alternative solution for the time being:
https://github.com/betsol/baseline-element
With modern browsers being quite good at scaling images, an option to preserve the width of images scaled by Baseline.js would be a welcome addition. There are cases where this is necessary, and this is seriously the only thing that's stopping me from using Baseline.js in all my projects. Anyone agree?
keep the Vanilla and register as a jQuery plugin when jQuery is available
like @enyo in Dropzone https://github.com/enyo/dropzone/blob/master/lib/dropzone.js#L1259-1265
Is it possible to use em based media queries instead of px based? What about em based baseline?
I was having a weird issue where all of my images were being set to a max-height of 0. When I added the following plugin, my issues disappeared:
// add image rhythm
$(document).waitForImages($.noop, function () {
$(this).baseline(24);
});
What this plugin does (https://github.com/alexanderdickson/waitForImages) is wait for images to be fully loaded in place before calling the function passed as the 2nd argument for each individual image.
Am I doing something wrong? No one else seems to have this problem. Resizing the browser after the page loads makes all the images pop back up, and there are no complaints now that I fixed my problem. I love this plugin.
Hi,
Settings multiple widths doesn't seem to work.
this
$(' img').baseline({ '0px': 24, '700px': 30 });
results in
Uncaught ReferenceError: breakpoints is not defined : line 115
I have the following breakpoints $('img').baseline({'0px':30, '1025px':36});
and an image of 330px height.
At the largest screen the baseline is 36px and the script changes the maxHeight to 324. When I scale the browser down and hit the breakpoint, the script should change the image to 330 to match the 30px baseline however it stays at 324. Perhaps some calculations in determining if the breakpoint has been hit?
Your placeholder images on https://daneden.me/baseline/ from http://placedog.com went away.
May I suggest, http://placekitten.com/ ๐บ or http://placehold.it/
: )
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.