hy, i have a php array with the name of some images!
i list all the images use this:
$files = $_SESSION['files'];
$imgid = $_POST['id'];
if ($files){
foreach($files as $image ):
print '<li id="liupimages">'."\n";
print '<img id="'.$imgid.'" alt="'.$image.'" src="uploads/'.$image.'">'."\n";
print "</li>\n";
endforeach;
print <<<JS
<script>
$(".thumbs li a").click(function(){
var largePath = $(this).attr("href");
$('.thumbs li').removeClass('thumbac');
$(this).parent().addClass('thumbac');
$("#largeImg").hide()
.attr({ src: largePath })
.load(function() {
$(this).show();
});
return false;
});
</script>
JS;
}
i use jquery-ui to drag and drop images using this function:
$(function() {
$("#upimagesQueue").sortable({ opacity: 0.6, cursor: 'move', update: function() {
//??
}
});
});
after i drag and drop one image i want to be able to update the php array to!
how to do this?
Use ajax:
$.get("re-arrange.php", { 'myArray[]': ['file1', 'file2']} );
http://api.jquery.com/jQuery.get/
Don't use jQuery use dom-drag it's much better and more functional.
Add this code:
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>
<script type="text/javascript">
Drag.init(document.getElementById("exampleid")); //sets the id to look for to make object draggable
</script>
Related
I have the following html code that resizes an image:
<img id="my_image" src= "path_to/my_image.png"
style="max-width:50%;
max-height:50%;
width: auto;
height: auto;" />
In the same file, I would like to store in a PHP Session variable the width of the image as it is displayed on the screen (i.e., not the width of the original image my_image.png). Do you know how to do it? Thanks a lot.
In the same file, I can write a Javascript:
<?php
session_start();
$_SESSION['currentWidth'] = "<script>
var img = document.getElementById('my_image');
document.write(img.clientWidth)
</script>
";
echo $_SESSION['currentWidth'];
?>
And it works well. But as soon as I load another PHP page, $_SESSION['currentWidth'] is then empty.
Try this:
<script>
const image = new Image();
image.onload = function() {
document.cookie = 'imgWidth=' + this.width;
document.cookie = 'imgHeight=' + this.height;
}
image.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
</script>
<?php
echo '<pre>';
var_dump($_COOKIE);
echo '</pre>';
exit;
?>
Via AJAX:
<script>
$( document ).ready( function() {
$( "#my_image" ).on( "unload").on( "load", function() {
var width = document.getElementById("my_image").width ;
var height = document.getElementById("my_image").height;
$.ajax({
type: "POST",
url: "updateSessionSize.php",
data: { "widthAjax": width, "heightAjax":height },
success: function(status){
}
});
return false;
} ).each(function() {
if (this.complete) $(this).trigger('load');
});
} );
</script>
with updateSessionSize.php:
<?php
session_start();
$_SESSION["sizeX"] = $_POST["widthAjax"];
$_SESSION["sizeY"] = $_POST["heightAjax"];
?>
Thank you for the tips.
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 have a web page that includes 10's of thousands of images. Sometimes the image isn't available so a broken image is displayed in the clients browser.
The broken image is in the following URL format: www.domain.com/t.php?src=p/dd5e5b08_1.jpg.
How do I use jQuery to get the set of images, filter it to broken images then replace the src?
The following does not work:
above the closing </head> tag
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
above the closing tag
<script type="text/javascript">
$(window).load(function() {
$("img").each(function(){
var image = $(this);
if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){
$(image).unbind("error").attr("src", "/images/no_image.png");
}
});
});
</script>
This code might help you:
function imgError(image){
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
<img src="image.png" onerror="imgError(this);"/>
Try CodeFiddle Demo
This may help you:
$(document).ready(function () {
let images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
let image_html = '';
$.each(images, (key, value) => {
image_html += '<img src="img/' + value + '"/>';
});
$('#imgcontainer').html(image_html);
$('img').on('error', function () {
$(this).replaceWith('<img src="img/no-photo.jpg"/>');
});
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
passing variables from php to javascript
I'm dynamically generating a list. I want to make each row hover on mouseover and clickable to a link. I want the link to pass the id of the content of the row.
Basically:
foreach ($courses as $cid=>cinfo){
$univ = $cinfo['univ'];
$desc = $cinfo['desc'];
$size = $cinfo['size'];
$start = $cinfo['start'];
print "<div class='rc_desc' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}
<script>
$(function ()
{
$('#rc_desc$cid').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc$cid').click(function ()
{
$(location).attr('href','student.php?$cid');
});
});
</script>
The issue is in the js/jquery. I want to be able to grab the $cid and pass it to the student.php page upon click. The php code above works but the js won't of course. I know the fundamental of client-side vs server-side languages. This question doesn't warrant a lecture. I know I cannot do this exactly, but it is what I want to happen ultimately. Any thoughts on how I can achieve this simply? Thanks in advance my friends!
Yes, if you include the <script> section in your PHP code, you can do something similar to the following:
<script>
var foo = <?php echo $foo; ?>;
</script>
In your case, you would be looking into the following code structure:
<script>
$(function () {
$('#rc_desc<?php echo $cid ?>').hover(function () {
$(this).toggleClass('.tr');
});
$('#rc_desc<?php echo $cid ?>').click(function () {
$(location).attr('href', 'student.php?<?php echo $cid ?>');
});
});
</script>
The reason why this is possible is because although the Javascript is run on the client-side, it's processed on the server-side first prior to being presented on the page. Thus, it'll replace all necessary instances of $cid with the one you have included.
Enjoy and good luck!
EDIT:
<script>
$(function () {
$('.rc_desc').hover(function () {
$(this).toggleClass('.tr ');
});
$('.rc_desc').click(function () {
$(location).attr('href', 'student.php?' + $(this).attr('id').split('rc_desc')[1]);
});
});
</script>
You can do it like this :
$(location).attr('href','<?php echo $cid ?>');
The javascript code doesn't know it comes from php, it appears as a constant (a literal) for it.
Yes it is possible. All you have to do is put your <?PHP echo $cid; ?> in where you need it
<script>
$(function ()
{
$('#rc_desc<?PHP echo $cid; ?>').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc$cid').click(function ()
{
$(location).attr('href','student.php?<?PHP echo $cid; ?>');
});
});
This is possible because by the time the scrip is put into the page the cid has already been replaced by the string on the server. Since PHP is server driven, before it spits back the html/script it will be just like you put it in yourself.
There is almost no way to actually communicate PHP and JavaScript. However, the best and simplest way is to set the ID within an attribute. The new HTML5 data attributes would be perfect.
For example, have a anchor tag with
<span data-id="22">some event</a>
and then:
$(this).attr('href','student.php?'+$(this).attr('data-id'));
Or just use
<?php echo $id; ?>
if it is not external JS file
Try this code
foreach ($courses as $cid=>cinfo){
$univ = $cinfo['univ'];
$desc = $cinfo['desc'];
$size = $cinfo['size'];
$start = $cinfo['start'];
print "<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}
<script>
$(function ()
{
$('#rc_desc$cid').hover(function ()
{
$(this).toggleClass('.tr');
});
$('.rc_desc').click(function ()
{
$(location).attr('href','student.php?' + $(this).attr("data-id"));
// if you want to redirect the page do this
// window.location.href = 'student.php?' + $(this).attr("data-id");
});
});
</script>
I think you block should be :
<script>
$(function ()
{
<?php foreach($courses as $cid=>cinfo) : ?>
$('#rc_desc<?php echo $cid; ?>').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc<?php echo $cid; ?>').click(function ()
{
$(location).attr('href','student.php?<?php echo $cid; ?>');
});
";?>
<?php endforeach; ?>
});
</script>
UPDATE
But you don't really need to do this, you have
"<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
You can try this
$(function (){
$('.rc_desc').hover(function ()
{
$(this).toggleClass('.tr');
});
$('.rc_desc').click(function ()
{
attrId = $(this).attr("data-id");
$(location).attr('href','student.php?'+id);
});
});
I am trying to convert the 'list pages' function in Wordpress into a dynamic select menu navigation (like the first example here: http://lab.artlung.com/dropdown/). I have tried converting wp_list_pages using js with this code:
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
This works converting it, but doesn't allow me to insert the required:
onchange="window.open(this.options[this.selectedIndex].value,'_top')"
Am I able to drop this into the above function, or is there a better way of going about this?
Any help would be great.
<-- edit --> the below function works correctly:
$("ul.selectdropdown").show();
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
$select.change(function() { window.open($select.find(':selected').val(), '_top'); });
});
$(this).replaceWith($select);
});
});
Why don't you use $select.change(function() { window.open($select.find(':selected').val(), '_top'); });?