The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Dock

5 posters

Go down

Dock Empty Dock

Post by Hellrose April 20th 2011, 8:42 am

anybody know how can i add "Dock" feature?

here's the Demo:
http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/example%20files/all-examples.html

and here's the tutorial that i found:
http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

i hope someone have a knowledge on how to add that things Very Happy
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by Darren1 April 20th 2011, 9:40 am

Hi,

This is ment to be something like a nav bar, correct?

In order for this to even work, we'd need to edit the templates to remove the current (default) nav. bar values, then insert this one.

If your on PunBB, or PHPBB2, please provide us with the code you desire to use, with the links (unless their obvious like portal, forum, login ect) and the buttons you wish to use Wink

I'm on my weekend right now, so if you let us know ASAP I can have it done tomorrow for you, otherwise I won't be on for much time for the rest of the month ...
Although I do have a few other projects I want to complete, I would prioritize this Wink
Darren1
Darren1
Helper
Helper

Male Posts : 11853
Reputation : 566
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 20th 2011, 1:44 pm

i'll just make 2 docks, one will be linked to our school's website, and one will be linked on our school's facebook fanpage Very Happy
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by Darren1 April 20th 2011, 1:46 pm

Could you please give me the following information so I can do some work?
  • Forum versions
  • the code you wish to use
  • Links (unless their obvious ones such as home/portal/UCP ect
  • Images


Ill get cracking on this once I have these items Very Happy
Darren1
Darren1
Helper
Helper

Male Posts : 11853
Reputation : 566
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 20th 2011, 3:18 pm

Forum versions: phpbb2
the code you wish to use
Links:
This one for school: CLICK HERE
This one for facebook Fan Page: CLICK HERE

Images:
For Facebook Fanpage: any facebook icon will do
for school: Dock Logo110


THank you in advance Very Happy
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 24th 2011, 4:36 am

BUMP! Very Happy
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by LGforum April 24th 2011, 5:04 am

you could download the source code form the tutorial page. And put it in your forum description.
That will mean you have the dock and your old navbar.

But if you only want the dock then use the CSS to get rid of the old Navbar.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 26th 2011, 4:44 pm

BUMP
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by ioncube April 27th 2011, 12:33 am

floating/docked social buttons codes; I have tested them on my forum; replace the required fields & URLs
Code:
<a href="http://twitter.com/defencedog" style="display:scroll; position:fixed; bottom:350px; left:4px;" target="_blank" title="Follow Me on Twitter"><img src="http://i56.tinypic.com/z7tz5.jpg" border="0"/></a>

<a href="http://www.facebook.com/pages/DefenceDog/183379545033991" style="bottom: 310px; display: scroll; left: 4px; position: fixed;" target="_blank" title="Follow Me on Facebook"><img src="http://i54.tinypic.com/zwdwko.jpg" border="0" /></a>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=Defencedog&amp;loc=en_US" style="bottom: 270px; display: scroll; left: 4px; position: fixed;" target="_blank" title="Subscribe to DefenceDog by Email"><img src="http://i52.tinypic.com/se57r8.jpg" border="0" /></a>

<a href="http://feeds.feedburner.com/Defencedog" style="bottom: 230px; display: scroll; left: 4px; position: fixed;" target="_blank" title="Subscribe to RSS"><img src="http://i56.tinypic.com/1z498wo.jpg" border="0" /></a>

Method has been adobted here click it
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 27th 2011, 2:32 am

ncie it works, how will it magnify? Very Happy

and by the way, how can i add more? i tried to cop one of the codes but it wont show..
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by ioncube April 28th 2011, 2:25 am

for magnifying/rotating purpose you need to edit css &
add this beware I haven't tested it:
Code:
.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}

and the previous code must also be changed; while adding widget you have to enclose the previous one as follows:
Code:
<div class="flt-wdt">  ......previous code........ </div>
Regarding 2nd query what buttons you wanna add
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 28th 2011, 2:49 pm

nice.. it works.. so how can i make the rotate into magnify? i tried to change this

-o-transform: scale(1.2) rotate(6deg);

into this

-o-transform: scale(1.2) magnify(6deg);

but it didn't work
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by ioncube April 28th 2011, 11:10 pm

you could have pressed thnx button... Laughing
Ok forget the code I posted in https://help.forumotion.com/t89107-dock#575652

use this instead & try again
Code:
<div class="flt-wdt">
<a href="http://www.facebook.com/Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="your image.png" /></a>

<a href="http://twitter.com/Your profile" title="Follow me on Twitter"><img alt="Follow me on Twitter" src="your image.png" /></a>

<a href="http://www.delicious.com/Profile" title="Find me on Delicious"><img alt="Find me on Delicious" src="your image.png" /></a>

<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS"><img alt="Subscribe to RSS" src="your image.png" /></a>

<a href="http://your blog.blogspot.com/p/Contact page" title="Email me"><img alt="Email me" src="your image.png" /></a>
........
</div>
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 29th 2011, 12:17 pm

it didnt magnify, it just change the position to the right
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by ioncube April 29th 2011, 12:40 pm

Code:
.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}
The whole widget will be seen in right. Changing every "right" marked in bold will make it to "left"

float:right;
clear:right;

For magnification you have to increase every scale from 1.2 to more than 1.2 in the following code part
Code:
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Dock Empty Re: Dock

Post by Hellrose April 29th 2011, 12:44 pm

this is what i want to, XD

http://www.ndesign-studio.com/blog/css-dock-menu

but thanks.. i already clicked he thanks button Smile
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Dock Empty Re: Dock

Post by MrMario April 30th 2011, 5:34 am

Solved?
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum