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>");
});
Related
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 7 years ago.
Improve this question
I am using Angular 2 with (for now) 2 way data binding and I need to diplay a H1 over the full width of the page. So it will become smaller the more text there will be. And bigger if the amount of text shrinks.
I saw http://fittextjs.com but that resizes it only on the page init.
I need it in realtime.
Thanks!
I am using this
https://github.com/jquery-textfill/jquery-textfill
And you can call them when you want (after text render), simply, calling
$('#my-element').textfill({
maxFontPixels: 36
});
And it's very customizable.
Happy coding!
Edit:
I understand the problem now replace px with whatever unit of length
<h1 ng-style="{'max-width':'100%', 'font-size': inputlength + 'px'}">{{input}}</h1>
You may have to tweak it to however you want to get it to work
essentially having to do the logic like font-size:calc(100% + 2vw)
or work it out in your controller
$scope.input = "ssssssss";
$scope.inputlength = 10;
$scope.$watch('input', function(){
$scope.inputlength = window.innerWidth / $scope.input.length;
});
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 6 years ago.
Improve this question
I have a full-page header with a logo in the center and an arrow below. I need the arrow to disappear if it scrolls up by 10px or more. To this end, I am using .scrollTop() and .hide() as shown in the following jfiddle. However it does not disappear on scrolling up.
Would appreciate anyone putting me on the right path to find why the arrow isn't hiding with .hide()?
First of all include jquery in your jfiddle (settings icon in the js part of the screen). And use the $j also by $j('#arr_down').hide(); and $j('#arr_down').hide(); you forgot the j in your example
$j=jQuery.noConflict();
$j(document).ready(function() {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 10)
$j('#arr_down').hide();
else
$j('#arr_down').show();
});
});
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 7 years ago.
Improve this question
I keep some elements inside one container. For better visibility odd elements have other background color. Sometimes I need to filter elements with conditions, so unwanted elements I move to another class, but it seems nth-child keep old state. Even if I make it dynamic with jQuery still it keeping old state.
I would prefer keep used and unused elements in same container - if I separate them and change filters, need to sort visible elements again.
jsfiddle: http://jsfiddle.net/ex4740n2/5/
Have you any ideas how to solve it?
Thanks in advance!
The answer by #Pete:
But I'm guessing your problem is that you think nth-child is a class selector - it's not, it's an element selector
So, if it not possible to make it by only css, make it using JS. Iterate visible elements and change background color.
var visibled = $(".item");
for (var i = 0; i < visibled.length; i += 2) {
$(visibled[i]).css("background-color", "rgba(190, 255, 196, 1)");
$(visibled[i + 1]).css("background-color", "");
}
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 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 :)