My Progress is # http://codebucket.webatu.com/code/portfoliotest/index.html
Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/
I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.
I want the word itself to stay put, and I don't want the expanding images to displace any other elements.
Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.
I apologize if this question is a repost; I couldn't think of a good way to phrase the question without posting my own example.
edit: here's my code (since the link seems to be bad)
<html>
<head>
<style type="text/css">
#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}
</style>
<script type="text/javascript">
var heightBottom;
var heightTop;
var interval;
function addHeight(){
document.getElementById("portfolioBottom").style.width="249px";
heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
heightBottom=heightBottom + 5;
document.getElementById("portfolioBottom").style.height=heightBottom;
document.getElementById("portfolioTop").style.width="210px";
heightTop = parseInt(document.getElementById("portfolioTop").style.height);
heightTop=heightTop + 5;
document.getElementById("portfolioTop").style.height=heightTop;
}
</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />
</body>
</html>
I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.
Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -
then, once positioned - I just animated the height and top/bottom negative positions simultaneously
I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS
also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?
the live example
What about just using CSS and positioning it as a background image?
html {
margin:0;
padding:0;
height:100%;
background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}
Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)
Related
So i'm currently making a simple strategy game in html using css and javascript too. I'm very new to this so this might seem obvious and simple to you all but i'm very confused.
So i have my picture, it's a little pixel battleship i made. I want to have a number show next to that ship to tell how many i have. How do i do that? I assume you have to use css for that right? In the end there are going to be 6 ship types.
Thanks in advance,
Lucas
You can put the image in a container with position set to relative. Then put some text inside some tag and position it absoutely
for example
<div style="position:relative">
<img src="your image here">
<p style=""position:absolute; right: 0"></p>
</div>
Use float property of CSS to display text next to an image.
This link might help https://www.w3schools.com/css/css_float.asp
I've tried aligning all images on top of each other, it worked but because it was position:absolute; the final result was floating all around page. (It's in my other question I asked today on SO)
So I am thinking alternative ways,
I have a web page which dynamically loads images like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>
I am wondering - is it possible to use JavaScript (like PHP GD) to combine all 7 images into one image and output on page using javascript?
So say instead of printing out the above code, it would do something like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>
Is this possible? I am just sick of position absolute and stuff floating around, so if JS could combine 7 images and make it as 1 that would fix the problem.
This should be really simple with CSS and position absolute. I know you said you are looking for a different way, but this should be doable. Are you setting top, bottom, right and left position for the images? Don't forget that you need to add the px after the number. Also don't forget to set the position property on your parent element, or position absolute gets wonky.
if you use position: absolute correctly, things shouldn't be 'floating around the page'. Give the parent position: relative and they will be relative to this div. Give it a top and a left value, if you give it all 4 it will skew when you resize the page/div
I have 3 images stacked horizontally (each image is next ot the other).
my goal is to keep those images stacked horizontally when i scale down the page size.
i would like the pictures to automatically resize down without breaking it to the next line.
i don't want to use percents (%) for the size of the images. I don't want to set the size of the images at all.
When I am using bootstrap and I scale down the page, when the page size become smaller then the pictures size,
then the image on the right breaks to new line, the same thing happens for the second image, until all the images stacked vertically.
on this point, when I scale down the page even more I get exactly what I wanted - the pictures are resizing according to the page size.
please help me to get this behavior without breaking the pictures to new lines.
this is my html:
<body>
<img src="img/test.png" />
<img src="img/test.png" />
<img src="img/test.png" />
</body>
Thanks...
Wrap your images in whatever container, say a div, then you have two options depending on the behaviour you want:
a) Set a css min-width property for the container and don't let it go narrower than that.
b) Set a css overflow-x property for the container and let the images either hide, show a scroll bar, ...
#media (min-width:450px;){
img{
width:50%;/*or whatever floats your boat*/
}
}
You can modify the min-width: value to customize your needs. This won't handle resizing. Just different media sizes.
You can use jQuery.resize to handle actually resizing a browser window like so:
$(window).resize(function(){
var div = $('#images');//images container
div.find('img').each(function(k,v){
$(v).width((div.width()/4));//resize each image however you want
});
});
I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ and now I want the canvas to cover my whole html page. For example:
<body>
<div id="2">
//code
</div>
<div id="2">
//code
</div>
</body>
So the canvas will be attached to the page and the user could draw over the content of the page. So is there any way to create the canvas inorder to take the 100% of the body be hidden apart from the drawing lines?
Edited:
How can I draw lines continuously without making circles in the above code? Also is there any way to draw something over the text without selecting it when you pass the mouse over it?
First, make the height and width properties of the canvas equal to the page height and page width. (Getting those values is quite difficult, so see the linked questions for the best way to do it -- or just use jQuery.)
Next, add some CSS to make the canvas sit in the absolute top-left corner of the page:
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then, don't change the background color of the canvas as you currently do by calling ctx.clearTo. Canvases are transparent by default, so you'll be able to see the page underneath of it, as long as you don't change the background color.
Pass in the right width and height params instead of (200, 200)
Using window.screen.width and window.screen.height gives you this: http://jsfiddle.net/kneDX/878/
Update:
With this we will end up in canvas being as big as window and not the same size as client area. See apsillers's answer.
I have something like this:
<div>
<img src="bigimage_1.jpg" />
<img src="bigimage_2.jpg" />
<img src="bigimage_3.jpg" />
...
<img src="bigimage_n.jpg" />
</div>
The div should only be shown if the width of the viewport is greater than 300px.
Since the images are very large, I dont want them to be downloaded when the width is lower than 300px. But when the width is greater than 300px I need to start downloading them as soon as possible.
Also, this should work on a lot of browsers on a lot of devices so I want to make it as robust as possible.
I was thinking in using https://github.com/sebarmeli/JAIL and call the jail function on $(document).ready, but I don't know if there is a better solution.
Any recommendations?
I recommend taking a look at Scott Jehl's picturefill solution. It takes a somewhat similar approach to JAIL in terms of implementing a no-js solution using the noscript tag to provide the fallback image, but it avoids the initial http request made for the placeholder .gif.
You can try use CSS #media (min-width: 300px) { … }
Put a $(document).ready function, test the viewport (or the render area available for the image, accounting for body and other element's margin, paddings, etc) width with a conditional statement, and call the jail function if it passes.
You could place a width-greedy-zero height (with css) empty element where the images are supposed to be loaded, and test how much width it can get by selecting him via jquery. If its width is greater than 300, call the JAIL.