The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Dock

View previous topic View next topic Go down

Dock

Post by Hellrose on April 20th 2011, 7: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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by Darren1 on April 20th 2011, 8: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
Helper
Helper

Male Posts : 11853
Reputation : 563
Language : English

Back to top Go down

Re: Dock

Post by Hellrose on April 20th 2011, 12: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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by Darren1 on April 20th 2011, 12: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
Helper
Helper

Male Posts : 11853
Reputation : 563
Language : English

Back to top Go down

Re: Dock

Post by Hellrose on April 20th 2011, 2: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:


THank you in advance Very Happy

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by Hellrose on April 24th 2011, 3:36 am

BUMP! Very Happy

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by LGforum on April 24th 2011, 4: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
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Dock

Post by Hellrose on April 26th 2011, 3:44 pm

BUMP

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by ioncube on April 26th 2011, 11:33 pm

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
Forumember

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

http://defencedog.blogspot.com/

Back to top Go down

Re: Dock

Post by Hellrose on April 27th 2011, 1: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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by ioncube on April 28th 2011, 1: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
Forumember

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

http://defencedog.blogspot.com/

Back to top Go down

Re: Dock

Post by Hellrose on April 28th 2011, 1: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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

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

you could have pressed thnx button... Laughing
Ok forget the code I posted in http://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
Forumember

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

http://defencedog.blogspot.com/

Back to top Go down

Re: Dock

Post by Hellrose on April 29th 2011, 11:17 am

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

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by ioncube on April 29th 2011, 11:40 am

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
Forumember

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

http://defencedog.blogspot.com/

Back to top Go down

Re: Dock

Post by Hellrose on April 29th 2011, 11:44 am

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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Dock

Post by MrMario on April 30th 2011, 4:34 am

Solved?

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

View previous topic View next topic Back to top


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