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)
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?
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
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
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.