Canvas to be same height to left column - javascript

I am new to JavaScript and I found a codepen which allowed me to create a canvas with confettis falling with javascript. I added the javascript to my project but it seems that the canvas height to way too long. I want the canvas height to be the same as the column on the left (Body). It seems that the canvas' height is set using Javascript but I am still a beginner to the language and hence not sure how to modify it to the way I want. Would appreciate any help thanks.
<canvas id="confeti" class="active" width="100%" height="100%">
</canvas>
Codepen: https://codepen.io/anon/pen/gomLNV

one solution would be to call this onload :
function fixSize(){
var confeti = document.getElementById("confeti");
var leftSide = document.getElementById("leftSide");
confeti.style.height = leftSide.clientHeight + 'px';
}
Ofcourse you have to add the id leftSide to the element which you want to use as max height.
To be fair this is really ugly and simple.

code similar to what spaceninja posted.
i didn't mess with any of your css, its just three lines of js, close to what he responded with:
let b = document.getElementById('b');
let c = document.getElementById('confeti');
c.style.height = b.clientHeight+'px';
https://codepen.io/anon/pen/dJvNQb

Related

Modify CSS classes using Javascript

I was wondering if there is an easy way to change the CSS classes in JavaScript.
I have gone through all other similar questions here and I couldn't find an straight-forward and simple solution.
what I'm trying to do is to set the width and height of a <div> to match an image that I have on my site (upon loading). I already know the picture dimensions and I can set my CSS to that - but I want my script to figure this out on its own.
After hours of r&d (I'm a beginner), this is what I came up with:
var myImg = new Image();
myImg.src = "img/default.jpg";
myImg.onload = function(){
var imgWidth = this.width;
var imgHeight = this.height;
document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");
document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");
};
However, this only sets the width of the element with id "myBg". If I reverse the order of the height and width, then it only sets the height to the image's height.
It seems like first it sets the height of the element to the image height but right after it moves to the next statement to set the width, the height value goes back to what it what defined originally in css.
I did further research online and seems like changing the css (inserting new attributes, removing, etc.) using JavaScript is not an easy task. It is done through
document.styleSheets[i].cssRules[i] or document.styleSheets[i].addRule
type of commands, but all the tutorials online and here on stackoverflow were confusing and complicated.
I was wondering if anyone familiar with document.styleSheets can explain this to me simply?
Imagine I have this class in my separate css file:
.container
{
height: 600px;
width: 500px;
}
I want the height and width to change to the dimension of the picture upon loading. How do I do this?
I don't want to define a new "style" element in my html file, I want to change the css file.
I'm not supposed to know the image dimension before it loads to the page.
no jquery please, I want to do this using only standard JavaScript.
Thank you.
The reason only one or the other works is because in your second line of code, you destroy the whole style attribute, and recreate it. Note that setAttribute() overwrites the whole attribute.
A better solution would be to use the element.style property, not the attribute;
var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";
You can grab all elements with class container and apply it to each of them like this:
var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
elements[i].style.width = imgWidth + "px";
elements[i].style.height = imgHeight + "px";
}
Note querySelectorAll isn't supported by IE7 or lower, if you need those then there are shims for getElementsByClassName() here on SO.
If your rules start incrementing you could extract your css to a new class and switch classes:
CSS:
.container-1{
/* A set of rules */
}
.container-2{
/* A set of rules */
}
JavaScript:
element.className = element.className.replace(/container-1/, 'container-2')
var object = document.createElement('container');
object.style.width= "500px";
object.style.height= "600px";
You can also add values to this if you hold the dimensions in variables
var height = 600;
var width = 500;
You can increment when needed
height += 5;
Here is something you might find useful. It may offer you some insight on how you can solve a problem with many different approaches, seeing as though you are new to js.

Use plain javascript rather then Jquery

I am attempting to code the game breakout in javascript. Currently I have it working using JQuery in several locations. My professor does not want the class to use Jquery so I have to change the areas I use jquery to javascript.
function windowsize() {
WIDTH = $("#canvas")[0].width = ($(window).width()-20.5);
HEIGHT = $("#canvas")[0].height = ($(window).height()-20.5);
}
windowsize();
I am using this function to get reference to the canvas element and subtracting from the sides to remove the scrollbar. (on a side note if anyone knows how to remove the scroll bar without subtracting let me know!)
I attemped the following code to get reference to the canvas, but cannot get it to work?
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
Here is my fiddle: http://jsfiddle.net/Kinetic915/kURvf/29/
Any help is appreciated!
Thanks!
Assuming Chrome, document.documentElement.clientWidth seems to do it for you. Or, find a 100% width element on the page and get the width of that.

div centered vertically with specific margin when resize

