Prosoxi All about Development & Design » HTML – XHTML

HTML5 and CSS3 Media Queries

admin — Thu, 02 Sep 2010 07:27:36 +0000

HTML5 and CSS3 Media Queries

Tom Duggin shows us how we can use HTML5 and CSS3 media queries to take control of our presentations across desktop browsers, mobile devices and slate computers.

Jquery Librarys / Plugins

admin — Mon, 26 Jul 2010 07:22:30 +0000

My favorites Jquery ajax librarys / plug-ins

PrettyGallery

http://www.no-margin-for-errors.com/projects/prettygallery/

PrettyPhoto

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Carousel

http://sorgalla.com/projects/jcarousel/#Examples

NyroModal

http://nyromodal.nyrodev.com/

MegaMenus

http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

Coinslider

http://workshop.rs/projects/coin-slider/

Nivoslider

http://nivo.dev7studios.com/

Flowplayer

http://flowplayer.org/

Jquery Tools

http://flowplayer.org/tools/index.html

Mega Drop Down Menus w/ CSS & jQuery

admin — Mon, 28 Jun 2010 10:34:27 +0000

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

more visit http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

HTML 5 Audio Tag

admin — Mon, 28 Jun 2010 07:44:26 +0000

Your browser does not support the audio element.

http://www.w3schools.com/html5/tag_audio.asp

HTML5 Video Player

admin — Thu, 27 May 2010 10:45:58 +0000

http://jilion.com/sublime/video

Current features

HTML5 video goodness:
- no browser plugin, no Flash dependencies
- jump anywhere in the video and it’ll start buffering from that point
Uniform UI across all browsers
Standalone pure JavaScript library
Full-window mode:
- Sleek zoom-in/out transitions
- Live-resizing (when resizing the browser window)
- More advanced controls on a draggable pane
- Double-click video to enter full-window
- Press spacebar to play/pause and Esc to exit full-window
Full-screen mode hold down Command (Mac) or Ctrl (Windows/Linux) while entering full-window. Currently only supported in latest WebKit Nightly Builds and in the Flash version of the player.
iPhone & iPad support

SEO meta tags

admin — Thu, 12 Nov 2009 09:07:35 +0000

What Does This Meta Tag Look Like?

This meta tag is usually placed beneath the title and meta description tags in the

section of your pages’ HTML code, like this:
your DESCRIPTIVE KEYWORDS title goes here

favicon meta tag

admin — Tue, 13 Oct 2009 10:13:28 +0000

favicon.ico" /> favicon.ico" />

Execute Lightbox Scripts From Flash

admin — Wed, 03 Jun 2009 11:10:30 +0000

Execute Lightbox Scripts From Flash: Part Deux

Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies. All of the following scripts can be used in the same page if you wish, you just need to include all of the following delegates into your project.more info http://blog.codefidelity.com/?p=18

Initiating a Flash Lightbox from Flash

If you followed the previous thread, this should be a pretty straight forward process. All that really needs to be done is a few edits to your LightboxDelegate, and your getURL functions.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file.

If you’ve used the following bit of script before, you’ll notice a few changes. Since Lightbox++ requires you specify the width and the height of the Flash movie in your URLs, we’ve added the width and height arguments to our script. Now all that is left to do, is change our getURL functions around a little bit. They should now look something like the following:

1	getURL("javascript:SWFDelegate('images/sbemail.swf','550','400','Strongbad: Coloring');");

You’re now specifying the width and the height in your getURL functions, to match the signature of our javascript method. Remember, you must specify the arguments in the correct order: URL, width, height, and caption.

Initiating a Lightbox Image Group via Flash

I received quite a few e-mails and comments in regards to how this might be done. I did a little tinkering to get it to work properly, and if you follow along it shouldn’t be that difficult for you.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

The first thing you’re going to need to do is create links in your document just like you’re used to. The only difference is you’re going to be specifying an Id attribute in your links, which I will explain a bit more in a minute. The links in my document, that pertain to the above example look like this:

1
2
3

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1
2
3

getURL("javascript:GroupDelegate('paper1')");
getURL("javascript:GroupDelegate('paper2')");
getURL("javascript:GroupDelegate('paper3')");

So when the images are clicked in my example movie above, they call our GroupDelegate function that we defined earlier, and specify the Id of the image we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the blue image is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘paper1′ as the argument. This argument is the same as the Id attribute in my link that pertains to my blue wallpaper.

Initiating a Lightbox Flash Group via Flash

This is pretty much the same setup as calling image groups from Flash with a few small changes. There is also a gotcha involved with using this method, which I will outline now. I suggest only using this method if the visitor is only supposed to watch the movies that are contained within a group and not interact with them. When in group mode, the Lightbox script’s previous and next links have a z-index that is greater than that of the Flash movies, which keeps the links above the movies, thus not allowing the visitor to interact with your movies. If you want to have the visitor interact with your video, I suggest using the first example in this post which is only a single Flash movie and doesn’t use the previous and next links. If someone has a solution for this, I’m all ears.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

1
2
3

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The difference from the previous example is that we’re now adding width and height attributes to our links as Lightbox++ requires them. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1
2
3

getURL("javascript:GroupDelegate('comics')");
getURL("javascript:GroupDelegate('lookingold')");
getURL("javascript:GroupDelegate('roadtrip')");

