I try to retrieve a variable value of a div (height) in order to put it in a table of a database in real-time (I absolutely need it). The value of the height is reacting with the microphone of the device. I would scream in the mic of a computer and see the result on another computer. Is there a simple way to do it?
Thanks.
EDIT : Actually I bring back the sound informations with JRecorder (sajithmr.me/jrecorder-jquery). The height of the div is equivalent to the amplitude of the scream. I would put the value of this height in a simple table.
You'll need to throw in some JavaScript in there. I'll use jQuery in my examples.
To get the height of the div, you can use getClientRects.
var height = $("#yourdiv")[0].getClientRects()[0].height; //For IE, substract the bottom property from the top property
To send it to the server, you can use AJAX
$.post("yourpage.php", {height: height});
In your server PHP page, you can then retrieve the value and store it in the DB:
$height = $_POST['height'];
You now have the value in your database. For another client to see it, you need to make a page that display the latest value and poll that page with AJAX at a set interval to get the value and update your div.
There is no simple way to do this. This is the most simple I could think of. It still requires a good bit of knowledge of JavaScript and AJAX. If you have any questions leave a comment.
PHP can't do anything with your device (microphone), as it's server-side software, not client-side
I didn't get your first part of question, though.
Using jRecorder Plugin, you can use the callback function to decide the mic activity level.
callback_activityLevel : Callback for returning current mic input level (0-100)
You can check the example at: http://www.sajithmr.me/jrecorder/example1.html
Related
I'm looking to create a poll/form that will allow the user to select a starting 11 for a football game (or soccer if you're American), and then submit it and then see an image of the most popular team selection among the fans (maybe most popular for each position instead of most popular team selection all together).
Ideally I would like the form to have options for formation (4-4-2, 4-3-3, 4-5-1 etc) that would change the layout/inputs on the form (but this is definitely not essential, would just be a nice touch - I would just stick with 4-4-2 otherwise).
My dream idea is that there will be a dashboard on the bottom that had player profile pictures that can be dragged and dropped into their positions; However having simple drop down boxes would work too (as long as a player cant be used twice - which is another stumbling block because you don't want the same player to be in both CB positions.)
Design Concept (Results page would basically be the same just without the bottom dashboard):
I have absolutely no idea how to approach this as it is way more complex than anything I have attempted in the past. (Forgot to mention I would like to be able to reset the results every week or so if possible)
So if someone could let me know if its do-able, and if it is, take me through how to do it step by step or even mock one up for me it would be much appreciated.
Thanks.
It doesn't have to be a form.
Here how you do it:
Create the divs for the squares on the field.
Assign each of them a unique id e.g.
id="square-1"
and give them a common class e.g class="field-square"
Create the divs for the squares outside the field. Give them a common class, and a unique id for each.
When you drop the squares, have a function that extracts the ids when they are dropped.
Then simply post them to your PHP site with jQuery.post()
Update
To extract the ids, in your callback (after you have dropped the square) do something like this:
square_id = square_id.replace('square-', '');
Since you've not assigned number ids (which you should, so that you can easily change the players in future by getting them from a database), you can simply get the ids using $(this).attr('id') in your callback.
Also look up http://api.jquery.com/jQuery.post/
I wouldn't even think about dragging and dropping at this point. Outline what the minimal viable product would be and come up with a set of steps to do that.
Going off the data you provided I would suggest something like this...
1) Build an html form that list simply a list of all the positions and a dropdown of all the possible players that can fill that position.
2) Fill out the form (select the players) and on form submit get the data echo'd as an array.
3) Create the graphic...I see two approaches....(1) server side (GD or Imagick are probably what you are going to want to use) or (2) CSS/html images
Either one will a fine approach....this step should probably be broken into little steps...start with simply displaying a list and an image of the player next to it...
HTML would be
echo "<img src='/images/players".$_POST["position1"]."' alt=''/>";
//(NOTE YOU HAVE TO CLEAN ANY DATA YOU ARE OUTPUTTING PROPERLY)
Imagick would be something like..
$bg = new Imagick("/images/bg.jpg");
$position = new Imagick("/images/players".$_POST["position1"]);
//Second image is put on top of the first
$bg->compositeImage($position, $position->getImageCompose(), 5, 5);
//new image is saved as final.jpg
$bg->writeImage('final.jpg');
I have an array of data in PHP, being displayed in 25 table cells on a webpage. I also have a javascript function that determines when the user has scrolled to the bottom of the page. My question is, what are the steps to fetching another 25 elements or so from the PHP array and displaying 25 more?
I am aware that Javascript is a client side language whereas PHP is a server side language, but I'm not sure how that affects me...Thanks
Best...SL
Without seeing the code it's difficult, but I'll take a stab at it:
Use jQuery to hit the PHP once the user has scrolled to the bottom. Parse the data returned from the PHP and refresh your table.
Alright, So I've searched google for what i'm trying to do and can't seem to find what i am exactly looking for.
What I would like to do is have a image that is updated every second, this image is used for a message icon, similar to that of Facebook. No page refresh, Need the element updated using Jquery(preferred). I know very little on the java-script side of this, however the PHP and MySQL side I can do as long as i know what to tell the java-script to do.
I guess the real Question would be:
How can i make the image update based upon, any change in the MySQL database?
Any help on this would be GREATLY appreciated.
Try something like:
window.setInterval(function() {
$.get("url", { parameters: egTime}, function(response) {
if($("#myImage").attr("src") != response)
$("#myImage").attr("src", response);
})
}, 1000);
the server has to return the new src of the image as a string ;-)
You may first set an interval using jQuery. Refer this question;
JavaScript - jQuery interval
Then you may do ajax requests on that intervals to check for new entries in database. In MySQL, make a flag entry to identify whether the entry is new or old (say set 0 for old and 1 for new). On each ajax request, if there is any entry with status 1, then the PHP may return that number of entries having 1 (ie, may be greater than 1) as the ajax result. Then the status should be set to 0. In javascript ajax, you may check whether the return value is 0 or else. If 0, then you need not do anything. If 1, then you may change some element's css property (like changing background color), so as to make it a notification. When user click that element, the css may be brought back to default.
I'm new here and I'm very new at programming but I need some serious hand-by-hand help here.
I was searching jquery and found a script to drag and drop stuff on the screen, basicly i just want to move some divs around, thats the easy part, the script I found has a callback function that writes onto the div that you just moved "dropped", this is exactly what I need but instead of writting dropped I want to save the 2 postion variables into a database (mysql), this is so that if I close the browser and open it again the div's will be on the last place I dropped them.
Can you help? Is there a jquery user interface with this already built in ?
I think this is easy to do with jquery ajax functions right? basicly I should send the serialized data (json right?) into a page that processes that data once its feed into it, then jason returns the handler with success or even with some output right?
It would be cool for the dragabble div to have a handler with last know position retrieve by jason from an external page that acts like a buffer to the database.
Is this the correct pipeline?
Best Regards
Joricam
you have kind of a vague question here, but I can try to help you get closer to the answer.
Imagine two sides of the puzzle:
When the page loads, the two (or more) DIVs are drawn on the screen. If you want them to draw in a specific order, you need to keep track of that in the database. So be sure your db has a field called something like display_order, and then display the DIVs in that order. (You can usually just add ORDER BY display_order to the SQL, so they are retrieved in the order you want, and then draw the DIVs right out in a loop.)
When someone drags and drops a DIV, you use AJAX/JSON/etc to tell your PHP script the new order. In this case, when that happens, rather than draw the word 'dropped' in the DIV, you should instead immediately update the display_order fields in the database. This way you are remembering each DIV's position.
Does that help/make sense?
UPDATED: thinking more about your question, here is the pseudo code:
in "display.php":
Fetch the contents for each DIV from the database, with ORDER BY display_order on the rows.
Draw them on the screen, looping through each database row.
Also in this HTML, use the jQuery script you already have to call another PHP script (dragged.php) when a row is dragged.
in "dragged.php":
This script is called when a row is dragged on the screen.
Currently it puts the word "dropped" in the DIV that is dragged. That's not helpful, so remove that.
Instead, you now know (from the variables passed to you) that a specific DIV needs to be in a specific place.
So grab a list of the DIVs from the database, then change the order of them (by altering the display_order column) based on the new position(s) you know.
Save that back to the database, so when display.php is called again next time, it draws the DIVs in the order you want.
Hope this helps explain further. If you are still struggling, I respectfully suggest you try to write the code, and post a more specific question about the part that you're stuck on. This will help you get a good answer quickly. (You may also want to Google this one a lot; I'm sure there are code samples out there showing how to do all this.)
This question may have been asked already - but unfortunately, I could not find any satisfactory answers. I will just ask it for my concrete case and ask the admins not to delete the question for at least a few days so I can try it out...
I have a page. It uses a captcha. Like so:
<?php
session_start(); // the captcha saves the md5 into the session
?>
<img src="captcha.php" onclick="this.src = this.src" />
That was my first code. It did not work, because the browser condsidered it useless to reload an image if the source is the same. My current solution is to pass a get parameter:
onclick="this.src = 'captcha.php?randomNumber='+ranNum"
The JavaScript variable var ranNum is generated randomly every time the onclick event fires. It works fine, still, I don't like the possibility, if the - though improbable - case of two numbers being the same twice in a row. Although the random number varies between -50,000 and 50,000 - I still do not like it. And I don't think the method is right. I would like to know the 'righter' method, by means of AJAX. I know it's possible. I hope you know how it's possible ^^ In that case, please show me.
Thanks in advance!
By the way - if I spell cap(t)cha differently, never mind, the reference to the PHP file is right in my code: I use randomImage.php
EDIT: The random number in JavaScript is only generated so the image reloads. Captcha.php does not care for the $_GET parameter. The string really is random.
EDIT: Thus, what I would like to know is how to make the browser relaod the image without passing different get parameters every time the event fires.
Unfortunately, AJAX doesn't provide a good way to dynamically load images. Even using the javascript "preload" trick just gets the browser to load each image once per URL. The only good way to get the browser to load another image from the same source is to use a different parameter just like you are doing now. And, like other answers have stated, timestamp should be sufficient for that.
Have you considered using a timestamp instead?
onclick="this.src='captcha.php?ts='+Math.round(new Date().getTime()/1000)"
Just use:
<img src="captcha.php" onclick='this.src = "captcha.php&time=" + new Date().getTime();' />
You can discard the time parameter and generate the random number in PHP. :)
You could also get the image from an Ajax request base64 encoded and put it into the img tag too.
Of course I think it is overkill and a base64 encoded file is about 4/3 of the original's size. (A 3 kb image would be about 4kb on base64).
Edit:
to have the img src attribute like
data:image/png;base64,base64encodedimage