Change PHP variable via AJAX - php

Hi I need set value of PHP variable to "1" if clients screen resolution is more then 1200px (I check only width) and set value of this variable to "2" if client have screen smaller then 1200px.
To check clients width of screen I use JQuery function "$( window ).outerWidth(true)". If PHP can check clients resolution then I don´t need wrote this question, but PHP not allow this and for that I search for solution of this problem.
=> How can I write script which allow change PHP variable before client load page? I mean I need AJAX, but I don´t know how used it.
Sorry for this maybe simply question. Can someone help me?

This might help ,
var width = $(window).width();
var height = $(window).height();
var screenTimer = null;
function Screen (){
$(window).resize(function() {
height = $(window).height();
width = $(window).width();
getScreen ();
});
function getScreen (){
return { 'height' : getHeight (), 'width': getWidth () };
}
screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
console.log ( 'height: ' + height);
$('#height').text(height);
return height;
}
function getWidth (){
console.log ( 'width: ' + width);
$('#width').text(width);
return width;
}
Screen ();
put this code in php along with script tag and set your variable.

Impossible I get it... Finally a write this:
index.php:
<script type="text/javascript">
$(document).ready(function() {
var sirka_monitoru = $( window ).outerWidth();
if ( sirka_monitoru < 1200 ){
$.post("soubor1.php", { nejaka: "1111" }, function (msg)
{
$('.some_name').html(msg);
});
}
else{
$.post("soubor2.php", { nejaka: "2222" }, function (msg)
{
$('.some_name').html(msg);
});
}
}); //END $(document).ready()
</script>
<div class="some_name"></div>
soubor1.php (1st file to include) file soubor2.php is similar to soubr1.php
<?php
echo "Value: " . $_POST["nejaka"];
?>
<div style="width: 100%; float: left; background-color: green; height: 100px;">
soubor1
</div>
=> When I load page then check width of users screen and after that I can load different PHP files and send him some important variables to solved my problem from question.
=> I accept my answer and solved this queston and close it

Related

multi image select and print selected images using jquery

i have image set div tag like below:
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
window.print();
}
$(function () {
$("#gallery > img").click(function () {
if ($(this).data('selected')) {
$(this).removeClass('selected');
$(this).data('selected', false);
} else {
$(this).addClass('selected');
$(this).data('selected', true);
}
});
var selectedImageArray = [];
$('#gallery > img').each(function () {
if ($(this).data('selected')) {
selectedImageArray.print(this);
}
});
window.onafterprint = function(){
window.location.reload(true);
}
});
img.selected {
border: 3px solid green;
}
img:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img name=imgqr[] id="mainImg" src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(180)->generate($user->emp_code[$i])) !!} " width="100"; height="80"; >{{$user->emp_first_name}} {{$user->emp_last_name}} {{!!($user->dpt_name)!!}}</td></tr>
</div>
<input class="printMe" type="button" onclick="printImg()" value="printMe" />
i need to select image when user click on it, i added the script for this and it working, but i click print button it doesnt print qrcode image ,in meantime is printing whole page.
I also need check if image is selected and pass through array value to print seleted images +data name.
Window.print() will always print the entire current window. You could bypass this by adding the selected images to a pop up and then print that pop up.
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
You can do this one window for one photo but ofcourse you can also add multiple photo's to one screen and then print it.
Your second question asks for an array with the selected images. Because you use jQuery you can just get them by
allSelectedImages = $('.selected');
You can loop that array en call the function .data() on it to get all data attributes!
Hope this helps!
You're calling print on the main window, call print from the window you opened
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
pwin.print();
}
I do not think if there is any problem with your codes,
try this and let me know
Firefox :
Google Chrome:

Preload audio and apply css during playback

