I'm having a bit trouble here with creating a map for a browser based game like Travian. I have created a function which drags the map into different directions, but each time I click on a different position than where I released the mouse on it directly changes position and then I can move it as I want. Is there any way of solving this? Is JQuery needed? (I'm not so good at Javascript so my code might be a bit different than what the easy way around code would look like)
Full document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map</title>
<script type="text/javascript">
//object of the element to be moved
_item = null;
//stores x & y co-ordinates of the mouse pointer
mouse_x = 0;
mouse_y = 0;
// stores top,left values (edge) of the element
mapdiv_x = 0;
mapdiv_y = 0;
//bind the functions
function move_init()
{
document.onmousemove = _move;
document.onmouseup = _stop;
}
//destroy the object when we are done
function _stop()
{
_item = null;
}
//main functions which is responsible for moving the element (div in our example)
function _move(e)
{
mouse_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("mapdiv").backgroundPositionX;
mouse_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("mapdiv").backgroundPositionY;
if(_item != null)
{
_item.style.backgroundPosition = "-" + (mouse_x - mapdiv_x) + "px -" + (mouse_y - mapdiv_y) + "px";
}
}
//will be called when use starts dragging an element
function _move_item(mapdiv)
{
//store the object of the element which needs to be moved
_item = mapdiv;
mouse_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("mapdiv").backgroundPositionX;
mouse_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("mapdiv").backgroundPositionY;
oldmapdivx = _item.style.backgroundPositionX;
oldmapdivy = _item.style.backgroundPositionY;
mapdiv_x = oldmapdivx - mouse_x;
mapdiv_y = oldmapdivy - mouse_y;
mapdivx2 = mouse_x - mapdiv_x;
mapdivy2 = mouse_y - mapdiv_y;
}
</script>
<style type="text/css">
#mapdiv {
background-image:url('images/map.png');
background-repeat:no-repeat;
background-color:#666;
width:750px;
height:500px;
cursor: move;
}
</style>
</head>
<body onload="move_init()">
<div id="mapdiv" onmousedown="_move_item(this);"></div>
</body>
</html>
I can't see the issue in your code, unfortunately.
If you're not dead set on writing your own code for this, though, there is actually a really nice Jquery plugin that does exactly what you seem to want. It's called Overscroll (http://www.azoffdesign.com/overscroll) and provides you with all the features you'd need for a system like this. Give it a look, I've found it really useful in my own work in the past. Looking through the code might also help you find the issue in your own solution, as well.
Related
<a class="lnk" href="http://www.google.com">Go Google</a>
When click on this link, another css class 'loading' will append. How do we test this before redirecting to google.com.
$element = $driver->findElement(WebDriverBy::className('lnk'));
$element->click();
Is there any way to check the class attribute contains 'loading' before redirecting to destination?
You can use JavaScript to edit the href attribute and add it timeout
$element = $driver->findElement(WebDriverBy::className('lnk'));
$href = $element->getAttribute('href');
$script = "javascript:setTimeout( function() { window.location = {$href} }, 5000 );"
$driver->executeScript("arguments[0].setAttribute('href', arguments[1]);", $element, $script);
Now yo have enough time to check if class attribute contains loading
$element = $driver->findElement(WebDriverBy::className('lnk'));
$class = $element->getAttribute('class');
if (strpos($class, 'loading') !== false) { }
I am not familiar with selenium and JavaScript (including English, where all the machine is translated from).
If there is any mistake, please correct me.
I think that the test click event is difficult to access the connection by default with the click. So as long as we remove the default click before the test click, you can perform the desired test.
Here is the code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.loading{
font-size: 40px;
}
</style>
</head>
<body>
<a id="google" onclick="loading()" href="https://google.com">Google</a>
</body>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function loading()
{
$("#google").attr('class', 'loading');
}
</script>
</html>
Test Code:
<?php
use Facebook\WebDriver\Firefox\FirefoxDriver;
use Facebook\WebDriver\Firefox\FirefoxProfile;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
include './vendor/autoload.php';
$profile = new FirefoxProfile();
$caps = DesiredCapabilities::firefox();
$caps->setCapability(FirefoxDriver::PROFILE, $profile);
$driver = RemoteWebDriver::create('localhost:4444/wd/hub', $caps);
$driver->get("http://localhost/test.php");
$element = $driver->findElement(\Facebook\WebDriver\WebDriverBy::id('google'));
//Cancel the default click event to perform the test
$driver->executeScript(' document.testLinkClick = function (event){ event.preventDefault() } ');
$driver->executeScript(' $("#google").bind( "click", document.testLinkClick ); ');
$element->click();
$driver->wait(3, 500)->until(function () use ($element){
$class = $element->getAttribute('class');
if (strpos($class, 'loading') !== false) return true;
}, 'error');
//Restore the default click event to perform subsequent tests
$driver->executeScript('$("#google").removeClass("loading")');
$driver->executeScript('$("#google").unbind("click", document.testLinkClick)');
$element->click(); //继续你的测试
Forgive my machine translation english english
Is there any way to make asyncronous calls to PHP objects methods? Using jquery I could .load en external file into div, but then I wouldnt be able to access methods like setTemp below. I want to avoid having to "wait" for one object to update before the second update is initiated..
My (failed) attempt looks like this, three files:
beachregister:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OO Method test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("#BaiadoSancho").load();
}, 60000);
});
$(document).ready(function() {
setInterval(function() {
$("#GraceBay").load();
}, 60000);
});
</script>
</head>
<body>
<?php
include 'Baiadosancho.php';
include 'Gracebay.php';
$baia = new Baiadosancho;
$baia->setTemp();
$grace = new Gracebay;
$grace->setTemp();
// .... lots of other beaches
?>
<div id = "BaiadoSancho">
<?php $baia->setTemp(); ?>
</div>
<div id = "GraceBay">
<?php $grace->setTemp() ?>
</div>
</body>
</html>
Baiadosancho.php
class Baiadosancho{
private $temp;
public function getTemp() {
return $this->temp;
}
public function setTemp() {
// $json = file_get_contents('urltogettemperature');
// $arrayDecodedFromJSON = json_decode($json, true);
// ...
// $this->temp = $arrayDecodedFromJSON['temp'];
}
}
Gracebay.php
class Gracebay {
private $temp;
public function getTemp() {
return $this->temp;
}
public function setTemp() {
// $json = file_get_contents('sampl/temperature');
// $arrayDecodedFromJSON = json_decode($json, true);
// ...
// $this->temp = $arrayDecodedFromJSON['temp'];
}
}
..I have also considered other means like the ones below, are they favorable you think?
GearMan, Parallel cURL execution in PHP, EvPeriodic and iron.io
The answer(s) to my question are as follows:
As deceze wrote:
If you want asynchronous execution (in standard PHP), then you will have to resort to something like Gearman or possibly forks. Standard PHP is single threaded and not evented.
It is possible using jquery though, and how to access objects from requested file is explained here:
Using objects in Ajax calls PHP files
I am a PHP beginner and trying to write PHP classes that work with HTML and MySql.
I am facing the following problem,
I have created a class called DatabaseManager that contains the function get_value. This function simply returns a value. In another file, I am calling this function on a button click using java script. But the link doesn't seem to work between the two files....Can someone help me?
thank you.
Here's my file that contains the PHP class.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<?php
class DatabaseManager {
private $value=1;
public function get_value ()
{
return value;
}
}
/php>
</body>
</html>
and here's the other file that calls it.
<html>
<head>
<?php include("DatabaseManager.php"); ?>
<script type="text/javascript">
function connect()
{
<?php
$database_manager= new DatabaseManager;
echo "the value is" . $database_manager->get_value();
?>
}
</script>
</head>
<body>
<input type="button" value="Search " onclick="connect()">
</body>
</html>
The name of the file that contains the function get_value is DatabaseManager.php
DO Like this
In Databasemanager.php
<?php
class DatabaseManager {
private $value = 1;
public function get_value() {
return $this->value;
}
}
?>
In another PHP file
<html>
<head>
<?php include("Databasemanager.php"); ?>
<script type="text/javascript">
function connect()
{
<?php
$database_manager= new DatabaseManager;
echo "the value is" . $database_manager->get_value();
?>
}
</script>
</head>
<body>
<input type="button" value="Search " onclick="connect()">
</body>
</html>
A few things:
in DatabaseManager.php remove all HTML. You're including the file elsewhere, you don't need or want duplicated HTML tags.
Remove the # in your MySQL section. This suppresses any errors you are having.
Switch to PDO or MySQLi. They are safer (if used properly)
Your closing php tag is wrong in the database file. You have /php> it should be ?>
Your class does absolutely nothing as-is.
There are multiple things here that you're douing wrong.
You don't need the html code in the first example.
You close the php wrong /php> should generate an error, it should be ?>
When your instantiating your DatabaseManager class you've left out the parentheses which means that the constructor will never get called, this should also generate an error.
You're probably trying to use alert in javascript which in this case you're not doing.
It should look something like this instead:
<?php
class DatabaseManager {
private $value = 1;
function getValue() {
return $this->value;
}
}
?>
And in your html (still php, but the one containing the html-markup) file:
<html>
<head>
<script type="text/javascript">
function connect() {
alert("
<?php
include "nameofDBManagerClassFile.php"
$dbm = new DatabaseManager();
echo "the value is " . $dbm->getValue();
?>
");
}
</script>
</head>
<body>
</body>
</html>
It could also be that you think that the php-code that is inside of the javascript function will not be executed untill you call the JS function connect() this is not so. PHP code is executed on the server and thus will be called when a user requests that webpage, the javascript on the other hand is clientside and will be executed in the users browser. I highly recommend that you read up on both php and JavaScript.
You do it wrong way, to output something in your JavaScript function connect() make this :
function connect() {
alert("
<?php
$database_manager= new DatabaseManager;
echo "the value is" . $database_manager->get_value();
?>
");
}
because php code is executed apart from your on click event.
Actually it's unclear what you wish to get, but you misunderstand the basics.
[edited to clarify users question how to output something to the screen]
I think the easiest way is to use require i another file.
require('login.php');
function get_value()
{
return get_value;
}
I've got a web server running IIS7 and I just updated to PHP 5.3. I have two sites that seem to run fine, and they both use some small degree of PHP. The revision I am currently testing on this server, presumably uses much... much more.
The problem I am encountering is that on my testing server ( a local XAMPP installation ), my page loads fine. When I push this to my server and hit the page in my browser, I get the following:
Id ) return true; } return false; } public static function PrintSelector($SelectionArray) { if( !isset($SelectionArray)) { Page::WriteLine("
No selections are available.
"); } else { $FoundViewer = false; foreach($SelectionArray as $Selection) { if( $Selection->IsViewing()) { $ViewerSelection = $Selection; $FoundViewer = true; } } if( $FoundViewer ) { Page::WriteLine("Show / Hide " . get_class($Selection) . " Selections"); $ViewerSelection->PrintOverview(); Page::WriteLine("
"); } Page::WriteLine("\n"); foreach($SelectionArray as $Selection) if( $Selection->IsSelectable() && !$Selection->IsViewing()) $Selection->PrintSelection(); Page::WriteLine("
\n"); if( $FoundViewer ) Page::WriteLine("
"); } } } ?>
Which is just a bit of the underlying code for my new site.
Upon further investigation, I run down to one of my other sites and get this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AGP Credential Manager</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript">
function submitPageForm()
{
document.forms["pageForm"].submit();
}
function submitForm(formName)
{
document.forms[formName].submit();
}
</script>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script></head>
<body>
<div id="wrap">
<div class="header">
<!-- TITLE -->
<h1>AGP Credential Manager</h1>
<!-- END TITLE -->
</div>
<div id="nav">
<ul>
<!-- MENU -->
In the source code. And as I'm sure you can presume, not much for my front-end. It seems as if the PHP starts executing, but fails some couple hundred lines in... for no apparent reason.
Curious if anyone has seen this before and happens to know the fix? Would be great. Thanks.
IIS and Apache are two different beasts. For you own sanity, strive to keep your development environment close to your deployment environment.
I suspect the issue may be that your PHP script uses short tags <? but the PHP configuration is such that it does not accept short tags and wants full tags <?php.
You can either change php.ini and set short_open_tag to 1 or modify the scripts to use the full open tag. I would recommend using the full open tag as the short tags have problems with XML files with PHP extensions.
You will also want to check for short echo's, <?= and replace those with <?php echo.
Some regex you may try:
/<?([^p])/<?php$1/g
/<?= /<?php echo /g
I have a PHP script that creates HTML by calling PHP class that I have created. The class creates all the HTML tags one of which is a tag that loads an external JS file. When I try to access the functions from said file nothing happens. Any Ideas?
index page:
function main(){
$content = "Heres some text for you";
$page = new Page($title="MyTitle", $script="external.js", $content=$content)
echo $page->toString();
}
function __autoload($className){
require_once $className . '.class.php';
}
class page:
//class constructor
function __construct($title='untitled', $script='', $content='Default Page class page'){
$this->title = $title;
$this->script = $script;
$this->stylesheet = $stylesheet;
$this->content = $content;
// $this->currentUser = $currentUser;
}
// creates tag structure for HTML pages
function toString(){
return <<<END
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
// Heres the link to the external JS file
<script type="text/javascript" src="$this->script"></script>
<script type="text/javascript">
test();
</script>
<title>$this->title</title>
<link type="text/css" rel="stylesheet" href="$this->stylesheet" />
</head>
<body>
$this->content
<p id='content'>page content</p>
</body>
</html>
END;
}// end toString function
} // end class Page
?>
External JS:
function test(){
alert("ext. JS test works");
}
You cannot have any spaces before the ending identifier of your heredoc:
END;
should be:
END;
I would also check to make sure that the path to your external.js file is correct. Are any of the other things working? Like the title or css? You also are not passing $stylesheet into your __construct anywhere which produces an error trying to set $this->stylesheet, maybe the whole script is failing to load because of that?
Don't see anything that stands out....
Are you sure the JS file is accessible in the same directory as your script (may want to apply an absolute or relative path if necessary)?
You might also, since you have jquery (assuming it's loaded), try putting the call to test(); in an "on ready" block, like so:
$(document).ready(function () {
test();
});
Other than that, I'd use your given browsers debugging tools to see if you can glean anything useful (like the script not even being loaded as a resource).
Good luck!