I have the code below that works ok. It is responsible of updating social buttons on a floating bar onchange of selected value in a select
tag.
$('select.select').change(function(e) {
e.preventDefault();
var value = $('select.select option:selected').val();
do_social(value);
return false;
});
function do_social(str)
{
$(".dd_inner").fadeOut("slow");
$.when(CreateNewLikeButton(str),CreateNewPlus1Button(str),CreateNewLinkedinButton(str),CreateNewSuButton(str)).done(function(){
$(".dd_inner").fadeIn("slow");
});
}
The problem is that, when the buttons are updated, the background image of the body disappears and appears again. I have many other functions that are executed at the same time as do_social()
, but when I isolate them, I see that they are not responsable for this issue.
This is the style I am applying on body
tag:
body {
line-height: 1;
background: url(images/bg.png) repeat-y;
background-size: 100;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
dd_inner
is the wrapper of the social floating bar, its CSS is:
.dd_inner {
margin: 0 auto;
position: relative;
}
Thank you for guiding me in this issue, it is really making my website look abnormal and I am looking for solution it is been days now. I am here to provide with any additional info.
Again, thank you.
I was having another issue about the background image itself, I was looking for a way to make it keep its shape while resizing the browser window. I did:
body {
background: url(images/bg.png) no-repeat center top fixed;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problems are resolved now. When I isolated CSS items one by one, I found that fixed
resolves the reflow problem.
Thank you @Jon Jaques
for your usual help.