Image position changing on device to device in HTML5 Canvas - javascript

I have one background image(City image) with scroll, on that image I am placing some small images(Just like bomb images on the city image). I have canvas width and height depending on these variables I am placing the bomb image on the city image. When I place the bomb image at can.width/2 and can.height/2 in 430*300 devices, image will be on the center but when I try testing on bigger screen mobile, bomb image position is changing. I need to place bomb image in the same location for all devices. When I zoom in also position is changing. Anybody please help me to solve this scenario.
Here is my code
function smallBombImg(){
document.getElementById('carImg1').style.top = can.width/2 +"px";
document.getElementById('carImg1').style.left = can.height/2 +"px";
//document.getElementById('carImg1').style.background-attachment = "fixed";
document.getElementById('carImg1').style.display = "block";
document.getElementById('carImg1').src = 'img/bomb1.png';
}
HTML code is here
<body>
<div id="container">
<canvas id="can"></canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
<div>
<img alt="simple1" id="carImg1" style="position: absolute; display: none;" />
</div>
</body>

I have to be brief, I am very sorry but I am running late.
Using jQuery:
var windowEventTimeoutEnded;
$(window).resize(function() {
clearTimeout(windowEventTimeoutEnded);
$(window).height(); // gets the height of the window
$(window).width(); // gets the width of the window
// This ensures the below does not trigger until the resize event is finished
windowEventTimeoutEnded = setTimeout(function() {
// Perform your resizing math and logic here, such
canvas.css({
width: 1234,
height: 235,
position: 'absolute' // etc, etc, etc
})
}, 500 );
});
Sorry for the brevity, hope this helps. I will return later and check if this helped and add to it if necessary, good luck!

Related

Third section not on screen

I have a problem with the code below. The window does not scroll to the third section. The code jumps from slide two to slide four.
In my console log the data is correct 600, 1200, 1800 and 2400.
I tried different things but the bug is still there.
<html>
<head>
<style>
body, html{margin:0;}
.slide{height: 600px;}
button{position:fixed; top:0; left:50%; margin-left:-32px;}
</style>
</head>
<body>
<div class="container">
<div class="slide onscreen" style="background-color:#FFC000;"></div>
<div class="slide" style="background-color:#FF4800;"></div>
<div class="slide" style="background-color:#FFC480;"></div>
<div class="slide" style="background-color:#AA4560;"></div>
<div class="slide" style="background-color:#000000;"></div>
</div>
<button onclick="next()">volgende</button>
<script>
var section = document.getElementsByClassName("onscreen");
function next() {
if (section[0].nextElementSibling) {
section[0].nextElementSibling.className = "slide onscreen";
section[0].className = "slide";
var newTop = section[0].offsetTop;
window.scrollBy(0, newTop);
console.log(newTop);
}
}
</script>
</body>
</html>
These slides are all siblings. So offsetTop is going to be incrementally greater on each slide. Slide 1, 600px, slide 2, 1200px, and so on. window.scrollBy scrolls to the windows current position + the amount given. So if you are at window.scrollY = 0, and pass 600, you'll be at window.scrollY = 600. When you pass 1200 on the next go round, you'll be at window.scrollY = 1800! So now it appears as if you've skipped over slide 3, because you scrolled 2x a slide's height.
Possible answer, if you don't want the challenge of figuring the rest out:
If you have a hardcoded height for your slides, you could try passing a hardcoded scrollBy value as well. Or if you want to make your code a bit more flexible, you could query each slider for its height and pass that value instead. Then you can adjust your slide's height in css-land without breaking your js logic.

Basic Image Viewer with javaScript

I am new with JavaScript and I am trying to learn by coding. I want to make a basic image viewer with a "next" and a "previous" that you can click to move forwards and back through a gallery of ten pictures. So I have my html, my css and my javaScript files and 10 random pictures to try it out.
The files are pretty straight forward:
HTML:
<body>
<div id="wrap">
<div class="firstColumn">
<p>PHOTOGRAPHY</p>
<div class="firstColumnSub">
<p class="photo">SOME TITLE</p>
</div>
</div>
<div class="back">
<p>BACK</p>
</div>
<div id="container">
<div id="controllers">
<div class="buttons" id="previous">
<p onclick="change(-1);">PREVIOUS</p>
</div>
<div class="buttons" id="next">
<p onclick="change(1);">NEXT</p>
</div>
</div>
<div><img height="100%" id="front" src="Image1.jpg"></div>
<div>
<p id="footer">Footer</p>
</div>
</div>
</div>
</body>
Just a few divs with the image in the center and a previous and a next clickable tags. This is what it loos like:
The JavaScript file contains a function that loads the different pitures and -and this is my problem- centers them in the middle of the page by grabbing their width and updating the css:
JavaScript:
window.onload = function setUp() {
var b = document.getElementById("front").width;
document.getElementById("container").style.width = b + "px"
}
var imageCount = 1;
function change(x) {
imageCount = imageCount + x;
var image = document.getElementById('front');
var str1 = "Image";
var str2 = imageCount;
var str3 = ".jpg"
var sum = str1.concat(str2, str3);
image.src = sum;
var a = document.getElementById("front").width;
document.getElementById("container").style.width = a + "px"
}
I an not posting the css unless required, but you get the idea.
As you press "next" or "previous", you are supposed to get this result:
etc... but instead I get all sort of random displays:
And here is the thing that is puzzling me: if you keep clicking "back" and "next", the same pictures appear OK the second time round, so it is working but not immediately. Any help appreciated!
Thanks, P.
This is most likely a CSS positioning issue. The following CSS may do the job for you. If you need further help, then I suggest that you reconsider posting your CSS to get help.
#container #front
{
position: relative;
/* width: 0px; */ /* set via JS for each element in this use case */
left: 0;
right: 0;
margin: 0 auto;
}
Here is a popular Q & A on this subject which contains a lot of resources.

