I'm using jquery to resize an image on a mobile website: http://www.loiristorantino.com.br/mobile
On browser, if you resize your screen, it works fine but on mobile it's not working. Here's the code that I'm using:
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
var doit;
function resizedw(){
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
fontResuze();
}, 100);
};
I think it's something related with Jquery but I don't know how to change it to javascript.
Can you guys help me with this issue?
Ok, so I found the solution by myself. Since I got this resize function on google, this solution might help others. I just changed the following line and it worked:
//var height = parseInt($inner.clientHeight());// + parseInt($inner.css('top'));
var newheight = $('.inner').height();
$('.tumb-img-border').css('height', newheight);
Related
I'm implementing a chrome extension with javascript to take a screenshot of a full page, so far I've managed to take the screenshot and make it into a canvas in a new tab, it shows the content of a tweet perfectly, but as you can see, the sidebars repeat all the time (Ignore the red button, that's part of my extension and I know how to delete it from the screenshots) screenshot of a tweet
This is the code I'm using to take the screenshot:
async function capture(){
navigator.mediaDevices.getDisplayMedia({preferCurrentTab:true}).then(mediaStream=>{
scrollTo(0,0);
var defaultOverflow = document.body.style.overflow;
//document.body.style.overflow = 'hidden';
var totalHeight = document.body.scrollHeight;
var actualHeight = document.documentElement.clientHeight;
var leftHeight = totalHeight-actualHeight;
var scroll = 200;
var blob = new Blob([document.documentElement.innerHTML],{ type: "text/plain;charset=utf-8" });
console.log('total Height:'+totalHeight+'client height:'+actualHeight+'Left Height:'+leftHeight);
var numScreenshots = Math.ceil(leftHeight/scroll);
var arrayImg = new Array();
var i = 0;
function myLoop() {
setTimeout(function() {
var track = mediaStream.getVideoTracks()[0];
let imgCapture = new ImageCapture(track);
imgCapture.grabFrame().then(bitmap=>{
arrayImg[i] = bitmap;
window.scrollBy(0,scroll);
console.log(i);
i++;
});
if (i <= numScreenshots) {
myLoop();
}else{
document.body.style.overflow = defaultOverflow;
saveAs(blob, "static.txt");
printBitMaps(arrayImg, numScreenshots, totalHeight);
}
}, 250)
}
myLoop();
})
}
async function printBitMaps(arrayImg, numScreenshots, totalHeight){
var win = window.open('about:blank', '_blank');
win.document.write('<canvas id="myCanvas" width="'+arrayImg[0].width+'px" height="'+totalHeight+'px" style="border:5px solid #000000;"></canvas>');
var e = numScreenshots+1;
function printToCanvas(){
setTimeout(function(){
var canvas = win.document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(arrayImg[e], 0, 200*e);
e--;
if(e>=0){
printToCanvas();
}
},10);
}
printToCanvas();
}
Do you know any way by CSS or javascript that I can use to make the sidebars stay at the top of the page so they don't keep coming down with the scroll?
It's not really a case of "the sidebars ... coming down with the scroll" - the code you're using is taking a first screenshot, scrolling the page, taking another screenshot and then stitching it onto the last one and iterating to the bottom of the page. Thus it's inevitable you're seeing what you see on the screen at the point you take the subsequent screenshots.
To resolve your issue, after your first screenshot you would need to set the div element for the side bar to be display=None by use of CSS. You can find details of the side bar by using the browser Dev Tools, right clicking an using "Inspect" in Chrome.
From what I can see, Twitter seems to use fairly cryptic class names, so it might be easiest and more robust to identify the div for the side bar with some other attribute. It appears they set data-testid="sidebarColumn" on it so give using that a go (but YMMV).
Sorry for my Bad language skills.
I rewrite this question 10 times. But still hard to express my question...
My Question
I hope to know how to transit js code to newly opened window.
My situation
I have opening new window event and window resizing event js code
//When user click <a id="new-window">new window</a>, new window come up.
$('#new-window').click(function (){
var videoWidth = $(window).width()/2;
var videoHeight = videoWidth/5*3;
var windowWidth = videoWidth + 20;
var windowHeight = videoHeight + 20;
var w = window.open('', '', 'width=' + windowWidth + ', height=' + windowHeight);
//$(#video) is the
var html = $("#video").clone().attr({
"width" : videoWidth,
"height" : videoHeight
});
$(w.document.body).html(html);
event.preventDefault();
});
function videoFit() {
var videoScreen = $(window).width();
$('#video').css({'width': videoScreen, 'height':videoScreen/5 * 3});
}
$( window ).resize(function(){
videoFit();
});
But when I open developTool(chrome) in new window, there are no js files and css files which I put in the parent window.
following code just adjusted to parent window.
Is there any solution to transit js code?
Thank you for read my questions.
I fire a function on jQuery(document).ready() and on jQuery(window).load(). Both the same function. It is supposed to fire an image resize script.
However, sometimes, when the server is slow to respond, the script doesn't fire at all when the page is done loading.
I've been having this problem for quite a while now, and, maybe it's overkill, but by now, I call the function as shown below, in both the document ready and the window load:
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
The function it calls is:
jQuery.fn.resizeImage = function() {
console.log('fired');
var bgImg = jQuery(this);
/* get img sizes */
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
/* get window sizes */
var winwidth = jQuery(window).width();
var winheight = jQuery(window).height();
/* get the ratio, checks wether window is bigger or smaller than the image */
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
/* checks the difference */
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
/* if you want the entire image to always fit the screen, change the > to < */
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px',
marginLeft: '-'+winwidth/2+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px',
marginLeft: '-'+widthdiff/2+'px'
});
}
};
Using the console.log, I found that the function doesn't fire at all.
Can anyone point me in the right direction as to why this might not work?
Guess you're miss using the this
jQuery('img', '.background').each(function(){
var $self = $(this);
$self.load(function(){
$self.resizeImage();
});
});
Solved it myself.
The issue was in the following:
jQuery(window).load(function(){
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
});
Due to the double load (jQuery(window).load and jQuery(this).load) the code didn't execute at all. Since when the window is loaded, the images are already loaded as well.
I am working with height of image in javascript,
my code:
<script>
var linkBg = 'http://imageshack.us/a/img24/5489/2013042200001.jpg';
var bgimg = new Image();
bgimg.src = linkBg;
var bgHeight = bgimg.height;
alert(bgHeight);
</script>
my problem is: when I run this script on Firefox, it return the height of images, but on Chrome it return 0.
How can I fix this problem using only javascript without Jquery, thanks for any help !
You need to wait until image is fully loaded , like this:
var imgHeight , imgWidth;
bgimg.onload = function() {
imgHeight = bgimg.naturalHeight;
imgWidth = bgimg.naturalWidth;
}
James here. I'm working on a project (actually two projects that both require the same code) that deals with posts, except the content is always 100% of the users screen, and uses jquery to divide the width to make the same amount of columns no matter what screen resolution. I'm having a trouble with video posts however. If anyone could help me write (or write, that'd be way more helpful) a script that forces a default 500px video to the width of the posts? The script that I'm using to divide posts is as follows. Any answers at ALL would be helpful. Oh and I'm bumping this because it's almost a week old, and I have still not received a working script.
var container = function(){
var posts = $(document).width() - 40;
var entry = (posts - 200) / 5;
$("#posts").css("width", posts);
$(".entry").css("width", entry);
$("img.photo").css("width", entry - 22);
}
container();
The site I'm doing this on is http://jamestestblog5.tumblr.com
Thank you to anyone who can help with this, it's REALLY bothering me!
Hiya please see demo here : http://jsfiddle.net/ytcAk/
you can read the logic when you click grow button.
fork from old solution. :) (please let me know if this is what you are looking for if not I will remove this post)
Jquery code
function increaseVideoSize() {
var columnWidth = 450; // width of your content column - any
var defaultVideoWidth = 400; // theme tag width - 400,500
var increaseRatio = columnWidth/defaultVideoWidth;
$(".video-post").each(function() {
var iframe = $("iframe", this);
if(iframe.length>0) {
var currHeight = iframe.height();
var newHeight = currHeight * increaseRatio;
iframe.height(newHeight).width(columnWidth);
} else {
var object = $("object", this);
var embed = $("embed", object);
var currHeight = object.attr('height');
var newHeight = currHeight * increaseRatio;
object.width(columnWidth).attr('height', newHeight);
embed.width(columnWidth).attr('height', newHeight);
};
});
};