Div hit detection - javascript

I require assistance on hit detection in javascript. I have tried many scripts but they all do not work.
My current code:
function collision($div1, $div2) {
// nothing, this is where my collision detection needs to be
}
My divs:
<style>
/* CSS */
/* character */
#character {
position:absolute;
}
/* masses */
#bluemass {
position:absolute;
}
</style>
<center>
<div class="bluemass" id="bluemass">
<img src='./pic/bluemass.png' height='35' width='35' />
</div> </center>
<div class="character" id="character">
<img src="./pic/char.png" alt="info" height="90" width="90" />
<br>
<?
$v = $_GET["username"];
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$v</div>";
?>
<?
echo "<div style ='font:21px/21px Courier,tahoma,sans-serif;'>$mass</div>";
?>
</div>
How would I detect if the div character collides/overlaps with the div bluemass? Thanks in advance, this is my testing site.

You can start with something like:
function collision($div1, $div2) {
//
var rect1={
"top":$div1.offset().top,
"left":$div1.offset().left,
"width":$div1.offset().width(),
"height":$div1.offset().height()
};
var rect2={
"top":$div2.offset().top,
"left":$div2.offset().left,
"width":$div2.offset().width(),
"height":$div2.offset().height()
};
// Standard rect-overlap checking code here
}
I wouldn't call this a complete solution because I know you need to additionally account for certain other things, like possibly page margins/padding/etc, but hopefully this will get you started.

Related

Using a stored TimeLapse stored in a datatable inside a php while loop

I am trying to display images from a database with a time delay between each image. The time delay is selectable from the user interface
and stored in seconds in the same record as the image. I aalready have the images displaying but I need to incororate the dynamic time delay.
The time delay is stored in a field named "TimeLapse". Below I have tried to used the content of "TimeLapse as $HoldTime each time
the while loop display a new image.
Image one has a TimeLapse of "5000".
Image two has a TimeLapse of "15000".
But it looks like it's only using the first TimeLapse of 5000 for both images."
Can anyone see how I can do this.
PHP CODE
while($row_fb = mysqli_fetch_array($fb)){ ?>
<?php $url = $ImagePath.''.$row_fb['SignageImageName'];
$HoldTime = $row_fb['TimeLapse']?>
<div class="outer">
<div class="banner-container">
<div id="wrapper">
<a><img src="/<?php echo $url;?>" class="responsive"/></a>
</div>
</div>
</div>
<?php
}
JAVASCRIPT
(function() {
var a = $('.outer').children();
var index = 0;
run()
function run() {
a.filter('.active').fadeOut(500).removeClass('active');
a.eq(index).fadeIn(500).addClass('active');
index = (index + 1) % a.length;
setTimeout(run, <?php echo $HoldTime;?>);
}
})();
I would put the delay time into an HTML data- attribute and read it in the JavaScript to set the delay. (Note use of alternative syntax and short echo tags, this makes your PHP code more readable when mixed with HTML.)
<?php while($row = $fb->fetch_array()): ?>
<div class="outer">
<div class="banner-container" data-delay-time="<?=$row['TimeLapse']?>">
<div id="wrapper">
<a>
<img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>
</a>
</div>
</div>
</div>
<?php endwhile ?>
The JS has been cleaned up to eliminate any dependency on variables from outside the function. Instead it just looks for the active banner's next sibling, looping to the beginning if it doesn't have one. Some test HTML is included for a runnable example.
(function() {
$("div.outer div.banner-container").hide();
run();
function run() {
// get a list of all the banners
var banners = $("div.outer div.banner-container");
if (!banners.length) {
return;
}
// active is the one with "active" class, or the first one
var active = banners.filter(".active").first();
if (!active.length) {
active = banners.first();
}
// get the next one or loop to the beginning again
var next = active.next("div.banner-container");
if (!next.length) {
next = banners.first();
}
active.fadeOut(500).removeClass("active");
next.fadeIn(500).addClass("active");
// get the delay time from the data-delay-time attribute
setTimeout(run, next.data("delayTime"));
}
})();
.active {
background: blue;
color: white
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
<div class="banner-container" data-delay-time="1000">foo</div>
<div class="banner-container" data-delay-time="2000">bar</div>
<div class="banner-container" data-delay-time="6000">baz</div>
<div class="banner-container" data-delay-time="10000">boo</div>
</div>

How to change logo in php header when change the header js class and CSS

Many time i have found a lot of solution on this pages and thanks for every help! I hope i can found one more new! :-)
I need change logo in header,
Now, when js work make a new class, with css I make a new layout but the logo is in php file...
So: when the page scroll the header change, but i can not change the logo in the header because is in php and with the css i cann't found a solution
This is the php code:
<!-- header -->
<header class="header clear" role="banner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
</a>
</div>
<!-- /logo -->
this is the js (i don't know if need to know)
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header')
}else {
$('.header').removeClass('cambio_header')
}
})
})
Some one have idea how write the php?
(the web site is make whit Wordpress)
Thanks so much!
You could change the image in your javascript:
$(document).ready (function () {
var logo-top = '/url/to/logo.jpg';
var logo-scroll = 'url/to/logo-scroll.jpg';
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header').find('img.logo-img').attr('src', logo-scroll);
}else {
$('.header').removeClass('cambio_header').find('img.logo-img').attr('src', logo-top);
}
});
});
Or you could add both logos in the php file, and hide/show them with a css rule
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Logo" class="logo-img">
<img src="<?php echo get_template_directory_uri();?>/img/logo-scroll.png" alt="Logo" class="logo-img scroll">
</a>
</div>
.header .logo-img.scroll{
display:none;
}
.header.cambio_header .logo-img{
display:none;
}
.header.cambio_header .logo-img.scroll{
display:block;
}
I think that better way could be to place logo in CSS and in PHP will be only container for this logo. Then, when you will change the CSS, logo will be also changed.
<div id="logo-container"></div>
#logo-container {
width: logo_width;
height: logo-height;
background: url('path/ot/logo') cover;
}