how to make the span elements on the image relative to the image resizing?

I have an application where I am locating all the employees on the office layout. I have an Office layout image and the Json for each employee would have an x and y co-ordinate to indicate the location of the employee on the layout. The image is placed in a panel and when I resize the window the image also resizes accordingly. But the location of the employees do not resize. Following is my code:
<div class='col-lg-7 col-md-6 col-sm-12'>
<div class='row'>
<div class='col-xs-12'>
<div class='panel panel-default'>
<div class='panel-body'>
<div id="empMap">
<img rel="prefetch" alt="Image is not found" ng-src="{{officeImage}}" id="empMap" style="width: 100%;height: 100%; z-index: -1" onerror="this.src='/img/OfficeImageNotAvailable.png'">
<div>
<div ng-repeat="emp in employees">
<span class="glyphicon glyphicon-oil" id="{{emp.empId}}" ng-click="empDisplay($event)" ng-dblclick="empInfo($event)"
ng-style="{'cursor': 'pointer','color':'green','position': 'absolute',
'left': xValue + emp.location.xcoordinate, 'top': yValue - emp.location.ycoordinate, 'z-index': '2'}"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code in the controller:
$("#empMap").load(function() {//loading the image of the plant
img_width = this.width;
img_height = this.height;
console.log("getting the values of the images");
var img_left = $("#empMap").position().left;
var img_top = $("#empMap").position().top;
var y = img_height + img_top;
$scope.xValue = img_left;
$scope.yValue = y -14;
});
What I am doing in the above code is that I am calculating the xValue and yValue from top,left height and width values of the image and in my html I am adding the x and y co-ordinate values to this values.
I am not sure how I can move the location accordingly when the image is resized based. Also the location of the employee is not displayed properly. So could you let me know what I am missing here and what would be the better approach in this scenario.
Your function is only run when the page is initially loaded, to recalculate the positions when the browser window is resized you need to call the function again.
$( window ).resize(function() {
Actions Go Here
});
Your best bet would probably be to establish your position calculation as a function on its own then call it from both .load and .resize so that your code is DRY.

Can't get width of image with Jquery after using max-height for resize

I have a set of images that I get dynamically. To each image I'm applying a max-height, I use this for re-sizing purposes.
I have a jquery re-size function:
// resize my pics
function resizeMyImg(objct, containerWidth, containerHeight) {
var width = $(objct).width(); // I try alerting here and get a 0 answer
if (width < containerWidth) {
var percentageToAdd = ((100 * width) / containerWidth) + 100;
$(objct).css({ maxHeight: percentageToAdd + "%" });
}
}
And I'm trying to apply this resize function to my images:
$(document).ready(function () {
$(".photoAlbum").find("img").each(function () {
var myImage2 = $(this);
myImage2.load(function () {
alert(myImage2.height()); // I try alerting here and also get a 0 answer
resizeMyImg(myImage2, 240, 240);
});
});
});
This is the html I'm using in my page, hope it helps:
<div style="padding-top: 0px;" id="photosHere">
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n867.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/484524_430827793626240_991120671_n575.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n717.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me993.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me759.jpg" style="max-height: 100%;">
</div>
</div>
My problem is that I can't get the width of the images I always get a 0 instead of the real width. However, using firebug if I test an image I get the correct width.
N.B: Sometimes I get the correct answer but then I refresh and get 0 again. Any suggestions please ?? It's frustrating I've spent hours on this..
Today I was writing a jQuery plugin and I had the same issue so I ended up referencing the DOM element instead. Try
$(this)[0].height instead of myImage2.height()
and
$(this)[0].width instead of myImage2.width().
I assume that the correct width may be from fiddling in firebug, and a refresh clears all of the fiddling.
Did you try:
alert(myImage2.outerHeight());
in your second shown code and
var width = $(objct).outerWidth
in your first code?
( http://api.jquery.com/outerWidth/)

Sliding a div / modifying a css property when using touch on an ipad

What im looking to achieve is to modify the margin-left css property of a div when someone slides their finger across the div on an ipad.
To explain what i'm trying to do, I have setup this page:
http://littleirrepressiblewonton.com/wp7/category/all/
Now when someone clicks on a thumbnail image, it loads a horizontal slideshow of large images. Some of the images are too wide to fit on the ipad and they wish to use touch to drag this horizontal slideshow of images left or right.
The way the divs are setup are as follows:
<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
<div class="WontonGalleryFullImage" data-idx="0" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022" /></div>
<div class="WontonGalleryFullImage" data-idx="1" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021" /></div>
<div class="WontonGalleryFullImage" data-idx="2" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020" /></div>
</div>
</div>
The div.WontonGalleryFullsMask has the following css and is setup as a mask.
height: 523px;
overflow: hidden;
width: 100%;
and then the margin-left property of the div.WontonGalleryFulls div is modified to move the gallery left and right.
So if someone slides 300px on the ipad, I need to modify the margin-left css property of the div.WontonGalleryFulls
I'm looking for a jquery solution as the site is already using it.
i ended up modifying a script from http://popdevelop.com/2010/08/touching-the-web/
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var ml = parseInt($(this).css('margin-left'));
offset = {
x: orig.changedTouches[0].pageX - ml //pos.left
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
'margin-left': orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();

Categories