Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    jQuery sidebar css problem

    Hello,

    I'm using a jquery sidebar that loads an embed flash mp3 player. The problem is, even though all dimensions are set correctly, the flash file won't load inside the slidebar when it opens, instead will load beneath it. (view screenshot below)

    This is the css
    Code:
    #samisideBar2{z-index:999;position: fixed;width: 35px;height: 300px;bottom: 30px;left:-7px;background-image:url(../images/background.gif);background-position:top left;background-repeat:repeat-y;}
    #samisideBar2 form{z-index:999;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
    #samisideBar2 a{z-index:999;color:#ccc}
    #samisideBar2 fieldset{z-index:999;padding:5px;margin:10px 20px;border:none;}
    #samisideBar2 ul{z-index:999;margin:0px 20px;}
    #samisideBar2 label{z-index:999;color: #fff;}
    #sideBarTab2{z-index:999;float:left;height:137px;width:28px;}
    #sideBarTab2 img{z-index:999;border:0px solid #FFFFFF;}
    #sideBarContents{z-index:999;overflow:hidden !important;}	
    #sideBarContentsInner{z-index:999;width:600px;}
    This is side-bar.js
    Code:
    var isExtended = 0;
    
    //window.addEvent('load', function(){init()});
    
    function samislide(){
    
    			if(isExtended == 0){
    
    				var src = jQuery("#sideBarTab2 img").attr("src").replace(".gif", "-active.gif");
    
    
    
    				jQuery("#sideBarTab2 img").attr("src",src);
    
    				jQuery("#samisideBar2").animate({ "width" : "600px", "heigth" : "300px" }, 1200);
    
    				jQuery("#sideBarContents").animate({ "width" : "600px", "heigth" : "300px" }, 1200);
    
    				isExtended = 1;
    
    			}else{
    
    				var src = jQuery("#sideBarTab2 img").attr("src").replace("-active.gif", ".gif");
    
    
    
    				jQuery("#sideBarTab2 img").attr("src",src);
    
    				jQuery("#samisideBar2").animate({ "width" : "35px", "heigth" : "137px" }, 1200);
    
    				jQuery("#sideBarContents").animate({ "width" : "0", "heigth" : "0" }, 1200);
    
    				isExtended = 0;
    
    			}
    
    	}
    And this is the code where the flash file should be loaded.
    Code:
    <div id="samisideBar2">
    	<a id="sideBarTab2" onclick="samislide();"><img src="<?php echo JURI::base().'modules/mod_samilogin2/'; ?>images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
    	
    	<div id="sideBarContents" style="width:0px;">
    		<div id="sideBarContentsInner">
    
    		<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0' width=500 height=300 >
    	<param name=allowFullScreen value='true' />
    	<param name=FlashVars value="pathToFiles=&settingsPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=cfg%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=8819&xmlPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=xml%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=4476&stageW=500&stageH=300"/> 
    	<param name=movie value="http://localhost/r1/modules/mod_jxtc_albumplayer/FlashMP3.swf">
    	<embed src="http://localhost/r1/modules/mod_jxtc_albumplayer/FlashMP3.swf"
    		width=500
    		height=600
    		allowfullscreen='true' 
    		flashvars="pathToFiles=&settingsPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=cfg%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=8819&xmlPath=http://localhost/r1/index.php?option=com_jxtcalbumplayer%26format=raw%26cmd=xml%26ref=OTF8aHR0cDovL2xvY2FsaG9zdC9yMS8=%26rnd=4476&stageW=500&stageH=300"
    		align='center' 
    		type='application/x-shockwave-flash'
    		pluginspage='http://www.macromedia.com/go/getflashplayer'>
    	</embed>
    </object>
    
    </div></div></div>
    Thank you in advance.
    Attached Thumbnails Attached Thumbnails jQuery sidebar css problem-untitled-1.jpg  

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    How do we get to the page of concern?

    The embed/object are contained within a div of 0 width?

    <div id="sideBarContents" style="width:0px;">


    Is this correct?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •