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!
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' /> </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' /> </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>
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!
Articles like this one
Articles like this one
42 Comments
-
dude, keep up the good work! I’m sure I’ll be using these tut very soon. thanks again…
-
thanks Louis for commenting and RTing my tweets =D
-
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.
-
@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.
-
Awesome effect, good to see you’ve done it with jQuery easily!
-
@Janko:
Yeah! jQuery amazed me! This will save me so much time!
-
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 🙂 .
-
@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!
-
“Hate to say I told you so” 😉 Keep up the good work Gaya. Will save me some frustrations as well 😉
-
Awesome, another jQuery victim, muhahahaha, anyway congratulations on discovering the power of jQuery and making such a nice tutorial.
-
Sorry for double post but a suggestion: how about a variable controlling the scrolling speed?
-
Great idea Matěj! Could be implemented with ease. But note that the garage door opens faster than closes. Anyway, thanks for the comment!
-
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.
-
gr8!! effect,
your site design is also good,
regards,
Nitin Sawant
-
Thanks for the comment Nitin 🙂
-
very cool!!
-
great stuff, bro! thanks for sharing!
your site rocks 🙂 the 3d stuff is nicely done.
-
Awesome.. thank you Gaya..
(in my country Indonesia : Gaya means Style)
-
@Sofian: hah, thanks dude. I’ve heard that one before. Funny thing that I’m half Indonesian
-
Wow! This is such an impressive site. How did you do the header its cool to see.
-
nice article…maybe, its more wonderful with png image….
-
thx collect it to
ajax.wespai.com
-
Good that you finally found jquery and shared it with us.
-
Hi you guys
is it possible to put more than one link underneath each “garage door”? If so, how do i do it?? 🙂
hope you have an answer because i am really stuck on this one..
-
Cheerful menu 🙂
-
Hey..nice tutorial..
i bookmarked this page in case i need it someday..
anyway, i thought you’re come from Indonesia, since Gaya is actually a bahasa that means Style.. 😀
-
Thank you very much for your explain.I think I will study well from reading these .
-
Having issues getting this to work in blogger, can it be done? If so is there something I need to do different than what is mentioned above?
Thanks in advance
-
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?
-
Great post, that is a very cool effect! Thanks for Sharing!
-
Извините, внезапно стал серьезным Ваха, мгновенно сбросив маску великосветского повесы. Кажется, происходит что-то важное.
А что тут думать? удивилась Альмия. Я, вообще-то, жить хочу и не намерена умирать через два-три года. Да и магия вещь интересная. Для семьи тоже полезно. Ты сам подумай, как среагируют в обществе, когда узнают, что твоя дочь великий маг.
Противоположная дверь исчезла, и на пороге показалась чернокожая красавица с гривой белоснежных волос.
Переливающийся непривычными глазу любого трирроунца цветами парк вокруг посольства ордена Аарн приближался. Альмия нервно вздрогнула, парк она уже посещала, и это не пугало, даже наоборот. А вот в самом посольстве бывать не доводилось. С какой, интересно, стати ее отец получил три приглашения на устраиваемый послом прием?
Бери и моих, появился в еще одной рамке Релир. Мало ли, у тебя всего восемь тысяч бойцов, может и не хватить.[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]
-
Does this work with the latest version of jQuery (1.6)? Please email me.
-
I do agree with all of the ideas you’ve presented in your post. They are very convincing and will certainly work. Still, the posts are very short for starters. Could you please extend them a little from next time? Thanks for the post.
-
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
-
very good. thanks
-
Wow! This is such an impressive site. How did you do the header its cool to see.
-
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
-
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.
-
wooow….amazing
-
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!
-
Switched it in the js file* whoops
-
I can not get this script to work. Help please.
Recent comments