vb.org Archive - Forum Display Enhancements - Awesome Sticky Top Bar by XiTCLUB

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Display Enhancements - Awesome Sticky Top Bar by XiTCLUB (https://vborg.vbsupport.ru/showthread.php?t=297532)

XiTCLUB

04-23-2013 10:00 PM

Awesome Sticky Top Bar by XiTCLUB

1 Attachment(s)

==================
AWESOME STICKY TOP BAR
==================

LIVE DEMO : WWW.XiTCLUB.COM

INSTALLATION

1: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "header" template

Add The Following Code at the End

Code:

<div id="stickyBar">

  <ul>

    <li><a href="#">Link1 </a></li>

    <li><a href="#">Link 2 </a></li>

    <li><a href="#">Link 3 </a></li>

    <li><a href="#">Link 4 </a></li>

    <li><a href="#">Link 5 </a></li>

  </ul>

</div>

2: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "additional.css" template

Add The Following Code at the End

Code:

#stickyBar

{

  background: rgba(0,0,0, 0.8);

  border-radius: 0 0 0.5em 0.5em;

  display:none;

  height:40px;

}

#stickyBar ul

{

  margin:0px;

  padding: 0;

  list-style:none;

}

#stickyBar ul li

{

  float:left;

  min-width:80px;

  text-align:center;

  border-right:1px solid #ccc;

  font-size: 16px;

    height: 40px;

  line-height: 2.5em;

    padding:0 5px;

}

#stickyBar ul li a

{

  color:#fff;

  display: block;

  width:100%;

  height:100%;

}

#stickyBar ul li a:hover

{

  background: red;

  color:#fff;

}

#stickyBar.stick {

  position: fixed;

  top: 0;

  z-index: 10000;

  width:1000px;

 margin:0 auto;

  background: rgba(0,0,0, 0.8);

  border-radius: 0 0 0.5em 0.5em;

  display: block;

}

3: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "headinclude" template

Add The Following Code at the End

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

function sticky_relocate() {

  var window_top = $(window).scrollTop();

  var div_top = $('.above_body').offset().top;

  if (window_top > div_top) {

    $('#stickyBar').addClass('stick');

  } else {

    $('#stickyBar').removeClass('stick');

  }

}



$(function() {

  $(window).scroll(sticky_relocate);

  sticky_relocate();

});

</script>

That's it... Enjoy Sticky Top Navigation By XiTCLUB

Update : Updated The Whole Tutorial, because most of peoples are not familiar with programing

You can Buy me a bear if you like this modification, paypal button is at right sidebar :D

thang28101993

04-24-2013 06:48 AM

Oh, I'm the first person, but after added your codes nothings change for me!
Please check again! Thanks!

bjarne2

04-24-2013 07:42 AM

Works unfortunately not :down:

XiTCLUB

04-24-2013 08:20 AM

Quote:

Originally Posted by thang28101993 (Post 2418202)

Oh, I'm the first person, but after added your codes nothings change for me!
Please check again! Thanks!

Be sure you have added Latest jQuery Library in your headinclude

New Joe

04-24-2013 08:22 AM

I have no idea what this should even do,

XiTCLUB

04-24-2013 08:28 AM

have edited some code, please re-use the "headinclude" portion

XiTCLUB

04-24-2013 08:29 AM

Quote:

Originally Posted by New Joe (Post 2418214)

I have no idea what this should even do,

Visit the demo link and scroll down. you will see a sticky menu at top that will remain at top when you scrolling down

inigo

04-24-2013 09:28 AM

Not working for me, after inserting your code.

Nothing happens,

XiTCLUB

04-24-2013 10:31 AM

Quote:

Originally Posted by inigo (Post 2418224)

Not working for me, after inserting your code.

Nothing happens,

Your forum link ?

thang28101993

04-24-2013 11:54 AM

Quote:

Originally Posted by XiTCLUB (Post 2418234)

Your forum link ?

I updated second times but still no things change!

Would you mind if connect to my computer to check?
My forum still build in local!
Thanks in advanced!

P.s:
TeamViewer ID:
Password:

I'm online now!

thang28101993

04-24-2013 12:39 PM

Thanks for your support!
I tried, but Can't do it for my forum as yours! Please check again and tell us the way clearly, how can do!

Thanks!

XiTCLUB

04-24-2013 12:48 PM

Quote:

Originally Posted by thang28101993 (Post 2418251)

Thanks for your support!
I tried, but Can't do it for my forum as yours! Please check again and tell us the way clearly, how can do!

Thanks!

I have showed the way how you can stick a bar at top. but bar style is not my concern, everyone can style their bar

inigo

04-24-2013 02:46 PM

Quote:

Originally Posted by XiTCLUB (Post 2418234)

Your forum link ?

I have it in local, not live.

I will continue subscribed to this post to see if it is any solution,

Thanks!

EDIT: How can I check the jquery version the system is loading? and where can I change it?
I have this in HEDINCLUDE template:

PHP Code:


		
			
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Perhaps the problem is that I have the Tab menu mod installed,...:
https://vborg.vbsupport.ru/showthrea...highlight=tabs

I have to check more in detail where is the problem.

XiTCLUB

04-24-2013 05:09 PM

Quote:

Originally Posted by inigo (Post 2418266)

PHP Code:


		
			
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Perhaps the problem is that I have the Tab menu mod installed,...:
https://vborg.vbsupport.ru/showthrea...highlight=tabs

