Hi please take a look at my site, the code snippet in question i have to center my images since ive never had any luck with the css-html methods. Sometimes it will load centered and sometimes it wont, please tell me how i can center my images on page load.
site: http://bit.ly/11nAQJK
<script type="text/javascript"> //Centering Script
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
To do this you have many variants. In your case you can do some like this
<div style="
background: url('Assets/OrderSheet.png') center center no-repeat;
width: 100%;
height: 500px;
">
<a href="Assets/OrderSheet.xls">
</a>
</div>
I'd use CSS over JavaScript for this, but that another story. To answer your question I think. pageLoad would be better than .ready
You are using $(document).ready(), so the function is executed when the DOM is ready, but not necessarily all the images and such are loaded, so height and width info are not available yet, when you refresh the page, the info is available and you get the desired behavior.
To overcome this, use $(window).load(), so the function is executed when everything on the page is fully loaded, and info like width and height are available and you should get what you are expecting the first time the page is loaded.
Alternatively, if you need to keep using $(document).ready(), you need to specify the dimensions of the elements like the images explicitly so when the DOM is loaded the browser already knows the dimensions and doesn't have to wait for the elements like images to be fully loaded.
Related
New at coldfusion here. I am needing to change the width of a tab area. This is the following code that I currently have:
<script>
$(document).ready(function() {
var x = screen.width - 100;
console.log(x);
$("[name=theTabs]").css({'width':x + 'px'});
});
</script>
<cflayout name="theTabs" type="tab" style="width: 10px;">
Once the page loads up, the width of the tab area is still 10px....
What could I be doing incorrect?
There are 4 elemets that need to be resized.
I don't know 100% if it matters, but you may want to put the script after the cflayout just to make sure it rendered in the page before trying to run js against it.
<cflayout name="theTabs" type="tab" style="width: 10px;"></cflayout>
<script>
$(document).ready(function() {
var x = screen.width - 100;
console.log(x);
$("#theTabs").css({'width':x +'px'});
$(".x-tab-panel").css({'width':x +'px'});
$(".x-tab-panel-header").css({'width':(x-2) +'px'});
$(".x-tab-panel-body").css({'width':(x-2) +'px'});
});
</script>
i'm new to coding , and to this site, i hope you'll help me! so i'm making horizontal website, i want to add scrolling background, that scrolls with other elements clicked, but slower
like for example http://hotdot.pro/en/ . How do i do that, where do i put code lines?
or maybe i could use better plugin?
Thanks for any help!
!!i'm putting script code here just because website says that my post is not informative enough. sorry
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
or
where?
jQuery Parallax Plugin is probably what you are looking for.
See demo here: http://ianlunn.co.uk/plugins/jquery-parallax/
Source code and documentation here: https://github.com/IanLunn/jQuery-Parallax
"or maybe i could use better plugin" - rule of thumb is: whenever it is possible to use already written code (and not to write your own), you should do so. Except the cases, when writing a code is an academic exercise.
I wrote this script so that the wallpaper (picture of an object) on my site is positioned right and centred correctly when the window is resized. Now it works just the way I want, but only when the window resizes, under normal conditions when the window hasn't been resized it apparently can't get the width of the img element cause it doesn't subtract the half of it for the left css property. How do I get it?
HTML:
<div class="wallpaper" id="wallpaper">
<img src=#bgImage.img id="wallpaperImg" style="height:100%; width: auto; position: fixed;">
</div>
JS:
<script type="text/javascript">
var screenWidth;
var screenHight;
var totalHeight;
var aspectRatio;
var blah = false; //Ugly hack
var navbarSize = 41;
var wallpaper = $("#wallpaperImg");
function getAspectRatio(h,w){
return (h-1)/w; //Ugly hack
}
function resizeWallpaper(w,h){
if(typeof(aspectRatio)==='undefined') aspectRatio = #bgImage.aspectRatio; //delivered by server framework
totalHeight = (h-navbarSize).toString() + 'px';
wallpaper.css("height",totalHeight);
wallpaper.css("width","auto");
wallpaper.css("left",(w/2)-(wallpaper.width()/2)+'px');
wallpaper.css("top",'41px');
if(getAspectRatio(wallpaper.height(),wallpaper.width()) > aspectRatio && blah){
wallpaper.css("width",(w).toString() + 'px')
wallpaper.css("height","auto")
wallpaper.css("top",((h/2)-(wallpaper.height()/2))+20.5+'px');
wallpaper.css("left",'0px');
}
}
resizeWallpaper($(window).width(),$(window).height());
blah = true;
$(window).resize(function() {
resizeWallpaper($(window).width(),$(window).height());
});
</script>
Quick upload of what I'm talking about: Site
You have to wait for the image to download before you can resize it. Surround the initial call in a load handler:
wallpaper.on('load', function() {
resizeWallpaper($(window).width(),$(window).height());
});
I'm trying to get a large logo (in the header of my site) to fall down into the header area on load. And so this is the only jquery function that I can find that seems to fit the idea.
http://jsfiddle.net/apHLu/279/
var $dropDiv = $('#dropDiv');
$('#holder a').on('click', function() {
// get position of the element we clicked on
var offset = $(this).offset();
// get width/height of click element
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// get width/height of drop element
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// determine middle position
var initLeft = offset.left + ((w/2) - (dw/2));
// animate drop
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 300, 'easeOutBounce');
});
I basically want to know, is it possible to switch the click trigger to an onload call? I don't want to be muddling around trying to get it to work if it's not possible.
Thank you.
Here is an updated Fiddle. $(function() { ... }); is short for 'Document is ready'. I also wrapped the function in setTimeout();, because it was firing a little quick to see the full effect. Change the second parameter in setTimeout to adjust the time it waits to fire...
Updated (per #coby suggestion): If you do have a large amount of images you could change $(function() { to window.onload(function() {. Ready doesn't wait for all the images to be completely loaded.
I just ran into the weirdest of bugs today. I'm not sure if it's a bug in Chrome or something that I can work around but here goes.
I built a JQuery function to resize a set of images that are posted on a forum:
$(".post-message img.post-image").load(function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
});
});
The problem is that this only seems to work when I refresh the page. It doesn't work when you press previous or when you get linked to the page.
In chrome the $(img).width() property returns 0 in both cases when the function doesn't work.
This function performs as expected in IE9 and FF3
What can I do to fix this odd behavior?
Most probably because the images are being pulled up from the browser cache, and the load event is not triggering. The way around this is to manually trigger load if the images's complete properties have been set:
$(".post-message img.post-image").one("load", function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
});
}).each(function() {
if(this.complete) $(this).trigger("load");
});
Karmin is correct here. I ran into this problem a few years ago and ended up just not relying on img.load. His workaround for manually triggering the load event should work.
However...
Developers should do max-width or height in CSS in this scenario. In fact, it is good programming practice to do what one can in CSS before doing them in javascript.
Additionally, if one were to keep going with this solution, var width and var height should be placed outside of the if statement next to var maxWidth, and used wherever $(this).width() is called (including the initial check on line 4). Right now the code is unnecessarily creating a new jQuery object to get the height each time when it should have stored and used the value from the first check.
Thanks for the contributions guys. A previous answer given on stack - that I apparently couldn't find this afternoon jQuery && Google Chrome - solved my problem!
$(window).load(function() {
$(".post-message img.post-image").one("load", function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
console.log($(this).width())
});
}).each(function() {
if(this.complete) $(this).trigger("load");
});
});
The code has to be executed on $(window).load() together with the provided code by karim79.