I am trying to pull my latest tweet into a variable in javascript, then use growlUI() to display this in a notification in jQuery.
Currently, I have pulled my tweet using PHP into a variable in javascript called test. I need to adjust the following jQuery code to use "test" instead of "Hello".
Current code works:
$.growlUI('Growl Notification','Hello');
Attempted code does not work:
$.growlUI('Growl Notification', $(test));
My Question
How do I use the variable test, which is a javascript variable, as a jQuery attribute?
Many thanks!
My source code:
<html>
<head>
<!-- Styling for growlUI -->
<style type="text/css">
div.growlUI { background: url(check48.png) no-repeat 10px 10px }
div.growlUI h1, div.growlUI h2 {
color: white; padding: 5px 5px 5px 75px; text-align: left
}
</style>
<!-- Import jquery from online -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- Import blockUI -->
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type = "text/javascript">
<!-- Screenscrape using PHP, put into javascript variable 'test' -->
<?php
$url = "http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=XXXXXXXXXX";
$raw = file_get_contents($url);
$newlines = array("\t","\n","\r","\x20\x20","\0","\x0B");
$content = str_replace($newlines, "", html_entity_decode($raw));
$start = strpos($content,'<text>');
$end = strpos($content,'</text>',$start);
$latesttweet = substr($content,$start,$end-$start);
echo "var test = ".$latesttweet.";\n";
?>
</script>
</head>
<!-- Here I'm attempting to use test variable in second half of growlUI parameters -->
<body onLoad="$.growlUI('Latest Update',test); ">
</body>
</html>
Not sure if this is your problem, but it looks like your js string variable is not quoted:
echo "var test = ".$latesttweet.";\n";
Should be:
echo "var test = '".$latesttweet."';\n";
You should probably escape .$latesttweet to handle apostrophes.
If you have a variable test that is a string tweet, and you want to pass that string into your growlUI function...just do it:
var test = "my string blah";
$.growlUI('Growl Notification', test);
Related
I'm trying to create a page where I can force updates to the client without a page refresh. So I Googled and Googled and Googled and ended up here: http://www.developerdrive.com/2012/03/pushing-updates-to-the-web-page-with-html5-server-sent-events/ - it was almost a success!
I managed to adapt the code enough so that I can include a page instead of using the example rand() and thus, whenever I modify that page and upload it to my FTP, the page updates. However, I cannot figure out how to output a whole file - only the first line of that file (maindiv.php). I've come to understand that it has to do with using "file_get_contents". How can I achieve a full output of "maindiv.php" here?
My pages codes are:
index.php:
<html>
<head>
<style type="text/css">
#serverData
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:green;
}
</style>
</head>
<body>
<div id="serverData">Here is where the server sent data will appear
</body>
<script type="text/javascript">
//check for browser support
if(typeof(EventSource)!=="undefined") {
//create an object, passing it the name and location of the server side script
var eSource = new EventSource("send_sse.php");
//detect message receipt
eSource.onmessage = function(event) {
//write the received data to the page
document.getElementById("serverData").innerHTML = event.data;
};
}
else {
document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
}
</script>
</html>
send_sse.php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$maindiv = file_get_contents("maindiv.php"); //this does not read more than one line
echo "data: $maindiv\n\n";
ob_flush();
?>
maindiv.php:
<div style="background:blue; display:inline-block; width:300px; height:500px;color:white;">Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
</div>
i have a code:
<body <?php if( in_category( 11446 ) ) { echo "style=\"background-image: url('my-background-url-of-image');background-repeat:repeat;\" onclick=\"window.open('http://www.domain.com');\""; } ?> >
This code works only until page loads fully than something happens and it doesn't work i assume from inspect element that onclick function changes and i'm failing to find what part tricks that.
What this code does is it sets unique body background that are in specific category and background is clickable.
But because of some javascript error it doesn't work when page loads full so maybe somebody could explain me how to remove attr on Javascript and than add my with domain i want. Or maybe give example how to do alternative code just with href.
Thank you.
I'm assuming you are building a Wordpress template and the background image to be used is based upon the category of a Wordpress post.
This uses no Javascript. Instead, what it does is create the CSS declaration block inside the head tag of the HTML5 document on the fly. It does no inline CSS for the body tag.
<?php
// ====================================================
// Solution #1
// Background Image Only
// ====================================================
function GetThisWordpressPostCategory() {
// Do post category to filename mapping here
return("cars");
}
function in_category() {
// Just a dummy to simulate Wordpress in_category call
return(true);
}
function BodyBackground($category) {
$bodyCss = "";
if (in_category($category)) {
$bodyCss =<<<CSS
<style type="text/css">
body {
background-image: url('{$category}.jpg');
}
</style>
CSS;
}
return($bodyCss);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Category background</title>
<?php
$category = GetThisWordpressPostCategory();
echo BodyBackground($category);
?>
</head>
<body>
</body>
</html>
<?php
// ====================================================
// Solution: 2
// Clickable div spanning viewport
// ====================================================
function GetThisWordpressPostCategory() {
// Do post category to filename mapping here
return("cars");
}
function in_category() {
// Just a dummy to simulate Wordpress in_category call
return(true);
}
function PageCss($category) {
$pageCss = "";
if (in_category($category)) {
$pageCss =<<<CSS
<style type="text/css">
html, body, #page {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url('{$category}.jpg');
}
#page-anchor {
display: block;
width: 100%;
height: 100%;
}
</style>
CSS;
}
return($pageCss);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Category background</title>
<?php echo PageCss(GetThisWordpressPostCategory()); ?>
</head>
<body>
<div id="page">
<a id="page-anchor" href="http://www.google.com"></a>
</div>
</body>
</html>
i have grid and print icon..if i click print icon i should print the grid.but grid lines are not showing in the printout.
What should i do?
Here is my code
<div style="float: right" id="hide_div"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div class="clear10"></div>
<div class="pnlMainHeader" id="pnlMainHeader" style="display: none; ">
//some xyz code
</div>
<div class="clear10"></div>
<div id="div_print">
//grid code
<?=$this->TemplateRoles?>
</div>
and onclick printPage code in .js file
function printPage(printpage1, printpage2)
{
var hideDiv = document.getElementById('hide_div')
hideDiv.style.display = 'none';
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;
}
please help me..
What if you were to add another css file to the header that will force the borders to print? Something like this...
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Then inside the file, you can use that class or selector with something like this:
.gridClass /*(or "td" or whatever it is called)*/ { border:1px solid #000;}
Whatever is named in the print.css will only appear when printed because you specify the medium. I hope that helps.
i have a page like:
and i need to print to pdf ( or physical printer directly ) the content of yellow div.
I need to print the div like you see.. with css style too.. how can i do it? i see in other post that they print only text content..
Can someone help me?
You can assign different CSS properies for different device types.
For example:
<style type="text/css">
/* all devices */
#media all
{
#content { display:block;}
}
/* printer specific CSS */
#media print
{
#content { display:none;}
#content div#yellow { display:block;}
}
</style>
To print a page you can use javascript window.print() method:
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
Use the following code:
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
</script>
Print
I am trying to load WalkScore Map into one of div's on the page. For some reason my code works only if I alert() something right after $.get() method. Have no idea why.
Can someone suggest something? Thanks.
<html>
<head>
<title>jQuery - Ajax dynamic content loading</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadWalkScore()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
alert("hello");
}
</script>
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
<script type="text/javascript">
var ws_lat = "40.710318";
var ws_lon = "-74.016553";
var ws_width = "630";
loadWalkScore();
</script>
</div>
Try using something like this, to make the call when the DOM is ready.
<script type="text/javascript">
$(function()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
});
</script>
Put this block after your first <script> element.
For me is working. I had to change the wsid for my domain. I've checked the get request using Firebug and I get a javascript as a response. At the begining I was getting an error because I was using you wsid and it seems that for each calling sides they generate a new one. Try to see if your wsid is the correct one.