Toggle - horizontal - html4
Hey,
unfortunately, I have to use html 4 were I work.
This code works in Chrome but not in IE (doctype html 4).
Could I do something for this toggle work with this doctype? (as your mouse pass over the element open right to left)
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Untitled Document</title>
<script language="javascript" src="jquery-1.5.1.mim.js"></script>
<script>
jQuery(function($) {
$(document).ready(function() {
$('.panelHandle').hover(function() {
$('.sidePanel').stop(true, false).animate({
'right': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('.sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('.sidePanel').animate({
right: '-241px'
}, 800);
});
});
});
</script>
<style>
.sidePanel{
width:285px;
position:fixed;
right:-242px;
top:15%;
}
.panelHandle{
background-image:url(aba.png);
background-repeat:no-repeat;
height:240px;
width:25px;
float:right;
cursor:pointer;
}
.panelContent{
float:right;
border:1px solid #333333;
width:240px;
height:220px;
background-color:#EEEEEE;
text-align:center;
padding-top:20px;
}
.panelHandle p {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
left: -4px;
margin: 0;
padding: 0;
position: relative;
top: 26px;
}
.toggle-imagem {
background-image:url(fundo.jpg);
background-repeat:no-repeat;
width:200px;
height:200px;
overflow:hidden;
text-align:center;
}
</style>
</head>
<body>
<div class="sidePanel">
<div class="panelContent">
<div class="toggle-imagem"></div>
</div>
<div class="panelHandle"></div>
</div>
</body>
</html>
Could somebody help me?