I added a CKFinder button on my website that calls this function on click:
<script type="text/javascript">
function BrowseServer(a)
{
var which=a;
var finder = new CKFinder() ;
finder.basePath = 'ckfinder/' ;
finder.selectActionFunction = SetFileField ;
finder.selectFunctionData = a ;
finder.popup() ;
}
function SetFileField( fileUrl, data )
{
document.getElementById(which).value = fileUrl ;
insertTextAtCursor(getObj('message'), fileUrl);
}
</script>
This opens up a blank window. When I view the source, this is what I see:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>CKFinder 2</title><style type="text/css">body, html, iframe, #ckfinder { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; }</style></head><body></body></html>
I have enabled error_reporting in the ckfinder/config.php and connector file. Yet am not seeing any error.
Surprisingly, the ckfinder works with my ckeditor integration but doesnt work when called with Javascript from a button.
What may be the problem?
Related
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1PzTMW6xH5cjLgvLn_LOq25XEbmrCw2MP9C9vvt4rhoM/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var TEXT = ourData.feed.entry[2].gs$cell.inputValue;
var IMG = ourData.feed.entry[3].gs$cell.inputValue;
console.log(TEXT);
console.log(IMG);
document.getElementById('testoutput').innerHTML = TEXT;
document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";
};
ourRequest.send();
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Hide scrollbars */
}
div {
text-align: left;
min-height: 100%;
font-family: motiva-sans, sans-serif;
font-weight: 800;
font-size: 15vw;
padding: 15px;
padding-top: 30px;
padding-left: 10%;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.typekit.net/vbl6jef.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Google Sheets - Werkend</title>
</head>
<body>
<div id="backgroundIMG"><div>
<div id="testoutput"></div>
</body>
</html>
I'm working on a HTML document that gets its styling from Google Sheets JSON data. So far it works for setting properties such as backgroundColor.
Right now i'm trying to set the backgroundImage and have set a variable that contains the url:
document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";
When I console.log the variable it returns the url just fine. When I place the URL directly into the code above, it works. When I put the variable in the code (like shown above) it won't load the URL.
My limited knowledge stops me from searching the right terms on what is going on here. I have tried reading up on variables but no succes yet.
Can anyone point me in the right direction by either telling me what to read up on or by offering a sollution based on my code below?
It's not using the IMG variable, just IMG as a string, so try:
document.getElementById('backgroundIMG').style.backgroundImage = "url(" + IMG + ")";
Adding a variable to a string:
"Traditional" ways (plus sign is expands a string):
let s = "number: " + num;
let s = 'number: ' + num;
ES6 template literals:
let s = `number: ${num}`
Get more information on these links:
JS Strings
Template literals
I'm trying to add a multiple image up-loader which returns a JavaScript array that is populated by the user selecting images. I will be using this image up-loader with other input form elements which will all submit together, in this case i'm not using AJAX. The maximum file upload size is 2MB. The JavaScript array contains the base 64 encoded image with all the details including size, type etc.
I have used $('#j_son').val(JSON.stringify(AttachmentArray)); outside the array to populate the hidden input field everytime the array is populated (input unhidden to show JSON string). Lightweight Multiple File Upload with Thumbnail Preview using HTML5 and Client Side Scripts
On submit I will use PHP to decode the new JSON string and and put the multiple images in a folder called uploads.
The problem I am facing is that selecting image attachments larger than 200 KB seem to slow the output of images inside the div container and the JSON string inside the hidden input field and anything to large will cause "aw snap" error inside chrome and crash the browser, I don't know where I'm going wrong. I also have a click event that when the user clicks X remove button and the hidden input field is repopulated with the updated JSON array, this to is really slow and crashes if the files are to large. The PHP side of things has no problem decoding the JSON string it seems to either fall on the JavaScript code or the extra functionality I have added at the bottom of the script. Is there a way to stop this from happening? I have added the full code including the PHP if anybody wants to test it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*Copied from bootstrap to handle input file multiple*/
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/*Also */
.btn-success {
border: 1px solid #c5dbec;
background: #D0E5F5;
font-weight: bold;
color: #2e6e9e;
}
/* This is copied from https://github.com/blueimp/jQuery-File-
Upload/blob/master/css/jquery.fileupload.css */
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
.thumb {
height: 80px;
width: 100px;
border: 1px solid #000;
}
ul.thumb-Images li {
width: 120px;
float: left;
display: inline-block;
vertical-align: top;
height: 120px;
}
.img-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #D0E5F5;
padding: 5px 2px 2px;
color: #000;
font-weight: bolder;
cursor: pointer;
opacity: .5;
font-size: 23px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
background-color: #ff0000;
}
.FileNameCaptionStyle {
font-size: 12px;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
//I added event handler for the file upload control to access the files
properties.
document.addEventListener("DOMContentLoaded", init, false);
//To save an array of attachments
var AttachmentArray = [];
$('#j_son').val(JSON.stringify(AttachmentArray));
//counter for attachment array
var arrCounter = 0;
//to make sure the error message for number of files will be shown only
one time.
var filesCounterAlertStatus = false;
//un ordered list to keep attachments thumbnails
var ul = document.createElement('ul');
ul.className = ("thumb-Images");
ul.id = "imgList";
function init() {
//add javascript handlers for the file upload event
document.querySelector('#files').addEventListener('change',
handleFileSelect, false);
}
//the handler for file upload event
function handleFileSelect(e) {
//to make sure the user select file/files
if (!e.target.files) return;
//To obtaine a File reference
var files = e.target.files;
// Loop through the FileList and then to render image files as
thumbnails.
for (var i = 0, f; f = files[i]; i++) {
//instantiate a FileReader object to read its contents into
memory
var fileReader = new FileReader();
// Closure to capture the file information and apply validation.
fileReader.onload = (function (readerEvt) {
return function (e) {
//Apply the validation rules for attachments upload
ApplyFileValidationRules(readerEvt)
//Render attachments thumbnails.
RenderThumbnail(e, readerEvt);
//Fill the array of attachment
FillAttachmentArray(e, readerEvt)
};
})(f);
// Read in the image file as a data URL.
// readAsDataURL: The result property will contain the
//file/blob's data encoded as a data URL.
// More info about Data URI scheme
//https://en.wikipedia.org/wiki/Data_URI_scheme
fileReader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
}
//To remove attachment once user click on x button
jQuery(function ($) {
$('div').on('click', '.img-wrap .close', function () {
var id = $(this).closest('.img-wrap').find('img').data('id');
//to remove the deleted item from array
var elementPos = AttachmentArray.map(function (x) { return
x.FileName; }).indexOf(id);
if (elementPos !== -1) {
AttachmentArray.splice(elementPos, 1);
}
//to remove image tag
$(this).parent().find('img').not().remove();
//to remove div tag that contain the image
$(this).parent().find('div').not().remove();
//to remove div tag that contain caption name
$(this).parent().parent().find('div').not().remove();
//to remove li tag
var lis = document.querySelectorAll('#imgList li');
for (var i = 0; li = lis[i]; i++) {
if (li.innerHTML == "") {
li.parentNode.removeChild(li);
}
}
});
}
)
//Apply the validation rules for attachments upload
function ApplyFileValidationRules(readerEvt)
{
//To check file type according to upload conditions
if (CheckFileType(readerEvt.type) == false) {
alert("The file (" + readerEvt.name + ") does not match the
upload conditions, You can only upload jpg/png/gif files");
e.preventDefault();
return;
}
//To check file Size according to upload conditions
if (CheckFileSize(readerEvt.size) == false) {
alert("The file (" + readerEvt.name + ") does not match the
upload conditions, The maximum file size for uploads should not
exceed 300 KB");
e.preventDefault();
return;
}
//To check files count according to upload conditions
if (CheckFilesCount(AttachmentArray) == false) {
if (!filesCounterAlertStatus) {
filesCounterAlertStatus = true;
alert("You have added more than 10 files. According to
upload conditions you can upload 10 files maximum");
}
e.preventDefault();
return;
}
}
//To check file type according to upload conditions
function CheckFileType(fileType) {
if (fileType == "image/jpeg") {
return true;
}
else if (fileType == "image/png") {
return true;
}
else if (fileType == "image/gif") {
return true;
}
else if (fileType == "image/jpg") {
return true;
}
else {
return false;
}
return true;
}
//To check file Size according to upload conditions
function CheckFileSize(fileSize) {
if (fileSize < 2000000) {
return true;
}
else {
return false;
}
return true;
}
//To check files count according to upload conditions
function CheckFilesCount(AttachmentArray) {
//Since AttachmentArray.length return the next available index in
//the array,
//I have used the loop to get the real length
var len = 0;
for (var i = 0; i < AttachmentArray.length; i++) {
if (AttachmentArray[i] !== undefined) {
len++;
}
}
//To check the length does not exceed 10 files maximum
if (len > 9) {
return false;
}
else
{
return true;
}
}
//Render attachments thumbnails.
function RenderThumbnail(e, readerEvt)
{
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = ['<div class="img-wrap"> <span class="close">×
</span>' +
'<img class="thumb" src="', e.target.result, '" title="',
escape(readerEvt.name), '" data-id="',
readerEvt.name, '"/>' + '</div>'].join('');
var div = document.createElement('div');
div.className = "FileNameCaptionStyle";
li.appendChild(div);
div.innerHTML = [readerEvt.name].join('');
document.getElementById('Filelist').insertBefore(ul, null);
}
//Fill the array of attachment
function FillAttachmentArray(e, readerEvt)
{
AttachmentArray[arrCounter] =
{
AttachmentType: 1,
ObjectType: 1,
FileName: readerEvt.name,
FileDescription: "Attachment",
NoteText: "",
MimeType: readerEvt.type,
Content: e.target.result.split("base64,")[1],
FileSizeInBytes: readerEvt.size,
};
arrCounter = arrCounter + 1;
//THIS IS THE PART I ADDED TO POPULATE THE HIDDEN INPUT FIELD
$('#j_son').val(JSON.stringify(AttachmentArray));
}
//THIS IS TO UPDATE THE INPUT FIELD WHEN A FILE IS REMOVED
$(document).on('click', '.close', function(){
var myString = JSON.stringify(AttachmentArray);
$('#j_son').val(myString);
});
</script>
</head>
<body>
<div>
<label style="font-size: 14px;">
<span style='color:navy;font-weight:bold'>Attachment Instructions :
</span>
</label>
<ul>
<li>
Allowed only files with extension (jpg, png, gif)
</li>
<li>
Maximum number of allowed files 10 with 2 MB for each
</li>
<li>
you can select files from different folders
</li>
</ul>
<form method="POST" action="" enctype="multipart/form-data">
<span class="btn btn-success fileinput-button">
<span>Select Attachment</span>
<input type="file" name="files[]" id="files" multiple
accept="image/jpeg, image/jpg image/png, image/gif,"><br />
</span>
<!--input field to be populated by the array-->
<input type="text" name="j_son" id="j_son" style="width: 500px;">
<!--Submit and post to get decoded JSON string-->
<button type="submit" id="image_post" name="post_it">Submit</button>
</form>
<output id="Filelist"></output>
</div>
<?php
if(isset($_POST['post_it']))
{
//other input fields
$file = $_POST['j_son'];
$tempData = html_entity_decode($file);
$cleanData = json_decode($tempData, true);
foreach($cleanData as $p)
{
echo $p['Content']."</br>";
//insert code to uploads folder
}
}
?>
</body>
</html>
-- edit --
This may be because of a known issue in chrome. Try using a blob as recommended in this post
How can javascript upload a blob?
function uploadAudio( blob ) {
var reader = new FileReader();
reader.onload = function(event){
var fd = {};
fd["fname"] = "test.wav";
fd["data"] = event.target.result;
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
dataType: 'text'
}).done(function(data) {
console.log(data);
});
};
reader.readAsDataURL(blob);
}
-- /edit --
ok it seems like you are adding an onChange event listener multiple times to the "files" id. Once in the init and once every time the handleFileSelect function is called. This could for sure be your slowdown problem.
Also, if you are going to have a file upload size that maxes out at 2MB you should set this in your PHP file using upload_max_filesize and also set post_max_size.
ini_set('upload_max_filesize', '2M');
ini_set('post_max_size', '2M');
from php.net:
upload_max_filesize
The maximum size of an uploaded file.
post_max_size
Sets max size of post data allowed. This setting also affects file upload. To upload large files, this value must be larger than upload_max_filesize. Generally speaking, memory_limit should be larger than post_max_size. When an integer is used, the value is measured in bytes.
Also if your upload ends up timing out you might also want to extend the execution time by using max_input_time or max_execution time though I think that max_input_time should be enough.
ini_set('max_input_time', 300);
ini_set('max_execution_time', 300);
max_input_time
This sets the maximum time in seconds a script is allowed to parse input data, like POST and GET. Timing begins at the moment PHP is invoked at the server and ends when execution begins. The default setting is -1, which means that max_execution_time is used instead. Set to 0 to allow unlimited time.
max_execution_time
This sets the maximum time in seconds a script is allowed to run before it is terminated by the parser. This helps prevent poorly written scripts from tying up the server. The default setting is 30. When running PHP from the command line the default setting is 0.
This needs to be added at the top of your PHP file before other output.
I need to display a cognos reports on the display screen and the reports need to be refreshed at a given interval of time.
1) one off the cognos report had 6 pages in it, and i need to show all the six pages one after the other, and it should go to the next report and in the same way it has to display all the pages in the all report.
presently i am using iframe to display multiple cognos reports, but the show stopper is i am unable to display all pages of the cognos report, as it is showing only 1st page of the report.
script to display multiple cognos reports.
<script type="text/javascript">
var slideimages = new Array();
slideimages[0] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%201ST%20PAGE%27%5d&ui.name=BRACKENFELL%20DC%20-%201ST%20PAGE&run.outputFormat=&run.prompt=true";
slideimages[1] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%201%27%5d&ui.name=BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%201&run.outputFormat=HTML&run.prompt=true";
slideimages[2] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%202%27%5d&ui.name=BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%202&run.outputFormat=HTML&run.prompt=true";
slideimages[3] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20INDIRECT%20SHIFT%27%5d&ui.name=BRACKENFELL%20DC%20-%20INDIRECT%20SHIFT&run.outputFormat=HTML&run.prompt=true";
slideimages[4] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20LATE%20PICKS%20SCOREBOARD%27%5d&ui.name=BRACKENFELL%20DC%20-%20LATE%20PICKS%20SCOREBOARD&run.outputFormat=HTML&run.prompt=true";
slideimages[5] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REMAINING%20CASES%20TO%20PICK%27%5d&ui.name=BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REMAINING%20CASES%20TO%20PICK&run.outputFormat=HTML&run.prompt=true";
slideimages[6] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REMAINING%20LETDOWNS%27%5d&ui.name=BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REMAINING%20LETDOWNS&run.outputFormat=HTML&run.prompt=true";
slideimages[7] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REPICKS%20PENDING%27%5d&ui.name=BRACKENFELL%20DC%20-%20LOCAL%20ROUTES%20REPICKS%20PENDING&run.outputFormat=HTML&run.prompt=true";
slideimages[8] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20MEZZANINE%20SHIFT%27%5d&ui.name=BRACKENFELL%20DC%20-%20MEZZANINE%20SHIFT&run.outputFormat=HTML&run.prompt=true";
slideimages[9] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20SECTION%20AND%20REPORT%20GROUP%20SUMMARY%27%5d&ui.name=BRACKENFELL%20DC%20-%20SECTION%20AND%20REPORT%20GROUP%20SUMMARY&run.outputFormat=HTML&run.prompt=true";
slideimages[10] = "http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20TOWER%20SHIFT%27%5d&ui.name=BRACKENFELL%20DC%20-%20TOWER%20SHIFT&run.outputFormat=HTML&run.prompt=true";
// style="border: 0; width: 100%; height: 100%" frameborder="0"
// style="border: 0; width: 100%; height: 100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"
</script>
</head>
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<body>
<iframe id="slide" src="" frameborder="0" style="height: 100%; width: 100%; position: absolute;" height="100%" width="100%" ></iframe>
<script type="text/javascript">
var step=0
function slideit(){
document.getElementById('slide').src = slideimages[step]
if (step<slideimages.length-1)
step++
else
step=0
setTimeout("slideit()",20000)
}
slideit()
</script>
</body>
Can anybody help me giving a solution.
Kind Regards,
Anil R G
This is how you advance to the next page via JavaScript and the Cognos JS API:
var report = cognos.Report.getReport('_THIS_');
report.sendRequest(cognos.Report.Action.NEXT);
The API is provided in Cognos BI versions 10.2 and above.
I would create a function in each of the target reports like so:
function navigate(action) {
var report = cognos.Report.getReport('_THIS_');
report.sendRequest(action);
}
Then I'd call that function from the main code:
var iframe = document.getElementById('slide');
iframe.navigate(cognos.Report.Action.NEXT);
This would advance the report currently in the iFrame by one page.
The challenge comes with looping through the pages. You'd have to know how many pages each report had somehow. If the reports have a fixed, known number of pages then no problem. I'd create an array of objects to store both the source and the number of pages:
var reports = [];
reports.push(new Report('http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%201ST%20PAGE%27%5d&ui.name=BRACKENFELL%20DC%20-%201ST%20PAGE&run.outputFormat=&run.prompt=true',4));
reports.push(new Report('http://COGDEVWEB1:80/ibmcognos/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=CAMID(%22dcanalyze%3au%3aa202da3d8b73bb4b954d583834a025a5%22)%2ffolder%5b%40name%3d%27My%20Folders%27%5d%2ffolder%5b%40name%3d%27Anil%27%5d%2ffolder%5b%40name%3d%27On%20Screen%20Testing%27%5d%2ffolder%5b%40name%3d%27BRACKENFELL%20SCHEDULES%27%5d%2ffolder%5b%40name%3d%27ON%20SCREEN%20DISPLAYS%27%5d%2ffolder%5b%40name%3d%27SCOREBOARD%20SCHEDULES%2007%3a00%20-%2019%3a00%27%5d%2freport%5b%40name%3d%27BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%201%27%5d&ui.name=BRACKENFELL%20DC%20-%20FULL%20CASE%20PICKER%20SHIFT%201&run.outputFormat=HTML&run.prompt=true',9));
...
function Report (src,pagecount) {
this.src = src;
this.pagecount = pagecount;
this.currentpage = 1;
this.advanceCount = function () {
if (this.currentpage == this.pagecount) {
this.currentpage = 1;
} else {
this.currentpage++;
}
}
}
Then, you could loop through the reports array, changing the source as you did before and then using currentpage and pagecount of the current instance to determine how many times to advance the page. You call the iframe.navigate(cognos.Report.Action.NEXT); the correct number of times and call advanceCount() on the report object to increment the page counter.
For reference, all the actions you can pass to the navigate() function are as follows:
cognos.Report.Action.NEXT
cognos.Report.Action.BACK
cognos.Report.Action.REPROMPT
cognos.Report.Action.CANCEL
cognos.Report.Action.FINISH
I'm programming a firefox addon and using a panel to display info on a video, everything works fine althought I can't make the panel transparent. I define the panel styling in the html file as follow:
<html>
<head>
<meta charset="utf-8" />
<style type="text/css" media="all">
html
{
opacity:0.1;
border-style:none;
resize:none;
}
textarea
{
background-color:transparent;
resize: none;
border-style:none;
}
</style>
</head>
<body>
<textarea id="text" readonly=true rows="3" cols="60"></textarea>
</panel>
</body>
</html>
Except the panel is not transparent only the text area is. I tried with:
opacity:1 for textarea
It doesn't work either way. What am I doing wrong? Is this even possible?
From what I understand :
html
{
opacity:0.1;
border-style:none;
resize:none;
}
only applies to the panel content not to the panel itself. I found a post on this subject but it is outdated since the sdk/panel.js mentionned in the post is not the same anymore.
Anyway I tried downloading the panel.js and replacing the current one, but it doesn't seem to affect the panel I display at all. The panel is still white and the border-radius option does not work either. (I should say that I replaced all the "./" with "sdk/" as mentionned in that post).
Ok here is a pure addon sdk solution:
let myPanel = Panel({
width: 180,
height: 180,
contentURL: 'data:text/html,<textarea style="width:120px; height:80px;">this is my textarea</textarea>'
})
let { getActiveView }=require("sdk/view/core");
getActiveView(myPanel).setAttribute("noautohide", true);
getActiveView(myPanel).setAttribute("level", 'top');
getActiveView(myPanel).setAttribute("style", 'background-color:rgba(0, 0, 0, 0.2);');
You can't style the panel provided in the SDK, only the content but you can definitely follow the procedure you mention and provide your modified panel.
I had to solve this same problem today (transparent panel in SDK). The trick is getting at the anonymous content:
function makePanelTransparent() {
// Get the panel element in the XUL DOM and make its background transparent.
const { getActiveView } = require('sdk/view/core');
const el = getActiveView(panel);
el.style.background = 'rgba(0,0,0,0)';
// Go up the XUL DOM till you hit the Document (nodeType 9).
let parentNode = el;
while (parentNode !== null && parentNode.nodeType !== 9) {
parentNode = parentNode.parentNode;
}
if (!parentNode) {
console.error('unable to find the document parent; giving up');
return;
}
// Now that we've found it, call the document a document.
const xulDocument = parentNode;
// Use the document pointer to access and style 'anonymous' content.
const xulContainer = xulDocument.getAnonymousElementByAttribute(el, 'class', 'panel-arrowcontent')
xulContainer.style.background = 'rgba(0,0,0,0)';
xulContainer.style.boxShadow = 'none';
}
This works for me. Hope it helps some other person in the next 1-5 years ;-)
I found out that you could create a panel with transparency this way:
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
level: 'top',
style: 'padding:15px; margin:0; width:' + screen.width + 'px; height:' + screen.height + 'px; background-color:rgba(180,180,180,.5);'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);
To embed an iframe remember to set the path to your ".html" as:
"resource://"id of your addon"-at-jetpack/data/custom_panel.html".
Here is my code :
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
backdrag: true,
level: 'top',
style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(180,180,180,.5);'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var iframe = win.document.createElement('iframe');
iframe.setAttribute('src','resource://"id of your addon"-at-jetpack/data/custom_panel.html');
panel.appendChild(iframe);
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2-256, screen.availTop+760);
Thanks Noitidart for the help.
I'm having a problem getting my code to work when it's incororated into a live site. The fiddle works just fine, but when I include the identical code in a webpage, I can't get the function to load/work at all.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Drag and Drop Assignment</title>
<!doctype html>
<link rel="stylesheet" href="styles/style1.css"/>
<style>
.drop{
float: left;
width: 350px;
height: 400px;
border: 3px solid blue;
background-image: url("http://debsiepalmer.com/images/tardis 2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#right{float: left;
width: 350px;
height: 400px;
border: 3px solid red;
}
</style>
<script src="draganddrop.js" ></script>
<script src="http://code.jquery.com/jquery-2.0.2.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$ (init);
function image(id, image1) {
this.id = id;
this.image1 = image1;
}
$('#deal').click(function () {dealAll(
dealCard(randomCard()));
});
$(function() {
$( "#draggable" ).draggable({ containment: "#left"});
});
function init() {
$('.drop').droppable( {
drop: handleDropEvent
} );
$("img").draggable();
}
// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
var cardsDealt = new Array();
function dealAll(){
var z=0;
for (z=0;z<5;z++) {
cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
$img.src = "images/Companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';
document.body.appendChild($img);
$('#'+$img.id).draggable();
removeCard(i);
return $img;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}
function handleDropEvent( event, ui ) {
alert("Fantastic! You chose " + ui.draggable.attr("id") + " to be your companion.");
// Here I want the id of the dropped object
}
</script>
</head>
<body>
<div id="container" div style="width:750px; margin:0 auto;">
<div id="page_content" style="left: 0px; top: 0px; width: 750px" class="auto-style8">
<!--Begin Assignment 10 --->
<div id="left" class="drop">
<img id="tardis" ></img>
</div>
<input type="button" value="Get Companions" id="deal" />
<div id="content" style="left: 0px; top: 0px; width: 750px">
</div>
</div>
</div>
</body>
</html>
It's supposed to generate 5 images, one of which can be selected to be dropped onto the target and generate an alert with the id of the image being dropped. Like I said, it works just fine in the fiddle - and the code is identical on the web page, so I don't understand what I'm doing wrong.
fiddle: http://jsfiddle.net/reaglin/FUvT8/6/
I ordered some code...and for me it worked
// global variables
var cardsInDeck = [],
numberOfCardsInDeck = 5;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
//load "init" when document it's ready
$(document).on('ready',init);
function init() {
$( "#draggable" ).draggable({ containment: "#left"});
$('.drop').droppable( {drop: handleDropEvent});
}
$('#deal').click(function () {
dealAll();
});
$('#reset-pictures').click(function(){
$('img.drag').remove();
numberOfCardsInDeck = 5;
});
// deal 5 cards at once - works
function dealAll(){
// 5 cards max, no repeat cards
while(numberOfCardsInDeck){
var rand = randomCard();
dealCard(rand);
}
}
//deal cards - works
function dealCard(i) {
//create id, remove space id
var id_picture = (cardsInDeck[i] +'-'+i).replace(/\s/g, '');
//validate not exist image
if (!!$('img#'+id_picture).length) {
return;
}
var $img = $('<img/>', { src : "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg", id : id_picture, class : 'drag', 'data-info': cardsInDeck[i]
})
$('body').append($img);
$('img.drag').draggable();
numberOfCardsInDeck--;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * cardsInDeck.length);
}
// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
alert(ui.draggable.attr("data-info"));
}
DEMO
JSFinddle
Are you linking to JQuery correctly in the live version? Sometimes when moving from a development area to a live system the references mess up, you can find out if a reference is working or not by viewing the source code and entering in the link into the URL.
This is how you fix it: Take all the javascript (from $ (init) to the alert()) and place it at the bottom of the loaded page, inside the body, after all the elements. This ensures that the javascript knows what named elements you are talking about.
I would like to emphasise that this is not a tip for writing good javascript. The problem arises because it's bad javascript to begin with. Well written pages do not rely on the position of the code within the page, rather the opposite in fact.
Postscript: I literally did the following: I came here after googling "drag and drop"; I didn't fully read the actual question; I went to the jfiddle; I copied all the code for my own purposes; I couldn't get it to work; I fixed it (just trial and error really); I fixed the bug which is still present even on the jfiddle page; and then I came back here to find out what the original query had been!
The other bug is the fact that you can't drag the images of "Romana I", "Romana II" and "Sarah Jane". As the code makes the array values the id of the image elements, maybe others can instantly spot what causes that problem.