PDA

View Full Version : Encapsulating flash in JQuery pop-up



dogstow
09-12-2012, 01:52 AM
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 demonstrate this. However their logo is not in keeping with my website's design, I wish they had a text only version but they don't, this way I could have nestled it into the footer, so I thought that I could encapsulate it into a JQuery pop-up box (on hover) from some text in the footer instead.

I found several JQuery pop-up scripts, but they got the better of me, however one here from "Elias" (seventh post) which I got to work, but couldn't manage to get to hold the GlobalSign Flash script, I'm wondering if it does just text, but then again I'm probably not doing it properly. The following is the simple code for the pop-up to work:


<!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.
</p>
</div>
</div>
</body></html>

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


..and here I have tried to integrate the GlobalSign code into the pop-up bubble:


<!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'm not having much lucky, now do I have the right pop-up bubble or am I better off with something else? I like this one because it will automatically move into view if there is an obstruction, which is one less hassle.


Thanks!