Apologies in advance for posing a question that may not be specific or beneficial to the wider community. Currently, my main focus is resolving this issue for my own peace of mind.
In the process of designing a website, I implemented a social drawer feature. Essentially, when you hover over a social media tab, it shifts slightly to the left. Clicking on it opens up a drawer displaying the corresponding social media feed inside.
While this functionality works smoothly on Firefox, Chrome, and Safari, it fails to work at all on IE9! Initially, everything was functioning correctly in IE, but as I continued developing the site, something appears to be causing a conflict with the drawer feature. This issue extends beyond just a JavaScript conflict, as even the CSS hover functions are not operating properly. Despite minimal jQuery usage to achieve this effect, most of the heavy lifting is done by CSS.
Additionally, I am aware that CSS3 transitions do not function in IE, and I am not overly concerned about achieving smooth movement in that browser.
For reference, here is a link to the site where you can experience the social drawer in action under the Menu section:
The HTML structure:
<div id="social_drawer">
<div id="twitter_drawer" class="drawer_pull"></div>
<div id="tw_drawer" class="drawer"> </div>
<div id="facebook_drawer" class="drawer_pull"></div>
<div id="fb_drawer" class="drawer"></div>
<div id="google_drawer" class="drawer_pull"></div>
<div id="gl_drawer" class="drawer"></div>
</div>
Below is the jQuery code used:
<script type="text/javascript">
$('#facebook_drawer').click(function() {
$(this).toggleClass('open');
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#fb_drawer').toggleClass('open');
});
$('#twitter_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#tw_drawer').toggleClass('open');
});
$('#google_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#gl_drawer').toggleClass('open');
});
</script>
And here is the CSS styling:
#social_drawer {
width: 36px;
height: 450px;
background: url(images/tab_shadow.png) right top no-repeat;
position: absolute;
z-index: 1000;
right: -7px;
/*box-shadow: -10px 0 27px -13px #000000 inset;*/
padding-top: 25px;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
overflow: hidden;
}
#social_drawer.open {
width: 375px;
box-shadow: none;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
}
...
Initially, I suspected a z-index problem, but after experimenting with various z-index combinations and moving the social drawer around different div containers, the issue persists. It's likely a minor oversight on my part that I am unable to pinpoint.
If anyone more knowledgeable could lend a helping hand, it would greatly contribute to preserving my sanity. Thank you in advance. Feel free to request any additional details if needed.