I have to check more in detail where is the problem.

Updated The Tutorial

Bluefin221

04-24-2013 11:00 PM

Works better as an iframe this.

inigo

04-25-2013 06:17 AM

XiTClub, thanks very much for the tutorial, I have finally it working changing #navigation to #navtabs in your previous tutorial.

The only problem is the floatcontainer below the navtabs, is showed only the text without background color,... I am trying to improve this ;)

This new tutorial is good too, but the previous one is perfect when optimized.

I suggest both tutorial in 1st post,m because depending of the user, one of them could be slightly better ;)

Thanks a lot, mark as installed and 4 stars at the moment, but if i can finish with the floatcontainer below the navbar 5 stars,

XiTCLUB

04-25-2013 07:59 AM

Quote:

Originally Posted by inigo (Post 2418415)

Good to know :)

1st tutorial was for professionals and when i came to know that everyone here complaining its not working because of their own lack of knowledge bout HTML, CSS, jQuery. so i have decided to make it simpler :P

faisaly.com

04-25-2013 10:19 AM

Heres a screenshot:

https://vborg.vbsupport.ru/

XiTCLUB

04-25-2013 10:23 AM

Quote:

Originally Posted by faisaly.com (Post 2418436)

Heres a screenshot:

http://i633.photobucket.com/albums/u...psfd943520.png

looks like you installed 100% :P

faisaly.com

04-25-2013 10:46 AM

grabbed from demo

inigo

04-25-2013 10:58 AM

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

XiTCLUB

04-26-2013 12:08 AM

Quote:

Originally Posted by inigo (Post 2418449)

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

Congratulations :P

Bob_R

04-26-2013 06:47 PM

1 Attachment(s)

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

XiTCLUB

04-26-2013 07:02 PM

Quote:

Originally Posted by Bob_R (Post 2418729)

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

No, This mod is not available yet

elitecarders

05-06-2013 10:22 AM

Shahzad saab you have a cool forum best of luck i am paki too :D

XiTCLUB

05-07-2013 06:45 AM

Quote:

Originally Posted by elitecarders (Post 2420215)

Shahzad saab you have a cool forum best of luck i am paki too :D

Thank You Bhai Sahb.. :D

fxdigi-cash

05-30-2013 08:14 AM

Thanks for mod!

However, I have to mention that this script is not compatible with any query version except jquery.min.js so for those who the code didn't for them, I guess it is compatibility issue.

Being said that, we have to add extra script to the header while there are many others already there. I believe it is better to take the advantage of the other used jquery versions that are already in used at vb header....

I know if you decided to change the whole code, it may take some time to re-create the java script that is compatible with all jquery versions.... or at least the one used at vb header...

Thanks

XiTCLUB

06-29-2013 10:43 PM

Quote:

Originally Posted by fxdigi-cash (Post 2424900)

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

fxdigi-cash

07-04-2013 08:18 AM

Quote:

Originally Posted by XiTCLUB (Post 2431259)

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

I didn't look at the code, I tried it with many jquery versions and the only one that works with your code is jquery.min.js

you can try it out and see yourself if it functions with other jquery versions if you like ...

HotLink

10-13-2013 10:33 AM

It was not working in my IE and if anyone has the same problem, here is how i fixed it:

I replaced:

HTML Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

with:

HTML Code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Also, i've added a solid background-color to #stickyBar, a line before the background: rgba(0,0,0, 0.8);

@XiTCLUB
Is there anyway to get the bar displayed after the page scrolls a certain number of px from the top?
By the way, awesome indeed!:)

DemOnstar

10-14-2013 08:16 AM

1 Attachment(s)

Seems a good idea, tagged for now..

One question: The navbar is in 2 parts.

https://vborg.vbsupport.ru/attachmen...1&d=1381742142

Does this mod stick both parts or just the top bar?
I would also like to stick the lower part also..

Thanks.

tigrattack

10-15-2013 06:23 PM

Great looking site you have

DemOnstar

10-16-2013 08:46 AM

It is a good looking site...

http://www.xitclub.com/

thetechgenius

10-19-2014 01:53 AM

I changed this to work best with my forum. And I also changed it to work with the User Info bar at the top of my forum, not the nav bar.

Check it out: https://thetechgenius.net/

You must be logged in to see the User Info Bar at the top of the page though.

ozzy47

10-19-2014 01:56 AM

Quote:

Originally Posted by thetechgenius (Post 2519332)

Why make a member register to see your changes?
Provide a demo account users can log in with to view. :)

thetechgenius

11-03-2014 03:35 PM

1 Attachment(s)

Quote:

Originally Posted by ozzy47 (Post 2519333)

Why make a member register to see your changes?
Provide a demo account users can log in with to view. :)

You are 100% correct, I am so sorry about that. I don't know what I was thinking. LOL.

Demo Account Info
Username: guest
Password: user

The Navbar is not the sticky bar. I made it so the "Welcome" User info bar is sticky, and stays at the top when your scroll.

I am also uploading a screenshot to this post to show you what I mean, if you dont want to login to my forum to see for yourself. (See the attached image below)

Edit: I dont know why the image lost a lot of its quality, it looks very blurry for some reason. Sorry about that.

All times are GMT. The time now is 05:50 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01462 seconds Memory Usage 1,836KB 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 (3)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_php_printable (16)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (36)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: