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

Rollovers not rolling over and IE won't load posts WordPress

I'm using a modified version of this theme, http://wpshower.com/themes/sight/

The front page features a grid of images that once rolled over a title fades up. And under the initial 9 post image grid there is a an AJAX "load more" button that loads the next 9 posts.

The problem is the rollovers on the grid images don't work when you get to the page. But if you click the read "load more" button the next 9 posts are loaded and the rollovers work as expected.

Except in IE.
In IE once I click "load more" the load more button goes away and no additional posts load, but the rollovers start working.

The site: http://bit.ly/rKLGqL

I need to have the rollovers work upon the first page load and I need IE to display the additional posts after "load" more is clicked.

Here is the code that controls both the rollovers and the "load more" function
jQuery.noConflict();
(function($) {
$(function() {
/*** Dropdown menu ***/

var timeout = 200;
var closetimer = 0;
var ddmenuitem = 0;

function dd_open() {
dd_canceltimer();
dd_close();
var liwidth = $(this).width();
ddmenuitem = $(this).find('ul').css({'visibility': 'visible', 'width': liwidth});
ddmenuitem.prev().addClass('dd_hover').parent().addClass('dd_hover');
}

function dd_close() {
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden').prev().removeClass('dd_hover').parent().removeClass('dd_hover');
}

function dd_timer() {closetimer = window.setTimeout(dd_close, timeout);
}

function dd_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = dd_close;

$('#dd > li').bind('mouseover', dd_open);
$('#dd > li').bind('mouseout', dd_timer);

$('#larr, #rarr').hide();
$('.slideshow').hover(
function(){
$('#larr, #rarr').show();
}, function(){
$('#larr, #rarr').hide();
}
);

/*** View mode ***/

if ( $.cookie('mode') == 'grid' ) {
grid_update();
} else if ( $.cookie('mode') == 'grid' ) {
list_update();
}

$('#mode').toggle(
function(){
if ( $.cookie('mode') == 'grid' ) {
$.cookie('mode','grid');
list();
} else {
$.cookie('mode','grid');
grid();
}
},
function(){
if ( $.cookie('mode') == 'grid') {
$.cookie('mode','grid');
grid();
} else {
$.cookie('mode','grid');
list();
}
}
);

function grid(){
$('#mode').addClass('flip');
$('#loop')
.fadeOut('fast', function(){
grid_update();
$(this).fadeIn('fast');
})
;
}

function list(){
$('#mode').removeClass('flip');
$('#loop')
.fadeOut('fast', function(){
list_update();
$(this).fadeIn('fast');
})
;
}

function grid_update(){
$('#loop').addClass('grid');
$('#loop').find('.thumb img').attr({'width': '190', 'height': '190'});

$('#loop').find('.post').hover(

function(){$('h2',this).fadeIn();},

function(){$('h2',this).fadeOut();

});
$('#loop').find('.post').click(function(){
location.href=$(this).find('h2 a').attr('href');
});
$.cookie('mode','grid');
}



function list_update(){
$('#loop').addClass('grid');
$('#loop').find('.post').removeAttr('style').unbind('mouseenter').unbind('mouseleave');
$('#loop').find('.thumb img').attr({'width': '190', 'height': '190'});
$.cookie('mode', 'grid');
}

/*** Ajax-fetching posts ***/

$('#pagination a').live('click', function(e){
e.preventDefault();
$(this).addClass('loading').text('LOADING...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loop',
dataType: "html",
success: function(out){
result = $(out).find('#loop .post');
nextlink = $(out).find('#pagination a').attr('href');
$('#loop').append(result.fadeIn(300));
$('#pagination a').removeClass('loading').text('LOAD MORE');
if (nextlink != undefined) {
$('#pagination a').attr('href', nextlink);
} else {
$('#pagination').remove();
}
if ( $.cookie('mode') == 'grid' ) {
grid_update();
} else {
grid_update();
}
}
});
});

/*** Misc ***/

$('#comment, #author, #email, #url')
.focusin(function(){
$(this).parent().css('border-color','#888');
})
.focusout(function(){
$(this).parent().removeAttr('style');
});
$('.rpthumb:last, .comment:last').css('border-bottom','none');

})
})(jQuery)

Answers (4)

2011-10-24

Luis Cordova answers:

this is inside a block grid_update that is only activated once the expansion is done

$('#loop').find('.post').hover(
function(){$('h2',this).fadeIn();},
function(){$('h2',this).fadeOut();
});


also you are adding and removing some classes which are not present at the start, I suggest you initiall place this into your html so that they can be either removed or added or do some initialize function to set these.

that should do it, hope that helps


Luis Cordova comments:

what is the status of this, let me take a look please explain what you have tried and where do you think the problem is?

2011-10-24

Romel Apuya answers:

i think declaring your jQuery.noConflict to a variable would do it.

var $j = jQuery.noConcflict()

then replacing all the $ with $j

in this code.


Chris H comments:

This strips the ajax load more and never gets initiates the rollovers

2011-10-26

Linda answers:

PM sent.


Linda comments:

Hi, in a previous [[LINK href="http://wpquestions.com/question/show/id/3141"]]question[[/LINK]] you were told to change the script.js file. Did everything work correctly in ie before that change?


Chris H comments:

If I remember correctly yes.


Linda comments:

So maybe we need to go back to that script and then find a way to fix the images disappearing without messing up ie? Would you be willing to try that?

-Linda


Chris H comments:

I'm open to anything at this point


Linda comments:

Ok, can you switch the .js back and let me take a look at it again.

Linda


Chris H comments:

PM

2011-10-26

Denzel Chia answers:

Hi,

You need a jQuery initialization script for the hover to work upon loading the page.

Put the following in html head.


<script type='text/javascript'>
jQuery(document).ready(function() {
grid_update();
});
</script>


The hover works after you click on load more, because the ajax response executes grid_update();

As for the IE issue, I do not have access to PC now, so cannot help.

Thanks!
Denzel


Denzel Chia comments:

Hi,

Try changing the namespace to dollar sign, if it does not work.


<script type='text/javascript'>
$(document).ready(function() {
grid_update();
});
</script>


Thanks!
Denzel


Denzel Chia comments:

To whoever that is working on http://blog.adesa.com/ now.
You put the initialization script at the wrong place, it gets loaded before the javascript plugins are linked.
Put it before closing head tag and after wp_head();

Thanks!
Denzel


Denzel Chia comments:

Hi,

Now the script is in correct place, but the error console says $ is not a function, so use jQuery instead of $ and if it still does not work, change grid_update(); to grid();

Thanks!
Denzel


Chris H comments:

Still getting an error


Denzel Chia comments:

Hi,

Something is wrong with your script.js

The firefox error console says grid_update() and grid() is not defined.
This is not possible, as it is written in script.js

Did you write script.js yourself? if not, you can try revert to original script.

I am afraid this is all I can help, as I do not know how to write jQuery plugins.

Thanks!
Denzel


Denzel Chia comments:

Hi,

According to this http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html

Your script.js is missing a colon at the end of (jQuery) it should be (jQuery);

It could be the "mother" of all your problems, a syntax error firefox can accept but not IE

I am going offline now.

Thanks!
Denzel


Chris H comments:

None of this has worked.