vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Home Enhancements - rocket dock menu on forum:) [ jquery & Css ] support facebook & twitter + work on IE9 (https://vborg.vbsupport.ru/showthread.php?t=261618)

Special Pages 05-16-2011 09:19 PM

To tell you the truth, it looks pretty good.

fxwoody 05-20-2011 09:11 AM

1 Attachment(s)
If anyone interested, i rewrote the scripts to work on every forum pages under the navbar.
Just follow the instructions within the files.

Hope it helps out a few ;)

Works fine in my 4.1.3

***EDITED***

I removed my attachment because it's not working well!

FReeSTER 07-16-2011 06:06 AM

how to add multi links per image? can that be posible?

doctorsexy 07-19-2011 08:03 AM

:D Got it to work on 4.1.4... with a bit of head scratching... smashin... thank you :)

Macgiber 07-22-2011 01:43 AM

Install

gyancentral 07-24-2011 10:12 AM

The template modification is excellent.
It works well not only with vbulletin but also with wordpress and joomla too.
I wanted one help.
When you move your curson on the icon.the png image inserted over there pops out.
So i wanted to tell that is it possible to reduce the height of the popping..
Because as you can say in the image below the text written beneath the modification overlaps the forum..So if you can tell me some way in order to reduce the popping effect.

It will be thankfull to me..

And one more thing instead of this effect if you can add some effects like as you can see in this pic when an icon is clicked it shows a dropping effect unlike in mac os x.Since the template modification was made with the help of jquery it would be possible to create such type of effects.If possible then please do let everyone know about me.
The Post was ausumn..its better than an icon navbar.
Thanks once again

doctorsexy 07-24-2011 04:27 PM

Think its this you have to alter .... itemWidth: 40,

kfyonur 12-08-2011 07:32 AM

1 Attachment(s)
it doesn't work on 4.1.8..it seems like that.

doctorsexy 12-08-2011 08:59 AM

You have a jquery conflict...

kfyonur 12-08-2011 09:27 AM

what can i do ?

kfyonur 12-08-2011 10:00 AM

it is working but it prevents working of ck editor.

Quote:

Originally Posted by Da-Vinci (Post 2183637)
Works fine for me but the way I found it best to implement this was to do the following.

In your Header Template add this to the very top.

HTML Code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bar.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->


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

Then in your Navbar Template add this.

HTML Code:

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="your link here"><img src="images/home.png" alt="home" /><span>home</span></a>
  <a class="dock-item" href="your link here"><img src="images/email.png" alt="contact us" /><span>contact us</span></a>
  <a class="dock-item" href="your link here"><img src="images/portfolio.png" alt="usercp" /><span>usercp</span></a>
  <a class="dock-item" href="your link here"><img src="images/fb.png" alt="facebook" /><span>follow as on facebook</span></a>
  <a class="dock-item" href="your link here"><img src="images/tw.png" alt="twitter" /><span>follow as on twitter</span></a>
  <a class="dock-item" href="your link here"><img src="images/history.png" alt="time" /><span>time</span></a>
  <a class="dock-item" href="your link here"><img src="images/calendar.png" alt="calendar" /><span>calendar</span></a>
  <a class="dock-item" href="your link here"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<script type="text/javascript">
   
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>



kfyonur 12-08-2011 06:14 PM

it is also working but it prevents working of ck editor.

Quote:

Originally Posted by mun3im (Post 2182758)

http://www.nextgenerationgamers.co.uk/forums/
with the power of god i have fix the problems

so for any one who got prob with having to many script jquery on forum he have to use this code :

Code:


<!--- rocketDock Menu developed and Translated to Arabic By Twi[L]ighT Dz , www.shba7.cc/vb  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="http://shba7.cc/vb/js/jquery.js"></script>
<script type="text/javascript" src="http://shba7.cc/vb/js/bar.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(http://shba7.cc/vb/iepngfix.htc) }
 </style>
<![endif]-->

<link href="http://shba7.cc/vb/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="your link here"><img src="images/home.png" alt="home" /><span>home</span></a>
  <a class="dock-item" href="your link here"><img src="images/email.png" alt="contact us" /><span>contact us</span></a>
  <a class="dock-item" href="your link here"><img src="images/portfolio.png" alt="usercp" /><span>usercp</span></a>
  <a class="dock-item" href="your link here"><img src="images/fb.png" alt="facebook" /><span>follow as on facebook</span></a>
  <a class="dock-item" href="your link here"><img src="images/tw.png" alt="twitter" /><span>follow as on twitter</span></a>
  <a class="dock-item" href="your link here"><img src="images/history.png" alt="time" /><span>time</span></a>
  <a class="dock-item" href="your link here"><img src="images/calendar.png" alt="calendar" /><span>calendar</span></a>
  <a class="dock-item" href="your link here"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<script type="text/javascript">
   
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>
</body>
</html>


the deference between the first code and the second is :

first code : you upload script js to host ( if you have too many script it will be a prob because some scripts will stop )

second code : to resolve the issue we call the scripts js from another host so i put from my own website + u can make changes always ;)


i hope that be helpful brother if you need something eals just ask from me


SEW810 01-09-2012 03:01 AM

Installed.

Now... we have
Quote:

1- If you want to display the rocket-dock below the header place the code at the end of template [header]
2-If you want to display the rocket-dock only in the home just insert the code at the end of template [forumhome]
3-If you want to display the menu in all pages + like the example,
Place the code after the word
What about if I want to use it INSTEAD navbar. ?What do I have to do?
Regards!!!


All times are GMT. The time now is 01:01 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01569 seconds
  • Memory Usage 1,771KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (2)bbcode_html_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (13)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete