I am making a website in which people put in a twitter username. Now I want to load the twitterimage of the name that is put in. I have searched on the internet already but can't find a good easy way to implement this. Do i need to use some fancy twitter api or something? Any simple API's? (it is only for a simple site) or URL's with name as variable in it?
this works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function GetImage(){
var txtBox = document.getElementById("twit");
var imgTwitter = document.getElementById("imgTwitter");
imgTwitter.src = "http://api.twitter.com/1/users/profile_image/" + txtBox.value;
}
</script>
</head>
<body>
<input name="twit" id="twit" type="text">Get Image
<img id="imgTwitter" >
</body>
</html>
From this question:
https://stackoverflow.com/a/30322178/6539400
https://twitter.com/[screen_name]/profile_image?size=mini
https://twitter.com/[screen_name]/profile_image?size=normal
https://twitter.com/[screen_name]/profile_image?size=bigger
https://twitter.com/[screen_name]/profile_image?size=original
function ClickFunction() {
document.getElementById("content").innerHTML = "";
var frag = document.createDocumentFragment();
var uname = document.getElementById("name").value;
var SRCmini = "https://twitter.com/" + uname + "/profile_image?size=mini";
var SRCnormal = "https://twitter.com/" + uname + "/profile_image?size=normal";
var SRCbigger = "https://twitter.com/" + uname + "/profile_image?size=bigger";
var SRCoriginal = "https://twitter.com/" + uname + "/profile_image?size=original";
frag.appendChild(document.createTextNode(SRCmini));
frag.appendChild(document.createElement("br"));
var IMGmini = frag.appendChild(document.createElement("img"));
IMGmini.src = SRCmini;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCnormal));
frag.appendChild(document.createElement("br"));
var IMGnormal = frag.appendChild(document.createElement("img"));
IMGnormal.src = SRCnormal;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCbigger));
frag.appendChild(document.createElement("br"));
var IMGbigger = frag.appendChild(document.createElement("img"));
IMGbigger.src = SRCbigger;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCoriginal));
frag.appendChild(document.createElement("br"));
var IMGoriginal = frag.appendChild(document.createElement("img"));
IMGoriginal.src = SRCoriginal;
frag.appendChild(document.createElement("br"));
document.getElementById("content").appendChild(frag);
}
<input id="name" value="wikipedia" /><br />
<button onclick="ClickFunction()">Click here!</button><br /><br />
<div id="content"></div>
Related
I am a starter in coding in Googlesheets (google scripts). I want to create a google script to add a checkbox to the toolbar of the google sheet. Can anybody help me on this?
You cannot add a checkbox into the toolbar but you can create an HTML custom sidebar with checkboxes
For this, use Google Apps Script
Follow the guide for custom sidebar creation
Create an html file with checkboxes
Use google.script.run to communicate between serverside and client side of the code
Sample:
Code,gs
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Custom Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setTitle('My custom sidebar')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function setValue(checked) {
var value;
if(checked == true){
value = "number 1";
} else{
value = "number 2";
}
var ss = SpreadsheetApp.getActiveSpreadsheet();
var cell = ss.getActiveSheet().getActiveCell();
cell.setValue("You clicked the checkbox: " + value);
};
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input id="check" type="checkbox" >Click me <br>
<input type="checkbox" > Or me <br>
<input type="button" value="set value" onclick="evaluateInput()">
</div>
<script>
function evaluateInput() {
var checkedFirst = document.getElementById("check").checked;
google.script.run
.withFailureHandler(onFailure)
.setValue(checkedFirst);
};
function onFailure(error) {
console.log(error.message);
};
</script>
</body>
</html>
I am having a wierd problem with this code... It is working fine on my PC, but on my iPhone the time is +2 hours... Can someone please have a look at my code example here...
I have been trying for hours to get it working, but everything I try seems to end up in the same way...
<html lang="en">
<head>
<title>Value is right on my PC, but not on my iPhone...?</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript">
window.onload = function () { date() }, setInterval(function () { date() }, 1000);
window.onload = function () { calculateTimlon() }, setInterval(function () { calculateTimlon() }, 1000);
var secondsDifference;
var minutesDifference;
var hoursDifference;
var totalTimeDifference;
var startTime;
var timeRightNow;
function date() {
timeRightNow = new Date();
$('#MyDateInput').datebox({ 'overrideDateFormat': '%A %d-%B-%Y' });
$('#MyTimeInput').datebox({ 'overrideDateFormat': '%H:%M:%S' });
startTime = new Date($('#MyDateInput').datebox('callFormat', '%Y-%m-%d', $('#MyDateInput').datebox('getTheDate')) + "T" + $('#MyTimeInput').datebox('callFormat', '%H:%M:%S', $('#MyTimeInput').datebox('getTheDate')));
totalTimeDifference = Math.abs(new Date(timeRightNow) - new Date(startTime));
secondsDifference = Math.floor(totalTimeDifference / 1000);
minutesDifference = Math.floor(secondsDifference / 60);
secondsDifference = secondsDifference % 60;
hoursDifference = Math.floor(minutesDifference / 60);
minutesDifference = minutesDifference % 60;
$("#hoursValue").html(hoursDifference);
$("#minutesValue").html(minutesDifference);
$("#secondsValue").html(secondsDifference);
$("#MyTimeValue").html(startTime);
$("#timeRightNowValue").html(timeRightNow);
}
function calculateTimlon() {
var timlon = 100;
var skatt = 0;
var semersat = 0;
var lonForeSkatt = ((semersat / 100) + 1) * timlon;
var timskatt = (lonForeSkatt * (skatt / 100));
var lonEfterSkatt = lonForeSkatt - timskatt;
var minutlonEfterSkatt = lonEfterSkatt / 60;
var sekundlonEfterSkatt = minutlonEfterSkatt / 60;
var minutlonForeSkatt = lonForeSkatt / 60;
var sekundlonForeSkatt = minutlonForeSkatt / 60;
var sekundCounterEfterSkatt = (sekundlonEfterSkatt * totalTimeDifference) / 1000;
var krEarnedFromStartEfterSkatt = sekundCounterEfterSkatt.toFixed(2);
var sekundCounterForeSkatt = (sekundlonForeSkatt * totalTimeDifference) / 1000;
var krEarnedFromStartForeSkatt = sekundCounterForeSkatt.toFixed(2);
if (krEarnedFromStartEfterSkatt >= 0) {
$("#earnedFromStartValue").html(krEarnedFromStartEfterSkatt + "kr");
}
}
</script>
</head>
<body>
<div data-role="page" id="MyPage">
<div data-role="content" id="MyPageContent" name="MyPageContent" data-position="fixed">
<div class="ui-field-contain">
<div id="MyStartTime">
<input name="MyDateInput" id="MyDateInput" type="date" data-role="datebox" data-options='{"mode": "datebox", "overrideHeaderFormat":"%A %d-%B-%Y","useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24, "closeCallback": "$(\"#MyTimeInput\").datebox(\"open\");"}' />
<input name="MyTimeInput" id="MyTimeInput" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24}' />
</div>
</div>
<div id="timeRightNowText">My choosen startTime: <div id="MyTimeValue"></div></div>
<div id="hoursText">Hours: <div id="hoursValue"></div></div>
<div id="minutesText">Minutes: <div id="minutesValue"></div></div>
<div id="secondsText">Seconds: <div id="secondsValue"></div></div>
<div id="timeRightNowText">Time right now: <div id="timeRightNowValue"></div></div>
<div class="ui-block-b" id="valueFromStartTime">This value should start ticking from 0 if the time right now is the same as the time i choose above..<div id="earnedFromStartValue"></div></div>
</div>
</div>
</body>
</html>
I did change my timeRightNow like the example below, and now it's working! It seems like the iPhone needed both the startTime and timeRightNow to look exactly the same way to make the right calculation. I did also add + "+02:00" at the end of my startTime, to make the right Time Zone calculation.
var datetimeRightNow = new Date();
timeRightNow = new Date(datetimeRightNow.getFullYear() + '-' + (('' + (datetimeRightNow.getMonth() + 1)).length < 2 ? '0' : '') + (datetimeRightNow.getMonth() + 1) + '-' + (('' + datetimeRightNow.getDate()).length < 2 ? '0' : '') + datetimeRightNow.getDate() + "T" + (('' + datetimeRightNow.getHours()).length < 2 ? '0' : '') + datetimeRightNow.getHours() + ":" + (('' + datetimeRightNow.getMinutes()).length < 2 ? '0' : '') + datetimeRightNow.getMinutes() + ":" + (('' + datetimeRightNow.getSeconds()).length < 2 ? '0' : '') + datetimeRightNow.getSeconds() + "+02:00");
Hello I am attending the create and retrieve the data using HTML 5 Web sql Database.Its functionality working correctly i expected.
When i showing the results in next page in list view it showing correctly but when i refresh the page list view not showing only go to previous page then come this page its working and also i added a delete button in list view when i click the delete button records are deleted.but the list not remove from the list view only go to previous then come this page only removed. How to fix this.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clientside Database</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role=page id="home">
<div data-role=header>
<h1>ClientSide Database</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="firstname">FirstName:</label>
<input type="text" name="firstname" id="firstname" value="" class="required" />
</li>
<li data-role="fieldcontain">
<label for="lastname">LastName:</label>
<input type="text" name="lastname" id="lastname" value="" class="required" />
</li>
<li data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" class="required" />
</li>
<li data-role="fieldcontain">
<label for="date">Date of Birth:</label>
<input type="date" name="date" id="date" value="" class="required" />
</li>
<li >
<input value = "SUBMIT" type = "button" name="submit" id="submit" />
<input type="button" value="view" id="view"/>
</li>
</ul>
</div><!-- /content -->
</div>
<div data-role="page" id="dataview" data-add-back-btn=true>
<div data-role="header">
<h1>List of customers</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var db = openDatabase("MyDatabase","1.0","My ClientSide Database",1000000);
$("#submit").bind('click',function(e){
db.transaction(function(transaction){
var sql = "CREATE TABLE IF NOT EXISTS clientrecords " +
" (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
"fname VARCHAR(100) NOT NULL, " +
"lname VARCHAR(100) NOT NULL," +
"email VARCHAR(100) NOT NULL ," +
"date VARCHAR(100) NOT NULL)"
transaction.executeSql (sql, undefined, function ()
{
console.log("Table Created Successfully");
}, error);
});
var lname = $("#firstname").val ();
var fname = $("#lastname").val ();
var email =$("#email").val();
var date =$("#date").val();
db.transaction (function (transaction)
{
var sql = "INSERT INTO clientrecords (lname, fname,email,date) VALUES (?, ?, ?, ?)";
transaction.executeSql (sql, [lname, fname,email,date], function ()
{
console.log("Data Inserted Successfully");
}, error);
});
});
$("#view").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var sql = "SELECT * FROM clientrecords";
transaction.executeSql (sql, undefined,
function (transaction, result)
{
var html = "<ul data-icon=false data-split-icon=delete data-split-theme=d>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var lname = row.lname;
var fname = row.fname;
var email = row.email;
var date = row.date;
var id = row.id;
html += "<li " + "id=" + id + ">";
html +='<h2>' + lname + " " + fname + '</h2><p>'+ email +'</p> <div class="ui-li-aside"><p>'+date+'</p></div> Delete';
html +='</li>';
}
}
else
{
html += "<li> No customer </li>";
}
html += "</ul>";
$("#dataview").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#dataview div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
$(".delete").bind ("swiperight", function (event)
{
var listitem = $(this).parent( "li" ).attr ("id");
if (!listitem) return;
$(listitem).remove ();
db.transaction (function (transaction)
{
var sql = "DELETE FROM clientrecords WHERE id=?";
transaction.executeSql (sql, [id], function ()
{
console.log("Employee Records deleted");
}, error);
});
});
});
$.mobile.changePage ($("#dataview"));
}, error);
});
});
function ok ()
{
}
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
$('#your_ul_id').listview('refresh');
Just add this to your deleting event. You don't have it.
Remember, if you append or remove something, you use the above code.
If you just want to refresh it without appending, use the following:
$('#your_ul_id').listview();
i want to print a page with tinymce editor and its text.
here is my code..
<script type="text/javascript">
tinyMceEditor("StaffResponsibility,Encourager,Bonus");
function printPage(printpage1, printpage2)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr1 = document.getElementById(printpage1).innerHTML;
var newstr2 = document.getElementById(printpage2).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr1+newstr2+footstr;
window.print();
document.body.innerHTML = oldstr;
location.reload();
return false;
}
</script>
<div style="float: right"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div id="div_print">
<?=$this->form->StaffResponsibility?>
<div class="clear10"></div>
<?=$this->form->Encourager?>
<div class="clear10"></div>
<?=$this->form->Bonus?>
<div class="clear10"></div>
</div>
when i click the print icon i should print tinymce editor with text.but here i am not getting editors and its text..
regards
uday
You will need to execute the following on click
onclick="tinymce.triggerSave(); $( '#'+tinymce.editors.get(0).id) ).css('display','block');printPage('pnlMainHeader','div_print');"
I am setting a click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). This approach works fine if I use a string or an integer as the function parameter but if I try to input an instance of an object (as illustrated below) it doesn't work. Any advice on what I may be doing wrong would be greatly appreciated.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
did you tryied with the .live() function
when you add dynamically elements to the dom they dont have events so I suggest you to
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
var temp = "'" + testInstance + "'";
html += '<li>click test1</li>';
}
/*** jQuery code ****/
$(".new").live("click",function(){
// your code here
aler("it working");
});
I usually do this when a button dont work for me hope that works for you!
i think it works
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
//var temp = "'" + testInstance+ "'";
/// Chaged into
var temp = "'" + testInstance.param1 + "'";
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
I think you can achive your oal using this ..
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
// Create global object array ..
var testInstanc = [];
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
// var temp = "'" + testInstance + "'";
// set array to object
testInstanc[i] = maketestObject("test param" + i);
pass clickhandler function to your array index
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(i) {
// access object attribute using testInstance array
alert(testInstanc[i].param1);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
</html>