I am using fancybox 1.3.4 to show some content in popup, but the popup is not centered in browser how to fix it?
html code:
<a class="clickMe" title="" message="Last Updated: 10/1/2013">Privacy Policy</a>
js code:
$("body").on("click", ".clickMe", function(){
showAlertSized($(this).attr("title"), $(this).attr("message"), $(this).attr("width"), $(this).attr("height"));
});
function showAlertSized(title, msg, width, height) {
debugger;
if(width === undefined){
//width = 965;
width = '95%';
}
if(height === undefined) {
//height = 700;
height = '95%';
}
var content = '<h1>' + title + '</h1>' +
'<p class="msg">' + msg + '</p>' +
'<div class="fancy-btns"><input type="button" value="" onclick="closeAlert()" class="fancy-ok-btn" /></div>';
$.fancybox({
'content': content,
'hideOnOverlayClick': false,
'overlayOpacity' : 0.7,
'overlayColor' : '#777',
'width': width,
'height': height,
'autoDimensions': false,
'autoSize': false
});
}
here is the screenshot
your width and height are set to 95% of the viewport so by logic you have 5% width and height unaccounted for. Try adding 'margin': 2.5% to your fancybox initialisation call, this should put a 2.5% margin on all 4 sides of your fancybox, making it perfectly centered. Unfortunately I am unable to test this or provide a coded example, but theoretically it should work!
Related
I'm appending divs, and I need to get the image height en width. I need to add css to the MB-Container class, according to the height/width of the image
example: portrait -> container width 100%, landscape ->
'self-align':'flex-end'
$('.MB-Container').append('' +
'<div class="Cover-Item">' +
'<img src="' + cover + '" style="width:100%; height:100%;"/>' +
'</div>' +
'</div>');
However when trying to get the height and width of the image, I'm getting zero for height:
var itemWidth = $('#item1 .Cover-Item img').width();
var itemHeight = $('#item1 .Cover-item img').height();
How can I add a onload function in the append to check for the image width/height?
I've tried:
$(document).on("load",".Cover-Item img", function() {
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
console.log($(this).load());
$(this).load();
});
But this only fires once.
The actual onload function is blank in your example. This might work:
$(document).on("load",".Cover-Item img", function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
console.log($(this).height());
});
This one is fairly simple, but very weird:
var dims = this.placeholder.node().getBoundingClientRect();
this.mapContainer = d3.select('body').append('div')
.classed('map-container', true)
.style({
position : 'absolute',
width : dims.width,
height : dims.height,
top : dims.top,
left : dims.left
});
dims.width, dims.height, etc. return non-zero values, but the div that I get is just plain <div class="container" style="position:absolute;"></div>
I can set other style values in the console (d3.select('.map-container').style({color:'red','background-color':'blue'}) works fine), but setting width d3.select('.map-container').style({width:30,top:40}) does nothing at all.
Here's a straight jsbin where it also doesn't work: http://jsbin.com/gequrasivo/1/edit?html,js,output
What's going on here?
It's because CSS style values require a unit.
this.mapContainer = d3.select('body').append('div')
.classed('map-container', true)
.style({
position : 'absolute',
width : dims.width + 'px',
height : dims.height + 'px',
top : dims.top + 'px',
left : dims.left + 'px'
});
works fine.
I am rescaling an image on my website (depending on the screen size) with javascript using jQuery's .css() function.
Now I'm trying to animate a bunch of rescaled images and the performance crushes on older systems...
My guess is that the browser rescales the image in every step of the animation.
Is there any way to prevent that, e.g. by once rescaling the image and using this rescaled version for the animation?
Max
EDIT:
function adjustTile(contentHeight)
{
TILE_GLOBAL.values.tileWidth = contentHeight/TILE_GLOBAL.def.tileWidthRatio;
var windowWidth = jq(window).width();
var tileStackDistance = windowWidth / TILE_GLOBAL.values.tiles.length / 3;
var tileOffset = (windowWidth - TILE_GLOBAL.values.tileWidth - tileStackDistance*(TILE_GLOBAL.values.tiles.length-1))/2;
for(var i = 0; i < TILE_GLOBAL.values.tiles.length; i++)
{
var position = tileOffset + tileStackDistance * i;
jq(TILE_GLOBAL.values.tiles[i]) .css({ 'left' : position + 'px',
'z-index' : TILE_GLOBAL.values.tiles.length - i,
'width' : TILE_GLOBAL.values.tileWidth + 'px',
'height' : contentHeight + 'px',
'border' : TILE_GLOBAL.values.tileBorderSize + 'px solid #a3aba5'})
.attr('data-original_pos', position);
}
jq('.tile-description').css({'font-size' : contentHeight / 20 + 'px'});
}
function slideTiles(e)
{
TILE_GLOBAL.values.cancelReset = true;
var chosenTile = jq(e.delegateTarget);
var prevTiles = chosenTile.prevAll('div');
var nextTiles = chosenTile.nextAll('div');
for(var i = 0; i < prevTiles.length; i++)
{
jq(prevTiles[i]).animate({left : jq(prevTiles[i]).attr('data-original_pos') - (TILE_GLOBAL.values.tileWidth/3*2.5) + 'px'}, {queue : false});
}
chosenTile.animate({left : chosenTile.attr('data-original_pos') + 'px'}, {queue : false});
for(var i = 0; i < nextTiles.length; i++)
{
jq(nextTiles[i]).animate({left : jq(nextTiles[i]).attr('data-original_pos') + 'px'}, {queue : false});
}
}
<div class="tile"><img class="tile-image" src="images/template/tiles/rvtile.jpg" border="0" />
<div class="tile-overlay"> </div>
<img class="tile-product-headline" src="images/template/tiles/rvheadline.png" border="0" />
<div class="tile-shadow"> </div>
<p class="tile-description"></p>
</div>
I also had this issue....
You should place your rescaled image into a div that should has fixed width and height as per image size and should move that div (it will move image inside it), instead of image only.
OR
Even you can rescale the div size as per screen size and can specify height/width of image as 100% and can move div.
For your reference
I have this code which loads automatically a different picture from an array everytime a user loads index.html. This is the jquery code:
$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({'height':'100%','width':'auto'});
} else {
$img.css({'width':'100%','height':'auto'});
}
}
$win.resize(function() { resize(); }).trigger('resize');
});
I'm new with adapting images to different screen resolutions. So I thought that if somebody opens my web with for example an imac with 2560/1440px the image will be adapted correctly with this code, but I suppose it will be completely pixeled. So I think, I have to create a larger image file so those computers load the bigger file to adapt in resolution. I want to avoid that other users with a normal screen load the big file for speed reasons. What could I add to this code to make bigger screens load a bigger file so it doesnt pixalate?!?!
P.D. If you also know which is the best image resolution for different groups of screen sizes it would be VERY helpful!
Thanks!
You could always check the window size, either height or width, whatever floats your boat, and add something to the image filenames to load high res images, like having img4.jpg as a normal image and img4_big.jpg as a high res image etc.
Would look something like this :
$(window).load(function() {
var randomImages = ['img1', 'img2', 'img3', 'img4', 'img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
//add _big to image filename if window width is over 1920px,
//like so : img4_big.jpg etc.
var isBig = $(window).width() > 1920 ? '_big' : '';
//add the string to the image filename
var $img = $('#background')
.attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.jpg')
.css({
'position': 'fixed',
'top': 0,
'left': 0
});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({
'height': '100%',
'width': 'auto'
});
} else {
$img.css({
'width': '100%',
'height': 'auto'
});
}
}
$win.resize(function() {
resize();
}).trigger('resize');
});
I'm using JQuery UI Dialog like this ;
$(function () {
var dlg = $("#dialog").dialog({
draggable: true,
resizable: false,
width: 950,
height: 480,
autoOpen: false,
modal: true,
minHeight: 30,
minwidth: 30,
title: 'test'
});
});
Window :
function PopupUrl(url, name, width, height) {
var features = "location=1, status=1, scrollbars=1, width=" + width + ", height=" + height + '"';
window.open(url, name, features);
}
Dialog was opened page's center but popup appear different coordinates. I want to overlapping. How to do this?
Just add a calculated top and left to your features list and the popup will be positioned at the center of the screen :
function PopupUrl(url, name, width, height) {
var top = parseInt((screen.availHeight / 2) - (height / 2));
var left = parseInt((screen.availWidth / 2) - (width / 2));
var features = "location=1, status=1, scrollbars=1, width=" + width + ", height=" + height + ", top=" + top + ", left=" + left;
window.open(url, name, features);
}