tag:blogger.com,1999:blog-58867226559449820202024-02-08T09:58:12.345-08:00MicroPluginsEasy super light weight pluginsUnknownnoreply@blogger.comBlogger5125tag:blogger.com,1999:blog-5886722655944982020.post-57108712241648190602013-09-08T22:50:00.000-07:002013-09-08T22:57:03.752-07:00Calc 2.0I have an interesting idea to create a plugin for developers that want easily include any kind of calculator on their webpage.<a name='more'></a> Say you have hamburgers and drinks, that's how it may look like:
<pre>
$.calc({
"items": {
"Burgers": {"Hamburger": "2.50", "Cheeseburger": "3.00", "Chickenburger": "3.50"},
"Drinks": {"Soda": "1.00", "Cola": "1.50", "Beer": "1.75"},
"Happy": false
},
"currency: "USD",
"discount": "10",
"type": "popup"
});
</pre>
Script is supposed to create a web form with all this fields (directly on page or in popup)<br />
<label>Burgers:
<select class="example1"><option value="2.50">Hamburger</option><option value="3.00">Cheeseburger</option><option value="3.50">Chickenburger</option></select>
</label><br />
<label>Drinks:
<select class="example1"><option value="1.00">Soda</option><option value="1.50">Cola</option><option value="1.75">Beer</option></select>
</label><br />
<label>Happy:
<input class="example1" type="checkbox" />
</label>
<button class="example1">Calculate</button>
<div class="example1">Total: </div>
<br />
I hope it will be same useful as other jQueryUI plugins that allow to <a href="http://jqueryui.com/datepicker/">pick dates</a> or <a href="http://jqueryui.com/tooltip/">show tooltips</a> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5886722655944982020.post-74581822737367432832013-06-30T19:35:00.002-07:002013-06-30T19:35:39.495-07:00aRise news<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;">aRise-0.1.1 is already in production!</span> Installed it a few days ago and now actively testing. It's also a proud for me to know, that still <b>all</b> releases of <b>all</b> my announced plugins successfully work on production websites.</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5886722655944982020.post-13823258871525084892013-05-16T19:28:00.000-07:002013-06-30T22:34:45.922-07:00aRise-0.1<div dir="ltr" style="text-align: left;" trbidi="on">
Proud to present aRise super lightweight and easy jQuery plugin!<br />
<br />
<a name='more'></a><br />
<br />
<h4 style="text-align: left;">
Purpose</h4>
The purpose is to show fullsized images when thumbnail is clicked.<br />
<h4 style="text-align: left;">
How it works</h4>
Usefull for most types of photogalleries and in all cases, when you have small images (e.g. in text like in Wikipedia) that must be opened by click. Plugin prevents page loading, instead of it, it creates a frame (not iframe) with full image inside and a tiny border around it. Simple and laconic.<br />
<h4 style="text-align: left;">
Why clone?</h4>
I know internet is overcrowded with various plugins for images and galleries. But my goal was to create a very simple (both in installation and usage) product. You don't need additional css, everything is uncluded inside and generates automatically. It doesn't meen you cannot override those styles. In fact it's the only <div> element with unique id. That's it! Easy and simple.<br />
<br />
Also you don't need to upload additional images for arrows, close buttons, etc. It's not really userfriendly, but I use common expirience: show next image when already opened is clicked, close it when user clicks outside. Don't worry, aRise-0.2 is almost ready and it even has cozy navigation through images.<br />
<br />
A few words about plugin versions. I always (I swear) try to make them fully compatible, so you can start to use updates safely. Just upload it to your website and try new features.<br />
<h4 style="text-align: left;">
How to embed</h4>
As usual you have to do only two steps:<br />
<br />
<ol style="text-align: left;">
<li>Download and add script <a href="https://gist.github.com/vladkras/5546943">https://gist.github.com/vladkras/5546943</a></li>
<li>Turn it on for your collection. In most cases <img> tag is simply inside <a>, so just add $('a.your-class').aRise(); in your script. Of course you can use your own DOM properties to do it.</li>
</ol>
<div>
Don't forget, that jQuery is still needed for it to work. </div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5886722655944982020.post-18491210265255657492013-05-08T22:34:00.000-07:002013-06-22T01:06:40.327-07:00eaSlyder<div dir="ltr" style="text-align: left;" trbidi="on">
Now you can try my super ligthwieght jQuery slider plugin: <a href="https://gist.github.com/vladkras/5499339">eaSlyder ver. 0.1</a> (and even fork me there)<br />
<br />
Usage:<br />
<br />
<ol style="text-align: left;">
<li>Include plugin script into your page</li>
<li>Call .eaSlyder([int <i><b>timeout</b></i>]) on images collection</li>
</ol>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5886722655944982020.post-66627065599370776962013-04-07T18:20:00.000-07:002013-06-21T21:48:53.385-07:00History<div dir="ltr" style="text-align: left;" trbidi="on">
Tired of monstrous 250+ Kb plugins with enormous settings for simple image shows or popus, I decided to create this series of microplugins.<br />
<br />
Here is the story.<br />
<br />
More than 5 years of pro web-development gave me in idea, that in most cases you need same simple effects on your website like changing slides or popuping fotos. First of all "slideshows". Why do I need to download a pack full of demos, gif files for controls, css files, etc., if I could just insert one link to CDN?<br />
<br />
I started with this: <a href="http://pastebin.com/5SedQnDa">http://pastebin.com/5SedQnDa</a> 10 lines super easy jQuery based image slider. You can use it in two different but simple ways:<br />
<ol style="text-align: left;">
<li>Copy this code to your .js file or to <head></li>
<li>Change #fade in first line to your image container's id or class</li>
<li>You can also change timeout var to change speed (default is 4000ms = 4 sec)</li>
</ol>
<div>
or</div>
<div>
<ol style="text-align: left;">
<li>Paste direct ref in your <head> section: <code><script type="text/javascript" src="<a href="http://pastebin.com/raw.php?i=5SedQnDa">http://pastebin.com/raw.php?i=5SedQnDa</a>"></script></code></li>
<li>And set an attribute for your image container: id="fade"</li>
</ol>
<div>
That's it. No downloads, no ftp manipulation. But DON'T FORGET to include latest jQuery library to your page! You can download it directly from official website: <a href="http://jquery.com/download/">http://jquery.com/download/</a> or use CDNs I prefer: <a href="https://developers.google.com/speed/libraries/devguide?hl=ru#jquery">Google</a> или <a href="http://api.yandex.ru/jslibs/libs.xml#jquery">Yandex</a></div>
</div>
<div>
<br /></div>
<div>
Your images' height will be set to container's height automatically because it's common for most websites. Slides must fit the slideshow area.</div>
<div>
<br /></div>
<div>
The goal of this project is to help web-developers to install widespread basic jQuery effects as fast and easy as possible.</div>
</div>
Unknownnoreply@blogger.com0