jQuery convertion: Garagedoor effect using Javascript

Today I finally found the courage to go and try jQuery. After getting some people say: “You should use jQuery instead of scriptaculous.” I began thinking. What is the reason I choose script.aculo.us again? Must have been something I read in that time.
Anyway, today I found the time to look at jQuery a bit and thought: Let’s convert my very first posted script to jQuery!

After 5 minutes of reading about selectors in jQuery and 15 minutes of coding it was born. I am super amazed by the results! About 40%/50% less code and about 200% less time needed to write the script. I bet that in the future 400% less time is reachable!

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

jQuery convertion: Garagedoor effect using Javascript

Download jQuery Garage Door zip-archive Example Open the jQuery Garage Door example

Since this article is a redo of Garagedoor effect using Javascript I’ll just make it so that it fits jQuery.

An example of the GarageDoor effect in work is found here: http://www.gayadesign.com/scripts/jquerygaragedoor/

Download the following archive containing everything you need: http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip

Unzip the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs.

First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need jQuery. This library enables interface effects, so you don’t have to create it yourself. So grab jQuery and upload it to your server.

Add the following code in the tag of your page:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/garagedoorjQuery.js" type="text/javascript"></script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css' />

This will load the scripts and styles needed for the GarageDoor to work. Adjust the paths where needed.

The next thing you want to do is to create the HTML layout for the garagedoors. The following code shows the structure you need to create for your document:

<div class='garagedoor' id='garagedoor'>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
</div>

his contains two items that will be the garagedoor. The keywords linktofile and uritooverlayimage have to be adjusted in order to make it work. Linktofile is the URL of the page the button has to link to, might be confusing because it’s not an a tag, but Javascript fixes it for you.

The items have a default size of: 100px width and 80px height. Create overlay images according to these dimensions. In order to change the size, take a look in the garagedoor.css file and adjust the width and height of several elements.

All there is left to do is call the GarageDoor to enable the effect!

<script type="text/javascript">
    GarageDoor.scrollY = -55;
    GarageDoor.scrollX = 0;
    GarageDoor.setBindings('garagedoor');
</script>

The first line in the <script> tag sets the amount of scrolling the overlay has to do when the cursor is floating over an item. In this example the overlay has to go 55 up, which means move -55px on the Y-axis.
You can also make it scroll horizontal.

Give the id of the garagedoor container to the setBindings method and the GarageDoor effect will be initialized! Be sure to make the call after creating the html.

Hope you liked this jQuery version of the Garage Door. No more prototype conflicts!

Stay tuned for more jQuery convertions!

Liked this article? Sharing is caring!

59 Comments on this subject

  1. Drew said:

    This is awesome Gaya, it’s really nice to see you getting into jQuery as it is my Javascript library of choice. You should consider submitting some of these to NETTUTS, the quality is superb.

  2. Gaya said:

    @Drew
    Thanks Drew! I was thinking about submitting something to NETTUTS. Already pitched an idea to them. I think my next Javascript / jQuery adventure will be for NETTUTS.

    Also: Dev-tips is now in the partners list. Thanks again Drew.

  3. Marco said:

    Finally, you see the “light of jQuery”. Took you a while, but I’m glad you made it.

    Anyway, still pretty cool to see this neat effect, now using jQuery! Well done Gaya, keep up the good work :) .

    Ps. Load jQuery from Google, will save you bandwidth and hosting multiple jQuery files :) .

  4. Gaya said:

    @Marco
    Thanks for being part of my enlightenment Marco. I hope this will bring more interesting developers to my site =)

    Will load from google if I am implementing jQuery on GayaDesign. Will save me time, and the user!

  5. Pablo said:

    Great effect. Can I suggest that you add your example page and images to the package. It makes it easier to download, get it working locally and then modify.

  6. TheEagle said:

    The best over the net But it would be better if the overlay overflow is hidden.I don’t mean in the code I mean in the result.For example when the overlay overflow a border around the item it will be hidden..like a window or a real garage door.I tried to do it by putting a Div with overflow:hidden around the overlay but it is just ignored by the browser?!!

    Could any one help?

  7. Banibeteeli said:

    Извините, внезапно стал серьезным Ваха, мгновенно сбросив маску великосветского повесы. Кажется, происходит что-то важное.
    А что тут думать? удивилась Альмия. Я, вообще-то, жить хочу и не намерена умирать через два-три года. Да и магия вещь интересная. Для семьи тоже полезно. Ты сам подумай, как среагируют в обществе, когда узнают, что твоя дочь великий маг.
    Противоположная дверь исчезла, и на пороге показалась чернокожая красавица с гривой белоснежных волос.
    Переливающийся непривычными глазу любого трирроунца цветами парк вокруг посольства ордена Аарн приближался. Альмия нервно вздрогнула, парк она уже посещала, и это не пугало, даже наоборот. А вот в самом посольстве бывать не доводилось. С какой, интересно, стати ее отец получил три приглашения на устраиваемый послом прием?
    Бери и моих, появился в еще одной рамке Релир. Мало ли, у тебя всего восемь тысяч бойцов, может и не хватить.

    [url=http://agticreche.net16.net/article.php?article=702426]Легкие и эффективные диеты[/url]
    [url=http://agticreche.net16.net/article.php?article=112264]Диета похудеть на 5 кг[/url]
    [url=http://agticreche.net16.net/article.php?article=498898]Конструктор диет отзывы[/url]
    [url=http://agticreche.net16.net/article.php?article=978150]Эффективна ли гречневая диета[/url]
    [url=http://agticreche.net16.net/category.php?category=11&page=2]Уникальная диета[/url]

    [url=http://deselcentlond.net16.net/article.php?article=813086]Диет система 30 плюс[/url]
    [url=http://deselcentlond.net16.net/category.php?category=20&page=1]Диета людмилы гурченко[/url]
    [url=http://deselcentlond.net16.net/article.php?article=59189]Диета татьяны устиновой[/url]
    [url=http://deselcentlond.net16.net/article.php?article=769476]Вода во время диеты[/url]
    [url=http://deselcentlond.net16.net/article.php?article=950813]Диета южного берега[/url]

    [url=http://disczenesxe.net16.net/article.php?article=129775]Диета елены виниловой отзывы[/url]
    [url=http://disczenesxe.net16.net/article.php?article=782447]Какая диета при язве желудка[/url]
    [url=http://disczenesxe.net16.net/category.php?category=5&page=1]Диета сонома[/url]
    [url=http://disczenesxe.net16.net/article.php?article=4139]Диета при беременности 1 триместр[/url]
    [url=http://disczenesxe.net16.net/article.php?article=181276]Способы диеты[/url]

    [url=http://drumuninra.hostzi.com/article.php?article=413137]Диета маргариты королевой книга[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=145125]Форум гречневой диеты[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=379739]Кремлевская диета отзывы негативные[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=647784]Диета при диафрагмальной грыже[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=437899]Меню французской диеты[/url]

    [url=http://elenoval.net16.net/article.php?article=90176]Дробная диета[/url]
    [url=http://elenoval.net16.net/article.php?article=742087]Мандариновая диета отзывы[/url]
    [url=http://elenoval.net16.net/article.php?article=464593]Легкая диета на неделю[/url]
    [url=http://elenoval.net16.net/article.php?article=578334]Самая эффективная диета для мужчин[/url]
    [url=http://elenoval.net16.net/article.php?article=388859]Аллергическая диета[/url]

    [url=http://esforposi.hostoi.com/article.php?article=607485]Диета для второй группы крови[/url]
    [url=http://esforposi.hostoi.com/article.php?article=533446]Диета для мужчин[/url]
    [url=http://esforposi.hostoi.com/article.php?article=406396]Диета вареный рис[/url]
    [url=http://esforposi.hostoi.com/article.php?article=54886]100 способов похудеть[/url]
    [url=http://esforposi.hostoi.com/article.php?article=588664]Водная диета отзывы комментарии[/url]

    [url=http://exexnaucom.net16.net/article.php?article=245403]Диета после операции язвы[/url]
    [url=http://exexnaucom.net16.net/article.php?article=560940]Диета при гепатите ц[/url]
    [url=http://exexnaucom.net16.net/article.php?article=97622]Диета без смс[/url]
    [url=http://exexnaucom.net16.net/article.php?article=817756]Диета после панкреатита[/url]
    [url=http://exexnaucom.net16.net/article.php?article=359071]Гороховая диета[/url]

    [url=http://glowenamec.hostoi.com/article.php?article=144259]Диета для быстрого сброса веса[/url]
    [url=http://glowenamec.hostoi.com/article.php?article=927512]Тест диета без смс[/url]
    [url=http://glowenamec.hostoi.com/article.php?article=216424]Супер диета бесплатно[/url]
    [url=http://glowenamec.hostoi.com/article.php?article=410471]Подбор диеты бесплатно[/url]
    [url=http://glowenamec.hostoi.com/article.php?article=290509]Диета для фигуры[/url]

    [url=http://panbobuno.hostzi.com/article.php?article=514033]Скачать капустная диета[/url]
    [url=http://panbobuno.hostzi.com/article.php?article=891935]Минусы кремлевской диеты[/url]
    [url=http://panbobuno.hostzi.com/article.php?article=425619]Диета при эрозивно геморрагическом гастрите[/url]
    [url=http://panbobuno.hostzi.com/article.php?article=264753]Очистительная диета[/url]
    [url=http://panbobuno.hostzi.com/article.php?article=495921]Диета при оксалатах в почках[/url]

    [url=http://pitwamopi.hostzi.com/article.php?article=641105]Диета для прибавления веса[/url]
    [url=http://pitwamopi.hostzi.com/category.php?category=19&page=2]Сахарный диабет диета питание[/url]
    [url=http://pitwamopi.hostzi.com/article.php?article=628151]Диета 400 ккал[/url]
    [url=http://pitwamopi.hostzi.com/article.php?article=316727]Макаронная диета для похудения[/url]
    [url=http://pitwamopi.hostzi.com/article.php?article=633732]Диета 5 на каждый день[/url]

    [url=http://drumuninra.hostzi.com/article.php?article=153341]Диета для похудения после 50[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=63256]Подари себе жизнь диета[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=866075]Диет формула[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=22932]Диета кефир и творог[/url]
    [url=http://drumuninra.hostzi.com/article.php?article=653847]Жидкая диета результаты[/url]

    [url=http://tellopupmoi.net16.net/article.php?article=50172]Молочная диета для похудения отзывы[/url]
    [url=http://tellopupmoi.net16.net/article.php?article=156256]Арбузная диета для похудения[/url]
    [url=http://tellopupmoi.net16.net/article.php?article=438282]Диета при межпозвоночной грыже[/url]
    [url=http://tellopupmoi.net16.net/article.php?article=606404]Диета против прыщей[/url]
    [url=http://tellopupmoi.net16.net/article.php?article=405181]Диета по дням недели[/url]

    [url=http://tusmilgtaming.webatu.com/article.php?article=198351]Рецепты 4 стол диета[/url]
    [url=http://tusmilgtaming.webatu.com/article.php?article=495944]Диета 3 по певзнеру[/url]
    [url=http://tusmilgtaming.webatu.com/article.php?article=48589]Грейпфрут диета[/url]
    [url=http://tusmilgtaming.webatu.com/article.php?article=651056]Диета для бедер отзывы[/url]
    [url=http://tusmilgtaming.webatu.com/article.php?article=816576]Меню диеты 9[/url]

  8. viagra said:

    Iˇ¦ve been exploring for a bit for any high-quality articles or weblog posts in this kind of area . Exploring in Yahoo I eventually stumbled upon this web site. Studying this info So i am happy to convey that I’ve an incredibly good uncanny feeling I discovered exactly what I needed. I most indisputably will make certain to do not overlook this site and give it a glance on a constant. Read this kamagra bez recepty

  9. mags said:

    upon looking different designs of menu using JQ, your work caught my eye, simple and sexy. will be using this on my project with proper credits to you. thanks

  10. Steve said:

    can you add “onClick” function to your sliding effect. I want the use onClick to call a sliding layer (something we already have in place) but I would like to use your code for the nav. It appears that your links are attached to the “Title =” tag. Is there a way may my onClick function work there?

    Thanks so much.

    Love your product.

  11. Deadpool said:

    Amazing script, thanks for all your efforts! I wasn’t fond of the use of title for the url link however, as I don’t like having the text popup, so I switched it js file to use the dir attribute instead. Works like a charm and no hover popup. Thanks again!

  12. Walter said:

    Thanks for another fantastic post. Where else may just anybody
    get that type of information in such an ideal manner of writing?
    I’ve a presentation subsequent week, and I am at the look for such information.

  13. m賩s said:

    Fantastic beat ! I wish to apprentice while you amend your
    website, how can i subscribe for a blog web
    site? The account helped me a appropriate deal. I had been a little
    bit familiar of this your broadcast offered bright transparent concept

  14. Miguel said:

    Hey there, I think your site might be having browser compatibility issues.

    When I look at your website in Safari, it looks fine but when
    opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, amazing blog!

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>