Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I would like to create an image dynamically in Javascript that needs to fit two requirements.
It needs a colored background (say #fff) and be of a specific size (say 800x300)
I need to be able to then place another image on it and position it (hopefully with CSS-esque type rules like width:150px; height:80px; left: 30px; top:30px; transform: rotate(7deg);" etc etc.
Is there a library you're aware of that does that sort of function?
you don't really need a library for this at all. If i understand you correctly you simply want a container with a background that holds a dynamically generated image. I would just use a background image or color on the container and appendChild the image inside of it.
Use a relative position on the parent and an absolute position on the image so you can center position the image and rotate it form the center.
to create and append image i would use:
//generate image dynamically
function dynamicImage(url){
var img = new Image();
img.src = url;
img.setAttribute("class", "placeholder-image")
return img
}
var dynamic = dynamicImage('http://placehold.it/350x150')
var container = document.querySelectorAll('.image-container')
container[0].appendChild(dynamic)
I would then use css to transform the image
example in codepen
http://codepen.io/shperber/pen/qNVLjv
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need some help with a design for a web application I want to create. Basically I want to start with a black background..let's say 1000px X 1000px. Then on an event..lets say a click event, I want to be able to add a small image of a star on top of that background at the coordinates of my choice. And keep doing that until I have a bunch of stars on the black background.
I don't know how to set up my html to be able to do this. Once I have the overall design I can take it from there, I just don't know where to start.
Languages: HTML, Javascript, CSS
Starting Image:
Image to Add:
Ending Image:
http://jsfiddle.net/mpprq3r3/
Heres a very simple example. Look at how its done and change it to fit your needs.
$(".canvas").on("click", function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.originalEvent.pageX - parentOffset.left;
var relY = e.originalEvent.pageY - parentOffset.top;
console.log(relX)
$(this).append("<div class='item' style='top:"+(relY-5)+"px;left:"+(relX-5)+"px'><img src='http://i.stack.imgur.com/4Crjc.png' /></div>");
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer
In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.
Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}
I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Basically I want to try making a simple mini map with HTML,but I cant figure it out.
Can someone give me a sample?
Just 2 image that are the same but with different sizes. One is small and the other is big, And if you click on any coordinates of the small image,the large image the show where you clicked.
I'm still new at HTML and want to learn more, just need a sample so I can analyze on how to make it.
like i said create a image , find the mouse coordinates over that image.
create a div with the same image and set the background position.
replace YOURMAP with a image.
var img,w,h,mu=true,map,MAP='YOURMAP';
function pos(e){
var x=e.pageX-img.offsetLeft,y=e.pageY-img.offsetTop,
left=((w/img.width*x)-(map.offsetWidth/2))*-1,
top=((h/img.height*y)-(map.offsetHeight/2))*-1;
map.style['background-position']=left+'px '+top+'px';
}
window.onload=function(){
img=document.createElement('img');
img.onload=function(){
w=this.width;h=this.height;
img.style.width='200px';
}
img.src=MAP;
map=document.createElement('div');
map.style.background='#000 url('+MAP+') no-repeat 0 0';
map.style.width='200px';
map.style.height='200px';
document.body.appendChild(img);
document.body.appendChild(map);
img.addEventListener('mousedown',function(e){
mu=false;pos(e);e.preventDefault()
},false);
img.addEventListener('mousemove',function(e){
mu||pos(e)
},false);
img.addEventListener('mouseup',function(e){
mu=true
},false);
}
Demo http://jsfiddle.net/m3snq/3/ or http://jsfiddle.net/m3snq/6/
if you don't understand something just ask..
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to change the "start" of image?
I mean that the img is in the immobility only it's beginning is moving
I want change it CSS or HTML, in the last resort in JavaScript
Something like this: FIRST PICTURE (This picture on click change it's beginnig).
... It transform to it: SECOND PICTURE
Any idea? :/
<div class="myImg"> </div>
<style>
.myImg{
background: url('myimg.jpg');
}
.myImg2{
background: url('myotherimg.jpg');
}
</style>
<script type="javascript/text">
$('.myImg').click(function() {
$(this).removeClass('myImg');
$(this).addClass('myImg2');
});
</script>
Ofcourse you'll have to use jquery link to get jQuery latest update.
So what have i actually done here?
I've used jQuery to check if user click div .myImg if he did i just switch bettwen the div's classes and each other class got different image.
Hope i helped.
I'm not entirely sure what you're asking, but it sounds like you might want to do CSS sprites.
http://css-tricks.com/css-sprites/
If you want to change the image on click, you'll need some code. I won't spend too much time on that, given your question is hard to decipher, but if it were me, I would create a class per sprite, then toggle between the two classes based on the click event.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like to create a hightlight html inputs when they get focused using css and javascript, and jump through inputs highlighting the corners.
What I mean, is, when a text input get focused a quarter frame (L) locate in each corner, and when another input get focused those (L)s moves through the form to locate in the new focused control
I wanted to publish an image but I haven´t enough reputation points
Could anyone lead me how to do it?
Thanks
I don't know if you have to use javascript for some reason, but you can handle focus highlighting with just plain CSS.
input[type="text"]:focus,
textarea:focus,
select:focus
{
border-color:#0cf;
/* etc... */
}
That will color/highlight the borders of the input
simple, clean
EDIT:
I imagine it can be done, but its more than my CSS skills cover.
My only CSS thoughts are some kind of Gradient but I don't think you can gradient an outline, just borders. And you have wont have full browser coverage.
You might be able to do something with :before and :after by dropping an image left and right.
Javascript wise there is a Malsup plugin that you can look at, but nothing that will match exactly that image.
I could do it myself!!!
First you have to draw the four corner´s highlights on HTML:
<img id="clt" src="img/clt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crt" src="img/crt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crb" src="img/crb.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="clb" src="img/clb.png" border="0" style="position:absolute;visibility:hidden"></span>
After, create a JavaScript function:
function getFocusFunct(){
$("input[type=text], input[type=password], textarea").focus(function(){
var ctl=$(this);
var offset=ctl.offset();
var clt=$("#clt");
var crt=$("#crt");
var crb=$("#crb");
var clb=$("#clb");
clt.css('visibility','visible');
crt.css('visibility','visible');
crb.css('visibility','visible');
clb.css('visibility','visible');
clt.animate({top:offset.top-3, left:offset.left-3}, 150);
crt.animate({top:offset.top-3, left:offset.left+ctl.outerWidth()-4}, 150);
crb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left+ctl.outerWidth()-4}, 150);
clb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left-3}, 150);
});
$("input[type=text], input[type=password], textarea").blur(function(){
clt.css('visibility','hidden');
crt.css('visibility','hidden');
crb.css('visibility','hidden');
clb.css('visibility','hidden');
});
}
It´s super awesome effect!!! Try it :)