Adaptive FitText: is there a better way to do it? - javascript

I have a piece of code that adapts FitText.js to custom media queries. I wanted it to have different values for each predefined media query.
The code works, but it is by far ugly and by far not optimal.
http://jsfiddle.net/rKFYs/9/
I've tried recoding it but my js skills are not that good.
JS Gurus, please help!

I wrote a remix of FitText a little while back that will do its best to scale your text to fit its container element (see http://blog.rjzaworski.com/2011/11/fit-text-to-element-inflatetext-js/).
Using this variation on the FitText concept, you would simply need to adjust the size of the container div in your media queries and let the plugin scale your text to fit.

I actually ended up writing my own plugin called AdaptiveText.js check it out!

Maybe this answer that I just wrote in other question about a similar problem can help you

Related

How to sort different sized pictures to fit in the screen?

I want this:
http://i.imgur.com/UFtITOi.png
to be fixed in this:
http://i.imgur.com/fzmMwHM.png
I prefer Javascript but you can shoot different approach.
It will be a lot easier if there is already algorithm so I can have a look at it.
Thank you!
Here is a GitHub project that does bin-packing in javascript. You can use this to assign positions to your html canvas drawings:
https://github.com/jakesgordon/bin-packing/
And this code is described in this post:
http://codeincomplete.com/posts/2011/5/7/bin_packing/
If you just need to position DOM elements, here are some libraries that do rectangle fitting:
http://masonry.desandro.com/options.html
http://isotope.metafizzy.co/ (using the masonry option)
http://packery.metafizzy.co/#getting-started

Is there a way to change an image's color scale in JavaScript?

I was wondering if there is a way to change an image color scale in JavaScript? Say you want to make it warmer or cooler depending upon the user's input. If there is a way in jquery or html5 that would be fine as well. Anyone know how to accomplish something like this?
HTML 5 has lot more features than what you just looking for. Anyhow the CANVAS container is the solution that i could say, where you can play with the color, pixels of image. . Have a look at this this. Hope this can help you to start
Maybe not in jquery itself but there is very cool js library for manipulating images called pixastic.
http://www.pixastic.com/
Try to search documentation for option you need exactly.
My guess is you want to change the saturation. I tried Pixastic but it's broken in my browsers, Chrome, Opera and IE7.
Caman JS looks like it delivers, at least judging from the demo page
http://camanjs.com/examples

Best Panorama Jquery plugin for images with this format

i need to replace my old FLASH panorama viewer by a jquery/javascript version.
If you check, you will see that the walls/corners/edges are rounded so you seee it normal when you apply the panorama effect,
the problem is that with all the jquery panorama plugins i get this resutl: http://toniweb.us/m/demos/salleformation.html (the image is only left animated. So the rounded, still rounded)
Do you know any good solution that can work with this kind of images?
PS: what is this format name?
Did you try also http://jquery.vostrel.cz/reel ? But I fear not a solution for your specific problem.
So you could try this site, carefully reading its stuff: http://webuser.fh-furtwangen.de/~dersch/mp/MotionPanoramas.html
I just came across this plugin. You'll be needing something like this (though it's far from perfect) :
http://code.google.com/p/jspanoviewer/

jQuery Tooltip Script

I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!

How do I mirror text in Firefox?

How do I mirror text just like iTunes in Firefox? Is there JavaScript that can do this or is it possible with CSS? I'm looking for a true mirror image that I can then manipulate not backwards text.
There's a jQuery plugin that can create that effect: FontEffect
Edit: The original links does not work any more but this seems to be the same plugin (untested...): https://code.google.com/p/clapee-shuffle/source/browse/trunk/Test1/js/jquery-fonteffect-1.0.0.js?r=4
Christian Effenberger's Reflex library provides a nice degradable reflection effect for images, but not for text. Depending on the height of the area you wish to reflect you can use the old technique of creating multiple single-pixel-tall divs with with negative top offsets and copies of the original text. Clunky, but effective.
CSS transforms or HTML5 Canvas are probably your best bet without getting into Java/Flash:
http://webkit.org/blog/130/css-transforms/
There's JavaScript code to do it. You could probably look at the code on a site like Flip Text.
And like charlie said, it's basically a conversion - one character matched with another that looks upside down.
I found a hacky solution too:
http://snipplr.com/view/4215/flip-your-text-with-charsets/

Categories