chat div in ajax using css

Chat div in ajax using css. Am building a chat system using ajax, when the chat text exceeds the length of the screen, the newly text message tends to scroll downward beneath the chat text input form instead of scrolling upward and as a result, newly sent message cannot be been unless you scroll downward. Below is how I built my css. any help will be appreciated
JS:
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: "POST",
url:'chatposts.php',
data:"uname="+uname,
success:function(data) {
$('#chatdisplay').html(data);
} })
var elem = document.getElementById('comdisplay');
elem.scrollTop = elem.scrollHeight;
}, 10000);
});
CSS:
.chatdisplay {
background-color:#FF00FF;
min-width:100px;
height:auto;
margin-left:56px;
padding:10px 0 10px 10px;
margin-top:1px;
font-size:12px;
color:#000;
}
#chatbox {
display:block;
bottom:0;
margin-left: 0px;
position:fixed;
width:100%;
}
HTML:
<div id="chatdisplay" >
Display chat message...
</div>
<div id="chatbox">
<form action="" method="post" name="chat_form">
<input name="chat_comment" class="comment" type="text" id="chat_comment">
<input name="chatBtn" class="chatBtn" id="chatbtn" type="submit" value="Chat" />
</form>
</div>
PHP:
<?php
require('db.php');
$result = $db->prepare('
select * from chat where pid=:pid order by cmid');
$result->execute(array(':pid' => '43'));
$countcom=$result->rowCount();
while ($full = $result->fetch()) {
$cmid=htmlentities($full['cmid'], ENT_QUOTES, "UTF-8");
$cname1=htmlentities($full['comment'], ENT_QUOTES, "UTF-8");
$comment_pic2=htmlentities($full['user_pic66'], ENT_QUOTES, "UTF-8");
$tt=htmlentities($full['c_time'], ENT_QUOTES, "UTF-8");
$bb=htmlentities($full['user_name66'], ENT_QUOTES, "UTF-8");
?>
<div id="chatdisplay<?php echo $cmid;?>" class="chatdisplay" >
<img width="20" height="20" src='http://localhost/sri_chat/db/photo/<?php echo $comment_pic2;?>' />
<?php
echo $bb;
?>: <?php echo $cname1;?>
</div>
<?php }?>
I don't think this is possible with pure CSS. But you could do it with JavaScript.
Example:
HTML: (A bit different than yours, but same concept)
<div class="message">
<p>This was the first message</p>
<p>Another message</p>
<p>A third message about something a bit longer</p>
</div>
<button>New message</button>
JS: (I used jQuery in this example)
var button = $('button');
var container = $(".message");
button.on('click', function() {
container.append('<p> A new message</p>');
container.scrollTop(container[0].scrollHeight);
});
Demo:
http://jsfiddle.net/u4u33286/3/
Well the best way to solve the problem would be to invert how you are putting the messages into the box (newest at top) but if you want them at the bottom.
var chatBox = document.getElementById("chatdisplay");
chatBox.scrollTop = chatBox.scrollHeight;
Should do it.
http://www.w3schools.com/jsref/prop_element_scrolltop.asp
For more info on the Dom property
*Kris beat me to it

JQuery Minimize & Maximize HTML Div

Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>

Create a falling div (that works in IE)

Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.
Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>

Categories