Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/07/2013, 13:09
tico74
 
Fecha de Ingreso: diciembre-2002
Mensajes: 473
Antigüedad: 21 años, 4 meses
Puntos: 0
Listas en IE10

Hola, queria preguntarles ya que arregle un viejo codigo de un acordeon que muestar videos y se ve bien en FF y Chrome pero no en IE10 . Es esencialmente una lista de UL y LI pero quizas algun experto con un vistzo rapido ve algun error o me indica algun hack o parche para que funcione.
Aca les paso todo, CSS, Js y html. Mil gracias!

Código:
 <style>

.category {
	width: 85%;	
        border: 1px solid #878685; 
        background-color:white;        
        border-spacing: 0px;
}
  
.accordian {
	width: 85%;	
        border: 1px solid #878685;
        margin-left: 50px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 10px;        
        border-spacing: 0px;
}

.accordian li {
	list-style-type: none;
	padding-top:7px;
        padding-left: 5px;
        padding-bottom: 2px;
}

.dimension {
	height: 400px;
}

.even, .odd , .titlecategory{
	font-weight: bold;
	height: 20px;        
	border: 1px solid #878685;    
        border-spacing: 0px;
        padding-top:7px;
        padding-left: 5px;
        padding-bottom: 2px;
        font-family: Tahoma;
        font-size: 12px;
        font-weight: bold;
        border-bottom-width: 1px;
        border-bottom-width-ltr-source: physical;
        border-bottom-width-rtl-source: physical;
        border-top-width: 0;        
        border-top-width-ltr-source: physical;
        border-top-width-rtl-source: physical;
        
      
}




.titlecategory {   
    color:white;   
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #878685;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
.even { 
    background: #D9DADE;
    color:#F01000;
}

.odd {
     background: #D9DADE;
     color:#F01000;
}     
   
  
 </style>
 
<script type="text/javascript">

$(function() {
	// Hide all the content except the first
	$('.accordian li:odd:gt(0)').hide();
	
		
	$('.accordian li:odd').addClass('dimension');
	
	
	$('.accordian li:even:even').addClass('even');
	
	
	$('.accordian li:even:odd').addClass('odd');
	
	
	$('.accordian li:even').css('cursor', 'pointer');
	
	
	$('.accordian li:even').click( function() {
		
		var cur = $(this).next();
		
		
		var old = $('.accordian li:odd:visible');
		
		
		if ( cur.is(':visible') )
			return false;
		
		
		old.slideToggle(500);
		
		
		cur.stop().slideToggle(500);
		
		
		$(this).stop().animate( {
			paddingLeft:"30px",background:"#DDDDDD"
		} );
		
		
		old.prev().stop().animate( {
			paddingLeft:"5px"
		} );
	} );
        
        
        
        function openpanel(id) {
		
		var cur = $("#"+id);
                
                //alert(cur)
                //hide all tabs
		$('.accordian li:odd').hide();
                
                //$('#title_'+id).append("<div class='accordion-collapse'></div>")
                
                $('#title_'+id).show();
                $('#'+id).slideToggle(100);
		
	}
        
        

        
        var theUrl = window.location.href;
        var hashValue = theUrl.split('#')[1];       
        
        openpanel(hashValue);
       
        
        
        
});
</script> 
 


        <div><br> ver</div>
        <div class="category" id="general">
            <div class="titlecategory" id="titlegeneral">General</div>
                    <div class="accordian" id="accordiangeneral">
                            <ul style="margin-left: 0px;">
                                    <li id="title_registration">Registracion</li>
                                    <li id="registration">
                                        <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxx" frameborder="0" allowfullscreen></iframe> 

                                        </p>
                                    </li>

                                    <li id="title_howlistitem">item2</li>
                                    <li id="howlistitem">
                                        <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
                                        </p>
                                    </li>

                                    <li id="title_forgot">item3</li>
                                    <li id="forgot">
                                        <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
                                        </p>
                                    </li>
                            </ul>
                    </div>
        </div>