Archive for the JavaScript Category

December 15th, 2007

More JAddTo Features

Filed under: JQuery, JavaScript — jasonlevine @ 11:38 pm

I had some more ideas for the JAddTo plugin and so I just added them in now. This plugin is rapidly turning from a single-purpose plugin (put “Add To” links on a page) into something that may be of more general use and something that can be more customized.

This version adds custom CSS Classes (so more than one JAddTo item can be on the same page and can look different), adds the ability to hide the title text, and adds the ability to show the icon titles on the left or right of the icons (or keep them hidden).

Check it out at: http://www.jasons-toolbox.com/JAddTo/

No Comments

No comments yet.

December 12th, 2007

JAddTo

Filed under: JQuery, JavaScript — jasonlevine @ 2:58 pm

This is my first JQuery plugin in awhile.  I needed to put up a series of “Add To Digg”-style links on the Shooting For A Cause website.  After collecting the images and links, I realized that this would make for a good JQuery plugin.  So I wrote it.

I hereby present JAddTo 0.1.  Enjoy!

And if you know of any links that should be added, let me know.  It would help if you included an example link and the URL of an image that could be included.

No Comments

No comments yet.

December 29th, 2006

Introducing JSwitchy

Filed under: Cool Coding, JQuery, JavaScript — jasonlevine @ 11:40 am

Ten days ago, A List Apart posted an article titled Switchy McLayout: An Adaptive Layout Technique. In this article, they explained how to use JavaScript to change stylesheets on the fly depending on the size of the browser window. Their code was quite compact at only 1KB, but it required the user to define everything in the JavaScript code. I thought I could do better and considered this to be a prime subject for a JQuery plugin. So off I went a-codin’ and came up with JSwitchy. Now the JavaScript is very generic and the size definitions take place within the HTML code itself (in a manner that could easily be defined once in a site’s template).

For more information, check out JSwitchy.

No Comments

No comments yet.

October 10th, 2006

JHeartbeat and JTicker

Filed under: Cool Coding, JQuery, JavaScript — jasonlevine @ 9:00 pm

Recently, I’ve been doing more and more development with JQuery. For those who haven’t heard of it, JQuery is a JavaScript library that makes some previously time consuming and difficult tasks very easy. The way that it is built, you can even develop plugins to extend JQuery’s functionality. And that’s just what I did:

JHeartbeat will allow a web page to periodically poll a server. This polling can be used to keep the user’s session alive or to download updated information.

JTicker will turn an RSS feed into a scrolling news ticker.

Try them out and let me know what you think.

12 Comments

  1. Comment by gavinmroy — October 26, 2006 @ 5:57 pm

    Hey, I’ve been developing an app with jHeartbeat (thanks for the cool plugin btw). I was wondering if you planned on releasing it under a license (MIT for example like jQuery). I’m concerned about distributing it in my app without knowing what the license could/would be. Thanks again for a cool plugin.

  2. Comment by jasonlevine — November 6, 2006 @ 11:41 am

    jHeartbeat is free to use for any commercial or non-commercial project. I just ask that I be credited somewhere. Doesn’t need to be in huge, bold letters or anything. Just make some small mention of jHeartbeat and my site where ever you feel it is appropriate.

    You are right that I should come up with a more formal license, though. I’m looking at the MIT license right now and that looks pretty good. In fact, consider jHeartbeat and my other JQuery plugins/scripts to be “unofficially” covered by the MIT license. (By “unofficially”, I mean that they are under that license now but I probably won’t get to update the documentation for a bit.)

  3. Comment by ray — December 1, 2006 @ 3:19 pm

    Hi Jason,

    Good work with jHeartbeat!

    My question:
    ———–
    You mention that:
    “…can use the callback function to manipulate this (returned) data, if needed..”.

    Being new to jQuery, could you show a simple “hello world” example for the callback function?

    Suggestion:
    suppose we’d like to multiply times 2,
    the number returned in the DIV by “heartbeat.asp”?
    What would the actual samnple code be?

    Thanks, Jason!
    ray

  4. Comment by jasonlevine — December 28, 2006 @ 8:42 am

    ray,

    The JHeartbeat page has the generic code. However, a simple “Hello World” application might look like this:

    	$(document).ready(function() {
    		$.jheartbeat.set({
    			url: "heartbeat.asp",
    			delay: 3000
    		}, function () {
    			alert("Hello World!");
    		});
    	});
    

    A function that might take the number returned and multiply it by 2 would look something like this:

    	$(document).ready(function() {
    		$.jheartbeat.set({
    			url: "heartbeat.asp",
    			delay: 3000
    		}, function () {
    			alert(parseInt($("#HeartBeatDIV").html())*2);
    		});
    	});
    

    I hope this helps.

  5. Comment by bleen18 — January 29, 2007 @ 3:28 pm

    jHeartbeat is great, but how do you make it stop beating? I’m using ti to check the status of a slooow script. Once the script is complete though, I want the page to stop checking.

    Thanks!

  6. Comment by bleen18 — January 29, 2007 @ 5:33 pm

    Regarding my last comment .. I figured it out and thought I’d share:
    clearTimeout($.jheartbeat.timeoutobj.id);

    With that though, another question: in the “set” function, shouldn’t the first few lines be:
    if (this.timeoutobj.id > -1) {
    clearTimeout(this.timeoutobj.id);
    // note the ‘.id’
    }

  7. Comment by howie — February 9, 2007 @ 6:20 am

    Is it possible there’s a memory leak in JHeartbeat? I’ve been playing with it for the last couple of days, on something that fetches JSON updates every few seconds from our monitoring system, and uses that to update a UL with entries.

    It works nicely now, but I left it running overnight, and came back to a 1GB firefox! Since then, I’ve ripped out ALL of my code, leaving just an empty every-2-seconds heartbeat, and left it going in IE, and I can still watch the memory usage grow every tick…

    This is my first go at this kind of stuff, so I’m prepared to believe it’s me. Is there any more scientific instrumentation for looking at this stuff?

  8. Comment by erica — April 12, 2007 @ 11:06 am

    I downloaded http://www.jasons-toolbox.com/JTicker/JTicker_With_JQuery.zip, but JTicker doesn’t seem to be working when I view index.html on my machine- neither with your xml file or with my own. All I see fading in and out is “JTicker 0.5 Beta.” Any ideas? This is exactly what I want to implement on my site and I want it to work soooo bad! Also, if you can answer that question, is there any way to display more than one item at a time? So, for instance, four headlines - fade out - the next four headlines - etc.

  9. Comment by peter — April 22, 2007 @ 1:51 am

    I would like to suggest a change to jHeartbeat
    IE caches, and I saw how you send various HTTP/HTML headers to stop the caching. I would like to suggest adding a counter instead,
    which would force IE to request the result from the server and not make anything time dependent:

    In the changes, show below, I have added a counter.
    If the user has already supplied a url with a parameters, then the extra parameter starts with a & instead of a ?.

    options: {

    url: “heartbeat_default.asp”,

    counter: 0,
    delay: 10000

    },

    beat: function() {

    var c = this.options.url.search(/\?/) == -1 ? ‘?’ : ‘&’ ;
    var newUrl = this.options.url + c + “counter=” + this.options.counter++ ;
    $(”#HeartBeatDIV”).load(newUrl);

    this.timeoutobj.id = setTimeout(”$.jheartbeat.beat();”, this.options.delay);

    this.beatfunction();

  10. Comment by peter — May 20, 2007 @ 6:25 am

    The memory leak as pointed out in comment 7 is really problematic. Is there any way of fixing it?

    Thanks

    Peter

  11. Comment by jasonlevine — July 24, 2007 @ 6:45 am

    howie, It’s possible that there’s a memory leak in there somewhere. When I get some time, I need to update this plugin for the latest version of JQuery.

  12. Comment by eshu — November 12, 2007 @ 5:51 am

    thx for a nice plugins…

    i have one question regarding JTicker

    is it possible to extend somehow support for other character encodings..
    for example im using Windows-1250 and can not get some special character..
    i know that that is an issue…
    its pitty that half of the world can not use that nice technology ;-(

    thx

    mario

August 31st, 2006

Slightly Thickerbox 1.7

Filed under: Cool Coding, JavaScript, Slightly Thickerbox — jasonlevine @ 1:32 pm

I’ve upgraded Slightly Thickerbox to use JQuery 1.0.1 and the updated version of Interface Elements for JQuery.

2 Comments

  1. Comment by joshuazz — September 21, 2006 @ 3:13 pm

    Thank you for implementing the ability to play video files. This sets STB apart from the others in a nice way.

    However I seem to be having issues with it. The video content is always pushed up against the left border of the window, and the aspect ratio is off, as in appears square instead of 320 x 240. Any idea how to fix it?

    Thanks

  2. Comment by asterocean — November 6, 2006 @ 1:50 am

    jmp3 & thickbox are both great plugins that using jquery,

    then, how could jmp3 work in a thickbox window?
    jmp3 works fine alone, it seems that

    $(document).ready(function(){
    $(”.mp3″).jmp3();
    });

    not work when loaded by thickbox

    then which event should it been binded? any sugestion would be grateful.

    another question , how could thickbox work when loaded in a thickbox window? that’s thickbox over thickbox, :-)

    i’ve patch some flaws in thickbox, maybe someone will need it.
    such as:
    animated gif problem:thickbox loading again and again when display animated gif
    tiny picture problem:thickbox size is too small when display small size picture
    selects disapeared when thickbox closed:selects disapeared when thickbox popup,but won’t show again when thickbox quit.

    maybe someone will like it, see diff

    19d18
    “);

    > $(”body”).append(”");
    110d108
    close” + ““+caption+”");

    > TB_HEIGHT = imageHeight + 80;
    > $(”#TB_window”).append(”"+caption+”close” + TB_PrevHTML + TB_NextHTML + ““);
    164d153
    “+caption+”close” + TB_PrevHTML + TB_NextHTML + ““);

    > $(”#TB_window”).append(”"+caption+”
    close” + TB_PrevHTML + TB_NextHTML + ““);
    201c190
    “+caption+”
    close” + TB_PrevHTML + TB_NextHTML + “”);

    > $(”#TB_window”).append(”close” + TB_PrevHTML + TB_NextHTML + “”);
    228c217,218
    TB_VisibleSelects = $(”select:visible”);
    > TB_VisibleSelects.toggle();
    307c297
    TB_VisibleSelects.toggle();
    315c305
    TB_VisibleSelects.toggle();
    322d311
    }

    thanks a lot

August 14th, 2006

Slightly Thickerbox 1.6

Filed under: Cool Coding, JavaScript, Slightly Thickerbox — jasonlevine @ 8:36 pm

I’ve just posted a new version of Slightly Thickerbox. This version fixes the issue that the last release had with IE and the Interface Elements for JQuery. It also will hide any visible select boxes on the page when a Slightly Thickerbox window is opened. This works around a long standing bug in IE that places select boxes above all page elements. (It’s a “feature” that has caused many a web master to rip hair from their heads.)

Right now, there are two outstanding bugs that I know of:

1. Java Applets still appear in front of Slightly Thickerbox items.
2. Sound from movies still plays in background when Previous/Next/Close links are clicked.

If anyone knows of a way to fix these issues, I’d love to hear them. (Though I have an idea on #1. #2 looks to be more complicated.)

As always, you can get Slightly Thickerbox by going to http://www.jasons-toolbox.com/SlightlyThickerBox/

2 Comments

  1. Comment by RichH53 — August 17, 2006 @ 1:48 pm

    Jason, the runtime error I get when trying to uninstall Cookie jar is:
    Run Time error “5″
    Invalid procedure call or argument

    (Thanks… you can just email me at codybearz@rap.midco.net
    if you would want to.)
    Rich.

  2. Comment by lotrgamemast — September 7, 2006 @ 6:10 pm

    The animation to make the box apear doesnt work at all in Opera 9, so the box won’t show. However when you click the translusent black div the box apears and then animates away as normal. You may want to make it work in Opera as lots of people do use it:

    http://www.opera.com

August 3rd, 2006

My birthday but the present is for you.

Filed under: Cool Coding, JavaScript, Slightly Thickerbox — jasonlevine @ 9:03 am

It’s my birthday today, but the present is for you. I’ve upgraded Slightly Thickerbox to version 1.5.

You can now add movies (MPEG or AVI) to a Slightly Thickerbox group. You can also group AJAX pages together. This could be used as a quick and easy way to put together an online presentation.

I’ve also done a lot of backend code restructuring, but that won’t concern most of you. If you were calling the TB_Show function directly, you’ll need to change your reference to TB_ShowObj and pass it a reference to the object you want to display. For example:

TB_ShowObj(document.getElementByID(”FirstElement”))

Finally, I’ve added support for the Interface Elements for JQuery. This is a JQuery plugin that, among other things, adds some more advanced animation capabilities. If you include the Interface Elements scripts (included with the download, see below for the code), then Slightly Thickerbox will use the advanced animation capabilities automatically. Otherwise, Slightly Thickerbox will use the built-in animation capabilities that JQuery possesses.

As always, you can get the latest version of Slightly Thickerbox by going to http://www.jasons-toolbox.com/SlightlyThickerBox/.

EDIT: I just uncovered a bug with Slightly Thickerbox and IE when using the Interface Elements. For now, just disable the Interface elements (comment out or delete the references). I’ll post a fix when I figure out what is going wrong. (FireFox seems to be unaffected by the bug.)

6 Comments

  1. Comment by RichH53 — August 4, 2006 @ 7:34 am

    Comment by RichH53 — July 30, 2006 @ 4:01 pm

    Jason: I’m trying to unistall cookie jar and I keep getting a runtine error. What do I do? I can’t seem to download the updated version you’ve got of this program. Please help!!! Thanks. RichH53 codybearz@rap.midco.net

  2. Comment by ovdncoke — August 4, 2006 @ 8:51 am

    Hi Jason, upgraded last night to use thickerbox 1.5 and it solved my ‘not grouping images in whole table just rows’ problem. However I am using this on another page that has a Java Applet in the middle and the applet always appears in front of thickerbox. Example here,

    http://www.duncane.plus.com/albums/course/15th.html

    I’ve tried the trick but no luck. I also tried to recreate the fix used for lightbox here,

    http://www.huddletogether.com/forum/comments.php?DiscussionID=124

    but again no luck. I’m pretty new to all of this so I’m a bit lost now.

    Any help is appreciated,
    Thanks

    Ewan

  3. Comment by jasonlevine — August 8, 2006 @ 8:45 am

    RichH53, What’s the runtime error?

  4. Comment by ovdncoke — August 8, 2006 @ 10:51 am

    What I meant to say in Comment 3 is “I’ve tried the ‘wmode param’ trick but no luck”….

    Cheers
    Ewan

  5. Comment by jasonlevine — August 14, 2006 @ 8:28 pm

    ovdcoke,

    It looks like Java applets always appear on the top of the page no matter what the HTML code. Just like select boxes in IE. It’s an issue that has caused many a web master to tear out their hair. I’ve worked around the select issue for the next release of Slightly Thickerbox (which will be posted shortly), but am still trying to get a Java Applet workaround in place.

  6. Comment by ovdncoke — August 17, 2006 @ 5:36 pm

    Thanks Jason,

    I’m using Cody’s thickbox again just so I could get a workign version to show some people. It works fine with the Java Applet, have a look

    http://www.duncane.plus.com/albums/course/2nd.html

    I’m still curious to see if the animations would make it look any slicker though.

    Thanks Again
    Ewan

July 6th, 2006

Slightly Thickerbox 1.1

Filed under: Cool Coding, JavaScript, Slightly Thickerbox — jasonlevine @ 1:34 pm

I’ve updated my Slightly Thickerbox script to version 1.1. This update adds multiple gallery capabilities. To enable this, simply add a “rel” attribute to your Slightly Thickerbox link. Links with no rel attribute will default to being linked together. This means that old Slightly Thickerbox installations won’t need any changes if you don’t want to use the new feature. To update, just download the new script from http://www.jasons-toolbox.com/SlightlyThickerBox/.

By the way, if you think of a feature you would like to see in a future release of Slightly Thickerbox, go ahead and post it in the comments section below. I’ll do my best to add it in.

4 Comments

  1. Comment by castus — July 13, 2006 @ 2:47 am

    Hi,

    I’ve noticed that the script doesn’t work in IE and FF when the page is too long. I thought it was just FF, but it’s both.

    If you go here: http://www.tscarsales.co.uk/cars.php and scroll down to the bottom the images tend to either open in a new window or open in the same window. But then if you scroll back to the top the script seems to work fine.

    It’s a weird one!

    Gary

  2. Comment by jasonlevine — July 13, 2006 @ 10:45 am

    Hi,

    Thanks for the bug report. I was able to replicate it here (by visiting your link). I’ll try to take a closer look to figure out the bug in the next few days.

  3. Comment by jenn — July 14, 2006 @ 1:44 am

    Thank you so much. It seems like you did a lot more than put in multiple image capabilities (which is itself a brilliant thing). All the cross-platform rendering bugs that were plaguing me are gone.

    Best wishes,
    Jenn

  4. Comment by ovdncoke — July 26, 2006 @ 3:15 am

    Hi, this works well and I like the ‘Next/Prev’ function. However, if using images in a table I can’t get it to group the whole table just the individual rows. PS - I think Cody is working on the function now anyway.

    Thanks very much

July 4th, 2006

Drop Gallery

Filed under: Cool Coding, JavaScript — jasonlevine @ 1:20 pm

Happy Fourth of July everyone!

inGearX had inquired about easy to use photo galleries on the BroadbandReports Webmasters and Developers forum. I had already written my photo gallery script and thought that might be useful, so I made a standalone demo of it along with a download link. You can now use “Drop Gallery” on your website.

I’ve already added the ability for Drop Gallery to generate its own thumbnails on the fly. I’m working on caching of the thumbnails to reduce server load and execution time. Check back here for progress. To download Drop Gallery, visit http://www.jasons-toolbox.com/DropGallery/ .

No Comments

No comments yet.

July 1st, 2006

Slightly Thickerbox Bug Fix

Filed under: Cool Coding, JavaScript, Slightly Thickerbox — jasonlevine @ 10:21 pm

My last post of Slightly Thickerbox has a minor bug that caused the “Previous/Next” image links to stop at the second to last image instead of the last image. This is fixed now. To apply the changes, just redownload SlightlyThickerBox and copy the new “thickbox.js” file over the old one. Once again, you can get Slightly Thickerbox by going to http://www.jasons-toolbox.com/SlightlyThickerBox/.

No Comments

No comments yet.

Page generated in: 0.466 seconds.
Powered by: WordPress 2.5