So when the button is clicked in my example movie above, it calls our GroupDelegate function that we defined earlier, and specifies the Id of the Flash movie we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the button is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘comics’ as the argument. This argument is the same as the Id attribute in my link that pertains to my Strongbad Comic Flash movie.

Initiating Lightbox Scripts From Your Favorite Slideshows

A few of you requested information from my old post showing you how to initiate Lightbox scripts from your slideshow movies–namely SlideShowPro and Monoslideshow. I’m currently working on a post that breaks this entire process down for you, but until then you can check out my old examples. If you’re seasoned in messing with these delegates, you should be able to view source of the examples and pull out the proper delegates and implement them into your projects.

You can find my old examples here - Lightbox Scripts With Your Favorite Slideshows

TinyMCE: Configuration/valid elements

admin — Tue, 19 May 2009 12:12:09 +0000

Option: valid_elements

The valid_elements option defines which elements will remain in the edited text when the editor saves. You can use this to limit the returned HTML to a subset.

This option contains a comma separated list of element conversion chunks. Each chunk contains information about how one element and its attributes should be treated. The default rule set for this option is specified below.

Control characters:

@: Rules with this name will be applied to all elements. So @[attr1|attr2] will enable attr1 and attr2 for all elements.
,: Separates element chunk definitions.
/: Separates element synonymous. The first element is the one that will be output.
|: Separates attribute definitions.
[: Starts a new attribute list for an element definition.
]: Ends an attribute list for an element definition.
=: Makes the attribute default to the specified value. For example, “target=_blank”
:: Forces the attribute to the specified value. For example, “border:0″
<: Verifies the value of an attribute. For example, “target<_blank?_self”
?: Separates attribute verification values. See above.
+: Makes the element open if no child nodes exists. For example, “+a”.
-: Enables removal of empty elements such as . For example, “-strong”.
#: Enables padding of empty elements. This will pad with if they are empty. For example, “#p”.
!: Makes attributes required. If none of the required attributes are set, the element will be removed. For example, “!href”.

Wildcards such as *,+,? may be used in element or attribute name matching.

Special variables:

{$uid}

Results in a unique ID. For example, “p[id:{$uid}]“.

Use *[*] to include all elements and all attributes. This can be very useful when used with the invalid_elements option. Example of usage of the valid_elements option:

This example string tells TinyMCE to remove all elements that are not a “a, strong, div or br” element, convert “b” elements to “strong” elements, default “target” to “_blank” and keep the “href”, “target” and “align” attributes of the elements.

tinyMCE.init({ ... valid_elements : "a[href|target=_blank],strong/b,div[align],br" });

Duplicate Attribute Warning

Be careful not to duplicate attributes in the definitions as this may cause tinyMCE to render duplicate attributes in the output. For example, if you have

... //bad code: dir and style listed twice "blockquote[dir|style|cite|class|dir
then if you happen to have a
element in your code with style= or dir= attributes, the editor will cause each of those attributes to be duplicated in the output, which will result in invalid XHTML. (This is related to bug 1824716 – Duplicate attributes caused by valid_elements on the SourceForge tracker.)

Default rule set:

This is the default string used by TinyMCE to clean up the HTML contents.

valid_elements : "@[id|class|style|title|dir

Full XHTML rule set:

The following will validate that the page complies fully with the XHTML specification.

Please note that using this may slow down performance when TinyMCE is cleaning up the document (on save etc). If you use very large bodies of text, it is recommended that you stick with the default rule set, because it should be sufficient for most people.

valid_elements : "" +"a[accesskey|charset|class|coords|dir

Full FlashMX 2004 rule set:

The following will validate that the page complies fully with the flashMX 2004 specification.

valid_elements : "" +"a[href|target]," +"b," +"br," +"font[color|face|size]," +"img[src|id|width|height|align|hspace|vspace]," +"i," +"li," +"p[align|class]," +"h1," +"h2," +"h3," +"h4," +"h5," +"h6," +"span[class]," +"textformat[blockindent|indent|leading|leftmargin|rightmargin|tabstops]," +"u"

Reference: http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001040.html

Also see extended_valid_elements and invalid_elements for more configuration options.

Absolute CSS Boxes

admin — Thu, 02 Apr 2009 10:48:23 +0000

Quite some time ago, I had an argument with a friend who is a big fan of Microsoft products. While I’m no Xbox hater, I am not very fond of some of their more shoddy products such as Internet Explorer. He was justifying the shortcomings of IE6, saying that absolute positioning is rarely used in web pages, and that :hover pseudo class is not really that useful.

For the most part, he was right. Very few websites I have seen actually make extensive use of absolute positioning. By default, if you do not specify a mode, web browsers will use static positioning. This is what I used in nearly all the sites I have done. For most real-world scenarios, extra features are not needed. Still, good browsers adhere to standards as much as possible. There is even the Acid2 Test to determine how well various browsers measure up.

In that same vein of relatively useless, but somewhat amusing CSS implimentation, I have whipped up this little demo. It works in Firefox, Opera and Safari, but fails in the big blue E. Those who are proned to seizures might not want to move the mouse around too quickly. Use at your own risk:

Demo: Absolute CSS Boxes

There you have it folks, an impractically enjoyable use of CSS! By the way, these effects do not use images or JavaScript. It uses only a single file, containing valid XHTML 1.0 Strict and CSS. Feel free to take the code and do what you want with it. Don’t forget to check it out in Internet Explorer, and show all of your friends why they need to switch to a different browser.

thanks
http://sonspring.com/journal/absolute-css-boxes