WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Need help with this ! Empty Need help with this ! Wed Sep 08, 2010 12:43 am

Emilio

Emilio
Registered Member
Registered Member
http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials


Can some explain , where i place the correct codes and where?

http://www.graphilicious.forumotion.Com

2Need help with this ! Empty Re: Need help with this ! Wed Sep 08, 2010 1:20 am

Unknown Data

Unknown Data
Registered Member
Registered Member
Place the three script between the head tags.

1. script: LINK

2. script: LINK

3. script:
Code:
   
   $(document).ready(function () {
 
      //transitions
      //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
      var style = 'easeOutExpo';
      var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
      var default_top = $('#menu li.selected').height();
 
      //Set the default position and text for the tooltips
      $('#box').css({left: default_left, top: default_top});
      $('#box .head').html($('#menu li.selected').find('img').attr('alt'));            
      
      //if mouseover the menu item
      $('#menu li').hover(function () {
         
         left = Math.round($(this).offset().left - $('#menu').offset().left);
 
         //Set it to current item position and text
         $('#box .head').html($(this).find('img').attr('alt'));
         $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});   
 
      
      //if user click on the menu
      }).click(function () {
         
         //reset the selected item
         $('#menu li').removeClass('selected');   
         
         //select the current item
         $(this).addClass('selected');
   
      });
      
      //If the mouse leave the menu, reset the floating bar to the selected item
      $('#menu').mouseleave(function () {
 
         default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
 
         //Set it back to default position and text
         $('#box .head').html($('#menu li.selected').find('img').attr('alt'));            
         $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});   
         
      });
      
   });
 
   
Place this between the body tags (alt is the title that will show up in the arrow).
Code:
<div id="menu">
 
   <ul>
      <li><a href="#"><img src="user.png" width="32" height="32" alt="My Profile" title=""/></a></li>
      <li><a href="#"><img src="photo.png" width="32" height="32" alt="Photo Gallery" title=""/></a></li>
      <li><a href="#"><img src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""/></a></li>
      <li><a href="#"><img src="rss.png" width="32" height="32" alt="RSS" title=""/></a></li>
      <li><a href="#"><img src="search.png" width="32" height="32" alt="Search" title=""/></a></li>      
      <li class="selected"><a href="#"><img src="setting.png" width="32" height="32" alt="Control Panel" title=""/></a></li>
   </ul>
 
   <div id="box"><div class="head"></div></div>
 
</div>
In the end should you put the CSS between the head tags.
Code:
   img {
      outline:0;
      border:0;
   }
   
   #menu {
      /* you must set it to relative, so that you can use absolute position for children elements */
      position:relative;
      text-align:center;
      width:583px;
      height:40px;
   }
   
   #menu ul {
      /* remove the list style and spaces*/
      margin:0;
      padding:0;
      list-style:none;
      display:inline;
            
      /* position absolute so that z-index can be defined */
      position:absolute;
      
      /* center the menu, depend on the width of you menu*/
      left:110px;
      top:0;
      
   }
   
   #menu ul li {
      
      /* give some spaces between the list items */
      margin:0 5px;
      
      /* display the list item in single row */
      float:left;
   }
   
   #menu #box {
      
      /* position absolute so that z-index can be defined and able to move this item using javascript */
      position:absolute;
      left:0;
      top:0;
      z-index:200;
 
      /* image of the right rounded corner */
      background:url(tail.gif) no-repeat right center;
      height:35px;
 
 
      /* add padding 8px so that the tail would appear */
      padding-right:8px;
      
      /* set the box position manually */
      margin-left:5px;
      
   }
   
   #menu #box .head {
      /* image of the left rounded corner */
      background:url(head.gif) no-repeat 0 0;
      height:35px;
      color:#eee;
      
      /* force text display in one line */
      white-space:nowrap;
 
      /* set the text position manually */
      padding-left:8px;
      padding-top:12px;
   }

http://woops.dk

3Need help with this ! Empty Re: Need help with this ! Wed Sep 08, 2010 7:00 pm

Emilio

Emilio
Registered Member
Registered Member
Can you say where in templates , and what about the first 2 links?

http://www.graphilicious.forumotion.Com

4Need help with this ! Empty Re: Need help with this ! Wed Sep 08, 2010 9:06 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Which version?

And were do you want it to be placed?

http://woops.dk

5Need help with this ! Empty Re: Need help with this ! Thu Sep 09, 2010 3:12 am

Emilio

Emilio
Registered Member
Registered Member
On the bottom of the page just like the overall chatbox
on graphilicious - PUNBB

http://www.graphilicious.forumotion.Com

6Need help with this ! Empty Re: Need help with this ! Thu Sep 09, 2010 10:54 am

ankillien

ankillien
Administrator
Administrator
Hi Emilio,

You can put the code in overall_footer after <div id="pun-foot"> part.

7Need help with this ! Empty Re: Need help with this ! Thu Sep 09, 2010 11:31 pm

Emilio

Emilio
Registered Member
Registered Member
But wich one , i see so many ...
Can you just give the whole code in one piece if posssible.?
thanks ;D

http://www.graphilicious.forumotion.Com

8Need help with this ! Empty Re: Need help with this ! Fri Sep 10, 2010 11:33 am

ankillien

ankillien
Administrator
Administrator
UD has separated HTML, CSS and JS codes above. Add the CSS code to the style sheet, HTML code to the template and the JS code should go inside <script></script> tags which should be in <head> tags in overall_header template.

9Need help with this ! Empty Re: Need help with this ! Mon Sep 13, 2010 12:51 am

Emilio

Emilio
Registered Member
Registered Member
All the script codes doesn't go in my overall_header...
Character lenght

http://www.graphilicious.forumotion.Com

10Need help with this ! Empty Re: Need help with this ! Tue Sep 14, 2010 10:57 pm

ankillien

ankillien
Administrator
Administrator
You can add all the codes in overall_footer.

Add the HTML code after <div id="pun-foot">.
Add CSS codes to the stylesheet and add the JS codes inside <script></script> tags anywhere in the template, it should work.

11Need help with this ! Empty Re: Need help with this ! Tue Sep 14, 2010 11:59 pm

Emilio

Emilio
Registered Member
Registered Member
Well all the JS Codes doesn't go in my Templates

http://www.graphilicious.forumotion.Com

12Need help with this ! Empty Re: Need help with this ! Wed Sep 15, 2010 12:03 am

Unknown Data

Unknown Data
Registered Member
Registered Member
You can create a HTML page with it and then link to it. Very Happy

http://woops.dk

13Need help with this ! Empty Re: Need help with this ! Wed Sep 15, 2010 1:39 am

Emilio

Emilio
Registered Member
Registered Member
So , like <script>www.example.com/htm</script> .?

http://www.graphilicious.forumotion.Com

14Need help with this ! Empty Re: Need help with this ! Wed Sep 15, 2010 10:09 am

ankillien

ankillien
Administrator
Administrator
It would be like this : <script src="LINK TO PAGE"></script>

15Need help with this ! Empty Re: Need help with this ! Fri Nov 01, 2013 12:57 am

Petermichael


Registered Member
Registered Member
ankillien is right it would be like what he told you..

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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