Solved

Help to replicate Att.com multi-column navigation on hover Jquery!!

Posted on 2011-09-21
59
255 Views
Last Modified: 2012-05-12
Hello, I need some help in replicating a navigation element that I like from att.com. If you go to http://www.att.com, about 1/2 down the page there is a listing of images (wireless, digital tv, internet...) If you hover over the images you get a multi-column sub-navigation element. I would like to be able to replicate this! Need help ASAP! much appreciated...
0
Comment
Question by:Pdesignz
  • 26
  • 26
  • 4
  • +1
59 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36578374
its just a div, which is placed above that menu on hover on a menu item.

div is having 5 columns and each columns is having 3 or more rows

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36578581
It is very easy to make using QTIP2
0
 

Author Comment

by:Pdesignz
ID: 36580427
gurvinder372 - I am newbie t jquery, how would I do what you are talking about. Thanks
0
 

Author Comment

by:Pdesignz
ID: 36580436
mplungjan - I  looked at the site, but did not see how or an example of what am trying to accomplish, newbie to jquery. Thanks
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 36590859
All the functionality is in the /homepage/Common/indc/homepage/scripts/homeServicesPopup.js
and the HTML contained within this div:
<div id="ATTServicesHomepage">
</div>

Open in new window


Shouldn't take a rocket scientist to figure it out.
0
 

Author Comment

by:Pdesignz
ID: 36594045
Can't seem to get it to work. Any help in breaking it down or showing how to make it work,even a simple example would be great. Am newbie to jquery. Any examples or code would would be most appreciated!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594372
There are many examples at the QTIP site. I can give you simpler ones but need to see your current site. If you want my email is in my profile
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594422
Do you need true multicolumn or is it the popup you are mostly interested in?
0
 

Author Comment

by:Pdesignz
ID: 36594434
I think I can handle the multi-colum using css, it is the jquery popup that I am having issues with. Not sure where to start, have tried some samples that I found, but not having any luck. Here is a version of the site, that you can see, while I also keep playing with aversion that I am developing locally as well. http://pdesignz.com/sempra-it/
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594468
Something like

$(document).ready(function() {
  $("#items").qtip({
    target: $("li"),
    content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
        url: '/path/to/file'+someParm, // URL to the local file
        type: 'GET', // POST or GET
        data: {} // Data to pass along with your request
      }
    }
  });
});
0
 

Author Comment

by:Pdesignz
ID: 36594472
Would I put this in the head,body and would it go in a <script></script> or no? I am not that familiar with jquery,so not sure what to do with what you sent. Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36594488
Hmm - does look like you need someone to code for you rather than answering questions. The snippet I gave is not complete but needs to get for example someParm set from each LI  
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36595265
Here

This gives an error because there is no server to return stuff, but it does work

You need to add the scripts:
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="/script/jquery-1.6.1.min.js" type="text/javascript"></script>
<link href="/script/qTip2/jquery.qtip.css" media="screen" rel="stylesheet" type="text/css" />    
<script src="/script/qTip2/jquery.qtip.js" type="text/javascript"></script>

and have this after the script you have
I commented scrollable out because it gave an error
$(function() {
//$(".scrollable").scrollable();
	
  $(".items").find("li").qtip({
    position: {
      target: 'mouse'
     },
     content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
        url: '/path/to/file', // URL to the local file
        type: 'GET', // POST or GET
        data: {} // Data to pass along with your request
      }
    }
  });
});

Open in new window

0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 36596503
QTIP isn't robust enough to do what he needs. I can't understand what problem he is having with the suggestion and code I gave. If he could post the HTML he is trying to use this one, it wouldn't be difficult to fix.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36597025
What is your grief with QTIP? I am using it on our site and apart from a solvable issue with width in IE6, it work splendidly in all modern browsers.
0
 

Author Comment

by:Pdesignz
ID: 36597607
Eddie, I copied the  /homepage/Common/indc/homepage/scripts/homeServicesPopup.js and added to my page, I then tried the div you mentioned, I can see a slight fade, but then nothing shows or div being shown on hover like it does on att site. I am copying current code, so you have a local sample to view and see what I am doing wrong.  The images that I want to use as the trigger for the hover and hidden div are contained with the div called "sempra-categories". I appreciate your help and patience...
<!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=utf-8" />
<title>Sempra IT</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link href="css/sempra.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/homeServicesPopup.js"></script>
<script>
$(function() {
	$(".scrollable").scrollable();
});
</script>
</head>

<body>
<div id="container">
<div id="global-nav">
  <div id="global-sub">
  <ul>
  <li><a href="#">Gas Lines</a></li>|
  <li><a href="#">PowerUp</a></li>|
  <li><a href="#">SempraNet</a></li>
  </ul>
  </div>
  <ul>
  <li class="home-tab">
    <p><a href="default.asp">IT Services</a></p></li>
<li><a href="#">IT Learning Center</a></li><span>|</span>
<li><a href="#">IT Professionals</a></li><span>|</span>
<li><a href="#">About IT</a></li>
</ul>
</div>
<div id="welcome-status">Welcome, John Doe</div>
<div id="main-nav">
<div id="search"><form>
    <input value="Search IT Services" />
</form></div>
<a href="default.asp"><img src="images/sempra-it-logo_03.png" width="386" height="50" /></a>

</div>
<div id="rotate">
<div id="rotate-text-block">
<h1>Text Block Goes Here...</h1>
</div>
<div id="sempra-help">
<h1>Let Us Help You</h1>
<p id="system-status">System Status</p>
<p id="green">Green</p>
<div class="learn-btn"><p><a href="#">Learn More</a></p></div>
<p id="phone">SempraHelp 24x7<br />
  (858) 654-6300</p>
<p id="issue">Report an Issue &gt;&gt;&gt;</p>
<p id="password">Forgot your password?</p>
</div>
</div>
<div class="divider"></div>
<div class="tooltip">0000000</div>
<h1 id="services-title">IT Services</h1>
<div id="sempra-categories">
  <ul>
  <li id="application-software"><a href="#"><img src="images/filler-bg.gif" width="100" height="125"/></a></li>
<li id="communication-tools"><a href="sempra-services.asp"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="desktop-computing"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-management"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-security"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="network-connectivity"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="onboard-transfer-exit"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
</ul>
</div>
<div class="divider" style="clear:both;"></div>


<div id="scroll">
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <ul>
         <li>
           <img src="images/data-plans.jpg" width="110" height="113" /><br />
           <h2>Ad Block #1</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         <li><img src="images/international.jpg" width="110" height="113" /><br />
          <h2>Ad Block #2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
          <div class="btn"><p><a href="#">Learn More</a></p></div>
          </li>
         <li><img src="images/data-calculator.jpg" width="110" height="113" /><br />
          <h2>Ad Block #3</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         </ul>
      </div>
      
      <!-- 5-10 -->
      <div>
         <ul>
         <li><img src="images/upgrade-advantage.jpg" width="110" height="113" /><br />
          <h2>Ad Block #4</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/wifi.jpg" width="110" height="113" /><br />
          <h2>Ad Block #5</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/3g.jpg" width="110" height="113" /><br />
          <h2>Ad Block #6</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         </ul>
      </div>
      
      <!-- 10-15 -->
      <div>
      <ul>
         <li><img src="images/accessibility.jpg" width="110" height="113" /><br />
          <h2>Ad Block #7</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/termination-fee.jpg" width="110" height="113" /><br />
          <h2>Ad Block #8</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/parental-controls.jpg" width="110" height="113" /><br />
          <h2>Ad Block #9</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
         <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         </ul>
      </div>
      
   </div>
   
</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div><div style="clear:both"></div>
<div class="divider-dark" style="margin-top:0px; padding-top:0px;">

<p>Stay Connected</p>
<div id="rss"><img src="images/rss-icon.png" width="23" height="23"  style="cursor:pointer;"/></div>
<div id="alerts">
<p>Sign-Up For Outage Alerts</p>
<form>
<input type="text" size="35" />
</form>
</div>
</div>

<div id="footer" style="clear:both">
<div id="footer-1">
<h1>I Want To</h1>
<ul>
<li><a href="#">View or pay my bill</a></li>
<li><a href="#">Experience U-verse</a></li>
<li><a href="#">See Special Offers</a></li>
<li><a href="#">View Wireless coverage map</a></li>
<li><a href="#">Move Service</a></li>
</ul>
</div>
<div id="footer-2">
<h1>Help &amp; Support</h1>
<ul>
<li><a href="#">Billing</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Internet/DSL</a></li>
<li><a href="#">U-verse</a></li>
<li><a href="#">Home Phone</a></li>
<li><a href="#">Troubleshoot and resolve</a></li>
</ul>

</div>
<div id="footer-3">
<h1>Sempra IT</h1>
<ul>
<li><a href="#">Bill & Payments</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Internet/DSL</a></li>
<li><a href="#">Home Phone</a></li>
<li><a href="#">Check an order status</a></li>
<li><a href="#">Go paperless</a></li>
</ul>
</div>
<div id="footer-4">
<h1>Connect With Sempra IT</h1>
<ul>
<li><a href="#">Emergency Planning</a></li>
<li><a href="#">Innovation</a></li>
<li><a href="#">Wireless Network News</a></li>
<li><a href="#">Media Newsroom</a></li>
<li><a href="#">Investor Relations</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:Pdesignz
ID: 36597656
mplungian- I downloaded the qtip js and css files. I also copied the script as you specified, but nothing happens when I hover over the images in the sempra-categories div nothing happens. If I change .items in your script to #sempra-categories.find("li").qtip({ I get an error undefined...

I appreciate the help!!
<!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=utf-8" />
<title>Sempra IT</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link href="css/sempra.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script>
$(function() {
//$(".scrollable").scrollable();
	
  $(".items").find("li").qtip({
    position: {
      target: 'mouse'
     },
     content: {
      text: 'Loading...', // The text to use whilst the AJAX request is loading
      ajax: {
        url: '/path/to/file', // URL to the local file
        type: 'GET', // POST or GET
        data: {} // Data to pass along with your request
      }
    }
  });
});
</script>
</head>

<body>
<div id="container">
<div id="global-nav">
  <div id="global-sub">
  <ul>
  <li><a href="#">Gas Lines</a></li>|
  <li><a href="#">PowerUp</a></li>|
  <li><a href="#">SempraNet</a></li>
  </ul>
  </div>
  <ul>
  <li class="home-tab">
    <p><a href="default.asp">IT Services</a></p></li>
<li><a href="#">IT Learning Center</a></li><span>|</span>
<li><a href="#">IT Professionals</a></li><span>|</span>
<li><a href="#">About IT</a></li>
</ul>
</div>
<div id="welcome-status">Welcome, John Doe</div>
<div id="main-nav">
<div id="search"><form>
    <input value="Search IT Services" />
</form></div>
<a href="default.asp"><img src="images/sempra-it-logo_03.png" width="386" height="50" /></a>

</div>
<div id="rotate">
<div id="rotate-text-block">
<h1>Text Block Goes Here...</h1>
</div>
<div id="sempra-help">
<h1>Let Us Help You</h1>
<p id="system-status">System Status</p>
<p id="green">Green</p>
<div class="learn-btn"><p><a href="#">Learn More</a></p></div>
<p id="phone">SempraHelp 24x7<br />
  (858) 654-6300</p>
<p id="issue">Report an Issue &gt;&gt;&gt;</p>
<p id="password">Forgot your password?</p>
</div>
</div>
<div class="divider"></div>
<div class="tooltip">0000000</div>
<h1 id="services-title">IT Services</h1>
<div id="sempra-categories">
  <ul>
  <li id="application-software"><a href="#"><img src="images/filler-bg.gif" width="100" height="125"/></a></li>
<li id="communication-tools"><a href="sempra-services.asp"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="desktop-computing"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-management"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-security"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="network-connectivity"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="onboard-transfer-exit"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
</ul>
</div>
<div class="divider" style="clear:both;"></div>


<div id="scroll">
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <ul>
         <li>
           <img src="images/data-plans.jpg" width="110" height="113" /><br />
           <h2>Ad Block #1</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         <li><img src="images/international.jpg" width="110" height="113" /><br />
          <h2>Ad Block #2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
          <div class="btn"><p><a href="#">Learn More</a></p></div>
          </li>
         <li><img src="images/data-calculator.jpg" width="110" height="113" /><br />
          <h2>Ad Block #3</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         </ul>
      </div>
      
      <!-- 5-10 -->
      <div>
         <ul>
         <li><img src="images/upgrade-advantage.jpg" width="110" height="113" /><br />
          <h2>Ad Block #4</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/wifi.jpg" width="110" height="113" /><br />
          <h2>Ad Block #5</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/3g.jpg" width="110" height="113" /><br />
          <h2>Ad Block #6</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         </ul>
      </div>
      
      <!-- 10-15 -->
      <div>
      <ul>
         <li><img src="images/accessibility.jpg" width="110" height="113" /><br />
          <h2>Ad Block #7</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/termination-fee.jpg" width="110" height="113" /><br />
          <h2>Ad Block #8</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
           <div class="btn"><p><a href="#">Learn More</a></p></div>
           </li>
         <li><img src="images/parental-controls.jpg" width="110" height="113" /><br />
          <h2>Ad Block #9</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam atturpis eu mi facilisis.</p>
         <div class="btn"><p><a href="#">Learn More</a></p></div>
         </li>
         </ul>
      </div>
      
   </div>
   
</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div><div style="clear:both"></div>
<div class="divider-dark" style="margin-top:0px; padding-top:0px;">

<p>Stay Connected</p>
<div id="rss"><img src="images/rss-icon.png" width="23" height="23"  style="cursor:pointer;"/></div>
<div id="alerts">
<p>Sign-Up For Outage Alerts</p>
<form>
<input type="text" size="35" />
</form>
</div>
</div>

<div id="footer" style="clear:both">
<div id="footer-1">
<h1>I Want To</h1>
<ul>
<li><a href="#">View or pay my bill</a></li>
<li><a href="#">Experience U-verse</a></li>
<li><a href="#">See Special Offers</a></li>
<li><a href="#">View Wireless coverage map</a></li>
<li><a href="#">Move Service</a></li>
</ul>
</div>
<div id="footer-2">
<h1>Help &amp; Support</h1>
<ul>
<li><a href="#">Billing</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Internet/DSL</a></li>
<li><a href="#">U-verse</a></li>
<li><a href="#">Home Phone</a></li>
<li><a href="#">Troubleshoot and resolve</a></li>
</ul>

</div>
<div id="footer-3">
<h1>Sempra IT</h1>
<ul>
<li><a href="#">Bill & Payments</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Internet/DSL</a></li>
<li><a href="#">Home Phone</a></li>
<li><a href="#">Check an order status</a></li>
<li><a href="#">Go paperless</a></li>
</ul>
</div>
<div id="footer-4">
<h1>Connect With Sempra IT</h1>
<ul>
<li><a href="#">Emergency Planning</a></li>
<li><a href="#">Innovation</a></li>
<li><a href="#">Wireless Network News</a></li>
<li><a href="#">Media Newsroom</a></li>
<li><a href="#">Investor Relations</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
</div>

</body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36598416
You need to CODE
'/path/to/file',

it needs to return the stuff that goes into the page!!!

0
 

Author Comment

by:Pdesignz
ID: 36599148
I need a div for each of the images. Would it be simpler to say have hidden divs on the page that are then displayed on hover when you hover over the images and will then display the correct div depending on which image you are hovering over. If I put 5 or 6 divs in that file how will it know which div to show depending on the image.

Thanks
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 36599169
SO, you don't have a URL for us to see? How about the CSS and the images? It is difficult to determine what the problem is if you don't let us see the whole shebang.
0
 

Author Comment

by:Pdesignz
ID: 36599180
Sorry, I thought I posted url before. You can view here, http://pdesignz.com/sempra-it
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36599222
You did post the URL.
My code is based on your site. You now need to return snippets of html from the URL you define in the script I posted
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36599261
Yes we can get the divs from the page - give me a minute
0
 

Author Comment

by:Pdesignz
ID: 36599288
I posted a new test url here, http://pdesignz.com/sempra-it/hover-test.asp. The images  that should trigger the hover div are the Services images contained with the div sempra-categories and not the images that scroll.

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36599307
$(".items").find("li").qtip({
  position: {
    target: 'mouse'
  },
  content: {
    text: $("#"+$(this).attr("id")+"-tooltip") // Add .clone() if you don't want the matched elements to be removed, but simply copied
  }
});


and have

<li id="application-software">....
.
.
.
.
<div class="hidden" id="application-software-tooltip">Here is the content of the tooltip for application software</div>
.
.

with a style of

.hidden { display:none}
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 36599551
I can't see exactly what it is you want to popup when rolling over the sempra-categories items.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36600708
Sorry



$("#sempra-categories").find("li").qtip({
  position: {
    target: 'mouse'
  },
  content: {
    text: $("#"+$(this).attr("id")+"-tooltip") // Add .clone() if you don't want the matched elements to be removed, but simply copied
  }
});
0
 

Author Comment

by:Pdesignz
ID: 36714218
mplungjan, I have added the new code you provided and when I hover over the image nothing is shown or displayed. I have updated the page with the new code you provided.
http://pdesignz.com/sempra-it/hover-test.asp

Thanks, I appreciate the help need to get this working ASAP!
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:Pdesignz
ID: 36714414
Even if simpler, you can go with a hidden that is displayed on hover and lets you navigate the content of the hidden div,once no longer on the hidden div or images then does not show anymore, will take anything if easy and simple and replicates what att is doing on their site with the hover and navigation. Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714495
I'll look in a few hours
0
 

Author Comment

by:Pdesignz
ID: 36714498
Much Appreciated!!! If we can get it working tonight, I would see if possible to award you 2x or 3x the points. Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714506
Points are irrelevant. I have close to 10mio points
0
 

Author Comment

by:Pdesignz
ID: 36714509
Oh Ok, then yes points are worthless to you then...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714682
Here you are

I am not sure why I could not access the IDs directly but this works

Have a style that hides the hiddentooltip class

<div class="hiddentooltip" id="application-software-tooltip">Tooltip for application-software</div>
<div class="hiddentooltip" id="communication-tools-tooltip">Tooltip for comm-software</div>
<div class="hiddentooltip" id="desktop-computing-tooltip">Tooltip for desk-software</div>
<div class="hiddentooltip" id="information-management-tooltip">Tooltip for IM-software</div>
<div class="hiddentooltip" id="information-security-tooltip">Tooltip for sec-software</div>
<div class="hiddentooltip" id="network-connectivity-tooltip">Tooltip for conn-software</div>
<div class="hiddentooltip" id="onboard-transfer-exit-tooltip">Tooltip for tranfer-software</div>
$(document).ready(function () {
  $('.autoclear').autoclear();
  $(".scrollable").scrollable();

  $("#sempra-categories").find("li").each(function() {
    var id = $(this).attr("id")
    var text = $("#"+id+"-tooltip").html();
    $(this).qtip({
      position: {
        target: 'mouse'
      },
      content: {
        text: text
      }
    });
  });
});

Open in new window

0
 

Author Comment