I am looking to create sound buttons.
Have used the answer here:
Buttons click Sounds
and implemented it so that the buttons are divs and created dynamically from a MySQL DB.
Does anyone know how to preload that list of sounds on page load?
Also, I want to apply a CSS class to the div when clicked and then when the audio finishes, want it to switch back to the original CSS class.
This is what I have tried. The sounds play correctly but the onended fuction does not fire.
<script type='text/javascript'>
$(window).load(function(){
var baseUrl = "http://[URL HERE]";
var audio = [<?php echo $audiostring; ?>];
$('div.ci').click(function() {
var i = $(this).attr('id').substring(1);
mySound = new Audio(baseUrl + audio[i-1]).play();
mySound.onended = function() {
alert("The audio has ended");};
});
});
</script>
If you are using HTML5 audio you can do something like the following:
mySound.addEventListener("ended", function()
{
alert("The audio has ended");
});
Edit:
Try changing the way you create the audio tag, as referenced here.
$('div.ci').click(function() {
var i = $(this).attr('id').substring(1);
mySound = $(document.createElement('audio'));
mySound.src = baseUrl + audio[i-1];
mySound.play();
mySound.addEventListener("ended", function()
{
alert("The audio has ended");
});
});
<audio> and new Audio() should be the same but it doesn't look
like that is the case in practice. Whenever I need to create an audio
object in JavaScript I actually just create an element like
this:
The ended event is created based on .currentTime attribute. event-media-ended
the canplaythrough event was used to knowing when the browser has finished downloading the audio file and we can play
code complete use closest
<style type="text/css">
body{background: #aaa;color:#fff;}
div
{
width: 100px;
height: 100px;
background: #dda;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div >
</div>
<div >
</div>
<div >
</div>
<script type="text/javascript">
$(window).load(function(){
var audioFiles = [
"http://www.soundjay.com/button/beep-01a.mp3",
"http://www.soundjay.com/button/beep-02.mp3",
"http://www.soundjay.com/button/beep-03.mp3",
"http://www.soundjay.com/button/beep-05.mp3"
];
function Preload(url) {
var audio = new Audio();
// once this file loads, it will call loadedAudio()
// the file will be kept by the browser as cache
audio.addEventListener('canplaythrough', loadedAudio, false);
audio.src = url;
}
var loaded = 0;
function loadedAudio() {
// this will be called every time an audio file is loaded
// we keep track of the loaded files vs the requested files
loaded++;
if (loaded == audioFiles.length){
// all have loaded
init();
}
}
var player = document.createElement('audio');
function playAudio(index) {
player.src = audioFiles[index];
player.play();
}
function init() {
$('div').click(function(event) {
$(this).css('background', 'blue');
playAudio(Math.floor(Math.random()*audioFiles.length));
player.addEventListener("ended", function(){
player.currentTime = 0;
$(event.target).closest('div').css('background', '#dda');
});
});
}
// We begin to upload files array
for (var i in audioFiles) {
Preload(audioFiles[i]);
}
});
</script>

I want to trigger this jQuery on 1000px or less. Can I do that with PHP?

I am using this jquery to move towards a map after a selection with . I want to only do it when the browser is less than 1000px but the layout shifts to a top down layout.
$(document).ready(function() {
$( ".mapjumpul li:nth-last-child(2)" ).append("<a id='mapjump2'></a>");
});
U should be able to do this with mediaqueries as well :
#mapjump2 {
display : none;
}
#media (min-height: 1000px) {
#mapjump2 {
display : inline;
}
}
I would do this with JQuery
<script>
var screen = $(window)
if (screen.width < 1000) {
$( ".mapjumpul li:nth-last-child(2)" ).append("<a id='mapjump2'></a>");
}
</script>

Calling a PHP function from Jquery

this could be something that a lot of people ask, but, im having some troubles with something different.
Im developing a "game" section where every image is a tag, which will load a flash game .swf, the thing is, this need to be dinamically, i mean, every file.swf has different width/height, i did a function in PHP which bring from a file.swf the width/height, i tried to use javascript to do this, but i got some height troubles when the file.swf was loaded, for example, one file.swf has 720x550 using php function and the JS function gave me 720x714, So...This is the thing, i got this function in PHP:
function flash_get(){
ini_set("memory_limit","30M");
$file ="games/miniracing3d.swf";
$info = getimagesize($file);
$width = $info[0];
$height = $info[1];
echo "<script type='text/javascript'>
$('#game_lb_loaded').flash({
src: 'games/miniracing3d.swf',
width:$width,
height:$height
});
</script>";
}
It loads a JS plugin called jquery.flash.js, which is the one who load the file...but, i need this to work with Jquery, why exactly? well, i got this code in Jquery:
$body.on('click','.game_button_link',function() {
var id_game = $(this).attr('id'),
game = 'games/'+id_game+'.swf';
$("#game_lb_loaded").lightbox_me({
centered: true,
closeEsc: true,
overlayCSS: {
background: 'black',
opacity: .8,
width: 750,
height: 600
},
onLoad: function() {
$("#game_lb_loaded").flash({
src: game
});
}
});
});
That code its a code what i was working before making the PHP function, well, this is it, every has the class "game_button_link" and an id in it, which every id will be the name of the .swf, example id="file" == "file.swf" id="file2" == "file2.swf"...and so on...the real thing is, i need to mix the php function to get the width/height into onclick jquery function i really dont know how to achieve this, oh i forgot, i use lightbox_me to open a lightbox with the flash file in it...but it doesnt matter right now, i want to mix the php and jquery functions T_T, please i need your help :)
I end up using this code:
Javascript
$body.on('click','.game_button_link',function() {
var id_game = $(this).attr('id'),
game = 'games/'+id_game+'.swf';
$("#game_lb_loaded").lightbox_me({
centered: true,
closeEsc: false,
closeClick: false,
closeSelector: ".close_button_lb",
appearEffect: "fadeIn",
overlayCSS: {
background: 'black',
opacity: .8,
width: 800,
height: 600
},
onLoad: function() {
$.post('game_dimension.php', 'game='+game,
function(data){
var dimensions = data.split(',');
$('#game_lb_loaded').flash({
src: game,
width: dimensions[0],
height: dimensions[1]
});
}
);
},
destroyOnClose: true
});
});
PHP
<?php
ini_set("memory_limit","30M");
$file = $_POST['game'];
$info = getimagesize($file);
$width = $info[0];
$height = $info[1];
echo $width.','.$height;
?>
Thanks to everyone who helped :) I really appreciated it!
PHP is server-side, JS is client-side. They do not mix.You could use jQuery .ajax() to get data from the server, but you can never run PHP on the client-side.
I think this is what you're looking for?
In your php file, instead of echoing that script
echo $width.','.$height;
and then this would be your ajax call.
$.post('file.php',
function(data){
var dimensions = data.split(',');
$('#game_lb_loaded').flash({
src: 'games/miniracing3d.swf',
width: dimensions[0],
height: dimensions[1]
});
}
);
does that help?
If you know the values before the page is sent (inside the PHP code), you can write them out to the javascript in the page. In my example I'll use the case where you need to pass it to a function that is not under your PHP file's control:
<?php
$height = getHeight(); // just for example
?>
<script>
var height = <?php echo $height; ?>;
doSomethingWith( height );
</script>
If it is after the page has been sent, you'll use AJAX. You'll create a PHP page that doesn't output anything other than
<?php
$height = getHeight(); // Just for example
$width = getWidth(); // Just for example
$out = array("height"=>$height, "width"=>$width);
echo json_encode($out);
?>
Then in your javascript you either use jQuery or another JSON parser or eval() [but only when you control the output of the script and even then think twice about this].
var myObj = $.parseJson(serverOutput);
alert(myObj.height);
alert(myObj.width);
So that is the general two ways you go about this.

Jquery overlay from checking php variable

I have this script from JQuery.
<script>
// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
// use Overlay API to gain access to crucial elements
var conf = this.getConf(),
overlay = this.getOverlay();
// determine initial position for the overlay
if (conf.fixed) {
css.position = 'fixed';
} else {
css.top += $(window).scrollTop();
css.left += $(window).scrollLeft();
css.position = 'absolute';
}
// position the overlay and show it
overlay.css(css).show();
// begin animating with our custom easing
overlay.animate({ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done);
/* closing animation */
}, function(done) {
this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
$(this).hide();
done.call();
});
}
);
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
</script>
Right now it works by me clicking on an image. Then the overlay comes up with whatever is in the div. However I want to take out clicking the image and just have the overlay come up with an if statement in PHP. any ideas...im not very good at js.
EDIT:
yes im using the JQuery plugin Easing. However the overlay works great...and the overlay works by clicking on an image with the rel attribute like this
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
However I don't want to click on the images I want it to come up automatically.
<?php if ($whatever) { ?>
$(document).ready(function() {
$("img[rel]").click();
});
<?php } ?>

Categories