Applying a generic value to an argument using PHP and jQuery - php

I have the code for a jQuery image slider that pulls from a directory. My client will just be dropping in images into the folder and deleting them without my knowledge. Right now it requires I put in a number (under 'numslides') for how many slides they'll have. With it constantly changing what value do I put it?
(function($){
var directorySlider = function(element, options)
{
var elem = $(element),
obj = this,
elemId = elem[0].id;
// Merge config settings
var config = $.extend({
animation: 'fade',
filebase: 'slide_',
extension: 'jpg',
speed: 1000,
timeout: 4000,
directory: '/path/images/',
numslides: 3,
height: 778,
width: 448
}, options || {});
This is the PHP code on my page:
$(document).ready(function(){
$('.directorySlider').directorySlider();
});
Someone suggested this code below and the top code is what's in my js file. How would I implement this:
$.get('numberoffiles.php', function(data) {
alert(data);
});

Related

Placing Multilple Google Charts on webpage from MYSQL Data

I have been able to show a google chart from mysql data, but when I add the second chart I am only able to see the data from the 2nd array(for 2nd chart) I used json_encode on in my php script. If I change the order of the array encoding so that the 2nd chart's array is now encoded first I no longer see it, but now the first chart is visible. Can anyone see the issue? Maybe I should use column charts instead of material charts??
here is my javascript:
<script type="text/javascript">
google.setOnLoadCallback(drawCharts);
function drawCharts() {
drawChartA();
drawChartB();
}
function drawChartB(){
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
chart: {
title: 'Calls for <?php echo $cLabel;?>',
subtitle: 'Something to put Here',
},
annotations:{
textStyle:{
fontName: 'Times-Roman',
fontSize: 12,
bold: true,
italic: false
}
},
width: 1200,
height: 600,
};
var chart = new
google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawChartA(){
var data = new google.visualization.DataTable(<?=$jsonTable_ct?>);
var options = {
chart: {
title: 'Calls for <?php echo $cLabel;?>',
subtitle: 'Something to put Here',
},
annotations:{
textStyle:{
fontName: 'Times-Roman',
fontSize: 12,
bold: true,
italic: false
}
},
width: 1200,
height: 600,
isStacked: 'true',
};
var chart = new google.charts.Bar(document.getElementById('chart_div_ct'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
my json_encoded files are:
{"cols":[{"label":"Time Interval","type":"string"},{"label":"Calls - All Offices","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":1}]},{"c":[{"v":"06:00"},{"v":3}]},{"c":[{"v":"07:00"},{"v":9}]},{"c":[{"v":"07:30"},{"v":22}]},{"c":[{"v":"08:00"},{"v":82}]},{"c":[{"v":"08:30"},{"v":68}]},{"c":[{"v":"09:00"},{"v":97}]},{"c":[{"v":"09:30"},{"v":48}]},{"c":[{"v":"10:00"},{"v":56}]},{"c":[{"v":"10:30"},{"v":70}]},{"c":[{"v":"11:00"},{"v":75}]},{"c":[{"v":"11:30"},{"v":53}]},{"c":[{"v":"12:00"},{"v":56}]},{"c":[{"v":"12:30"},{"v":48}]},{"c":[{"v":"13:00"},{"v":22}]},{"c":[{"v":"13:30"},{"v":42}]},{"c":[{"v":"14:00"},{"v":40}]},{"c":[{"v":"14:30"},{"v":60}]},{"c":[{"v":"15:00"},{"v":69}]},{"c":[{"v":"15:30"},{"v":65}]},{"c":[{"v":"16:00"},{"v":73}]},{"c":[{"v":"16:30"},{"v":37}]},{"c":[{"v":"17:00"},{"v":20}]},{"c":[{"v":"17:30"},{"v":10}]},{"c":[{"v":"18:00"},{"v":10}]},{"c":[{"v":"18:30"},{"v":2}]},{"c":[{"v":"19:00"},{"v":1}]},{"c":[{"v":"19:30"},{"v":2}]},{"c":[{"v":"20:00"},{"v":1}]},{"c":[{"v":"20:30"},{"v":1}]}]}
and the other is here: (they both work so reviewing this may not be necessary)
{"cols":[{"label":"Time Interval","type":"string"},{"label":"NP Calls","type":"number"},{"label":"DR Calls","type":"number"},{"label":"RE Today Calls","type":"number"},{"label":"RE Future","type":"number"},{"label":"ACCT","type":"number"},{"label":"EMER","type":"number"},{"label":"Other Calls","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":1}]},{"c":[{"v":"06:00"},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"07:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"07:30"},{"v":2},{"v":0},{"v":3},{"v":0},{"v":0},{"v":1},{"v":2}]},{"c":[{"v":"08:00"},{"v":9},{"v":3},{"v":11},{"v":5},{"v":0},{"v":4},{"v":23}]},{"c":[{"v":"08:30"},{"v":1},{"v":2},{"v":13},{"v":7},{"v":2},{"v":4},{"v":14}]},{"c":[{"v":"09:00"},{"v":3},{"v":1},{"v":15},{"v":11},{"v":6},{"v":3},{"v":23}]},{"c":[{"v":"09:30"},{"v":0},{"v":0},{"v":4},{"v":6},{"v":5},{"v":0},{"v":16}]},{"c":[{"v":"10:00"},{"v":1},{"v":3},{"v":2},{"v":10},{"v":2},{"v":0},{"v":17}]},{"c":[{"v":"10:30"},{"v":5},{"v":1},{"v":1},{"v":10},{"v":2},{"v":3},{"v":23}]},{"c":[{"v":"11:00"},{"v":5},{"v":3},{"v":7},{"v":11},{"v":10},{"v":1},{"v":23}]},{"c":[{"v":"11:30"},{"v":4},{"v":1},{"v":2},{"v":6},{"v":2},{"v":0},{"v":18}]},{"c":[{"v":"12:00"},{"v":3},{"v":0},{"v":5},{"v":11},{"v":2},{"v":0},{"v":21}]},{"c":[{"v":"12:30"},{"v":5},{"v":1},{"v":4},{"v":4},{"v":4},{"v":1},{"v":5}]},{"c":[{"v":"13:00"},{"v":2},{"v":1},{"v":3},{"v":2},{"v":2},{"v":0},{"v":6}]},{"c":[{"v":"13:30"},{"v":2},{"v":0},{"v":1},{"v":3},{"v":1},{"v":0},{"v":15}]},{"c":[{"v":"14:00"},{"v":5},{"v":3},{"v":1},{"v":5},{"v":3},{"v":1},{"v":4}]},{"c":[{"v":"14:30"},{"v":3},{"v":1},{"v":5},{"v":6},{"v":6},{"v":0},{"v":19}]},{"c":[{"v":"15:00"},{"v":3},{"v":1},{"v":4},{"v":8},{"v":4},{"v":1},{"v":22}]},{"c":[{"v":"15:30"},{"v":8},{"v":1},{"v":0},{"v":10},{"v":4},{"v":0},{"v":22}]},{"c":[{"v":"16:00"},{"v":6},{"v":5},{"v":1},{"v":12},{"v":3},{"v":2},{"v":20}]},{"c":[{"v":"16:30"},{"v":3},{"v":4},{"v":3},{"v":7},{"v":3},{"v":1},{"v":7}]},{"c":[{"v":"17:00"},{"v":1},{"v":0},{"v":0},{"v":4},{"v":1},{"v":0},{"v":5}]},{"c":[{"v":"17:30"},{"v":0},{"v":1},{"v":0},{"v":1},{"v":1},{"v":0},{"v":1}]},{"c":[{"v":"18:00"},{"v":1},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"18:30"},{"v":0},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0}]}]}Can
It's most likely the same issue that was reported in google-visualization-issues repository.
There are at least two solution available at the moment:
Option 1. Render charts synchronously
The general idea is to render chart synchronously. Since draw function is asyncronous, we utilize ready event handler for that purpose.
Place ready event handler in every function before draw function invocation:
if (typeof ready != "undefined") google.visualization.events.addOneTimeListener(chart, 'ready', ready);
and change drawChartN() function signature to drawChartN(ready)
Then replace:
function drawCharts() {
drawChartA();
drawChartB();
}
with:
function drawCharts() {
drawChartA(function(){
drawChartB();
});
}
PhpFiddle
Option 2. Using the frozen version loader.
Since
The rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script
src="//www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43",{packages:["corechart","bar"]});
3)Replace:
function drawCharts() {
drawChartA();
drawChartB();
}
with
google.charts.setOnLoadCallback(drawChartA);
google.charts.setOnLoadCallback(drawChartB);

How to initialise JQuery script for dynamically generated ids

EDIT:: My brain's smoking :) Perhaps I'm looking at this from the wrong angle? We need the JQuery to initialise for each dynamically generated id. Do we have to run the JQuery for each and every id (ie. place it in our PHP loop)??
How can we make this JQuery script apply to a dynamically generated list of ids where the ids increase by 1 when looped with PHP?
Here's the JQuery:
$(document).ready(function(){
$('#slider').unoslider({
scale: 'true',
responsive: 'true',
touch: 'true',
preset: 'bar_fade_left',
navigation: {autohide: true},
slideshow: {speed: 5, timer: false},
animation: {delay: 200}
});
});
And here the dynamically generated ids:
<?php echo "<ul id="slider'.$counter.'" class="unoslider">";?>
Thanks for any help!!
I created a simple plugin which lets me initialize elements based on data-* attributes:
<?php echo "<ul data-jquery-bind='unoslider' ".
"data-jquery-options='" . htmlspecialchars(json_encode($unoSliderOptions), ENT_QUOTES) . "'>;"?>
Here is the plugin:
$.fn.jqueryBind = function() {
return (this.length ? this : $('body')).each(function() {
var $root = $(this);
$root.find('[data-jquery-bind]').each(function() {
var jqueryFn = $(this).attr('data-jquery-bind');
var options = $(this).attr('data-jquery-options');
if (options) {
options = $.parseJSON(options);
}
$(this)[jqueryFn](options);
});
});
};
Then add:
$(function() {
$.jqueryBind();
});
And it will automatically search for elements with the attribute data-jquery-bind and initialize the plugin using the json serialized options in data-jquery-options.
You can use this selector -
$('ul[id^="slider"].unoslider')

JavaScript Isotope classes not loaded after AJAX

I am pulling the 50 most recent records from a mySQL database. Each goes into a DIV which has Isotope and works perfectly - DIVs animate, reset, etc.
Using AJAX to call for the next 50 records using OFFSET, however, the new records load into new DIVs but Isotope's classes are not applied to them (as seen via Web Inspector.)
THE SET UP:
index.php = calls the database when loaded in the browser, Isotope works fine. A link on index.php (a#update_newImages) triggers a listener to load "load-ajax.php".
load-ajax.php = an external page which only has the SQL SELECT and PDO loop. These records load but w/o Isotope applied, thus the problem.
code from index.php
...database connection info and query code go here
$filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved
//ISOTOPE SETTINGS, in <HEAD>
var $container = $('#theContent');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
in BODY:
<div id="theContent">
<?php
for($i=0; $links = $query_links->fetch(); $i++){
echo "<div class=\"".$filter." box\">" . $links['ATtitle']."<br>" . "#" . $links['LID']."-
". $links['descr']."</div>";
}
?>
</div><!-- theContent -->
<script> // RIGHT BEFORE BODY TAG CLOSES
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
event.preventDefault();
offset_newImages += 50; // increments batches of records
$.get('load-ajax.php?loadDataType=newImages&offset='+offset_newImages, function(data) {
$("#theContent").hide().html(data).fadeIn(600);
//**EDIT**
alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?
}, false);
});
</script>
code from load-ajax.php
...database connection info goes here
$offset = $_GET["offset"]; // from URL
$filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved
for($i=0; $links = $query_links->fetch(); $i++){
$showList = "<div class=\"".$filter." box\">" . $links['ATtitle']."<br>" . "#" . $links['LID']."-
". $links['descr']."</div>";
echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
}
I am thinking there is a call back solution but am unsure what to do next.
NOTE: I have experimented with the Isotope + infinite scroll by Paul Irish, but cannot use it here until I can convert infinite scroll's paging mechanism to JSON from mySQL. Next project.
EDIT: I have revised index.php to read as follows. The problem persists, but I think it's almost there. The ajax is working, but when Isotope kicks in it does not add its classes on the new DIVs.
<head>
<script type="text/javascript">
$(document).ready(function(){
//ISOTOPE SETTINGS
var $container = $('#container');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
</script>
goes right before </body>:
<script>
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
offset_newImages += 50;
$.ajax({
type: 'GET',
url: "load-ajax.php?offset="+offset_newImages,
success:function(data){
// alert(data); // works
$("#container").hide().html(data).fadeIn(600) // fades in the new recordset
$container.isotope('insert', data);
}
});
});
</script>
So to wrap up, the new data loads into the DIVs - I can see it until I resize the browser window in any way, which is where Isotope kicks in and hides the new DIVs with its CSS.
Isotope has a number of methods for recalculating the layout after dynamically inserting new content.

Too much recursion on ajax call

I am usining masonry view to display content with infinite scrolling functionality.
Masonry view part is working fine. For infinite scroll I have tried infinitescroll js
or on the basis of scroll as I have written below code.
Problem :- After first scroll I am facing too much recursion problem.
jQuery(document).ready(function($) {
var $container = jQuery('.main_container');
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: true,
isFitWidth: true,
isAnimatedFromBottom: true
});
});
//for infinite scrollings
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
alert("bottom!");
ajaxurl = "script url here";
var data = {start:startLimit,end:endLimit};
jQuery.get(ajaxurl, data, function(response) {
var $boxes = $(response);
$('.main_container').append( $boxes ).masonry( 'appended', $boxes );
});
}
});
});
I am trying this on wordpress admin section plugin.
After step-by-step checking I found solution , Cause of the problem I am using animate effect in masonry which is conflict some how with wordpress plugin view js.
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: false,
isFitWidth: true,
isAnimatedFromBottom: false
});
});

How can I unbind JQZOOM in my JQuery Script?

I have this script at the moment, which changes an image when a thumbnail has been changed. I then want JQZOOM to be added to that new image. However, if I put it inside the Onclick event, it gets slower and slower the more times you click on it... I guess because its running multiple instances.
Is there anyway to unbind the JQZOOM from something then rebind it to something else?
Here is my jquery at the moment:
var options = {
zoomWidth: 400,
zoomHeight: 325,
xOffset: 25,
yOffset: 0,
position: "right",
lens: true,
zoomType: "reverse",
imageOpacity: 0.5,
showEffect: "fadein",
hideEffect: "fadeout",
fadeinSpeed: "medium",
title: false
};
$('.jqzoom').jqzoom(options);
$('.single-zoom-image').click ( function () {
$('#bigProductImage').attr("src", $(this).attr("zoom"));
$('.jqzoom').attr("href", $(this).attr("extrazoom"));
});
Thanks in advance if anyone can help me.
Cheers!
This can be done as follows:
Modify jqzoom1.0.1.js where the other mouse functions are (around line 90)
//Handle clicked thumbnails changing the zoomed image
$(this).bind('changeimage', function(){
smallimage = new Smallimage( $("img", this) );
largeimage = new Largeimage(a[0].href);
smallimage.loadimage();
});
Call the zoomer as follows:
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 200,
xOffset: 30,
yOffset: 0,
position: 'right',
title: false,
showPreload: false
};
//Handle clicking on the thumbnails, swap the mainimage and recycle the zoomer
$('.seemore').bind('click', function(e) {
e.preventDefault();
$('.jssProductFullImage').attr('src', $(this).attr('href'));
$('.zoomer').attr('href', $(this).attr('href') );
//Recall the zoomer to update the page
$('.zoomer').trigger('changeimage');
});
$('.zoomer').jqzoom(options);
});
$('.jqzoom').removeData('jqzoom');
Did the job for me.

Categories