by:Pdesignz
ID: 36714826
Great work! I can now see the div and content (http://www.pdesignz.com/sempra-it/hover-test.asp). Is possible to position the div's higher up and content I am planning to put in each div will contain multiple columns and contain links as well. As these are what it looks to be like tooltips, if I move off the images to navigate the the navigation in these hidden div's will the content disappear as well or can we set a timeout or fade effect as well? If you navigate here you can get an idea of what I am trying to replicate (http://www.att.com). I appreciate the help... Thank You!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714912
The documentation is extensive and qtip2 can do almost anything

http://craigsworks.com/projects/qtip2/docs/position/
0
 

Author Comment

by:Pdesignz
ID: 36714955
I am a little low on time, I need to get this working in the next day or two...I will go over the documentation and see if I can figure anything out. If I paid you like $50.00, are you open to continue helping me in getting it working the way I need... or get it working for me, so that I can focus on other aspects...

Thanks
0
 

Author Comment

by:Pdesignz
ID: 36715018
Just noticed that the hyperlinks attached to the main images are no longer working with the hover inp place, thanks.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36715101
I have a "Hire me" button in my profile...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36715167
I do not know what you mean by main images...

There are no hrefs attached to the links in the LI

images/information-management-hover.jpg
0
 

Author Comment

by:Pdesignz
ID: 36716997
sorry the ul or div sempra-categories that we have been working with the id="communication-tools" has an href attached to it that is no longer working . Thanks
<div id="sempra-categories">
  <ul>
  <li id="application-software"><a href="#"><img src="images/filler-bg.gif" width="100" height="125"/></a></li>
<li id="communication-tools"><a href="sempra-services.asp"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="desktop-computing"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-management"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="information-security"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="network-connectivity"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
<li id="onboard-transfer-exit"><a href="#"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
</ul>
</div>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36717468
Hmm looks like I should try to attach the QTIP to the link or image instead
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36718517
Here

the links are clickable again and I use a title from the link as title for the tooltip too

Here is the html I have and the script

<div id="sempra-categories">
  <ul>
  <li id="application-software"><a href="#" title="Application software"><img src="images/filler-bg.gif" width="100" height="125"/></a></li>


<div class="hidden" id="application-software-tooltip"><a href="somelinkinsidethetip.html" target="_blank">Here</a> is the content of the tooltip for application software</div>

<script>
$(document).ready(function () {
  $('.autoclear').autoclear();
  $(".scrollable").scrollable();

  $("#sempra-categories a").qtip({
    hide: "unfocus",
    content: {
      text: function(api) {
        var ttl = $(this).attr("title");
        var id = ttl.toLowerCase().replace(/ /g,"-")+"-tooltip"; // translate Application software to application-software-tooltip
        return $("#"+id).html();
      },
      title: {
        text: function(api) {return $(this).attr("title")},
        button: "Close"
      },
      show: {
         solo: true
      }
    }
  });
});
</script>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36718531
PS: Please remove

<script>
$(document).ready(function () {
  $('.autoclear').autoclear();
});
</script>

<script>
$(function() {
      $(".scrollable").scrollable();
});
</script>


since I already included this in the last document.ready
0
 

Author Comment

by:Pdesignz
ID: 36718574
Is this what the script should be now?

<script>
$(document).ready(function () {
  $('.autoclear').autoclear();
  $(".scrollable").scrollable();

  $("#sempra-categories a").qtip({
   content: {
     text: function(api) {
        var ttl = $(this).attr("title");
        var id = ttl.toLowerCase().replace(/ /g,"-")+"-tooltip"; // translate Application software to application-software-tooltip
        return $("#"+id).html();
     },
     title: {
       text: function(api) {return $(this).attr("title")},
       button: "Close"
     },
     show: {
        solo: true
     },
     hide: {
       fixed: true,
       delay: 500
     }
   }
 });
 });
</script>
0
 

Author Comment

by:Pdesignz
ID: 36718615
Link is now working in the sempra-categories. I know you are working on tooltip look and feel, currently shown below sempra-categories content and unable to view content of div. I hope this is an easy fix.
http://pdesignz.com/sempra-it/hover-test.asp

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36718781
I had the hide in a wrong place (inside the content). It has been corrected.

Here is a working example:

http://plungjan.name/test/pd/new_simple.html

Here is the code:
<script>
$(document).ready(function () {
  $('.autoclear').autoclear();
  $(".scrollable").scrollable();
  $("#sempra-categories a").qtip({
   content: {
     hide: "unfocus",
     show: {solo:true},
     text: function(api) {
        var ttl = $(this).attr("title");
        var id = ttl.toLowerCase().replace(/ /g,"-")+"-tooltip"; // translate Application software to application-software-tooltip
        return $("#"+id).html();
     },
     title: {
       text: function(api) {return $(this).attr("title")},
       button: "Close"
     },
     show: {
        solo: true
     }
   }
 });
});
</script>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36718800
and here  is the html to style

The titles on the links is what will show in the tooltip and is used to find the divs with the content
<div class="hidden" id="application-software-tooltip"><a href="somelineinsideatooltip.html" target="_blank">Here</a> is the content of the tooltip for application software</div>
<div class="hidden" id="communication-tools-tooltip">Here is the content of the tooltip for communication tools</div>
<div class="hidden" id="desktop-computing-tooltip">Here is the content of the tooltip for desktop computing</div>
<div class="hidden" id="information-management-tooltip">Here is the content of the tooltip for information managemnt</div>

<div class="hidden" id="information-security-tooltip">Here is the content of the tooltip for information security</div>
<div class="hidden" id="network-connectivity-tooltip">Here is the content of the tooltip for network connectivity</div>
<div class="hidden" id="onboard-transfer-exit-tooltip">Here is the content of the tooltip for onboard, transfer, exit</div>

<div id="sempra-categories">
  <ul>
    <li id="application-software"><a href="#" title="Application software"><img src="images/filler-bg.gif" width="100" height="125"/></a></li>
    <li id="communication-tools"><a href="sempra-services.asp" title="Communication tools"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
    <li id="desktop-computing"><a href="#" title="Desktop computing"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
    <li id="information-management"><a href="#" title="Information management"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
    <li id="information-security"><a href="#" title="Information security"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
    <li id="network-connectivity"><a href="#" title="Network connectivity"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
    <li id="onboard-transfer-exit"><a href="#" title="Onboard transfer exit"><img src="images/filler-bg.gif" width="100" height="125" /></a></li>
  </ul>
</div>

Open in new window

0
 

Author Comment

by:Pdesignz
ID: 36718823
Better, I am liking. Can we set it where so that you do not have to click the x to close. If you look at att(http://www.att.com/) they use more of a fade effect, can we move the divs so that they show above the images like att does. Thanks
0
 

Author Comment

by:Pdesignz
ID: 36718893
One thing I did notice, is that when you hover over the last image it then displays a scrolling horizontal bar, but then goes away when you move off the last image, http://pdesignz.com/sempra-it/hover-test.asp
Thanks
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 36718922
Here

I need to take a break for tonight ok?
$(document).ready(function () {
  $("#sempra-categories a").qtip({
   hide: {
      event: 'click mouseleave',
      inactive: 3000
   },
   show: {solo:true},
   content: {
     text: function(api) {
        var ttl = $(this).attr("title");
        var id = ttl.toLowerCase().replace(/ /g,"-")+"-tooltip"; // translate Application software to application-software-tooltip
        return $("#"+id).html();
     },
     title: {
       text: function(api) {return $(this).attr("title")},
     }
   },
   position: {
     my: 'bottom center',  // Position my top left...
     at: 'top center', // at the top left of...
     target:"mouse",
     adjust:{mouse:false}
   }
 });
});

Open in new window

0
 

Author Comment

by:Pdesignz
ID: 36718939
Better, getting closer...:)Yes, it is 11am my time is it possible to resume later this evening which I would image would then be tomorrow your time. Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36718970
Stupid hide took me more than 30 minutes to put in the right place :((
It is 8pm here and I have been in front of a computer more than 12 hours.
0
 

Author Comment

by:Pdesignz
ID: 36719001
I was hoping to finish today, but I understand...We can continue tomorrow. I be working rest of the day and tonight, which will be am for you. If you want to continue then otherwise we can continue tomorrow for both of us...Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36719032
If you style the hidden divs I would say we would be quite far and possibly already fit for purpose. You would know better what to tll me to change when the content wss ok
0
 

Author Comment

by:Pdesignz
ID: 36719048
OK, I will work on styling the content of the hidden div's. We can then work on this more later or tomorrow, much appreciated. Thanks
0
 

Author Closing Comment

by:Pdesignz
ID: 37217710
Great work!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery animation faster 1 16
lastpass auto fill login form 5 23
Open a div with click on an image 7 41
angularls and plnkr 14 17
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now