RedVulpine – Blog

Adobe Edge Preview 4: Adding custom prefixes to your assets

January 20th, 2012. Published under General, Javscript. No Comments.

And then, the awesome Adobe Edge Preview 4 was launched. I was really excited about it, and tried to create an experimental banner for a website. But then, the problem appeared.

After saving the project and trying to insert in my test website I realized that I had to leave the files created by Edge on the root of my website since I won’t be using an iframe to show the animation.

So after studying the AdobeEdge component and exported files, I made some patches which let me put my banner anywhere in my server and load it at the homepage without any problem.

So, let’s begin.

Let’s suppose that we created a project called “banner” and added some images to it, then, when we save it, we have the following files:

• banner_edgePreload.js
• banner_edge.js
• banner_edgeActions.js
• banner.html
• bnner.edge
• edge_includes/jquery-1.6.2.min.js
• edge_includes/jquery.easing.1.3.js
• edge_includes/edge.0.1.4.min.js
• images/someimage.png

So, as the examples said, we just have to copy the div with our Composition ID and the javascript that points to the Preloader and put them in our page. The limitation here, as I said before, is that all files must be in your root, and that’s when the problem starts.

What if we want to put my new banner in another place in my server like in “assets/banner1″? (more…)

Popups without popups

June 9th, 2011. Published under Javscript. 1 Comment.

Some days ago, a friend asked me if i knew any script that open a “modal popup” to make a sort of hotsite inside online store.

I don’t use this kind of script all the time, so, the solution for him was google. And was there that the problem happened. Lot’s of results, but, all of them more than outdated.

Then he talk to me asking if i can’t make something to help him. Well, I’ve created a quick script for him since he uses jQuery on his application, and now, looking forward his problem, i was thinking about the usability of this kind of code, then I’ve decided to create a jQuery Plugin.

Of course there are a lot of scripts out there that can do this, but sometimes you have to include extra files like css and other things depending on the script, for me, i don’t like that and it’s the main reason that i’ll be working on it.

Currently this jQuery plugin, can display static content, and load ajax content with two options for loading. For simple content, you don’t need to change anything, but, if you need to load more complex content like an external page that uses specific javascript files, you can load it inside an iframe.

I really don’t have a good name for this plugin, so, i’ll be calling this jqPopupBox. So, let’s begin.

First, you just have to include the jqpopupbox.js into you page and everything will be working(Download link available at the end of the post).

Second, the properties of that you can pass to the object:

• color – string – Hexadecimal color for the div that will fill the screen.
  Default: #777
• opacity – float – Opacity value for the div mentioned above.
  Default: .8
• containerColor – string – Color for the container that will have the popup content itself.
  Default: #FFF
• width – int – Width of the container mentioned above.
  Default: 400
• height – int – Height of the container mentioned above.
• Default: 400
• closeText – sting – The tet that will be shown on the close button.
• Default: CLOSE
• close – Function – A callback that will be called when the users close the popup.
• Default: null
• load – Function – A callback that will be called after the popup creation
  Default: null
• useFrame – boolean – Defined if the plugin will be using an iframe for loading external content.
  Default: false
• content – string – The content that will be shown in the popup. If you want to load extenal content, you must specify the full url like ‘http://redvulpine.com’.
  Default: in blank

A simple example

$(document).ready(function () {
	$.popupBox({
		content: 'Hello World'
	});
});

Now, lets suppose that you want to use animations, for loading and closing.

$(document).ready(function () {
	$.popupBox({
		content: 'Hello World',
		load:	function (r, c) {
			c.hide();
			c.show('slow');
		},
		close:	function (r, c) {
			r.fadeOut('slow');
			c.fadeOut('slow', null, this.remove);
		},
	});
});

In the example above, we have two parameters in the callbacks, c and r. Where, c is the popup container and r is the div that blocks the rest of document. Also, you can customize all the elements using theses css selectors:

• jqqpopupbox-region
• jqqpopupbox-container
• jqqpopupbox-close

And, that’s it, nothing more, simple as you can see. Maybe i’ll be doing updates later, like, to load images(of course, you can use other scripts in this case, like fancybox) or flash, youtube maybe?

Well, thanks for reading and I expect that this code be useful to you =)

Version 0.1.1

- Fixed some typo issues

- Fixed issues with page scrolling

Download: jqPopupBox (Version 0.1.1 – IE 6+, FF, Opera, Safari, Chrome)