I am using this code to make the images and text move around the screen. My problem is that sometimes the images and text land on eachother and stack up, how do i make it so its not possible to land on eachother?
$(document).ready(function() {
animateDiv('.a');
animateDiv('.b');
animateDiv('.c');
animateDiv('.d');
animateDiv('.e');
animateDiv('.f');
animateDiv('.g');
animateDiv('.h');
animateDiv('.i');
});
function makeNewPosition() {
var h = $(window).height() - 60;
var w = $(window).width() - 60;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv(myclass) {
var newq = makeNewPosition();
$(myclass).animate({
top: newq[0],
left: newq[1]
}, 2000, function() {
animateDiv(myclass);
});
};
div.a {
width: 50px;
height: 50px;
position: fixed;
color: Navy;
}
div.b {
width: 50px;
height: 50px;
position: fixed;
color: red;
}
div.c {
width: 50px;
height: 50px;
position: fixed;
color: Fuchsia;
}
div.d {
width: 50px;
height: 50px;
position: fixed;
color: SpringGreen;
}
div.e {
position: fixed;
}
div.f {
position: fixed;
}
div.g {
position: fixed;
}
div.h {
position: fixed;
}
div.i {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>
Thanks beforehand, if you can help me, please do! My name is Lukas and I am not so good at coding.
So you are effectively randomly placing fixed elements on the screen, that's why they overlap occasionally.
There are several different ways to prevent that, but it just depends on what your end goal is.
If you really want the random placement approach without overlaps, you will have to run a check in makeNewPosition against all existing locations to determine if their coordinates are overlapping, and if so then regenerate coordinates. You would need to determine the edges of both the new placement and the old placement then compare them.
Personally, I think that will be a fragile and overly complicated way to do things. I would encourage you to look at other possible solutions other than the random generation, perhaps a different layout.
Also #hungerstar has a great comment. This is essentially collision detection. It can get heavily involved to do this well and answer your particular problems.
Here is a helpful SO link that explains a basic approach: jQuery/JavaScript collision detection
And here is a working example on jsfiddle: https://jsfiddle.net/ryanoc/TG2M7/
I can dive into a specific use case if you'd like. Not sure what all to post since I'm not sure what your end goal is.
Related
I have been asked to write a prototype application where a user lassos important locations on a background image inside a div frame. My approach is Photoshop-like, drawing divs of dynamic size and position into the DOM within the frame. But, my next step is where I need help.
I need to allow the user to select groups of lasso divs. These will be used by another function. The "tailingdiv" is a plain 1px border div that will be mouse drawn to enclose some of its sibling divs. The challenge is detecting which divs are positioned inside the "tailingdiv"! In other words, I may need to compare the xy coordinates of these divs and determine which ones are visibly inside the tailingdiv in spite of it being sibling in the DOM tree. As a bonus, I would like to work in some fudge factor for cases where a div is 75% inside the tailingdiv.
<div class="frame" id="lassoFrame" style="display: block; height: 333px; width: 500px; background-image: url("dump-1459285968.png"); background-size: 500px 333px;">
<div class="lasso ui-draggable" style="position: absolute; left: 96px; top: 263px; width: 320px; height: 35px;" coords="{"x1":96,"x2":416,"y1":263,"y2":298}"></div>
<div class="lasso ui-draggable" style="position: absolute; left: 62px; top: 8px; width: 89px; height: 46px;" coords="{"x1":62,"x2":151,"y1":8,"y2":54}"></div>
<div class="nudgeControl lasso ui-draggable" style="position: absolute; left: 161px; top: 14px; width: 88px; height: 40px;" coords="{"x1":161,"x2":249,"y1":14,"y2":54}"></div>
<div class="tailingdiv" style="position: absolute; left: 51px; top: 4px; width: 388px; height: 71px;" coords="{"x1":162,"x2":249,"y1":13,"y2":56}"></div>
</div>
It may look something like this. We have a background where someone has mouse drawn a set of lassos and they want to draw the tailingdiv to enclose the top two lasso divs. Upon drawing the tailingdiv (mouseup event), I need to examine the coordinates of these objects and determine which divs are visually positioned inside the tailingdiv.
Here is an answer that assumes your want to select all divs with class lasso that touch or collide with the div with class tailingdiv:
function getBox(elem) {
elem=$(elem);
var ofs=elem.offset();
return {
x:ofs.left,
y:ofs.top,
width:elem.width(),
height:elem.height()
};
}
function collide(elem1, elem2) {
var a=getBox(elem1);
var b=getBox(elem2);
return (Math.abs(a.x - b.x) * 2 < (a.width + b.width)) &&
(Math.abs(a.y - b.y) * 2 < (a.height + b.height));
}
$(function() {
var tail=$('.tailingdiv');
var divs=$('div.lasso').filter(function() {
return collide(tail,this);
});
console.log(divs);
});
Since you need the entire box, you might consider using getBoundingClientRect() instead of the classic jQuery functions.
Here is the code for using getBoundingClientRect and also specifying a minimal overlap percentage (value between 0 and 1. If omitted it will default to 0.7. Set it to 0 to use it as in the previous example - strict collision):
function getBox(elem) {
var e=$(elem);
if (e.length==0||e.length>1) throw 'getBox accepts only one element as argument';
var rect=e[0].getBoundingClientRect();
return {
x:rect.left,
y:rect.top,
width:rect.width,
height:rect.height
};
}
function collide(elem1, elem2, overlap) {
if (typeof(overlap)=='undefined') overlap=0.7;
var a=getBox(elem1);
var b=getBox(elem2);
var area=Math.max(0, Math.min(a.x+a.width, b.x+b.width) - Math.max(a.x, b.x)) * Math.max(0, Math.min(a.y+a.height, b.y+b.height) - Math.max(a.y, b.y))
return area/(b.width*b.height)>overlap;
}
And here is an example of jQuery integration and use:
$.fn.overlappedBy=function(elem,overlap) {
return this.filter(function() {
return collide(elem,this,overlap);
});
}
$(function() {
var tail=$('.tailingdiv');
var divs=$('div.lasso').overlappedBy('.tailingdiv',0.3);
console.log(divs);
});
I want to trigger an event whenever the user scrolls up or down inside an invisible div (a 'scroller'). Imagine the below setup :
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
}
#scroller div {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller"><div></div></div>
<span></span>
Javascript
var timeout;
$("#scroller").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Whenever the user scrolls inside the above div, the word "scrolling" should appear on the screen. You can play around with this fiddle : http://jsfiddle.net/f1hxndt4/4/
There are two problems with the above :
Scrolling inside the 'scroller' obviously needs to be infinite (up and down) - Currently it only allows a 50000px scroll.
The "scroller" needs to be invisible. Currently the scrollbars are visible.
Any suggestions would be much appreciated, thank you!
Here is the solution in case anyone is interested : http://jsfiddle.net/f1hxndt4/14/
CSS
#scroller{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
overflow: hidden;
}
#scroller .parent{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100px;
overflow-x:hidden;
}
#scroller .child {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller">
<div class="parent">
<div class="child"></div>
</div>
</div>
<span></span>
Javascript
var timeout;
$("#scroller .parent").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Explanation :
You need to create a scrollable <div> : $('#scroller .parent') and then place that inside a narrower <div> : $('#scroller'). Set the overflow of the latter to 'hidden'.
That way the scrollbar on the right side of $('#scroller .parent') will not be visible anymore.
If you bind to the 'scroll' event, then you will need to make the area scrollable (which as you say, defeats the point of the what you're trying to acheive!). Instead, you need to listen for the events that would otherwise usually cause scrolling, such as listening for mousehweel events. You may also wish to listen for swipe events etc.
You can calculate scroll distance by using the wheelData property of the event to detemrine the scroll delta. (In Firefox and opera you will need to use the detail property instead.)
var onMouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll"
: "mousewheel";
var timeout;
$("#scroller").on(onMouseWheelEvent, function (e)
{
clearTimeout(timeout);
$('span').text('scrolling');
var scrollEvent = e.originalEvent;
var delta = scrollEvent.detail? scrollEvent.detail*(-120) : scrollEvent.wheelDelta
console.log(e.originalEvent.wheelDelta);
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Demo: http://jsfiddle.net/techsin/o2n2q5p4/
Improved: http://jsfiddle.net/techsin/o2n2q5p4/1/
This is similar to link you posted however it dosen't rely on scrolled up amount but creates its own amount relying on mousewheel data. I tried to solve your original problem instead.
if anything is unclear just ask: (no jquery used just for challenge)
var a=0, topSpeed = 20, deg=0;
window.addEventListener('mousewheel', function(e){
if (a<topSpeed) {
a = a + ((e.wheelDelta/1000) * topSpeed);
}
});
var img = document.getElementById('gear');
function animate() {
a = +(a*.95).toFixed(2);
if (Math.abs(a)<1) a=0;
deg = (deg+a) % 360;
img.style.transform = 'rotate('+deg+'deg)';
requestAnimationFrame(animate);
}
animate();
I have a client who wants to have an X-Ray effect that reveals clickable data points. A slider would be used to move a viewing window over an image, that would reveal an x-ray, or secondary image as the slider is moved. I've adapted Eli Kirk's X-Ray effect (http://elikirk.com/2013/12/02/draggable-x-ray-effect-using-css-javascript/) to get what I have so far: http://jsfiddle.net/xfxLx/3/. The jQuery UI portion of it is easy enough:
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({'background-position': (newLeft * -1) + 'px 0px', "left": newLeft + "px" });
}
});
});
The problem I'm having is making clickable data points that would be revealed by the window as it is slid across the main image. The data points would be fairly simple shapes (like, say, a black circle), that the user could click on once revealed by the x-ray window, to reveal a popup with more info. I've beat my head against the wall trying to come up with a workable solution (if this wasn't bad enough, it all has to work in IE7, so I've ruled out canvas as well).
If this effect won't work under the confines listed (which I've told them might be the case, since I have yet to come up with a viable solution), that's fine, but I just want to make sure I'm not missing anything.
I have changed yoput HTML, setting an inner element to the xray, that will hold the points
<div class="artifact-hold">
<div class="artifact">
<div class="xrayUpper"></div>
<div class="xrayWindow">
<div class="innerXray">
<div class="point" id="brain"></div>
<div class="point" id="heart"></div>
</div>
</div>
<br />
<div class="xraySlider"></div>
</div>
</div>
Then, the JavaScript changes slightly
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({"left": newLeft + "px" });
$('.innerXray').css({"left": -newLeft + "px" });
}
});
});
And CSS is changed to make the xray clip the contents (with overflow hidden), and the inner has the background image instead of the xraywindow. also, some styling to the points.
.innerXray {
width: 300px;
height: 490px;
position: absolute;
background: url(http://s21.postimg.org/tpg6me1vb/bones.jpg) no-repeat;
background-position: 0px 0px;
}
.point {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: red;
}
#heart {
left: 150px;
top: 130px;
}
#brain {
left: 150px;
top: 30px;
}
.xrayWindow {
width: 100px;
height: 490px;
border: 2px solid rgba(255,255,255,0.5);
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
result
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
I'm trying to make a menu that contains 5 items/icons with the selected one being in the center. Clicking to the left or right of this centered icon, rotates the menu left or right, wrapping round the edges and moving whichever item was closest to the edge back in through the opposite one. Clicking on the centered item takes you to its linked URL.
The menu should also magnify in a way similar to the OS X dock except the magnification levels are set based on position not mouseover.
I've made a diagram which is easier to understand than my ramblings.
(source: yfrog.com)
I've managed to cobble together a simple jQuery version, where the items swap positions as needed, but can't figure out how to animate this movement, especially the wrap around the edges part, and change size based on position.
I'm guessing my code is probably not the best either :)
The HTML is as follows:
<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="navblock1" class="navblock">
one
</div>
<div id="navblock2" class="navblock">
two
</div>
<div id="navblock3" class="navblock">
three
</div>
<div id="navblock4" class="navblock">
four
</div>
<div id="navblock5" class="navblock">
five
</div>
And the JS:
function rotateNav(direction) {
var change = (direction=='left')?(-1):(+1);
$('div.navblock').each(function() {
oldPos = parseInt($(this).attr('id').substr(9));
newPos = oldPos+change;
if (newPos == 0)
newPos = 5;
else if (newPos == 6)
newPos = 1;
$(this).attr('id','navblock'+newPos);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
rotateNav('right');
});
$("#rightnav").click(function() {
rotateNav('left');
});
});
All the .navblock elements are absolutely positionned. The #leftnav and #rightnav elements also and they have a higher z-index so float above the items/icons.
I've looked at various jQuery plugins but none seem close to what I need.
Instead of changing id attributes (which you really shouldn't do in the first place) you can change CSS classes and use jQuery UI's switchClass() method to animate the rotation.
You would also have to do a bit of clone()ing to make it look like the edge navblocks have rotated around to the other side of the widget and some queue()/dequeue()ing to handle multiple clicks.
Working Demo:
http://jsbin.com/ovemu (editable via http://jsbin.com/ovemu/edit)
Full Source:
JavaScript
function rotateNav(direction) {
if (direction === 'left') {
var change = 1;
$('.navblock5').clone()
.removeClass('navblock5')
.addClass('navblock0')
.appendTo('#nav');
}
else {
var change = -1;
$('.navblock1').clone()
.removeClass('navblock1')
.addClass('navblock6')
.appendTo('#nav');
}
$('div.navblock').each(function() {
var oldClassName = this.className.split(' ')[1],
oldPos = parseInt(oldClassName.substr(8)),
newPos = oldPos + change;
$(this).switchClass(
oldClassName,
'navblock'+newPos,
'fast',
function () {
var animated = $('.navblock:animated').length;
if (newPos === 6 || newPos === 0) {
$(this).remove();
}
if (animated === 1) {
$('#nav').dequeue();
}
}
);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
$('#nav').queue(function(){rotateNav('right');});
});
$("#rightnav").click(function() {
$('#nav').queue(function(){rotateNav('left');});
});
});
CSS
#nav {
width: 580px; height: 120px;
position: relative; left: 150px;
overflow: hidden;
}
.navblock {
height: 100px; width: 100px;
position: absolute; top: 10px; z-index: 50;
background-color: grey;
}
.navblock0 { left: -110px; }
.navblock1 { left: 10px; }
.navblock2 { left: 120px; }
.navblock3 { left: 230px; width: 120px; height: 120px; top: 0;}
.navblock4 { left: 360px; }
.navblock5 { left: 470px; }
.navblock6 { left: 590px; }
#leftnav, #rightnav {
position: absolute; z-index: 100; height: 120px; width: 228px;
}
#leftnav { left: 0; }
#rightnav { right: 0; }
/*Uncomment the following to help debug or see the inner workings */
/*
#nav { border: 1px solid green; overflow: visible; }
#leftnav, #rightnav { border: 1px solid blue; }
*/
HTML
<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div class="navblock navblock1">one</div>
<div class="navblock navblock2">two</div>
<div class="navblock navblock3">three</div>
<div class="navblock navblock4">four</div>
<div class="navblock navblock5">five</div>
Instead of doing this yourself and wasting time on getting this to work properly I suggest you use existing solutions ones. Here a few pointers (I guess many more can be found by using google
jQuery: Mac-like Dock
Mac-like icon dock (v2)
MAC CSS Dock Menu
jQuery mimicking the OS X dock
Simple OSX-like dock with jQuery
iconDock jQuery Plugin
You seem to be on the right track. One issue is that this line
oldPos = parseInt($(this).attr('id').substr(9));
Should use 8 in the substr:
oldPos = parseInt($(this).attr('id').substr(8));