Same issue as you Jasmine: https://kriesi.at/support/topic/problem-when-hover-on-image-alignement-with-firefox-and-opera-mac

Also wondering if this is the fix. My issue only occurred in FF and not Chrome.

Thank Nick. It fixed it for FF, but Chrome then became angry. If you check out this page and scroll down to the centered images…

The top 2 images I left as centered image links. When you hover over them, they break the centering and left justify (like they did previously in FF).

The next 2 images I put the links in paragraphs with: <p style=”text-align: center;”> That at least centers them in Chrome, but as it was with the centered images in FF, if you hover over them, the image moves down several pixels.

Open up the /js/avia.js file in your enfold folder, find lines 245-287 that look like:

elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video",

opa			= 0.7;



overlay = link.find('.image-overlay');



if(!overlay.length)

{

if(current.outerHeight() > 100)

{

if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }

if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";

if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";



overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);

}

}



if(current.outerHeight() > 100)

{

overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})

.css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);

}

else

{

overlay.css({display:"none"});

}



}).on('mouseleave', elements, function(){



if(overlay.length)

{

overlay.stop().animate({opacity:0}, 400);

}

});

and replace the entire block above with the block below

elements.each(function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

url		 	= link.attr('href'),

span_class	= "overlay-type-video";



overlay = link.find('.image-overlay');



if(!overlay.length)

{

if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }

if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";

if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";



overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);

}

});



elements.on('mouseenter', function(e)

{

var link  		= $(this),

current	 	= link.find('img:first'),

opa			= 0.7;



overlay = link.find('.image-overlay');



if(current.outerHeight() > 100)

{

overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})

.css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);

}

else

{

overlay.css({display:"none"});

}



}).on('mouseleave', elements, function(){



if(overlay.length)

{

overlay.stop().animate({opacity:0}, 400);

}

});

I’ll ask Kriesi to implement this fix in the next version.

Hi!

Fix can be found here: https://kriesi.at/support/topic/image-moves-from-right-to-left-firefox

Best regards,

Peter

It seems like you insert the code at the very top of avia.js. http://www.wafbmuseum.org/wpdocs/wp-content/themes/enfold/js/avia.js

Please revert the change and don’t insert the code at the very top but replace the (already existing) line

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }

with

if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline'}); }

Try following – in wp-contentthemesenfoldjsshortcodes.js replace:

form.slideUp(400, function(){responseContainer.slideDown(400); send.formElements.val('');});

with

form.slideUp(400, function(){responseContainer.slideDown(400); send.formElements.val('');});

jQuery('#scroll-top-link').trigger('click');

My images jump too. I added them through the Add Media when editing in display mode. I am not using columns, so how do I stop the jumping? It does it in Chrome, IE and Firefox….

Help Please!

I followed these instructions and now certain hard-coded icons in the theme aren’t working, specifically: the icon on the “Go to Top” button that appears on long pages, and the next and previous buttons on either side of the blog posts. Can you tell me what to edit in the charmap.php file to fix this? The site is still in development so I can’t give you a link.

Hi there,

I just posted a similar question and I just tried your suggestion Nick. Thanks.

However (and theres always a ‘but’) it only works in boxed mode. I want to replicate the following

http://www.clipular.com/c?6029094=ElAiRoselI8riSzj5UpygB3eFx0&f=.png

…….. which means the dark footer needs to reach edge to edge (left and right) with no margins and I guess the transparent slider would need to do the same. Is there no way to do the same effect without being in boxed mode but instead be in full width. It needs to be responsive too.

The large oranges at the top would be in the transparent slider. Is it also possible to have the bottom oranges overlap between the main body and the footer.

Cheers

Andy