Problems validating forms in Facebox.

August 16th, 2008 by steamfrog

Recently I have been using Facebox on a new website I am building. Using forms in facebox seems like a smart way to go when you do not want them all over the main pages. I came across an issue with trying to validate facebox form fields… yeah.

Validation I used http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - it is very good.

Here is the solution

Need to handle the onclick event of the submit button.

onClick=’$(”#my_form”).valid()’

This solved the problem of the facebox closing before the validation was complete.

Hope this helps others.

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having 2 Comments »

Ruby security holes discovered

June 25th, 2008 by steamfrog

Just in case you are using Ruby for whatever purpose (esp. in web applications) you might want to be aware of the recently discovered security holes. They can lead to Denial of Service Attacks or execution of arbitrary code. And this cannot happen just under some strange circumstances but might affect applications in general as describe in the Matasano blog

http://www.matasano.com/log/1070/updates-on-drew-yaos-terrible-ruby-vulnerabilities/

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

FREE form elements for photoshop layouts.

June 24th, 2008 by steamfrog

Ever need some form elements when doing a photoshop layout? I sure did. I did a quick serach and found these great FREE form elements.

Webdesigners Toolkit

Free Photoshop form element templates

You need an active checkbox for your screendesign? A radio button, a select box? And you’re tired of making the same screenshot over and over again? Look no further: our free photoshop form element templates for your professional screendesign include all common standard form fields , mouse and link pointer and are optimized for ease-of-use.

http://www.webdesignerstoolkit.com/forms.php

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Jquery Kid. A small fry with a big mind & a very bright future.

May 18th, 2008 by steamfrog

Jquery KID! I’m so jealous. Why wasn’t jquery around when I was that age.. All I had was atari :(

atari.jpg

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Play Quicktime in flash using the FLV components

May 18th, 2008 by steamfrog

I spent at least 3 hours hunting around for any kind of tutotial on “perloader for quicktime” & “making quicktime faster” blah blah. In the end I gave up… well sort of.

All I wanted to do is have the remote quicktime load faster than it was, my viewers were sitting in front of a black screen or the damn Quicktime icon for 10 minutes while the 64mb file did it’s thing. One word for that Boooring, in fact is it wasn’t my site I’d be clicking away & going somewhere else.


So here is my solution.

First off you should know how to use swf object and how to use the video component in flash.

Open flash and go to the components screen.
1.png

Add an instance to the stage, rezise it to suit your needs and all that stuff. Now open the component Inspector (same menu as the component)

3.png

In the source panel write the FULL URL of the quicktime file (I even used an MP4 file)

Save & publish as you normally would.

The end result should be a streaming Quicktime experience as seen below. It even has the standard flv controls.
4.png

Cool.. ok here is the best part you can pass a FlashVar to this via the swfobject. Get SWF object from here: http://blog.deconcept.com/swfobject/

Add this between the <head> tags <script type="text/javascript" src="js/swfobject.js"></script> & this to the area in the body of your page where you want the flash to play.

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("name of the SWF you made earlier.swf","sotester", "630", "550", "9.0.124", "#FFFFFF");
so.addVariable("vidURL", "http://example.com/movie.mp4");
so.useExpressInstall('expressinstall.swf');
so.write("#ID of the DIV the flash will be in");

// ]]>
</script>

Change this to any url with php and you have a dynamic player.

so.addVariable("vidURL", "http://example.com/movie.mp4");

Doing the same thing with Netstream

To preload an FLV file:

1. Create a new FLA file called preloadFLV.fla.

2. In the Library panel (Window > Library), select New Video from the Library
pop-up menu.

3. In the Video Properties dialog box, name the video symbol and select Video (ActionScript controlled).

4. Click OK to create a video object.

5. Drag the video object from the Library panel to the Stage to create a video object instance.

6. With the video object selected on the Stage, type my_video in the Instance Name text box in the Property inspector (Window > Properties > Properties).

7. With the video instance still selected, type 320 in the width text box and 213 in the height text box in the Property inspector.

8. Select Frame 1 in the Timeline, and open the Actions panel (Window > Actions).

9. Type the following code in the Actions panel:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns);
stream_ns.play(vidURL); – See the swfobject code above!

this.createTextField(”loaded_txt”, this.getNextHighestDepth(), 10, 10, 160, 22);
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
function checkBytesLoaded(my_ns:NetStream) {
var pctLoaded:Number = Math.round(my_ns.bytesLoaded / my_ns.bytesTotal * 100);
loaded_txt.text = Math.round(my_ns.bytesLoaded / 1000) + ” of ” + Math.round(my_ns.bytesTotal / 1000) + ” KB loaded (” + pctLoaded + “%)”;
progressBar_mc.bar_mc._xscale = pctLoaded;
if (pctLoaded >= 100) {
clearInterval(loaded_interval);
}
}

10. Select Control > Test Movie to test your code.

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Variable data publishing.

May 1st, 2008 by steamfrog

OK hold onto your hats I have just completed a great video tutorial series on the all time exciting subject of variable data publishing using Illustrator/Photoshop/Indesign. Learn how Variable data publishing will help you speed up those repetitive tasks we designers face when working on large design projects.

Yeah whatever… what is variable data publishing?
It’s the ability to assign data areas to documents.

Variable Data Publishing automates the creation of customized communications by merging a page layout design with data imported from a database and/or images imported from a digital asset repository. Variable Data Printing automates the production of the customized materials. - Wikipedia

An example:

Your working in a design studio and doing a great job with the Illustrator card designs, sweet, then your boss walks in with a job for 500 cards for a big tech firm close by… OMFG!!

Lets do the math on this job

500 cards =
500 names +
500 phone numbers +
500 job titles +
500 mobile numbers
that’s over 2000 data changes in this one job.

The tutorial I have created for you will show you how you can complete this job in a morning, before lunch even… coolies.
Combined with a bit of xml you life will dramatically improve & your work flow will be easier.


Variable data will work with.
Illustrator
Indesign
Photoshop

Stay tuned and when I have this online you will be the first to know about it.

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

SWFobject 2.0 has arrived! & with AIR

May 1st, 2008 by steamfrog

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

No more “click to activate” in IE !

Swfobject comes in 3 great flavors the standard js and examples all in a handy .zip file. A standalone AIR file which is really handy as it allows you to install as a program and use easily when ever you need. It also gives the ability for the user (you) to change a lot of the parameters and add some cool additions to the swfobject that you may not have been able to do previously.

And last but not least the trusty html version, exactly the same as the AIR version with all the groovy features, simply activate through the browser as a webpage.

GRAB IT HERE - http://code.google.com/p/swfobject/

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Smooth Javascript Image Zooming For Your Web Pages

March 28th, 2008 by steamfrog

Designed to view full-size photos and images inline without requiring a separate web page load.

License
FancyZoom is totally free for your non-commercial website.

In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee.

Reference Site:
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html

And for Wordpress as a Plugin
CLICK HERE

And even for Joomla
CLICK HERE

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Looping FLV files with Net Stream

March 25th, 2008 by steamfrog

Whole Code:

Add a new video instance to the stage & for this example name it “videoPlayer” without the quotes.

Go to Library
vidprop0.png

Then
vidprop.png

Drag the video from the library onto the stage and give it an instance name of videoPlayer.
Add the code below on that frame.

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play(”YOUR FLV FILE LOCATION IN HERE“);
ns.onStatus = function(info) {
if (info.code == “NetStream.Play.Stop”) {
ns.seek(0);
}
};

References:
http://www.tomontheweb.ca/Blog/2006/05/looping-flv.html
http://www.quip.net/blog/2006/flash/how-to-load-external-video

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

Cool Spry Effects

March 16th, 2008 by steamfrog

Users of Dreamweaver check out the cool srpy effects here.

http://labs.adobe.com/technologies/spry/demos/effects/

Users with CS3 can access the effects through the behaviors panel.

WINDOW>Behaviours>effects

Or shortcut SHIFT+F4 > Effects

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • blogmarks
  • Fark
  • Fleck
  • Furl
  • IndiaGram
  • IndianPad
  • Linkter
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • Slashdot
  • Smarking
  • SphereIt
  • Spurl
  • StumbleUpon
  • Taggly
  • TailRank
  • Technorati
  • YahooMyWeb
Filed under Feedback having No Comments »

« Previous Entries Next Entries »