In my actual Javascript, i preload some images and display them on the body of my index.html. I need a way to resize them in order to fot the width and height of the window. Here is my actual code:
function($) {
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--; ) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
arrayimg.push(cacheImage);
}
arrayimg.reverse();
}
})(jQuery)
function resizing(img) {
var $image = img;
var image_width = $image.width;
var image_height = $image.height;
var body_width = $("#corps").width();
var body_height = $("#corps").height();
$image.width = body_width;
$image.height = body_height;
}
$.preLoadImages("./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/p1.jpg", "./images/p2.jpg", "./images/p3.jpg");
for ( j = 0; j < arrayimg.length; j++) {
resizing(arrayimg[j]);
}
This code actually works pretty well. The main problem is that the resize is not keeping the aspect of the actual picture. I need some code that respect the aspect ratio of the initial picture.
You can calculate the ratio like this:
var ratio = Math.min(body_width/image_width, body_height/image_height);
Then just multiply:
$image.width = ratio*body_width;
$image.height = ratio*body_height;
I assumed you want to "fit" the image inside the body. If you want to clip, replace Math.min with Math.max (and add overflow:hidden etc...)
Related
I have the classical Progress bar in Javascript. I Would like to simply place the vertical bar without seeing it moving on the screen.
function progressbar() {
var vertical_bar2 = document.querySelector("#P5 .vl5");
var element = document.getElementById("myprogressBar");
var ValueSet = 25
var width = 0;
document.getElementById("vl5").style.display='';
document.getElementById("value2").style.display='';
document.getElementById("value1").style.display='';
var identity = setInterval(scene, 10);
function scene() {
if (width >= ValueSet) {
clearInterval(identity);
} else {
width++;
vertical_bar2.style.left = `${width}%`;
document.getElementById("value2").innerHTML = ValueSet
}
}
}
I am trying the following script but it is not working
function progressbar() {
var vertical_bar2 = document.querySelector("#P5 .vl5");
var element = document.getElementById("progressBar");
var CE = 25
var width = 0;
document.getElementById("vl5").style.display='';
document.getElementById("Value2").style.display='';
document.getElementById("Value1").style.display='';
vertical_bar2.style.left = 25;
document.getElementById("Value").innerHTML = CE
}
Based on the code your provided, it looks like you just need to set a unit for the left property of your bar. Currently you are only setting a value (25), but without a unit (%, px, em, etc.) it will not apply anything.
vertical_bar2.style.left = "25%";
or
vertical_bar2.style.left = `${CE}%`;
I want to change the size of Highcharts legend (especially its width). Here is some of the code I tried to use based on research I did:
$(window).resize(changeSummaryLayout);
function changeSummaryLayout() {
var w = window.innerWidth;
if (w < 1370 && w > 992) {
for (i = 0; i < charts.length; i++) {
charts[i].highcharts().setTitle({ x: -5 });
charts[i].highcharts().legend.options.y = 150;
charts[i].highcharts().margin[3] = 0;
charts[i].highcharts().legend.options.width = 200;
charts[i].highcharts().legend.itemStyle.width = 200;
for (var index in charts[i].highcharts().series) {
charts[i].highcharts().legend.destroyItem(charts[i].highcharts().series[index]);
}
charts[i].highcharts().legend.render();
//charts[i].highcharts().legend.update({ itemStyle150 });
//charts[i].highcharts().isDirtyLegend = true;
//charts[i].highcharts().redraw();
//charts[i].highcharts().isDirtyBox = true;
}
$('#chartContainer').css('height', '400px');
$('.pieChartTotal').css('height', '390px');
$('.pieChartCanvasSum').css('height', '330px !important');
$('.highcharts-container').children().css('height', '330px');
$('.highcharts-background').attr('height', '330px');
}
None of those solutions is worknig to change the width and, what is strange, the width gets updated only after I hover my mouse over legend. Can anyone explain to me why does this happen?
Is there any solution that will work here?
I think you can try like:
var chart = new Highcharts.Chart({
......
});
function resizeWindow(){
chart.legend.options.width = widthyouwanttoadd;
chart.legend.itemStyle.width = widthyouwanttoadd;
for(var index in this.chart.series) {
chart.legend.destroyItem(chart.series[index]);
}
chart.legend.render()
}
I just started working with the easeljs library. I have created a canvas with a stage and it works.
I want to add bitmaps as buttons and add them side by side in the bottom on the stage.
I have tried with the following, but it place the bitmaps on top on each other.
var button = new createjs.Bitmap(queue.getResult("largebrick"));
var contentWidth = document.getElementById("content").offsetWidth;
var contentHeight = document.getElementById("content").offsetHeight;
var container = new createjs.Container();
stage.addChild(container);
stage.enableMouseOver(10);
for(var i = 0; i <10; i++){
button.x = 0 + button.getBounds().width * i;
button.y = contentHeight - button.getBounds().height;
button.addEventListener("mouseover", function() { document.body.style.cursor = 'pointer'; });
button.addEventListener("mouseout", function() { document.body.style.cursor = 'default'; });
button.addEventListener("click", function(event) {addBricks(button); });
container.addChild(button);
}
I hope some of you guys can help.
A couple things here. You need to create a new instance of the button inside the loop, otherwise you are just moving the original instance of button on each iteration. In this example, I simplified everything a bit by using a shape, but you could easily do the same with your Bitmap.
var xPos = 0;
for(var i = 0; i < 10; i++){
var button = new createjs.Bitmap(queue.getResult("largebrick"));
button.cursor = "pointer";
button.x = xPos;
button.y = contentHeight - 50;
xPos += 60;
container.addChild(button);
}
Also, createjs supports defining cursors as a property of a display object like so
button.cursor = "pointer";
which should simplify your code a little.
I'm trying to create something like a very simple particle system. No physics required at this point, just divs that are animated to look like bubbles, or bees, or whatever. The code below creates the divs and through CSS I can make them change position, floating upwards. But I can't seem to workout how to destroy particles. Each particle does it's motion and then returns back to it's original point. I would prefer if it was removed completely.
Thank you.
/* ==================== PARTICLES CONTROLLER ==================== */
/**
* Particle controller interates through all elements with
* CSS class name PARTICLE_CSS and when found a ParticleController is instantiated
* for each of the elements.
*/
function ParticleBaseController(){
var ParticleContainer = document.querySelectorAll(PARTICLE_CSS),
ParticleContainerLength = ParticleContainer.length;
for (var i = ParticleContainerLength - 1; i >= 0; i--){
new ParticleController(ParticleContainer[i]);
};
};
function ParticleController(element) {
var particleElement, fragment = document.createDocumentFragment();
var numberOfParticles = 1;
for (var i = 0; i < numberOfParticles; i ++) {
particleElement = document.createElement("div");
particleElement.addClassName(PARTICLE_ELEMENT_CSS_CLASS);
var Ypos = Math.floor((Math.random()*200)+1);
var Xpos = Math.floor((Math.random()*200)+1);
particleElement.style.top = Ypos + "px";
particleElement.style.left = Xpos + "px";
fragment.appendChild(particleElement);
}
element.appendChild(fragment);
setTimeout(ParticleBaseController, 3000);
};
This worked for me. I am guessing that the way it works is that particles are only appended to the container as long as there are fewer than 15. Although I do not know how they are actually destroyed. But on screen I can only ever see 15 particles at a time, or however many I set then number to.
/* ==================== PARTICLES CONTROLLER ==================== */
const NumberOfParticles = 15;
function smoking()
{
var container = document.getElementById('particleContainer');
for (var i = 0; i < NumberOfParticles; i++)
{
container.appendChild(createParticle());
}
}
function randomFloat(low, high)
{
return low + Math.random() * (high - low);
}
function createParticle()
{
var particleDiv = document.createElement('div');
particleDiv.style.top = "-300px";
particleDiv.style.left = "200px"
particleDiv.style.webkitAnimationName = 'smoke-rise, smoke-fade';
var SmokeDuration = randomFloat(5, 10)+"s";
var FadeDuration = randomFloat(4, 11)+"s";
var SmokeDelay = randomFloat(0, 5)+"s";
var FadeDelay = randomFloat(2, 9)+"s";
particleDiv.style.webkitAnimationDuration = SmokeDuration + ', ' + FadeDuration;
particleDiv.style.webkitAnimationDelay = SmokeDelay + ', ' + FadeDelay;
return particleDiv;
}
window.addEventListener("DOMContentLoaded", smoking, false);
I've figured out the centering and resizing issues, but I still can't get onLoad to work properly. Anyone have any ideas? I thought onLoad was supposed to wait for the image to be loaded completely before firing the code. As this is right now, it resizes the img for the next img, and fades it in before it's loaded, so the previous image fades in again. Once the show has run through once, it works perfectly, so obviously it's not waiting for the image to load completely before firing imageLoad().
<div id="slideShow">
<div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
</div>
<div id="slideShowThumbs">
</div>
<script type="text/javascript">
loadXMLDoc('http://www.thehoppr.com/hopspots/82/82.xml', function() {
var slideShow = document.getElementById('slideShow');
var items = [];
var nl = xmlhttp.responseXML.getElementsByTagName('image');
var i = 0;
var t;
var slideShowImg = document.getElementById('slideShowImg');
var slideShow = document.getElementById('slideShow');
var maxHeight = 300;
var maxWidth = 800;
var imgNode = new Image();
function image() {
var nli = nl.item(i);
var src = nli.getAttribute('src').toString();
var width = parseInt(nli.getAttribute('width').toString());
var height = parseInt(nli.getAttribute('height').toString());
imgNode.onLoad = imageLoad();
imgNode.src = src;
imgNode.height = height;
imgNode.width = width;
imgNode.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");
var ratio = maxHeight / maxWidth;
if (imgNode.height / imgNode.width > ratio) {
// height is the problem
if (imgNode.height > maxHeight) {
imgNode.width = Math.round(imgNode.width * (maxHeight / imgNode.height));
imgNode.height = maxHeight;
}
} else {
// width is the problem
if (imgNode.width > maxHeight) {
imgNode.height = Math.round(imgNode.height * (maxWidth / imgNode.width));
imgNode.width = maxWidth;
}
}
}
function imageLoad() {
slideShowImg.appendChild(imgNode);
Effect.Appear('slideShowImg', {
duration: 1
});
t = setTimeout(nextImage, 7000);
}
function nextImage() {
slideShowImg.setAttribute("style", "display:none");
if (i < nl.length - 1) {
i++;
image();
} else {
i = 0;
image();
}
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//XML Loaded, create the slideshow
alert(xmlhttp.responseText);
image();
}
});
</script>
Here are some of my thoughts (it's all open discussion)...
Preloading - Since you're limited to downloading 2 resources in parallel per hostname, it may not make sense to preload everything up front. Since it's a slideshow, how about modifying image() to download the i + 1 image through an Image object that doesn't get appended to the DOM? It doesn't seem beneficial to prefetch i + 2 and beyond in a slideshow setting.
Centering the images - Regarding using the auto margin width for horizontal centering, I believe you'll have to explicitly set the image to display:block. Obviously that doesn't solve centering vertically. Are all the images the same size? Also, will the slideShowImg div have a defined height/width? If so, then some math can be applied to achieve the centering.
Hope this helps! :)
Ok so I fixed the issue with the onLoad, and I even added a little preloading to help the slideshow along as well. All I had to do was define the onload first, and then do everything else except define the src inside the onload's function. I then added a little nextImg preloading so there's little if no hiccup between images even if it's the first time the browser is loading them. Here's the final code for anyone who has similar onload issues and finds there way here:
<div id="slideShow">
<div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;">
</div>
<div id="slideShowThumbs">
</div>
<script type="text/javascript">
loadXMLDoc('/82.xml', function() {
var slideShow = document.getElementById('slideShow');
var items = [];
var nl = xmlhttp.responseXML.getElementsByTagName('image');
var i = 0;
var t;
var slideShowImg = document.getElementById('slideShowImg');
var slideShow = document.getElementById('slideShow');
var maxHeight = 300;
var maxWidth = 800;
var curImg = new Image();
var nextImg = new Image();
function image() {
var cli = nl.item(i);
var src = cli.getAttribute('src').toString();
var width = parseInt(cli.getAttribute('width').toString());
var height = parseInt(cli.getAttribute('height').toString());
curImg.onload = function() {
curImg.height = height;
curImg.width = width;
curImg.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;");
slideShowImg.appendChild(curImg);
var ratio = maxHeight / maxWidth;
if (curImg.height / curImg.width > ratio) {
// height is the problem
if (curImg.height > maxHeight) {
curImg.width = Math.round(curImg.width * (maxHeight / curImg.height));
curImg.height = maxHeight;
}
} else {
// width is the problem
if (curImg.width > maxHeight) {
curImg.height = Math.round(curImg.height * (maxWidth / curImg.width));
curImg.width = maxWidth;
}
}
}
curImg.src = src;
if (i < nl.length - 1) {
var nli = nl.item(i + 1);
var nsrc = nli.getAttribute('src').toString();
nextImg.src = nsrc;
}
Effect.Appear('slideShowImg', {
duration: 1
});
t = setTimeout(nextImage, 7000);
}
function imageLoad() {}
function nextImage() {
slideShowImg.removeChild(curImg);
slideShowImg.setAttribute("style", "display:none");
if (i < nl.length - 1) {
i++;
image();
} else {
i = 0;
image();
}
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//XML Loaded, create the slideshow
alert(xmlhttp.responseText);
image();
}
});
</script>