Develop Reference

Deezer API, 30 Seconds preview doesn't work

I’m using the deezer JavaScript SDK for my non commercial project.
It works fine when I’m logged but without login the 30 seconds preview doesn’t work
Chrome reports as an error a GET request to "www.deezer.com/plugins/undefined"
What does it mean? How can i fix this problem?
Here it is the code for the player:
document.addEventListener('DOMContentLoaded', function() {
DZ.init({
appId: '277462',
channelUrl: 'http://www.symphonyproject.altervista.org/channel.php',
player: {
container: 'player',
cover: true,
playlist: true,
width: 650,
height: 300,
onload: onPlayerLoaded
}
});
});
function onPlayerLoaded() {
$("#controlers input").attr('disabled', false);
DZ.Event.subscribe('current_track', function(arg){
event_listener_append('current_track', arg.index, arg.track.title, arg.track.album.title);
});
DZ.Event.subscribe('player_position', function(arg){
event_listener_append('position', arg[0], arg[1]);
$("#slider_seek").find('.bar').css('width', (100*arg[0]/arg[1]) + '%');
});
function event_listener_append() {
var pre = document.getElementById('event_listener');
var line = [];
for (var i = 0; i < arguments.length; i++) {
line.push(arguments[i]);
}
pre.innerHTML += line.join(' ') + "\n";
}

Need Help Merging Template Chatbox with php

I've recently purchased a template from themeforest and it has a perfect chat template that i need to merge with php/ajax? Im trying to make it so rather than just showing on the chatbox until i refresh, it will send to php file and upload to database, same for refreshing chats, so if anyone sends a message it comes up as well.
<?php
if (isset($_GET['chatMessage'])){
session_start();
require_once("functions.php");
$ChatMessage = htmlspecialchars($_GET['chatMessage']);
if (($ChatMessage != "") && (strlen($ChatMessage) < 255)){
$statement = $MySQL->prepare("INSERT INTO `chatbox` VALUES (NULL, ?, ?, ?)");
$statement->bind_param("isi", $_SESSION['memberID'], $ChatMessage, time());
$statement->execute();
}
}
?>
This above is the sendchat.php
This below is the getchat.php that has previously worked on my old website:
$statement = $MySQL->query("SELECT * FROM `chatbox` ORDER BY `ID` DESC LIMIT 20");
while ($Chat = $statement->fetch_assoc()){
$MemberID = $Chat['MemberID'];
$ChatMessage = $Chat['ChatMessage'];
$Time = time_ago($Chat['TimeStamp']);
$ChatClass = $MemberID == $_SESSION['memberID'] ? 'chatui-talk-msg' : 'chatui-talk-msg chatui-talk-msg-highlight themed-border';
echo "
<li class=\"chatui-talk-msg\">
<img src=\"img/placeholders/avatars/avatar6.jpg\" alt=\"Avatar\" class=\"img-circle chatui-talk-msg-avatar\"> $ChatMessage
</li>";
}
?>
This was also the javascript used on my old website that worked as well:
function startChatBox() {
setInterval(function() {
refreshShouts();
}, 1500);
}
function sendShout() {
var chatRequest = new XMLHttpRequest();
var shoutMessage = document.getElementById('chatui-message').value;
chatRequest.onreadystatechange = function() {
if (chatRequest.readyState == 4 && chatRequest.status == 200) {}
}, chatRequest.open("GET", "sendChat.php?chatMessage=" + encodeURIComponent(shoutMessage), true);
chatRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
chatRequest.send();
document.getElementById('chatui-message').value = "";
refreshShouts();
}
function refreshShouts() {
$("#chatBox").load("inc/getChat.php");
}
I Realise there is alot of code here but i am very confused as to what i could do to achieve my goal here. The code below is the javascript used on the template to print chats to the screen until you refresh:
/*
* Document : readyChat.js
* Author : pixelcave
* Description: Custom javascript code used in Chat page
*/
var ReadyChat = function() {
var chatHeight = 600; // Default chat container height in large screens
var chatHeightSmall = 300; // Default chat components (talk & people) height in small screens
/* Cache some often used variables */
var chatCon = $('.chatui-container');
var chatTalk = $('.chatui-talk');
var chatTalkScroll = $('.chatui-talk-scroll');
var chatPeople = $('.chatui-people');
var chatPeopleScroll = $('.chatui-people-scroll');
var chatInput = $('.chatui-input');
var chatMsg = '';
/* Updates chat UI components height */
var updateChatHeight = function(){
var windowW = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (windowW < 768) { // On small screens
chatCon
.css('height', (chatHeightSmall * 2) + chatInput.outerHeight());
chatTalk
.add(chatTalkScroll)
.add(chatTalkScroll.parent())
.add(chatPeople)
.add(chatPeopleScroll)
.add(chatPeopleScroll.parent())
.css('height', chatHeightSmall);
}
else if (windowW > 767) { // On large screens
chatCon
.css('height', chatHeight);
chatTalk
.add(chatTalkScroll)
.add(chatTalkScroll.parent())
.css('height', chatHeight - chatInput.outerHeight());
chatPeople
.add(chatPeopleScroll)
.add(chatPeopleScroll.parent())
.css('height', chatHeight);
}
};
return {
init: function() {
// Initialize default chat height
updateChatHeight();
// Update chat UI components height on window resize
$(window).resize(function(){ updateChatHeight(); });
// Initialize scrolling on chat talk + people
chatTalkScroll
.slimScroll({
height: chatTalk.outerHeight(),
color: '#000',
size: '3px',
position: 'right',
touchScrollStep: 100
});
chatPeopleScroll
.slimScroll({
height: chatPeople.outerHeight(),
color: '#fff',
size: '3px',
position: 'right',
touchScrollStep: 100
});
// When the chat message form is submitted
chatInput
.find('form')
.submit(function(e){
// Get text from message input
chatMsg = chatInput.find('#chatui-message').val();
// If the user typed a message
if (chatMsg) {
// Add it to the message list
chatTalk
.find('ul')
.append('<li class="chatui-talk-msg chatui-talk-msg-highlight themed-border animation-expandUp">'
+ '<img src="img/placeholders/avatars/avatar2.jpg" alt="Avatar" class="img-circle chatui-talk-msg-avatar">'
+ $('<div />').text(chatMsg).html()
+ '</li>');
// Scroll the message list to the bottom
chatTalkScroll
.animate({ scrollTop: chatTalkScroll[0].scrollHeight },150);
// Reset the message input
chatInput
.find('#chatui-message')
.val('');
}
// Don't submit the message form
e.preventDefault();
});
}
};
}();
If anyone is able to help me, it would be greatly appreciated. Thank you

Jqgrid frozen columns - can't get them to freeze unless I manually resize the grid

I have read every post I can find on Frozen columns in jqgrid. And have implemented the following code.
The result... when I go to my spreadsheet grid in my app the 3 cols are NOT frozen. BUt if I drag the little resize icon in the lower left ever so slightly then POP they 3 columns are now frozen.
Why doesn't it work when the spreadsheet is first drawn?
Here's the code:
var $grid = $("#list4");
var resizeColumnHeader = function () {
var rowHight, resizeSpanHeight,
// get the header row which contains
headerRow = $(this).closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// reset column height
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.height = '';
});
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var $div = $(this);
$div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
});
};
var fixPositionsOfFrozenDivs = function () {
var $rows;
if (this.grid === undefined) {
return;
}
if (this.grid.fbDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight+1);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (this.grid.fhDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
var fixGboxHeight = function () {
var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
};
$grid.jqGrid({
datatype: "local",
shrinkToFit:false,
autowidth:true,
height: 450,
hoverrows: true,
sortable: false,
colNames:[' <br> <br> <br> <br>Year',
' <br> <br> <br>Your<br>Age',
' <br> <br> <br>Spouse<br>Age',
'Your Annual<br>Job<br>Income',
'Spouse Annual<br>Job<br>Income'
colModel:[
{name:'year',index:'year', width:50, align:"center",sortable:false, sorttype:"int",classes:'spreadsheet_cell0', frozen:true},
{name:'age0',index:'age0', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
{name:'age1',index:'age1', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
{name:'salary0',index:'salary0', width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}},
{name:'salary1',index:'salary1', width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}}
],
multiselect: false,
rowNum:20,
rowList:[10,20],
altRows:false,
onSelectRow: function (id) {
if (id && id!=previous_row) {
previous_row=id;
}
},
loadComplete: function () {
fixPositionsOfFrozenDivs.call(this);
}
});
// ADD DATA TO THE GRID
addData();
$grid.jqGrid('gridResize', {
minWidth: 450,
stop: function () {
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
}
});
$grid.bind("jqGridResizeStop", function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
});
$(window).on("resize", function () {
// apply the fix an all grids on the page on resizing of the page
$("table.ui-jqgrid-btable").each(function () {
fixPositionsOfFrozenDivs.call(this);
//fixGboxHeight.call(this);
});
});
// after all that freeze the cols and fix the divs
resizeColumnHeader.call($grid[0]);
$grid.jqGrid('setFrozenColumns');
$grid.triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($grid[0]);

PhantomJs with Node

I m trying to use phantomjs with node to get screen shots on a webpage.
I have almost all of it but I face issue in scrolling.
I have used scroll-position but it does not scroll correctly.
phantom.create()
.then(instance => {
return instance.createPage();
})
.then(page => {
_pageInstance = page;
return _pageInstance.open('xyz')})
.then(){ () => {
detailPage = _pageInstance.evaluate(function() {
var pageSettings = {
scrollToPos: [],
elementHeight: [],
offsetLeft: []
};
jQuery('li.diff-comment-activity').each(function(index, item) {
var offsetTop = jQuery('li.diff-comment-activity .detail')[index].offsetTop;
var elmntHeight = jQuery('li.diff-comment-activity .detail')[index].offsetHeight;
var offsetLeft = jQuery('li.diff-comment-activity')[index].offsetLeft;
pageSettings.scrollToPos.push(offsetTop);
pageSettings.elementHeight.push(elmntHeight);
pageSettings.offsetLeft.push(offsetLeft);
});
return pageSettings;
});
setTimeout(function() {
console.log('Getting your screen shots...');
detailPage.then(function(detail) {
_details = detail;
_pageInstance.property('viewportSize', {
width: 1920,
height: 1040
});
_details.scrollToPos.forEach(function(value, index) {
_pageInstance.property('scrollPosition', {
top: value
});
_pageInstance.property('clipRect', {
top: 10,
left: 300,
width: 1400,
height: _details.elementHeight[index]
});
console.log('value ' + value);
_pageInstance.render('Image_' + index + '.jpeg', {
format: 'jpeg',
quality: '100'
});
});
});
console.log('Done');
}, 5000);
}
Here i have used jquery to get the offset top of all the elements and then used scrollposition to reach that element and then clip rect to get the screen shot.
But for few screen shots the page just scroll beyond the offset top.
*
The intresting part is when I run the code using only phamtomJS it
works fine.
*
Any help ..

jsPDF set table style

How i can set height of table cell, i now using this code:
function createNew()
{
//GenPDF();
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 500,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
}
On page i have two words on header and more then 30 tables, but in pdf tables cell height is so big and use much space, can some one help me for add cell height in this code, or maybe have a some way for this in my html tables?

i found a solution:
function createNew() {
var pdf = new jsPDF('p', 'pt', 'letter')
, source = window.document.getElementsByTagName("body")[0]
, specialElementHandlers = {
'#CreateReport' : function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true;
},
'#PrintReport': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true;
},
'#ignorePDF': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true;
}
}
margins = {
top: 60,
bottom: 60,
left: 40,
width: 1000
};
pdf.fromHTML(
source
, margins.left
, margins.top
, {
'width': margins.width
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.output("dataurlnewwindow");
},
margins
)
}
i put this code and now working fine