been searching without finding a solution for me,
I need to be able to send and recive current tab URL when the Chrome extension is shown:
this is My popup.html:
<html>
<head>
<style>
div, td, th { color: black; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
return tab.url;
});
}
</script>
<script src="http://keepyourlinks.com/API/public/chrome.js"></script>
</head>
<body style="width: 650px;height:600px;margin:0px;paddin:0px;width:100%;">
<span class="keeper">keep</span>
</body>
</html>
An then, in my webiste, on a chrome.js file i try:
$("body").ready(function(){
var url = getURL_please();
$(".keeper").click(function(event) {
event.preventDefault();
window.open("http://keepyourlinks.com/API/public/compartir_link.php?url="+url,'about to keep', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=650,height=600');
});
});
But URL is allways: Undefined
Any idea what i'm doing wrong?
Thanks a lot!
HI Toni,
Google Chrome Extensions use an Asynchronous API,
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
return tab.url;
});
}
The above will always return null. If you want to make it work correctly.
function getURL_please(){
chrome.tabs.getSelected(null, function(tab) {
var url = tab.url;
// Do what you want here.
});
}
You would need to the windows open after you you fetch the url. One question though, what do you mean "in your website"? You cannot run Chrome Extension JavaScript directly on your website, so I assume via "Content Script" (most likely, just making sure)?
If your using a Content Script, why would you need to use the Extension API? You can just use window.location.href
Related
I have two beginner questions about using KaTeX auto-renderer. Both are related to the code below.
My first question: Do I need to use document.body in renderMathInElement? Can it be called only on the paragraph with id formula? If yes, how? I tried several ways, but nothing worked. Probably I just don't know the correct syntax.
My second question: After pressing the button, the changed text is not rendered. How and where shall I call renderMathInElement again to look for the new formulas in the page? Again, I tried several ways (including calling it right after changing the text), nothing worked.
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// ...options...
});
});
</script>
</head>
<body>
<p id="formula">Consider the circle with equation \(x^2+y^2=25\).</p>
<button onclick="myFunction()">Change text</button>
<script>
function myFunction() {
var x = document.getElementById("formula");
x.innerHTML = "Find the definite integral \(\int_0^1 xdx.\)";
}
</script>
</body>
</html>
Yes, you can call renderMathInElement for any DOM element, e.g. the one you get for document.getElementById("formula").
Calling renderMathInElement(x) essentially does what you want. Except that you also need to escape the backslashes in your JavaScript string literal by doubling them.
Taken together you get something like this:
let opts = {
// ...options...
}
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.getElementById("formula"), opts);
});
function myFunction() {
var x = document.getElementById("formula");
x.innerHTML = "Find the definite integral \\(\\int_0^1 xdx.\\)";
renderMathInElement(x, opts);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<p id="formula">Consider the circle with equation \(x^2+y^2=25\).</p>
<button onclick="myFunction()">Change text</button>
I am trying to use video.js(gitHub link - https://github.com/videojs/video.js ) plugin in my jquery mobile project to get custom video player, I followed all the documentation from this site (http://videojs.com/), but due to some reasons I am getting following errors -
The element or ID supplied is not valid. (videojs).
this[a] is not a function.
My code -
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Js/jquery.js"></script>
<script src="Js/jquery.signalR-2.1.2.min.js"></script>
<script src="Js/jquery.mobile-1.4.5.js"></script>
<link href="mcss/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script type="text/javascript">
videojs("Mobile_VIDEO_1").ready(function () {
var vid = this;
vid.on("ended", function () {
alert("is");
$("#videoListXYZ").css("display", "block");
});
});
</script>
</head>
<body>
<div data-role="page" id="p-forget-password">
<div data-role="main" class="ui-content ui-body-cf ui-responsive">
<!-- inserted dyanamically using handlebars template "http://handlebarsjs.com"/ -->
<video id="Mobile_VIDEO_1" class="video-js vjs-default-skin" controls data-id="{{VideoId}}" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "360" } } }' autoplay="autoplay" width="340" height="250">
<source src="{{Path}}" type="video/mp4" data-res="360" />
</video>
</div>
</div>
</body>
Please help me to find out what I am doing wrong.
-I tried using putting videojs(xyx).ready(....) inside document.ready
- I also tried sending my script at the bottom of my page as suggested by (http://help.videojs.com/discussions/problems/985-api-ready-call-fails), but it still not working
After many hit and trial, I realized that my event is firing much before the DOM initialization, so I searched for how to check when the whole page is fully loaded and I come across this document (https://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/) from this link I used this
$(window).bind("load", function() {
// code here
});
to check if my page is fully loaded or not . my final solution is mentioned below , if any of you come across a better solution then please share that to help others.
$(window).bind("load", function () {
var videoPath = $('#sv1').attr('src'); //to get the path of video
if (videoPath != "" && videoPath != null) { //checking for non-empty path
console.log(videoPath);
videojs('MY_VIDEO_1', { "plugins": { "resolutionSelector": { "default_res": "360" } } }, function () {
console.log('Good to go!');
this.play();
this.on('ended', function () {
console.log('awww...over so soon?');
$("#videoList").css("display", "block");
});
});
$("#replay").click(function () {
var myPlayer = videojs("MY_VIDEO_1");
myPlayer.play();
});
}
});
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
I have implemented plupload using a ColdFusion backend script (available at https://gist.github.com/1116037).
The url attribute in the uploading page is url : '../upload.cfc?method=upload',
This simply calls a function within the cfc script. It works fine. This script also creates a variable called 'response' to hold information uploaded files.
The problem I am having is accessing the information held in the 'response' variable.
I would like to display that information in a table after the all the files have been uploaded to the server.
I am using the queue_widget for my needs’ think that an event (onComplete) needs to be triggered to call a function to process the information in variable, but I don't know how to do this.
I need to access the information held in the 'response' variable, preferably in ColdFusion code. Has anyone managed to get plupload working with ColdFusion yet?
Any help, guidance or coding would be appreciated.
Here is the full code I have used:
This is the main page - queue_widget.cfm
<!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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Queue widget example</title>
<link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/plupload.js"></script>
<script type="text/javascript" src="../../js/plupload.flash.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
</head>
<body>
<h1>Queue widget example</h1>
<p>Shows the jQuery Plupload Queue widget and under different runtimes.</p>
<div style="float: left; margin-right: 20px">
<h3>Flash runtime</h3>
<div id="flash_uploader" style="width: 700px;">Your browser does not have Flash installed!</div>
</div>
<br style="clear: both" />
<cfoutput><cfset mnum=6></cfoutput>
<script type="text/javascript">
$(function() {
// Setup flash version
$("#flash_uploader").pluploadQueue({
// General settings
runtimes : 'flash',
url : '../upload.cfc?method=upload',
max_file_size : '1mb',
max_file_count: <cfoutput>#mnum#</cfoutput>, // You can limit the num of files that can be uploaded by manipulating the mnum variable above
unique_names : false,
multiple_queues : true,
multi_selection: true,
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
],
init : {
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if (up.files.length > <cfoutput>#mnum#</cfoutput>) {
up.removeFile(file);
}
});
if (up.files.length >= <cfoutput>#mnum#</cfoutput>) {
$('#pickfiles').hide('slow');
}
},
FilesRemoved: function(up, files) {
if (up.files.length < 1) {
$('#pickfiles').fadeIn('slow');
}
}
},
resize : {width : 300, height : 10000, quality : 90}, // forces images to be resized to a width of 300px if wider than 300px
preinit: attachCallbacks,
UploadComplete: function(up, file, response) {
if ($("#result").length > 0){
$("#results").prepend(info.response);
} else {
$("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
}
},
flash_swf_url : '../../js/plupload.flash.swf'
});
});
// Where should we go after upload
function attachCallbacks(Uploader){
Uploader.bind('FileUploaded', function(Up, File, response){
function IsJson(response) {
alert('Response from server: ' + response.file); // for testing only
counter++
var newRow = '<tr><td><input type="hidden" name="file_'+counter+'" value="'+response.file+'">'
newRow += 'Label the file: '+response.file+' <input type="text" name="filename_'+counter+'"></td></tr>'
$("#detail").append(newRow)
}});
};
</script>
<div id="results"></div>
<table id="detail">
</table>
<cfif IsDefined('response')><cfdump var="#response#"></cfif>
</body>
</html>
This the backend processing page - upload.cfc
<cfcomponent>
<cffunction name="upload" access="remote" returntype="struct" returnformat="json" output="false">
<cfscript>
var uploadDir = expandPath('/uploads/'); // should be a temp directory that you clear periodically to flush orphaned files
var uploadFile = uploadDir & arguments.NAME;
var response = {'result' = arguments.NAME, 'id' = 0};
var result = {};
</cfscript>
<!--- save file data from multi-part form.FILE --->
<cffile action="upload" result="result" filefield="FILE" destination="#uploadFile#" nameconflict="overwrite"/>
<cfscript>
// Example: you can return uploaded file data to client
response['size'] = result.fileSize;
response['type'] = result.contentType;
response['saved'] = result.fileWasSaved;
return response;
</cfscript>
</cffunction>
</cfcomponent>
You can try the above example here: [url] www.turn2cash.co.uk/plupload/examples/jquery/queue_widget.cfm [/url]
As mentioned above, the script works well with uploading (in this case) upto 6 images as determined by the mnum variable. What I need help with is with how to access the uploaded files (with page refresh) and be able to manipulate them.
I have setup an example (using cffileupload) of what I am after here [url] www turn2cash.co.uk/a/index.cfm [/url]
Although this works fine, it requires a page refresh, which is what I am trying to avoid.
Please provide any help you can.
Added 7 september 2012
I have tried both methods suggested by Miguel but did not achieve any positive outcomes. They actually caused the UI not to sow at all. However I found this and tried it:
preinit: attachCallbacks,
UploadComplete: function(up, file, response) {
if ($("#result").length > 0){
$("#results").prepend(info.response);
} else {
$("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
}
},
flash_swf_url : '../../js/plupload.flash.swf'
});
});
// Where should we go after upload
function attachCallbacks(Uploader){
Uploader.bind('FileUploaded', function(Up, File, Response){
alert('Response from server: ' + Response.response);
});
};
</script>
I now get an alert displaying:
Response from server: {"saved":true,"result":"home.png","id":"0","size":"5988","type":"image"}
This at least prooves that the cfc script is working and the 'response' varialable is being returned. I still have no idea how to make use of this information as I have no knowledge of jquery, ajax or javascript. Please help if you can.
The link that I posted before has the example code. Sorry to post this as an answer but since I have no rep I cannot comment.
I think part of your confusion is in the request processing. You have this line of code at the bottom of your example.
<cfif IsDefined('response')><cfdump var="#response#"></cfif>
That will never fire because the coldfusion page is processed before you make the javascript ajax call to the server for the file upload. You will need to handle the response in javascript.
Are you seeing this alert from the attachCallbacks function?
alert('Response from server: ' + response.file); // for testing only
I'm using jQuery UI plugin for drag'n drop my object, But I have a problem.
My html Source is like this:
<html>
<body>
<div id="firstDiv">some thing is here</div>
</body>
</html>
Now, I want to draggable the above div, using helper. My code is this:
<script type="text/javascript">
$(document).ready(function(){
$("#firsstDiv").draggable({helper:anImage});
});
function anImage() {
return '<img src="~/myImage.png" alt="" />';
}
</script>
Ok, this code is work as well, but I want to set image address, But when i change my function to have a parameter, that doesnt work, O_o
My new code is this:
<script type="text/javascript">
$(document).ready(function(){
$("#firsstDiv").draggable({helper:anImage($(this).text())});
});
function anImage(address) {
return '<img src="'+address+'" alt="" />';
}
</script>
but not working.
Thanks for your helps.
OK - you can't pass a parameter into your helper function. I'm pretty sure that's the problem.
The way around this would be to create a setup function and then call your anImage function from there:
$(function(){
$("#firsstDiv").draggable({
helper: setup
});
});
// function to setup draggable DOM elements
function setup() {
anImage("~/myImage.png");
// ... do other setup things here too
}
function anImage(imageAddress) {
return '<img src="'+imageAddress+'" alt="" />';
}
Unless of course you are trying to call anImage with a different image address for each draggable element, in which case the above will not work. But you shouldn't be using the helper function to do this anyway as I'm pretty sure it's just meant to contain code to setup all of the draggable elements you are creating.
Hope this helps,
James