Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
Reload this Page Forum Home Enhancements - rocket dock menu on forum:) [ jquery & Css ] support facebook & twitter + work on IE9
FAQ Community Calendar Today's Posts Search

Reply
Page 3 of 6 12 3 45 Last »
 
Thread Tools
rocket dock menu on forum:) [ jquery & Css ] support facebook & twitter + work on IE9 Details »»
rocket dock menu on forum:) [ jquery & Css ] support facebook & twitter + work on IE9
MOD Information
The Developer
mun3im's Avatar
 
Version: 1.00, by mun3im mun3im is offline
Developer Last Online: Sep 2015 Show Printable Version Email this Page
Category: Forum Home Enhancements - Version: 4.1.2 Rating:
Released: 04-06-2011 Last Update: Never Installs: 17
Template Edits
Re-useable Code Additional Files  
No support by the author.



hi how are you all
my first post on vbulletin i'm happy to be with you ^^
so to day i have make changes & developments on rocket-dock menu [ jquery & Css ]
to support vb4
i have added facebook & twitter + support internet explorer 9
see example :


demo: click here

install :
======>first:
upload files to [VB] folder on your forum


======>second:
you need to change on templates

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
Code:
[ </div><!-- closing div for above_body --> ]
in the [ navbar ] template

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="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" />
</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>
don't forget to put your links

i hope you enjoy this + if you install plz click install
THANKS YOU ^^
---------------------------
By Twi[L]ighT Dz
---------------------------

Download Now

File Type: zip rocketdock menu by Twi[L]ighT Dz.zip (248.9 KB, 219 views)

Screenshots

File Type: jpg rocketdock menu by Twi[L]ighT Dz.jpg (120.4 KB, 0 views)
File Type: png menu.png (26.3 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #22  
Old 04-10-2011, 05:25 AM
betts02's Avatar
betts02 betts02 is offline
 
Join Date: Jun 2009
Posts: 910
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Cheers for the help mate

Still need to try to get this to work on the home page - vbadvanced

Also if for what ever reason something happened with your host, This would not work ?
It really should be calling the script from our own host ?

Cheers for the good work anyway mate and as stated hopefully we can get it to work on vbadvanced, well on my site anyway,lol
Reply With Quote
  #23  
Old 04-11-2011, 06:31 AM
8thos's Avatar
8thos 8thos is offline
 
Join Date: Aug 2010
Location: Pensacola, FL
Posts: 772
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
The only template that it worked in was at the bottom of headinclude. It doesn't look right at the top of the page though.

I would prefer that it was below the navbar but when I move it there it does not work.
Reply With Quote
  #24  
Old 04-11-2011, 07:06 AM
betts02's Avatar
betts02 betts02 is offline
 
Join Date: Jun 2009
Posts: 910
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Un-installed due to it not working on my site
Reply With Quote
  #25  
Old 04-11-2011, 12:05 PM
mun3im's Avatar
mun3im mun3im is offline
 
Join Date: Apr 2009
Posts: 19
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
<div align="center">
the rocketdock don't work when there is other jguery script in the same template so try to update the jquery script that you use to the last update and it will help ^^
</div>
Reply With Quote
  #26  
Old 04-11-2011, 06:43 PM
betts02's Avatar
betts02 betts02 is offline
 
Join Date: Jun 2009
Posts: 910
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by mun3im View Post

the rocketdock don't work when there is other jguery script in the same template so try to update the jquery script that you use to the last update and it will help ^^
I have looked through my "header" template and can find NO other jquery.js or bar.js

I tried to make my own template and use the code above then add this template to my forumdisplay under my navbar but still no luck
Reply With Quote
  #27  
Old 04-12-2011, 12:42 AM
Da-Vinci Da-Vinci is offline
 
Join Date: Mar 2010
Posts: 249
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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>
I've currently got this as tagged, although it works 100% on my forum, it's not doing exactly what I want it to as I want to integrate it with this custom template edit, I've made to my forum.



The files should be uploaded to your forum root, IE: the location on your FTP where your forum resides. If you can see a folder called Admin CP, then this is where you need to upload the folders that are attached to this mod.

Rated as 5 and Nominated for MOTM.
Attached Images
File Type: jpg Icon Navbar.jpg (27.2 KB, 0 views)
Reply With Quote
  #28  
Old 04-12-2011, 06:01 AM
betts02's Avatar
betts02 betts02 is offline
 
Join Date: Jun 2009
Posts: 910
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Da-Vinci View Post
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>
I've currently got this as tagged, although it works 100% on my forum, it's not doing exactly what I want it to as I want to integrate it with this custom template edit, I've made to my forum.



The files should be uploaded to your forum root, IE: the location on your FTP where your forum resides. If you can see a folder called Admin CP, then this is where you need to upload the folders that are attached to this mod.

Rated as 5 and Nominated for MOTM.
Still not working on mine, Shame really as i wanted to use this
Reply With Quote
  #29  
Old 04-12-2011, 08:33 AM
Da-Vinci Da-Vinci is offline
 
Join Date: Mar 2010
Posts: 249
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by betts02 View Post
Still not working on mine, Shame really as i wanted to use this
I only have it installed on my default skin at the minute, but as you can see from the image below it's working great.



Do you have the files uploaded in your forum root?

What exactly happens when you make the template edits after uploading the files?

These parts of the code need to be right for this to work.

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" />
I personally don't have my forum in a folder, mine resides in the Public HTML on my FTP and I also use VB Advanced.

So the structure for mine works out like this.

Code:
www.myforumlink.com/js/jquery.js
www.myforumlink.com/js/bar.js
www.myforumlink.com/css/style.css
Reply With Quote
  #30  
Old 04-12-2011, 09:20 AM
betts02's Avatar
betts02 betts02 is offline
 
Join Date: Jun 2009
Posts: 910
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I have mine at public_html/forums/

The coder even tried to get this working but can ONLY get it working via the js files being on his host

All i get doing as you said and the original post is a image for RSS and the link, Nothing else works
Reply With Quote
  #31  
Old 04-12-2011, 10:01 AM
mun3im's Avatar
mun3im mun3im is offline
 
Join Date: Apr 2009
Posts: 19
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Da-Vinci View Post
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>
I've currently got this as tagged, although it works 100% on my forum, it's not doing exactly what I want it to as I want to integrate it with this custom template edit, I've made to my forum.



The files should be uploaded to your forum root, IE: the location on your FTP where your forum resides. If you can see a folder called Admin CP, then this is where you need to upload the folders that are attached to this mod.

Rated as 5 and Nominated for MOTM.



my brother i will make it for you just give some time ^^
Reply With Quote
Reply
Page 3 of 6 12 3 45 Last »

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 12:42 AM.

Contact Us - Archive - Top

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.05682 seconds
  • Memory Usage 2,402KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (6)bbcode_html
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (4)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete