Solved

Jquery Slider

Posted on 2009-06-30
4
735 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

624 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