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());
});
Related
Is it possible to resize the entire 'div' container using javascript ? Inside my div i have 2 images and placed one over another. 1st image has is 720x1280 and 2nd image has 40x40. Now, while resizing my div container both the images should get resized proposinally.
function addWidth() {
var elem = document.getElementById("Image1");
if (elem != null) {
var mydiv = elem.clientWidth;
document.getElementById("divImage").style.width = mydiv + "px";
}
}
function resizediv() {
var height = window.innerWidth;
if (document.body.clientHeight) {
height = document.body.clientHeight;
}
height = parseInt(height) - 10;
document.getElementById("Image1").style.height = parseInt(height - document.getElementById("divImage").offsetTop - 8) + "px";
}
window.onresize = resizediv;
I have tried for an single image and its works fine. But i want the same to happens for an div container.
Try this:
$(window).resize(function() {
addWidth();
resizediv();
});
Along with this, like #Alex said, you can also add width:100% for the images.
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!
I'm using the following code to dynamically create an "overlay" <div> at the top and bottom of the browser window.
$(function() {
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;top:' +
(winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
}
The top <div> appears exactly where I want it to.
But the bottom <div> is not visible. When inspect it in Google Chrome, it seems to indicate that it is below the bottom of the window.
Can anyone see what I've missed here?
EDIT My original code can be found at http://jsbin.com/uravif/41
Maybe I'm misunderstanding, but your code seems to be working for me (here is the Fiddle ).
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;top:' +
(winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
you're just missing in your CSS:
body{
height:100%; /* to fix jsBin bug with $(window).height() */
}
otherwise play with the bottom position of your "BTM" :) element instead of top of course.
edit
$(window).height() will work great offline, so I just think you're messing with that jsBin bug
jsbin DEMO
there is a bottom style attribute that you can use for this:
$('body').append('<div style="position:fixed;left:0px;bottom:30px;width:' + winWidth + 'px;height:30px">BOTTOM</div>');
The bottom attributes positions the element at xx px from the botton of screen.
try below:
$(function() {
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;bottom:0px;width:' + winWidth + 'px;height:30px">BTM</div>');
}
I'm having an issue with a script that I've made recently. The idea is for an image to follow the mouse, but not to go outside of the screen.
http://nemanjamilosavljevic.com/javascript/gallery_view
When you first load the page, it does not calculate the dimensions of the elements, but when you refresh the page then they are calculated.
The elements are not shown on the page right away, since the content that needs to be calculated is a popup. I have tried displaying them right away, but it still didn't do the trick.
Here is the code I'm using:
.popup-image-cnt {
display:none;
position:fixed;
z-index:10;
border:2px solid #fff;
box-shadow:0 0 15px rgba(0,0,0,.7);
}
.popup-image-cnt img {display:block;}
Markup:
<ul id="fnc-preview-this-design">
<li><img src="gallery/1-1.jpg" /></li>
<li><img src="gallery/2-1.jpg" /></li>
<li><img src="gallery/3-1.jpg" /></li>
</ul>
Includes:
<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="jquery/jquery-gallery-view-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
gallery_popup({
actionElement: '#fnc-preview-this-design a'
});
});
</script>
Gallery popup script:
function gallery_popup (elementsObj){
$(window).load(function(){
// Define a screen's bottom position
var bottomPosition = $(window).height() + $(document).scrollTop();
// Define a screen's right position
var sidePosition = $(window).width();
// Generate popup images for every item that is needed
$(elementsObj.actionElement).each(function (i) {
// Append
var image = $(this),
originalSrc = image.attr('rel');
$(this).append('<span class="popup-image-cnt"><img src="' + originalSrc + '" alt="" /></span>');
// Calculate images width and height after it is added and loaded
var imgH = $(this).children('.popup-image-cnt').height();
var imgW = $(this).children('.popup-image-cnt').width();
$(this).bind('mousemove', function(e){
// Define a position where the images bottom side is
var mouseYPosLimiter = Math.round(parseFloat(e.pageY) + parseFloat(imgH));
// Define a position where the images right side is
var mouseXPosLimiter = Math.round(parseFloat(e.pageX) + parseFloat(imgW));
// See if it fits vertically, and if it doesn't, stick it to the bottom
if (mouseYPosLimiter > bottomPosition) {
var topPos = bottomPosition - imgH - 4
} else {
var topPos = e.pageY + 20
}
// See if it fits horizontally, and if it doesn't, stick it to the right
if (mouseXPosLimiter > sidePosition) {
var sidePos = sidePosition - imgW - 4
} else {
var sidePos = e.pageX + 10
}
// Move the popup along with the mouse
$('.popup-image-cnt').offset({
left: sidePos,
top: topPos
});
});
// mouse action
$(this).mouseenter(function() {
// Show the popup
$(this).children('.popup-image-cnt').fadeIn('fast');
});
$(this).mouseleave(function() {
// Hide the popup
$(this).children('.popup-image-cnt').fadeOut('fast');
});
});
});
}
I`m using this "plugin" found on web to preview some images in a php/linux website.
<script type="text/javascript">
function pimg()
{
this.xOffset = 5;
this.yOffset = 50;
$("a.pimg").hover(function (e)
{
this.img_title = this.title;
this.title = "";
var img_src = $(this).attr('img_src');
var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : "";
var image = (img_src) ? img_src : this.src;
$("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
$("#pimg").fadeIn(700);
}, function ()
{
this.title = this.img_title;
$("#pimg").remove();
});
$("a.pimg").mousemove(function (e)
{
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
};
$(document).ready(function($){
pimg();
})
</script>
<div class="images">
View Testimonial
</div>
What I want is to make the image preview to appear inside the visible browser window and not create new space for it ( in cases like the link is in the right bottom of the browser window ). I know I have to play with the positioning, but how can do it dinamically so that the image will appear only in the current viewable content of the browser window.
Thanks!
Your code is fine. You just need to add this to your CSS styles (DEMO)
#pimg{position:absolute;display:none;}
Aside from that, you'll just need to modify this code to the correct x/y coordinates you desire.
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
Take a look at this updated fiddle: http://jsfiddle.net/Wp6bG/1/
In the example (modifed based on Dutchie432's original fiddle), if you resize the width of the screen, the preview will switch from right to left if the preview goes offscreen. You can modify the code to handle all other screen edges (top/left/bottom.)