Solved

Jquery Slider

Posted on 2009-06-30
4
719 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 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

821 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