Dock
5 posters
Page 1 of 1
Dock
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
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
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: Dock
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
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
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
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
Darren1- Helper
- Posts : 11853
Reputation : 566
Language : English
Re: Dock
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
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: Dock
Could you please give me the following information so I can do some work?
Ill get cracking on this once I have these items
- 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
Darren1- Helper
- Posts : 11853
Reputation : 566
Language : English
Re: Dock
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
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
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: Dock
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.
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
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Dock
floating/docked social buttons codes; I have tested them on my forum; replace the required fields & URLs
Method has been adobted here click it
- 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&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
Re: Dock
ncie it works, how will it magnify?
and by the way, how can i add more? i tried to cop one of the codes but it wont show..
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
Re: Dock
for magnifying/rotating purpose you need to edit css &
add this beware I haven't tested it:
and the previous code must also be changed; while adding widget you have to enclose the previous one as follows:
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>
Re: Dock
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
-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
Re: Dock
you could have pressed thnx button...
Ok forget the code I posted in https://help.forumotion.com/t89107-dock#575652
use this instead & try again
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>
Re: Dock
it didnt magnify, it just change the position to the right
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: Dock
- 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);
}
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);
Re: Dock
this is what i want to, XD
http://www.ndesign-studio.com/blog/css-dock-menu
but thanks.. i already clicked he thanks button
http://www.ndesign-studio.com/blog/css-dock-menu
but thanks.. i already clicked he thanks button
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum