Flickrs like drop down menu on hover

16 views
Skip to first unread message

cuty

unread,
Sep 15, 2009, 1:09:28 AM9/15/09
to MooTools Users
Hello,

I am trying to build up flickrs like application on my page. On
flickrs once user logs in he/she gets his/her avatar and besides that
avatar he/she gets drop down menu where he can find the other sub link
related to his account. so i have copied this and tried it separately.
but this effect is with prototype. can anyone please tell me how can i
implement this with mootools?

Here is my code so you can get the idea what exactly i am talking
about.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome to Flickr!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="photography, digital photography,
cameraphones, camera, hobby photography, photo, digital camera,
compactflash, smartmedia, cameras, canon, nikon, olympus, fujifilm,
video">
<meta name="description" content="Flickr is almost certainly the best
online photo management and sharing application in the world. Show off
your favorite photos and videos to the world, securely and privately
show content to your friends and family, or blog the photos and videos
you take with a cameraphone.">
<meta http-equiv="imagetoolbar" content="no">
<meta name="title" content="Welcome to Flickr!" />

<meta name="medium" content="image" />

<link rel="image_src" href="" />
<meta name="viewport" content="width=820">

<link type="text/css" rel="stylesheet" href="style.css">

<script type="text/javascript">
var global_magisterLudi = '466f88d3bba13b8ed1ab437648ac5dc2',
global_auth_hash = 'a1c93ecf6e97ab890cf60715ef05d3dc',
global_auth_token = '',
global_flickr_secret = '724c86a27aecfbb8',
global_slideShowVersion = '6708',
global_slideShowCodeVersion = '34351',
global_slideShowVersionV2 = '33427',
global_slideShowCodeVersionV2 = '49745',
global_slideShowTextVersion = '66488',
global_slideShowVersionV3 = '71649',
global_nsid = '39651334@N04',
global_ispro = 0,
global_dbid = '39619195',
global_name ='cuty_cute',
global_expire ='0',
global_icon_url ='http://l.yimg.com/g/images/
buddyicon.jpg#39651334@N04',
global_tag_limit = '75',
global_collection_depth_limit = 5,
global_stewartVersion = '71377',
global_contact_limit = '3000',
global_eighteen = 1,
global_group_limit = 10,
global_photos_ids_limit = 20,
one_photo_show_belongs = 0,
prefs_isset_viewgeo = 0,
photos_url = '/photos/39651334@N04/',
disable_stewart = 0;
disable_geo = 0;
var global_rper = 0;

var global_widget_carets = 0;
var global_explore_search = 1;

var global_intl_lang = 'en-us';

var _photo_root = 'http://farm.static.flickr.com/';
var _site_root = 'http://www.flickr.com';
var _images_root = 'http://l.yimg.com/g/images';
var _intl_images_root = 'http://l.yimg.com/g/images/en-us';


var do_bbml = 1;

</script>

<script type="text/javascript" src="http://l.yimg.com/g/javascript/
global.js.v76438.14"></script>

<script type="text/javascript" src="http://l.yimg.com/g/javascript/
fold_main.js.v48851.48851.48851.48851.48851.38771.48851.48851.76369.38771.71746.71745.62864.38771.66362.77756.76912.69832.38771.63688.38771.73289.67088.55944.73491.14"></
script>

</head>

<body>

<div id="Main" class="">

<table class="launchHead">
<tr>
<td width="48">
<a href="/photos/39651334@N04/"><img src="http://
l.yimg.com/g/images/buddyicon.jpg#39651334@N04" alt="edit your buddy
icon" width="48" height="48" style="vertical-align:middle"></a>

</td>
<td>
<h1><span lang="fr" title="fr-fr">Salut</span> cuty_cute!</h1>
<small id="VastConspiracytoDumbDownFlickr">Now you know how to
greet people in French!</small>
</td>
</tr>

</table>

</div><!--end Main-->

