Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery Slider

Posted on 2009-06-30
4
Medium Priority
?
750 Views
Last Modified: 2012-08-13
Hi,

I have having some prbolems with my CSS hiding the text with my JQuery based slider.
I am not sure if this is due to the sIFR text replacement I'm using or an issue with my CSS code.
The link is http://www.marisasimoncakes.com/index.php?/sweet_rewards/
Any advice would be appreicated as the page is almost perfect now. Thank you.
0
Comment
Question by:jsuissa
  • 2
  • 2
4 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24751690
Hi jsuissa,
Can you show the original php script instead of check rendered there? what is the CSS problem that hiding text after, sIFR replacement ? Can you clarify further for better understanding?
0
 

Author Comment

by:jsuissa
ID: 24751756
siFR is text image replacement that uses Flash to get text to be SEO. We want there to be a fifteen pixel dashed border on the ouside of the menu and the same width of 15px of space inside each menu item.  The entire menu should centered.

Below I included the code from our CMS for  you. Thanks.

<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Marisa Simon Cakes</title>
 
 
    <meta name="description" content="Marisa Simon Cakes specialize in creating extraordanary cakes that balance innovative style and traditional elegance." />
    <meta name="keywords" content="Marisa Simon Cakes, confectionary art, pastry, traditional vanilla, traditional chocolate, Brad Simon, unique cakes, custom cakes, wedding cakes" />
    <meta name="copyright" content="Copyright Marisa Simon Cakes" />
    <meta name="author" content="Liquid Comma Design" />
    <meta name="email" content="info@marisasimoncakes.com" />
    <meta name="Charset" content="ISO-8859-1" />
    <meta name="Distribution" content="Global" / >
    <meta name="Rating" content="General" />
    <meta name="Robots" content="INDEX,FOLLOW" />
    <meta name="Revisit-after" content="31 Days" />
  
 
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
 <link rel="stylesheet" href="stylesheets/sifr-screen.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="stylesheets/sifr-print.css" type="text/css" media="print" />
 
 
<script src="scripts/sifr.js" type="text/javascript"></script>
<script src="scripts/sifr-addons.js" type="text/javascript"></script>
<script src="scripts/BickhamScriptStd-Semibold_sifr.js" type="text/javascript"></script>
<script src="scripts/Luxury_Diamond_sifr.js" type="text/javascript"></script>
 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript" src="scripts/easySlider1.5.js"></script> 
<script type="text/javascript"> 
	$(document).ready(function(){	
		$("#slider").easySlider();
	});	
</script> 
 
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
 
<!--//--><![CDATA[//><!--
 
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
 
//--><!]]>
 
//-->
</script>
</head>
 
<body>
<div id="global_wrap">
	<div id="logo_part">
		<h1>Marisa Simon Cakes</h1>
	</div>
	<div id="top_menu">
		<ul>
          <li><a href="{site_url}">HOME</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/about_us/">ABOUT US</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/menu/">MENU</a></li>
<li><a href="#">GALLERY</a>
            
            <ul>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/wedding_cakes/">Wedding Cakes</a></li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/occasion_cakes/">Occassion Cakes</a></li>
       	</ul>
</li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/sweet_rewards/">SWEET REWARDS</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/contact_us/">CONTACT US</a></li>
	  </ul>
  </div>
 
 
 
  
 
 
	<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="470">
	  <param name="movie" value="templatesImgs/flowersR1.swf" />
	  <param name="quality" value="high" />
	  <param name="wmode" value="opaque" />
	  <param name="swfversion" value="6.0.65.0" />
	  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you dont want users to see the prompt. -->
	  <param name="expressinstall" value="scripts/expressInstall.swf" />
	  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	  <!--[if !IE]>-->
	  <object type="application/x-shockwave-flash" data="templatesImgs/flowersR1.swf" width="1024" height="470">
	    <!--<![endif]-->
	    <param name="quality" value="high" />
	    <param name="wmode" value="opaque" />
	    <param name="swfversion" value="6.0.65.0" />
	    <param name="expressinstall" value="scripts/expressInstall.swf" />
	    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	    <div>
	      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
	    <!--[if !IE]>-->
      </object>
	  <!--<![endif]-->
    </object>
	<script type="text/javascript">
<!--
swfobject.registerObject("FlashID2");
//-->
    </script>
 
 
 
 
 
  <div id="footer">
    <ul id="footer_left">
			<li style="padding-left:0px;"><span>CONTACT US:</span> &nbsp;917.921.0743</li>
			<li style="border:none;"><a href="mailto:info@marisasimoncakes.com">INFO@MARISASIMONCAKES.COM</a></li>
            
	  </ul>
	
        
 
	  <div id="footer_right">
      <img src="templatesImgs/small_icing.jpg" width="80" height="72" />
      <h6>A Unique Cake For Each Occasion</h6>
      <p>Copyright {current_time format="%Y"}. Marisa Simon Cakes. All rights reserved.</p>
      
      </div>
 
	</div> <!--//footer-->
</div> <!--//global_wrap-->
<script type="text/javascript">
if(typeof sIFR == "function"){
  sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201", 
  sFlashVars:"textalign=left"}));
    sIFR.replaceElement(named({sSelector:"body h2", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201", sFlashVars:"offsetTop=-5"}));
	    sIFR.replaceElement(named({sSelector:"body h3", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#ffffff", sLinkColor:"#ffffff", sHoverColor:"#333333", sWmode: "transparent", sFlashVars:"textalign=left"}));
			    sIFR.replaceElement(named({sSelector:"body h4", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sHoverColor:"#754201", sWmode: "transparent", sFlashVars:"textalign=left"}));
				sIFR.replaceElement(named({sSelector:"body h5", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sHoverColor:"#754201", sWmode: "transparent", sFlashVars:"textalign=right"}));
		  sIFR.replaceElement(named({sSelector:"body h6", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201",
 sFlashVars:"textalign=right"}));
};
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9506242-1");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:jsuissa
ID: 24751763
Please ignore my previous notes except the code sample is correct.
What we want it to do is show the menu centered, where each testimonilal with the two Flash based layers (name and location) appearing to be right justified.
0
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 2000 total points
ID: 24752103
>>..What we want it to do is show the menu centered, where each testimonilal with the two Flash based layers (name and location) appearing to be right justified.
Seem you need to align the menu properly along the flash object that resides in the bottom?
Have you try set the <div> - global_wrap's width to 100%? Then, put the flash object insides this <div> object.
eg:


<div id="global_wrap" style="width:100%;align:center">
        <div id="logo_part">
                <h1>Marisa Simon Cakes</h1>
        </div>
        <div id="top_menu">
                <ul>
          <li><a href="{site_url}">HOME</a></li>
                        <li><a href="http://www.marisasimoncakes.com/index.php?/pages/about_us/">ABOUT US</a></li>
                        <li><a href="http://www.marisasimoncakes.com/index.php?/pages/menu/">MENU</a></li>
<li><a href="#">GALLERY</a>
            
            <ul>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/wedding_cakes/">Wedding Cakes</a></li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/occasion_cakes/">Occassion Cakes</a></li>
        </ul>
</li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/sweet_rewards/">SWEET REWARDS</a></li>
                        <li><a href="http://www.marisasimoncakes.com/index.php?/pages/contact_us/">CONTACT US</a></li>
          </ul>
  <br>
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="470">
          <param name="movie" value="templatesImgs/flowersR1.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you dont want users to see the prompt. -->
          <param name="expressinstall" value="scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="templatesImgs/flowersR1.swf" width="1024" height="470">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
            <!--[if !IE]>-->
      </object>
          <!--<![endif]-->
    </object>
  </div>
 
 
 
  
 
 
        

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

926 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