I'm trying to create an online image cropper where the user uploads a photo and it is displayed with a box (frame) that is changeable via buttons. Crops the photo and sends it back to the user.
I have a basic template of form uploader in php (working). It then displays the image in a div with another transparent div above it with a border marking the cropping area.
The initial values for the divs are set in the css section via php as the page is sent to the user. I'm trying to adjust the size of the frame div, as the width given is the image width +2 px for the frame (same for height) and it should just be the images width (-2 px).
This code should be working, but when the alerts pop up, they show that the frame width/height has not changed the original values, and it appears as though the frame does not change.
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
I am aware that I can change the value php gives to the css section, but I'm going to need to change the crop ratio in the next step anyway, so I need this way to work. Please help, I've been looking at this code for way too long.
Remove the semicolon in the quotes.
frame.style.width = w + "px";
frame.style.height = h + "px";
Also, offsetHeight and offsetWidth takes border into consideration. Since your border width is 1px, it adds 2px to both height and width of the image canceling out the subtraction with 2.
Read more about offset width and height on MDN.
Related
I have a <div> (let's call it "image") that contains some images <img><img><img> and so on.
This div's width is set at 100% of the screen, and the images inside rescale depending on the width. So, depending on the browser's width, the height of my div changes.
Now I would like to create another div (let's call it "after_image") that starts after this image, without using "relative", but by retrieving the height of <div id="image">, and using that as a "top: px" attribute.
Is it possible? Maybe a <script>?
(I am using PHP)
Try this :
<div id='image'>
<img src='' />
<img src='' />
<img src='' />
</div>
<div id='after_image'></div>
<script>
var h = document.getElementById('image').clientHeight // returns height as number
document.getElementById('after_image').style.top = h + 'px'
</script>
Here is how you can achieve what you want, although this is the wrong approach in my opinion.
const
image = document.querySelector('#image'),
after = document.querySelector('#after_image')
after.style.top = image.getBoundingClientRect().bottom + 'px'
#image {
width: 200px;
height: 2750px;
box-sizing: border-box;
border: solid blue 3px;
background: skyblue;
}
#after_image {
width: 200px;
height: 500px;
position: absolute;
box-sizing: border-box;
border: solid orangered 3px;
background: pink;
}
<div id='image'>
<img src='' />
</div>
<div id='after_image'></div>
If you really want to do it this way, it is best to bind your JS statement to the resize event.
window.addEventListener('resize', function(){
after.style.top = image.getBoundingClientRect().bottom + 'px'
}
I have a div, an image(arrow.gif), another image(Untitled-1.jpg), two textboxes and a button.
I want to move the arrow.gif within a scrollable div with an image inside.
But i'm having a trouble creating the div into a scrollable one (making the Untitled-1.jpg fill the div) and moving the arrow.gif based on the Untitled-1.jpg's coordinates. Can anyone help me with this? Any help/assistance will be greatly appreciated .
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
border: 5px black solid;
background-color: #F2F2F2;
cursor: pointer;
background-image:url('Untitled-1.jpg');
background-repeat: no-repeat;
background-size: fixed;
width:1030px;
height:912px
}
#thing {
position: relative;
left: 50px;
top: 50px;
height: 68px;
width: 41px;
transition: left .5s ease-in, top .5s ease-in;
z-index: 10000;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="arrow.gif" >
</div>
<form method="post" action="">
<input type="button" value="submit" name="submit" onclick="getClickPosition()">
<input type="text" id="valuex" name="valuex">
<input type="text" id="valuey" name="valuey">
</form>
<script src="prefixes.min.js"></script>
<script>
function getClickPosition() {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</body>
</html>
First things I'm noticing is that you have:
background-size: fixed;
Fixed isn't an option for the background-size property.
You also have:
height:912px
Which is missing a semicolon, and will break your stylesheet further on.
1) Full-size background
If you want your 'Untitled-1.jpg' image to fill the frame you could set background-size to either cover or contain.
2) Scrollable div
In order to change your div into a scrollable one you can do so as follows:
#div{
width:1030px;
height:912px;
overflow: auto;
}
Overflow auto will add horizontal and vertical scrollbars to the div in the event that it extends outside its bounds. Or can use scroll if you want scrollbars to always be visible on the div.
You could also use overflow-x and overflow-y to specify which orientation you want scrollbars to appear.
3) Moving the thing
You're on the right track setting the position of the thing, there's a bit of fiddly stuff involved though to get it all functioning. See my Fiddle.
Demo
I've modified your code a fair bit, but in this fiddle you can change the position of the thing within the scrollable div, using the coordinate boxes.
https://jsfiddle.net/8y0qhdwx/
I'm not sure where you are heading with this, but it would be worth looking into the HTML5 canvas element, as it's built to handle the positioning of objects within it.
Hope this helps.
I have a html block that is consist of many <div>s.
I use these <div>s to create modal windows by altering their opacity upon target (done in CSS).
These <div>s are distinguished by id and all have the same class name.
The <div>s have a border of 10px. Upon mouse hover, the border is changed to 38px for right and left border only (done in css).
Upon mouse hover I want to show back and next arrow to appear exactly middle of the left and right hand border. Different 'div's have different heights.
My approach:
I have use the event.target.id to get the id of the <div> that calls the function.
Then I used the getBoundingClientRect() to get a rectangle representation of that element on the screen.
I used the .top .bottom .left .right to get the x and y coordinates of each four points. From these points I find the height and then set the <div>s .left and .right to be equal to it.
I have used alert() to return the result and it sometime returns the correct value and sometimes no values at all. The return result is either of these two. And the arrows don't get placed where they are suppose to. I am quite new to Javascript and I am still learning so I'd appreciate if you also explain your answers.
The HTML codes is below:
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="midpointHeight.js"></script>
<script type="text/javascript" src="modalDialogHover.js"></script>
</head>
<!--first modal-->
<a href="#X">
<image src="X.gif" id="X" class="Gif" />
</a>
<div id="h" class="modalDialog">
<div id="miniModal_h" class="miniModal" onmouseover="getMidPointHeight(event)">
<div class="close_btn"></div>
<div class="next_btn"></div>
<p>
<!--some text here-->
</p>
</div>
</div>
<!--second modal-->
<a href="#p">
<image src="p.gif" id="p" class="Gif" />
</a>
<div id="p" class="modalDialog">
<div id="miniModal_p" class="miniModal" onmouseover="getMidPointHeight(event)">
<div class="close_btn"></div>
<div class="back_btn"></div>
<div class="next_btn"></div>
<p>
<!--some text here-->
</p>
</div>
</div>
</html>
in CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
opacity: 0;
}
.modalDialog > div {
width: 704px;
position: relative;
margin: 10% auto;
background: white;
border-image: url("grey_flat_tile.png");
border-image-repeat: repeat;
border-image-slice: 30%;
border-width: 10px;
}
.modalDialog:target{
opacity:1;
}
.next_btn {
display: none;
background-image: url("arrow_right.png");
position: absolute;
right: -30px;
width: 20px;
height: 22px;
}
.back_btn{
display: none;
background-image: url("arrow_left.png");
position: absolute;
left: -30px;
width: 20px;
height: 22px;
}
.visible {
display: block;
}
In jQuery to hid/show the left and right buttons on the panels:
jQuery(document).ready(function(){
jQuery(".miniModal").hover(
function(){
jQuery(".close_btn").addClass("visible"),
jQuery(".next_btn").addClass("visible"),
jQuery(".back_btn").addClass("visible")
},
function(){
jQuery(".close_btn").removeClass("visible"),
jQuery(".next_btn").removeClass("visible"),
jQuery(".back_btn").removeClass("visible")
}
)
});
In javascript to find the midpoint height and show the arrow at the right position:
function getMidPointHeight(event){
var miniModal= event.target.id;
//alert(miniModal);
var smallRect = document.getElementById(event.target.id).getBoundingClientRect();
var sX = smallRect.left;
var sY = smallRect.top;
var sW = smallRect.right;
var sH = smallRect.bottom;
//alert(sX + "," + sY + "," + sW + "," + sH);
var sHeight = (sH - sY);
var smidHeight = (sHeight / 2);
var arrow_loc = (smidHeight)+"px";
alert(arrow_loc);
var next_btn = document.getElementById("next_btn");
next_btn.style.top = arrow_loc;
var back_btn = document.getElementById("back_btn");
back_btn.style.top = arrow_loc;
}
I am trying to create a simple slide show of an image that is set up in and background div. I dont have problem with creating the slideshow code but i have problem with positioning the image that should change according to the the width of others monitors resolution.
In the image bellow i described were i want to place the image. The image should be placed in the red div.
Here is the image that i want to put in the red div to be like a background. The resolution is (1900px x 500px)
Here is a model what i managed to do. I tried in java script code to declared a global variable sw which I assigned the window.innerWidth (sw=window.innerWidth), after in CSS using jquery selecting the red div $('#rotator') and assigned the sw ($('#rotator').css('width', sw)), but the result wasn't what I need to obtain. I obtained the image that was cropped from the right according to the screen resolution.
If someone know how to solve this question i will be greatful!
Here is my CODES:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
<body >
<div id="rotator"></div>
<div class='slider'></div>
</body>
</html>
CSS
body{
margin: 0px;
margin-left: 0px;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
margin: 0 auto;
position: absolute;
left: 15%;
top: 20px;
}
#rotator {
position: relative;
height: 500px;
}
.puzzle {
width: 100px;
height: 100px;
background-position: -100px 0px;
float: left;
}
And JavaScript that also contain the function of slideshow effect (that is working).
$(document).ready(init)
sw=window.innerWidth;
if (sw % 100 == 0) {
sw=window.innerWidth
}
else{
sw=Math.floor(sw/100)*100
}
//counter of slider
current_slide=0;
image_list=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"
);
function init ()
{
$('#rotator').css('width', sw)
change(image_list[current_slide]);
//start timer
setInterval( "change(image_list[current_slide])" ,2500);
}
function change(bg_image){
// this function creats cells inside <div id = 'rotator'>
rot = $('#rotator'); //constructor
rot.empty();
for(y = 1; y<=5; y++)
{
for(x = 1; x<=sw/100; x++)
{
rot.append('<div class = "puzzle p-' + x + '-' + y + ' "></div>');
//select the <div> using his class and setting up the cells coordinates
$('.p-' + x + '-' + y).css('background-position', (-(x-1)*100) + 'px ' + (- (y-1)*100) + 'px').css('background-image','url('+bg_image+')');
$('.p-' + x + '-' + y).css('opacity', 0).delay(parseInt(Math.random()*1000)).animate({opacity: 1}, {duration: 1000})
}
}
current_slide++;
if(current_slide >= image_list.length)current_slide=0
}
Thank you for your time and consideration!
You either have to put the image into a container div who's width is dynamic to the size of the page and set width of the image inside it to 100%, or use the CSS attribute background-size: cover; (which is only compatible with newer browsers).
Images set as the background image for a div will simply fill their container and be clipped by that container as it shrinks past the dimensions of the background image unless background-size: cover; is used. To gain the same effect in older browsers, the aforementioned 100% trick is used.
Cross-browser style:
http://jsfiddle.net/2D5Vw/
New(ish)-School:
http://jsfiddle.net/HLf2Q/
I'm trying to modify this simple js script that enlarges the image from thumbnail whenever it is clicked. The problem is , the enlarged image is displayed according to an define fixed width. I want the enlarged image displayed according to it's size property.For example of an image size is 200 width and 300 height , I want that image to be display according to that size instead of an fixed 300 height and width.
I'm been trying solutions such as removing the width but instead the image is enlarged to the full screen size.
How can I modify this script so the enlarged image is displayed according to it's original size property.
The script belongs to roXon and I give full credit to him
How to enlarge image from thumbnail in jQuery?
This is the jquery http://jsbin.com/egevij/3/edit
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="1.jpg" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
</body>
</html>
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
Something like this should probably work
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" data-width="860px" data-height="590px" alt="" />
$('<img>', {src:imgToLoad, width: $(this).data('width'),height: $(this).data('height')}).appendTo('#jQ_popup');
or this one takes the size from the path /860x590/
var dimensions=$(this).data('full').match(/(\d+)x(\d+)/);
$('<img>', {src:imgToLoad, width: dimensions[1]+'px',height: dimensions[2]+'px'}).appendTo('#jQ_popup');