<div id="person_hover">
<div id="person_hover_shadow" class="shadowLight"></div>
<div id="person_hover_inner">
<a href="#" id="person_hover_link"></a>
<div id="personmenu_button_bar" class="candy_button_bar">
<img src="http://l.yimg.com/g/images/personmenu_down_default.gif"
alt="More options" id="personmenu_down_button" class="candy_button"
width="15" height="48" alt="" border="0" onclick="_ge
('person_hover').hover_toggle_menu();">
<div class="candy_menu" id="personmenu_down_menu">

<div id="personmenu_border_blocker"></div>

<p id="personmenu_relationship_p">Hi, you!</p>
<div id="person_menu_other_div">
<a class="block" href="#" id="personmenu_contact_link"
onclick="_ge('person_hover').hover_add_contact(); return false;"></a>
<div class="menu_item_line_above">
<a class="block" href="#"
id="personmenu_photos_link">Photostream</a>
</div>

<a class="block" href="#"
id="personmenu_collections_link">Collections</a> <a class="block"
href="#" id="personmenu_sets_link">Sets</a>

<a class="block" href="#" id="personmenu_profile_link">Profile</
a>
<a class="block" href="#" id="personmenu_tags_link">Tags</a>
<a class="block" href="#" id="personmenu_archives_link">Archives</
a>
<a class="block" href="#" id="personmenu_map_link">Map</a> <a
class="block" href="#" id="personmenu_faves_link">Favorites</a>

<a class="block" href="#" id="personmenu_contacts_link">Contacts</
a>

<div class="menu_item_lines_around">
<a class="block" href="#" id="personmenu_mail_link">Send
FlickrMail</a>
</div>
<a href="/ignore.gne" id="personmenu_block_link"></a>

</div>
<div id="person_menu_you_div">

<div class="menu_item_line_above">
<a class="block" href="/photos/39651334@N04/"
id="personmenu_your_photos_link">Your Photostream</a>

</div>
<a class="block" href="/photos/39651334@N04/collections/"
id="personmenu_collections_link">Your Collections</a> <a
class="block" href="/photos/39651334@N04/sets/"
id="personmenu_sets_link">Your Sets</a>
<a class="block" href="/recent_activity.gne"
id="personmenu_activity_link">Recent Activity</a>
<a class="block" href="/mail/"
id="personmenu_your_mail_link">FlickrMail</a>

<a class="block" href="/account/"
id="personmenu_account_link">Your Account</a>
<a class="block" href="/people/39651334@N04/"
id="personmenu_your_profile_link">Your Profile</a>

<a class="block" href="/photos/39651334@N04/map/"
id="personmenu_your_map_link">Your Map</a> <a class="block" href="/
iconbuilder/" id="personmenu_buddyicon_link">Your Buddy Icon</a>
</div>
</div>
</div>

</div>
</div>

<script type="text/javascript">

</script>

<script type="text/javascript">

try{
if (window.personmenu_init) personmenu_init(1);
} catch(er) {}

</script>

<script src="http://us.adserver.yahoo.com/a?
f=792600147&p=flickr&l=FOOT9&c=r"></script>
</body>
</html>
[/code]

Thanks.

Fábio M. Costa

unread,
Sep 15, 2009, 8:26:34 AM9/15/09
to mootool...@googlegroups.com
Hi cuty,

As this is a lot of code, try using mooshell.net this will help us modify your code and see it "in action".
Will be easier to help you.

--
Fábio Miranda Costa
Solucione Sistemas
Front-End Engineer
http://meiocodigo.com

cuty

unread,
Sep 16, 2009, 6:27:35 AM9/16/09
to MooTools Users
Hello Fábio, thanks for your reply,

As you said i have wrapped up my code into mooshell.As this effect is
not done with mootools, that's why actually its not working in
mooshell, but you can see it here

http://mooshell.net/MSRHv/

now on hover (you can check my previous code as its html source code
which is working) of the image i want drop down menu.

could you please tell me how can i do that?


On Sep 15, 5:26 pm, Fábio M. Costa <fabiomco...@gmail.com> wrote:
> Hi cuty,
>
> As this is a lot of code, try using mooshell.net this will help us modify
> your code and see it "in action".
> Will be easier to help you.
>
> --
> Fábio Miranda Costa
> Solucione Sistemas
> Front-End Engineerhttp://meiocodigo.com
> > buddyicon.jpg#39651334@N04<http://l.yimg.com/g/images/%0Abuddyicon.jpg#39651334@N04>
> > f=792600147&p=flickr&l=FOOT9&c=r<http://us.adserver.yahoo.com/a?%0Af=792600147&p=flickr&l=FOOT9&c=r>

Piotr Zalewa

unread,
Sep 16, 2009, 6:42:23 AM9/16/09
to mootool...@googlegroups.com
It is not working as you have some globals. All javascript is placed within domready event.

It may be achieved by a little hack (closing style in CSS window will open ability to write directly into the HEAD section).
Here is a version with the hack: http://mooshell.net/sKqAv/

I think it's still not working thought


--
London, UK

cuty

unread,
Sep 16, 2009, 6:42:52 AM9/16/09
to MooTools Users
I just got this link, Can anyone please tell me how can i use it here
for my effect?

http://www.php-help.ro/mootools-12-javascript-examples/javascript-drop-down-menu-using-mootools-12/

On Sep 16, 3:27 pm, cuty <poojiej...@gmail.com> wrote:
> Hello Fábio, thanks for your reply,
>
> As you said i have wrapped up my code into mooshell.As this effect is
> not done with mootools, that's why actually its not working in
> mooshell, but you can see it here
>
> http://mooshell.net/MSRHv/
>
> now on hover (you can check my previous code as its html source code
> which is working) of the image i wantdropdownmenu.
>
> could you please tell me how can i do that?
>
> On Sep 15, 5:26 pm, Fábio M. Costa <fabiomco...@gmail.com> wrote:
>
> > Hi cuty,
>
> > As this is a lot of code, try using mooshell.net this will help us modify
> > your code and see it "in action".
> > Will be easier to help you.
>
> > --
> > Fábio Miranda Costa
> > Solucione Sistemas
> > Front-End Engineerhttp://meiocodigo.com
>
> > On Tue, Sep 15, 2009 at 2:09 AM, cuty <poojiej...@gmail.com> wrote:
>
> > > Hello,
>
> > > I am trying to build up flickrs like application on my page. On
> > > flickrs once user logs in he/she gets his/her avatar and besides that
> > > avatar he/she getsdropdownmenuwhere he can find the other sub link
> ...
>
> read more »

Oskar Krawczyk

unread,
Sep 16, 2009, 7:40:54 AM9/16/09
to mootool...@googlegroups.com
I'm sorry for being harsh but tell me, how do you expect to build a "flickr like application" using MooTools (apparently) if you don't know how to modify/create a simple script like that?

Show us what you have done with the code, have you even tried to do something? Post some code to mooshell.net and we'll be happy to fix/alter it there. Don't wait for a pre-made solution.

___

Oskar Krawczyk
http://nouincolor.com

cuty

unread,
Sep 16, 2009, 9:20:10 AM9/16/09
to MooTools Users
I am sorry that i had asked pre-made script. but i just wanted to see
if someone has worked on something like this similar.

Ok, here is what i have tried

http://mooshell.net/WAuNJ/

Now what i am trying to do is on hover of the image(as my first code
is showing), i want to show the drop down menu. can anyone further
guide me how can i move ahead with this?

On Sep 16, 4:40 pm, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> I'm sorry for being harsh but tell me, how do you expect to build a "flickr
> like application" using MooTools (apparently) if you don't know how to
> modify/create a simple script like that?
> Show us what you have done with the code, have you even tried to do
> something? Post some code to mooshell.net and we'll be happy to fix/alter it
> there. Don't wait for a pre-made solution.
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com
>
> On Wed, Sep 16, 2009 at 11:42, cuty <poojiej...@gmail.com> wrote:
>
> > I just got this link, Can anyone please tell me how can i use it here
> > for my effect?
>
> >http://www.php-help.ro/mootools-12-javascript-examples/javascript-dro...
> ...
>
> read more »

Piotr Zalewa

unread,
Sep 16, 2009, 9:34:35 AM9/16/09
to mootool...@googlegroups.com
And what's the problem?
It is working on my FF ... (just image has to be taken from your server)
http://mooshell.net/8A6nH/

2009/9/16 cuty <pooji...@gmail.com>


Now what  i am trying to do is on hover of the image(as my first code
is showing), i want to show the drop down menu. can anyone further
guide me how can i move ahead with this?


--
London, UK

cuty

unread,
Sep 16, 2009, 9:43:45 AM9/16/09
to MooTools Users
I want to give the exact effect like flickrs has. Like in this on
mouse hover i am getting the drop down,so till the someone wont hover
on the image they wont be able to see the drop down menu.



On Sep 16, 6:34 pm, Piotr Zalewa <zal...@gmail.com> wrote:
> And what's the problem?
> It is working on my FF ... (just image has to be taken from your server)http://mooshell.net/8A6nH/
>
> 2009/9/16 cuty <poojiej...@gmail.com>

Piotr Zalewa

unread,
Sep 16, 2009, 9:55:29 AM9/16/09
to mootool...@googlegroups.com
I will not give you a code.
Hide the "drop down image" on domready
Show it on avatar hover
That's all

Hint: I would work on some html/css a bit make it possible

Piotr


2009/9/16 cuty <pooji...@gmail.com>



--
London, UK

Deepali

unread,
Oct 30, 2009, 5:24:07 AM10/30/09
to MooTools Users
Hello,

I am doing something pretty similar. but i want it should work on
click not on the hover.
so i was trying something like this

http://mooshell.net/6nKFe/

but its showing me drop down directly. that means i am missing
something. can anyone please check my code and correct me what i am
missing?

On Sep 16, 6:55 pm, Piotr Zalewa <zal...@gmail.com> wrote:
> I will not give you a code.
> Hide the "drop down image" on domready
> Show it on avatar hover
> That's all
>
> Hint: I would work on some html/css a bit make it possible
>
> Piotr
>
> 2009/9/16 cuty <poojiej...@gmail.com>

Deepali

unread,
Oct 30, 2009, 7:04:30 AM10/30/09
to MooTools Users
I am sorry that link was showing previous slider. here is the proper
link

http://mooshell.net/6nKFe/1

any help?
Message has been deleted
Message has been deleted

Deepali

unread,
Oct 31, 2009, 3:17:43 AM10/31/09
to MooTools Users
what i am missing here.

window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function
( elem ){

var list = elem.getElement('ul.links'),slider = $
('li.menu'),fx =
new Fx.Reveal(slider);

list.addEvent('menu', function(e){
if($(e.target) != slider) fx.toggle();

});
})
});

can anyone please tell me.

On Oct 31, 10:09 am, Deepali <deeps...@gmail.com> wrote:
> Any help?

Oskar Krawczyk

unread,
Oct 31, 2009, 7:12:02 AM10/31/09
to mootool...@googlegroups.com
Message has been deleted
Message has been deleted
Message has been deleted

Deepali

unread,
Oct 31, 2009, 7:45:34 AM10/31/09
to MooTools Users
Hi Oskar,

Thanks for your reply. i have tried the following

http://mooshell.net/bK7XY/2

But i think your solution is much better than mine. i mean its more
proper.

Thanks.
Reply all
Reply to author
Forward
0 new messages