Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Magic door not opening in Internet Explorer 8 WordPress

  • SOLVED

Hi there. Not sure what the issue is, or where it may be... perhaps a jquery conflict... but on internet explorer 8, when you click on a portfolio item, the magic door doesn't open. Any advice would be much appreciated. Site is www.themartist.com. If the problem lies in header.php, I can attach that code.

Answers (1)

2011-12-17

Christianto answers:

Hi, since your magic door are loading content using ajax from home-magicdoor.php
http://www.themartist.com/wp-content/themes/themartist/includes/home-magicdoor.php

There is unnecessary/missing closing div when you check the html source code..

you can compare it with original theme home-magicdoor.php html source code
http://themes.premiumpixels.com/garnish/wp-content/themes/garnish/includes/home-magicdoor.php

If the returning html structure from ajax is broken/not properly formatted, ajax will not work on IE.

You can check returning value from magicdoor.php to fix it.


themartist comments:

Thanks christiano. The thing is it works on all browsers, except i.e. 8. The developer delivered a 90% finished product, but Ive been left alone to sort out the bugs and have very little idea how to resolve this. The current home-magicdoor.php is the following.

<CODE>
<?php
if(!function_exists('wp_head')) {

if(file_exists('../../../../wp-load.php')) {
include '../../../../wp-load.php';
} else {
include '../../../../../wp-load.php';
}

$postId = $_POST['id'];
$next = $_POST['next'];
$prev = $_POST['prev'];

//Query the database
query_posts( array (
'post_type' => 'portfolio',
'p' => $postId,
)
);

}


if (have_posts()) : while (have_posts()) : the_post();

$image1 = get_post_meta(get_the_ID(), 'tz_portfolio_image', TRUE);
$image2 = get_post_meta(get_the_ID(), 'tz_portfolio_image2', TRUE);
$image3 = get_post_meta(get_the_ID(), 'tz_portfolio_image3', TRUE);
$image4 = get_post_meta(get_the_ID(), 'tz_portfolio_image4', TRUE);
$image5 = get_post_meta(get_the_ID(), 'tz_portfolio_image5', TRUE);
$image6 = get_post_meta(get_the_ID(), 'tz_portfolio_image6', TRUE);
$image7 = get_post_meta(get_the_ID(), 'tz_portfolio_image7', TRUE);
$image8 = get_post_meta(get_the_ID(), 'tz_portfolio_image8', TRUE);
$image9 = get_post_meta(get_the_ID(), 'tz_portfolio_image9', TRUE);
$image10 = get_post_meta(get_the_ID(), 'tz_portfolio_image10', TRUE);
$height = get_post_meta(get_the_ID(), 'tz_portfolio_image_height', TRUE);
$embed = get_post_meta(get_the_ID(), 'tz_portfolio_embed_code', TRUE);
$audio1 = get_post_meta(get_the_ID(), 'tz_audio_mp3', TRUE);
$audio2 = get_post_meta(get_the_ID(), 'tz_audio_ogg', TRUE);
$video = get_post_meta(get_the_ID(), 'tz_video_height', TRUE);

?>

<!--BEGIN #magic-door-wrap-->
<div id="magic-door-wrap">

<!--BEGIN .inner-->
<div class="inner clearfix">


<!--BEGIN #slider-->
<div id="slider">

<?php if($audio1 != '' || $audio2 != '') : ?>

<?php tz_audio(get_the_ID()); ?>

<div id="jquery_jplayer_<?php the_ID(); ?>" class="jp-jplayer"></div>

<div class="jp-audio-container">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_<?php the_ID(); ?>" class="jp-interface">
<ul class="jp-controls">
<li><div class="seperator-first"></div></li>
<li><div class="seperator-second"></div></li>
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
</ul>
<div class="jp-progress-container">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-volume-bar-container">
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<?php endif; ?>

<?php if($video != '') :?>

<?php tz_video(get_the_ID()); ?>

<?php $height = $video; ?>

<div id="jquery_jplayer_<?php the_ID(); ?>" class="jp-jplayer jp-jplayer-video" style=" height: <?php echo $height; ?>px;"></div>

<div class="jp-video-container">
<div class="jp-video">
<div class="jp-type-single">
<div id="jp_interface_<?php the_ID(); ?>" class="jp-interface">
<ul class="jp-controls">
<li><div class="seperator-first"></div></li>
<li><div class="seperator-second"></div></li>
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
</ul>
<div class="jp-progress-container">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-volume-bar-container">
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<?php endif; ?>

<?php if($embed != '') :?>

<?php echo stripslashes(htmlspecialchars_decode($embed)); ?>

<?php endif; ?>

<?php if($image1 != '') : ?>

<!--BEGIN .slides_container-->
<div class="slides_container clearfix">

<?php if($image1 != '') : ?>
<div><img height="<?php echo $height; ?>" src="<?php echo $image1; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image2 != '') : ?>
<div><img src="<?php echo $image2; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image3 != '') : ?>
<div><img src="<?php echo $image3; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image4 != '') : ?>
<div><img src="<?php echo $image4; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image5 != '') : ?>
<div><img src="<?php echo $image5; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image6 != '') : ?>
<div><img src="<?php echo $image6; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image7 != '') : ?>
<div><img src="<?php echo $image7; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image8 != '') : ?>
<div><img src="<?php echo $image8; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image9 != '') : ?>
<div><img src="<?php echo $image9; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<?php if($image10 != '') : ?>
<div><img src="<?php echo $image10; ?>" alt="<?php the_title(); ?>" /></div>
<?php endif; ?>

<!--END .slides_container-->
</div>

<?php endif; ?>

<!--END #slider-->
</div>

<!--BEGIN .hentry -->
<div <?php post_class() ?> id="door-<?php the_ID(); ?>">

<!-- BEGIN #portfolio-nav -->
<div id="portfolio-nav" class="clearfix">
<ul>
<li class="portfolio-prev">
<a id="prev-post" data-id="<?php echo $prev; ?>" href="#">Previous</a>
</li>

<li class="portfolio-next">
<a id="next-post" data-id="<?php echo $next; ?>" href="#">Next</a>
</li>

<li class="portfolio-close">
<a href="#">Close</a>
</li>
</ul>
<!-- END #portfolio-nav -->
</div>
<span class="hp_bellocaps"><?php the_title(); ?></span>

<div class="seperator clearfix">
</div>

<!--BEGIN .entry-content -->
<div class="entry-content">
<?php global $more; $more = 0; ?>
<?php the_excerpt(); ?>
<?php the_content( __('Read more...', 'framework') ); ?>
</div>
<a href="<?php the_permalink(); ?>">Read more...</a>

<!--END .entry-content -->
</div>

<!--END .hentry-->
</div>

<!--END .inner-->
</div>

<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/images/seperator.png" alt="" />

<!--END #magic-door-wrap-->
</div>

<?php endwhile; endif; ?>


Christianto comments:

delete </div>
below
<?php the_content( __('Read more...', 'framework') ); ?>

so
<?php the_excerpt(); ?>
<?php the_content( __('Read more...', 'framework') ); ?>
<strong></div></strong>
<a href="<?php the_permalink(); ?>">Read more...</a>

become
<?php the_excerpt(); ?>
<?php the_content( __('Read more...', 'framework') ); ?>

<a href="<?php the_permalink(); ?>">Read more...</a>


Christianto comments:

Hi themeartist,

have you tried to delete </div> tag like I said above...?
Maybe you can replace it with home-magicdoor.php in zip file attach below...