Archive for HTML


28
Dec
2011

Jquery UI slider hides when slides – Event name collision with mootools

Hi,

after few hours of investigating this bug …
if you are trying to put a jquery ui slider on a page with mootools it won’t work as you would excpect because mootools slide event fires before jquery does.

the fix for this problem is easy, just do .prop(‘slide’,null) before initializing the jquery slider. this will remove Mootools’s Fx.Slide from the element.

scroller.prop('slide',null).slider({...});

Hope i helped someone with this ... 

G'day
Ady

03
Dec
2011

Video Suggestion tool for your wordpress blog

Hi all,
recently i finished working on a great tool to help editors add videos to their blog.
this tool grabs data from AOL Video library which is the largest curated library in the web.

the plugin wrap it self in it’s own namespace so it won’t conflict with other components on the page,
it features semantic matching for content, which is a great thing. you can write your post , hit the suggest videos button and in a second you get planty of semantically related videos that can match your content.

Download link: Video Suggestion for wordpress

We bloggers know that adding a video to your post reduces the bounce rate and helps improving your search engine score!
That plugin has some other versions that works with Movable Type CMS & Blogsmith. if you fency another version feel free to contact me , and i’ll try to help out with it.

Fetching suggest data was a nice challenge. i needed to post data to a remote server and grab the returned data in a JSON format , cross domain json is an easy task, you can use jsonp which works great, but it lacks one small thing..
you can’t post data. bummer ! if you want to grab a lot of text / data and push it to a remote server for analysis , it gets harder.
luckily we now have a new HTML5 method to do such things, “postmessage”. post message is a way to communicate between the opener page and an iframe who sits on another domain.
i’ll write a post regarding that way soon, with some examples.

* will be glad to have comments from you readers about that tool & generally about the blog.

Ady


07
Sep
2011

js onbeforeunload event – alert before leaving the page

if you wan”t to prevent a user from leaving your page,
something you might wanna do if you build a cms , or some admin page with user changing fields.

create a javascript variable named isDirty and make sure that field will be set to true on all input changes on the page (and some non trivial changes you might have in your ui)
than bind an event to the window.onbeforeunload (works on all browsers without the use of an extrenal js lib such as jQuery, dojo, mootools)

?View Code JAVASCRIPT
 window.onbeforeunload = function (ev) {
            var leavePageMsg = ''Your changes haven\''t been saved.\nAre you sure you want to leave this page?'';
            ev = ev || window.event;
            if (isDirty) {
                if (ev) {
                    ev.returnValue = leavePageMsg;
                }
                return leavePageMsg;
            }
            // no return value - meaning it''s ok to leave the page.
        };

Thats it, it will do the magic :)
Have a good one.

Comments
Posted in HTML, javascript

15
Jan
2010

flash of unstyled content

have you ever seen a html page that loads unstyled and a second (sometimes more) after it “loads” its gets reorgenized ?
well this problem refered as “flash of unstyled content”.

it happens when the page content starts to load before the css files are completely loaded. you won’t see much of this problem using ie or any other browser other then firefox, thats because the way firefox renders the page is different then the other browsers. it rerender the page every time a new css rule is loaded, ie for example waits for all the page content(includes images) to be loaded and then it plots the rendered result (skipping the FOUC)

ok – so what can be done to avoid this annoing problem ?

i did some research on this issue – trying to find the best solution , and there is no 1 ultimate solution, you will have to optimize your page – reducing the loading size of the page, but more important is moving the css files to the top of your html, acutally to the top of your head section, css files must be loaded first, then the js files and other content.
normally we wont use javascript functions untill the domready event is thrown – so that won’t be a problem.

now, after doing so, we should try to compress the files,
search the web for a css compressor in your preferred language,
examples :
PHP : http://davidwalsh.name/css-compression-php
ASP.NET : http://madskristensen.net/post/Combine-multiple-stylesheets-at-runtime.aspx

the last one is a great example for combining and compressing the css files,
resulting in 1 css file that holds few files in it.

the same can be done with js files (compressing and mergin)
online js compressing can be done using Yahoo’s YUI Compressor (http://developer.yahoo.com/yui/compressor/)

or you can search for a php / .net server side js compressor.

Now, after doing these steps your page would weight alot less then it did before – maybe this step already solved your problem.

i would go on and load the images in photoshop and use the save for web method without the max resultion checked.

Hope this article helped you,

Ady.