I really need some help.
I have this test-web: www.sfrpsicologia.com/inicio.html
As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.
Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.
Thank you very much
Don't use absolute positioning in this case.
You are trying to solve poor design problem with javascript and that's not a good practise.
Use sticky footer approach http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
and overthink your page structure based on that technique.
OK I got what you meant.
Do this , however I don't guarantee it will work because I can't test it on your site but it's supposed to if any obstacles occure you should modify it to work.
I'm useing jQuery you should be familiar with it.
So step 1(get the div) <div id=wrapp> and take it's height
var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();
step 2(Set some other variables)
var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;
These heights are the elements besides your <div id=wrapp> in your case they might be a few more or less.
var footerH = 34;
var headerH = 74;
The idea is when there's no room for all of them on the screen stop <div id=wrapp> from going upwards.
step 3 (All this is bind to window resize event):
jQuery(window).resize(function(){
winH = jQuery(this).height();
pos = wrapp.position();
if(winH < h + headerH + footerH )
wrapp.css({'top' : pos.top});
else
wrapp.css({'top' : '50%'});
});
Update window height on resize, also get <div id=wrapp> position object
and if(there's no more room according to all the heights you put) fix the top position to current top position of <div id=wrapp> else put it back to percentage.
Here's an example: http://jsfiddle.net/F7mrf/44/
If you got the idea with very little modifications it should work, you'll just have to do the math and put the right numbers, good luck

Image Enlarger Script

I am looking for one of those scripts that when you click a Thumbnail, it makes the picture englarge. I tried searching Google using a lot of terms, but cant find any.
Where do I get these?
I believe one of these are what you are looking for.
http://leandrovieira.com/projects/jquery/lightbox/
http://jquery.com/demo/thickbox/
They're called lightboxes, if you search google again, I'm sure you'll find a lot.
i would use some very simple javascript:
your img tag in html file:
<img src="lala.alal" id="getbigger" onClick="grow()" />
your javascript:
function grow() {
width = document.getElementById('getbigger').width;
height = document.getElementById('getbigger').height;
width = width*[INSERT GROWTH RATIO HERE];
height = height*[INSERT GROWTH RATIO HERE];
document.getElementById('getbigger').height = height;
document.getElementById('getbigger').width = width;
}
of course you could just use jQuery animate tools
a good demo of jQuery animate with changing height and width is at this w3schools page.

Programmatically Clip/Cut image using Javascript

Are there any documents/tutorials on how to clip or cut a large image so that the user only sees a small portion of this image? Let's say the source image is 10 frames of animation, stacked end-on-end so that it's really wide. What could I do with Javascript to only display 1 arbitrary frame of animation at a time?
I've looked into this "CSS Spriting" technique but I don't think I can use that here. The source image is produced dynamically from the server; I won't know the total length, or the size of each frame, until it comes back from the server. I'm hoping that I can do something like:
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
This can be done by enclosing your image in a "viewport" div. Set a width and height on the div (according to your needs), then set position: relative and overflow: hidden on it. Absolutely position your image inside of it and change the position to change which portions are displayed.
To display a 30x40 section of an image starting at (10,20):
<style type="text/css">
div.viewport {
overflow: hidden;
position: relative;
}
img.clipped {
display: block;
position: absolute;
}
</style>
<script type="text/javascript">
function setViewport(img, x, y, width, height) {
img.style.left = "-" + x + "px";
img.style.top = "-" + y + "px";
if (width !== undefined) {
img.parentNode.style.width = width + "px";
img.parentNode.style.height = height + "px";
}
}
setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>
<div class="viewport">
<img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>
The common CSS properties are associated with classes so that you can have multiple viewports / clipped images on your page. The setViewport(…) function can be called at any time to change what part of the image is displayed.
In answer to :
Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML element combined with a bit of server-side scripting.
...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
This can be done in Javascript, just google a bit :
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
This generates a new image from an existing one and captures this way in java script the original height and width properties of the original image (not the one id'ed as background.
In answer to :
The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.
...
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';
and if wanted :
newimage.setAttribute('height','200px');
The doubled newimage.style.height and newimage.height is needed in certain circumstances in order to make sure that a IE will understand in time that the image is resized (you are going to render the thing immediately after, and the internal IE processing is too slow for that.)
Thanks for the above script I altered and implemented on http://morethanvoice.net/m1/reader13.php (right click menu... mouseover zoom lent) correct even in IE , but as you will notice the on mousemove image processing is too fast for the old styled IE, renders the position but only once the image. In any case any good idea is welcome.
Thanks to all for your attention, hope that the above codes can help someone...
Claudio Klemp
http://morethanvoice.net/m1/reader13.php
CSS also defines a style for clipping. See the clip property in the CSS specs.
The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.
What spriting does is essentially position a absolutely-positioned DIV inside another DIV that has overflow:hidden. You can do the same, all you need to do is resize the outer DIV depending on the size of each frame of the larger image. You can do that in code easily.
You can just set the inner DIV's style:
left: (your x-position = 0 or a negative integer * frame width)px
Most JavaScript Frameworks make this quite easy.
Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML <canvas> element combined with a bit of server-side scripting.
PHP code to go about extracting the width and height of the really large image:
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
From here, you'd then load the image into a <canvas> element, an example of which is documented here. Now, my theory was that you may be able to extract pixel data from a <canvas> element; assuming that you can, you would simply make sure to have some form of definite divider between the frames of the large image and then search for it within the canvas. Let's say you found the divider 110 pixels from the left of the image; you would then know that each "frame" was 110 pixels wide, and you've already got the full width stored in a PHP variable, so deciphering how much image you're working with would be a breeze.
The only speculative aspect to this method is whether or not JavaScript is capable of extracting color data from a specified location within an image loaded into a <canvas> element; if this is possible, then what you're trying to accomplish is entirely feasible.
I suppose you want to take a thumbnail for your image. You can use ImageThumbnail.js that created from prototype library in this way:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>
for more information
try use haxcv library haxcv js by simple functions
go to https://docs.haxcv.org/Methods/cutImage to read more about his library
var Pixels = _("img").cutImage (x , y , width , height );
_("img").src (Pixels.src);
// return cut image
but try to include library first

Categories

Resources