Simple JQuery pop-up not working

cheffington · 09-10-2012, 09:10 PM

I have the UK version of GlobalSign, which guarantees me as a real company online, and of course need to have their logo on my website to show this. However their logo is not inkeeping with my website's design and what I would really like would be to just have some text in the footer, so I thought that I could encapsulate it into a JQuery pop-up box (on hover) from some text.

Now I found a JQuery box here from "Elias" (seventh post) which does work, but when I tried to integrate it I got no joy.

Here is the test page with all script on my server and linked to in good working order:
http://www.escalier-trading.co.uk/tipTiptest.html

..now here is the "About page" on my website which I decided to try and get it working on:

http://www.escalier-trading.co.uk/about.html

Code:

<!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>

<head>
  <title>Escalier Trading</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  
  <!-- JQuery box -->
  <link rel="stylesheet" href="http://www.escalier-trading.co.uk/css/tipTip.css" type="text/css">
  <script src="http://www.escalier-trading.co.uk/js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script src="http://www.escalier-trading.co.uk/js/jquery.tipTip.minified.js" type="text/javascript"></script>
  
  <link rel="stylesheet" type="text/css" href="http://www.escalier-trading.co.uk/css/style.css" />
  <!-- modernizr enables HTML5 elements and feature detects -->
  <link rel="shortcut icon" href="../favicon.ico" />
  <meta name="gspassport-site-verification" content="3367ac04-d4cd-4102-bfce-b63182846df8" />
</head>


<body>
  <div id="main">
    <header>
      <div id="logo"><h1>Escalier<a href="#">&nbsp;</a>Trading</h1></div>
      <nav>
        <ul class="lavaLampWithImage" id="lava_menu">
          <li><a href="index.html">home</a></li>
          <li class="current"><a href="about.html">about us</a></li>
          <li><a href="wines.html">wines</a></li>
		  <li><a href="gifts.html">gift box</a></li>
		  <li><a href="wholesale.html">wholesale</a></li>
          <li><a href="contact.php">contact us</a></li>
        </ul>
      </nav>
    </header>
    <div id="site_content">
      <div id="sidebar_container">
        <div class="gallery">
          <ul class="images">
            <li class="show"><img width="450" height="450" src="images/3_b.png" alt="photo_three" /></li>
            <li><img width="450" height="450" src="images/4_b.png" alt="photo_four" /></li>
            <li><img width="450" height="450" src="images/1_b.png" alt="photo_one" /></li>
            <li><img width="450" height="450" src="images/2_b.png" alt="photo_two" /></li>
          </ul>
        </div>
      </div>
      <div id="content">
        <h1>Why we exist</h1>
        <p>Hospitality among the Chinese is legendary, it is something which has been a part of their culture for thousands years, they change and adapt to keep up with the times and right now new found wealth has produced a new middle class of Chinese who have a huge desire for Western brands of substance.<p> This is something we at Escalier Trading racognise and wish to make easier for the Chinese to adopt Western tastes into their lifestyle by providing the very best we can find in wines, cigars, chocolates and sartoral complements.<p> We also take pride in our direct and personal relations with châteaus from the traditional wine producing regions of Europe to bring a little culture back home as well.</p>
        
<div id="wrapper">
  <div id="mainContent">
  <script type="text/javascript"> 	  
        $(function(){
	$(".someClass").tipTip();
	});
	</script>
   <p>
 Cras sed ante. Phasellus in massa. <a href="" class="someClass" 
title="This will show up in the TipTip popup.">Curabitur dolor eros</a>,
 gravida et, hendrerit ac, cursus non, massa.
</p>
</div>
</div>
               
          <div id='globalsign_passport' align="right">
<!-- Website Passport is copyright &copy; Global Business Register Limited 2011. All rights reserved. For more information go to http://www.globalbusinessregister.co.uk -->
<script type='text/javascript'>
var gbr_passport_number = 'NHD000000527';
var gbr_language_code = 'en-gb';
</script>
<script type='text/javascript' src='https://dvooeretf622y.cloudfront.net/flash/gbrpassport_aws.js'></script>
<noscript><div class='noscript' style='width: 135px; height: 65px; font-size: 12px; font-family: Tahoma, Helvetica, Arial, Sans-Serif; text-align:center;'>Please enable Javascript to enjoy the full Website Passport experience</div></noscript>
</div>
		</div>
    </div>
    <footer>
<!--      <p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p> -->
      <p>&copy; 2012 Escalier Trading. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
      
      <div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
    <!-- your information content -->
  </div>
</div>
      
    </footer>
  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
  <script type="text/javascript" src="js/image_fade.js"></script>
  <script type="text/javascript">
    $(function() {
      $("#lava_menu").lavaLamp({
        fx: "backout",
        speed: 700
      });
    });
  </script>
</body>
</html>

I think it could be that I have two CSS style sheets, not sure, but it seems that I have copied everything as it was, but no go

An even greater worry lies with possibility of even being able to integrate the GlobalSign logo into the pop-up bubble, it might just be for text only:

Code:

<!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>No title</title>
<link rel="stylesheet" href="http://www.escalier-trading.co.uk/css/tipTip.css" type="text/css">
<script src="http://www.escalier-trading.co.uk/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.escalier-trading.co.uk/js/jquery.tipTip.minified.js" type="text/javascript"></script>
</head><body>
<div id="wrapper">
  <div id="mainContent">
  <script type="text/javascript"> 	  
        $(function(){
	$(".someClass").tipTip();
	});
	</script>
   <p>
 Cras sed ante. Phasellus in massa. <a href="" class="someClass" 
title="This will show up in the TipTip popup.">Curabitur dolor eros</a>,
 gravida et, hendrerit ac, cursus non, massa.

<div id='globalsign_passport' align="right">
<!-- Website Passport is copyright &copy; Global Business Register Limited 2011. All rights reserved. For more information go to http://www.globalbusinessregister.co.uk -->
<script type='text/javascript'>
var gbr_passport_number = 'NHD000000527';
var gbr_language_code = 'en-gb';
</script>
<script type='text/javascript' src='https://dvooeretf622y.cloudfront.net/flash/gbrpassport_aws.js'></script>
<noscript><div class='noscript' style='width: 135px; height: 65px; font-size: 12px; font-family: Tahoma, Helvetica, Arial, Sans-Serif; text-align:center;'>Please enable Javascript to enjoy the full Website Passport experience</div></noscript>
</div>

</p>
</div>
</div>
</body></html>

ref: http://www.escalier-trading.co.uk/tipTiptest2.html

I wanted to use the Coda example here, but couldn't figure out how to get it working.

DanInMa · 09-10-2012, 11:21 PM

at the bottom of your page you have included another version of the jquery library and its conflicting with itself ( one of the top 5 most common mistakes with this sort of thing) . if you look in the javascript forum or the javascript frameworks sub-forum there is a great post about most common mistakes using JS libraries as well as a few useful links in my sig you can reference.

DanInMa · 09-10-2012, 11:22 PM

also this thread shoudl be in the javascript forum ( mods)

VIPStephan · 09-11-2012, 09:34 AM

Please use the report button (the one with the red flag at the bottom left of the post) to ask for a move etc. I’ve just come across this by concidence.
Moved to JS frameworks forum.

DanInMa · 09-11-2012, 02:35 PM

Quote:

Originally Posted by VIPStephan

Please use the report button (the one with the red flag at the bottom left of the post) to ask for a move etc. I’ve just come across this by concidence.
Moved to JS frameworks forum.

roger, wilco!

cheffington · 09-11-2012, 11:23 PM

Thanks guys for moving that into the correct forum, hopefully it will get more attention in its new home now.

I see that I had the "jquery.min.js" script declared twice, although the other had its version number included in the name. It does work now, however I'm wondering if the pop-up bubble only has the ability to show text only?

As you know I would like to get the GlobalSign logo in there, it's Flash, so that would be the next step by every time I jig things around it doesn't want to go. The best thing I like about the pop-up bubble is that it reorientates itself it it's going to be excluded by the edge of the browser window (on less thing to worry about).

Any ideas, thanks.

DanInMa · 09-12-2012, 02:02 AM

You can do something liek this, but because of the nature of the globalsign code it keeps making copies of itself on the page.

Code:

$(function(){
$(".someClass").tipTip({
content: $('#globalsign_passport').html()
});
})

cheffington · 09-13-2012, 12:20 AM

Hi, thanks for that, not entirely sure though why it's repeating itself either, it doesn't even find its way into the pop-up box, perhaps I could use a better JQuery box?