Solved

Jquery Slider

Posted on 2009-06-30
4
717 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now