JS Background Resize issue.
- Started
- Last post
- 12 Responses
- meffid
I'm using jquery.ez-bg-resize.js and have got a small glitch with it; is anyone able to take a look for me please?
It loads the large image, then once loaded it snaps into size making it look awful.
- spmitch0
url>?
- spmitch0
it might have something to do with the div id body-background
- meffid0
^ That JPG one requires you put this in:
Example HTML for Background DIV
<!-- This gets positioned absolutely so place it anywhere. -->
<div id="body-background"><img src="image/bg.jpg" alt="Bg"></div>Example Example jQuery Code
$(document).ready(function() {
$("#body-background").ezBgResize...
});
- meffid0
I need to hide the image until fully loaded and resized. Am far from an expert in this field.
- boat0
^ Im no dev so its probably shit.
<script>
function downLoad(){
if (document.all){
document.all["preload"].style.vi...
document.all["load"].style.visib...
} else if (document.getElementById){
node = document.getElementById("preload...
node = document.getElementById("load...
}
}
</script>in your body put
<body onload="downLoad()">
<div id="preload" class="preload"> all content you want loaded at the start like a shitty spinning circle to think that crap is loading </div><div id="load" class="load"> this crap is hidden untill fully loaded, so put your giant cock images here</div>
Profit
- meffid0
I'm still have a mare with this; if anyone can take a look, please drop me a line so I can send the link.
Thanks!
- meffid0
Horp for moderator, and please all check out three WP themes I designed, and vote for hedge...
Legit help needed; please?
- intVal0
why not use css , faster than Js for this and result is quite the same.
- Can't scale a background image in cssornj
- can be augmented and Js is not a good solution for treating layoutsintVal
- ex: http://ringvemedia.c…
and this is exactly were Js should never be used, layout its CSSintVal - solely CSSintVal
- ornj0
Uniform scaling:
function bgResize() {
$('.background').each(function(i...
var bg = $(this);
var w = $(window);var width_diff = w.height() / bg.height() * bg.width();
var height_diff = w.width() / bg.width() * bg.height();if(height_diff > w.height()) {
bg.width(w.width()+'px');
bg.height(height_diff+'px');
} else {
bg.width(width_diff+'px');
bg.height(w.height()+'px');
}
});
}// Resize the background image when the window scales
$(window).resize(function(){
bgResize();
});// Make rocket go now!
$(document).ready(function(){
bgResize();
});
- foobaz0
I wrote that plug-in. Could you email me your example? The container that holds the background image has its visibility set to hidden until the image is loaded.
You shouldn't see the behavior you're seeing.