Display text after empty RSS feed - javascript

I am new to php and hoping someone can help.
I have been able to get an RSS feed up and running by pulling different code from over the internet.
What I am trying to achieve is, if the RSS feed is empty, I would like it to display a message "There are no current warnings"
If there are items in the RSS feed, I would like it to display the Item, along with a div below that is set to hidden.
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<title>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</title></head>
<link type="text/css" href="rss-style.css" rel="stylesheet">
</head>
<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "#0000FF";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#FA000C")? "#0000FF" : "#FA000C";
blink.style.color = color;
}
</script>
<body bgcolor="#999">
<h1>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</h1>
<hr>
<br>
<!-- display current weather warnings -->
<fieldset class="rsslib">
<?php
require_once("rsslib.php");
$url = "http://www.bom.gov.au/fwo/IDZ00056.warnings_qld.xml";
echo RSS_Display($url, 3, false, true)
//if there is no warning, i would like to display text saying "There are no current warnings"
// if there are warnings, I would like it to display the RSS, and also display the below wrapper blinking text.
?>
</fieldset>
<!---------------------------- echo "There are no current weather warnings" ---------------------------------->
<!-- this is where I put my blinking text, this is not currently set to only display when there is a warning-->
<div id='wrapper' style="display: none">
<div id="blink">
Current Weather Warning!
</div>
<div id="direction">
Please go to www.bom.gov.au for more details.
</div>
</div>
</body>
</html>
Any help would be much appreciated, I can copy in the rsslib.php if need be??

When you call RSS_Display, instead of displaying it immediately, store its return value in a variable. Then you can test whether it's an empty string (nothing to display) or not, and act accordingly:
$rss = RSS_Display($url, 3, false, true);
if ($rss == '')
{
// nothing shown, do whatever you want
}
else
{
// something to display
echo $rss;
// you can add other stuff here
}

Related

checkbox with javascript magic attached does not uncheck

I have a script where I use checkboxes and javascript to display additional items if the checkboxes are checked.
This seems to be working just fine most of the time.
There is one checkbox however that is giving problems.
I assume because of the javascript magic associated with it.
When checking it and then unchecking it, the checkbox always returns isset after post.
Never checking the checkbox and submitting returns not set as it should.
Checking and submitting returns checked as it should
checking, unchecking and submitting returns ... checked!
I have set up an example on http://vampke.uphero.com/tst.php
Here is the code:
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['se_currentitem'])) echo "CHECKBOX = ISSET";
else echo "CHECKBOX = NOT SET";
}
echo <<< EOD
<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.hiddenDiv {display: none;}
.visibleDiv{display: block;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
var currentitem = 0;
function toggle_currentitem(){
mydiv = document.getElementById("currentitemcontainer");
if (document.getElementById('se_currentitem').checked){
mydiv.className = "visibleDiv";
if(currentitem==0){
addcurrentitem();
}
}
else {
mydiv.className = "hiddenDiv";
}
}
function addcurrentitem(){
currentitem++;
var newitem = document.createElement('div');
newitem.id = currentitem;
newitem.innerHTML= "<p><strong><em>new item</em></strong><br /><label>select a number:</label><select name='se_currentitem[]'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></p>";
document.getElementById('currentitem').appendChild(newitem);
}
//-->
</script>
<form action ="" method="post">
<input type="checkbox" id="se_currentitem" name="se_currentitem" value="1" onchange="toggle_currentitem()" /><label for="se_currentitem">click the checkbox to activate the items</label> <br />
<div id="currentitemcontainer" class="hiddenDiv">
<div id="currentitem"></div>
<a id='addnewcurrent' onclick='addcurrentitem()'>add item</a>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
does anyone know what's going on?
The checkbox is named se_currentitem and the select menu is named se_currentitem[]. PHP's $_POST array treats these as the same.
When you check the box, you create the select menu.
When you uncheck the box, you hide the select menu, but it remains in the DOM, and is submitted by the browser. Notice in the Network inspector (or tcpflow, etc.). that the browser submits both se_currentitem and se_currentitem[].
You should rename the checkbox so it is not called se_currentitem (or rename the select menu so it is not called se_currentitem[]).

HTML Form Questions / Console Log

console.log(value); does not log anything but the number on the left is incrimented everyime i click and it indicates that the console.log() call is made, just not showing what I put into it.
Also, a side question is how could I do this if the javascript is in a different file? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Star Delete</title>
<!--<script type="text/javascript" src="StarDelete.js"></script>-->
</head>
<body>OKAY DELETE STAR YES ;D!
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
<script type ="text/javascript">
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
//value = document.getElementById("formValueId").value;
button.onclick = function() {
console.log(value);
}
</script>
</body>
</html>
http://jsfiddle.net/3wjRJ/1/
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
Here you go, the issue was that you were declaring the value variable when the javascript was first loaded, therefore it was always blank.

JQuery .attr("title") undefined

Solved but the answer that contained a key debugging suggestion was deleted by author. Consider case closed.
This should be really simple, but for some reason I just cannot figure it out. I need to get the value of a div's title attribute, and the jQuery code I have is:
var name = $('#stg'+this.id).attr('title');
and the div in the relevant HTML source code is:
<div class="stage" id="stg32432432" title="Name - desc">...</div>
For some odd reason, request for attr("title") keeps returning undefined, even though attr("id") and attr("class") all return expected values with no issues. What am I missing?
Edit: I tried debugging it with a trick suggested in a (now deleted) reply:
var name = $('#stg'+this.id)[0].outerHTML;
and lo and behold, it shows:
<div class="stage" id="stg32432432">...</div>
Something ate my title! Everything else is exactly as I expected, but the title is missing. Too bad I cannot mark that reply as correct, as I think from here on I can trace where the attributes gets annihilated.
Update: it turned out that a third party library used for displaying titles as fancy tooltips was stripping the titles as it processed them. Mystery resolved.
Thanks to 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>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[class=stage][id^=stg]').live('mouseover', function () {
var name = $(this).attr('title');
$('#result').html('<h1>This ddiv title is: ' + name + '</h1>');
});
});
</script>
</head>
<body>
<span id="result"></span>
<div class="stage" id="stg32432432" title="Name - desc1">
1...
</div>
<br />
<div class="stage" id="stg32432433" title="Name - desc2">
2...
</div>
<br />
<div class="stage" id="stg32432434" title="Name - desc3">
3...
</div>
<br />
<div class="stage" id="stg32432435" title="Name - desc4">
4...
</div>
</body>
</html>

Overlay with a DIV dynamic data in table format via javascript

I'm trying to display data in a table format. The table however needs to be dynamic, so it will accommodate more or less rows, depending on the data list shown. I would love to do it with Raphael.js, so I can mess with effects, but plain Jane is good enough now. An example with two rows and two columns will suffice.
Now, I know how to create a static table in HTML inside a div, but I need this to overlay an existing page with JavaScript.
All I was able to do so far is this
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING CODE</title>
<script language="JavaScript" type="text/javascript">
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
</script>
</head>
<body>
<a class="linqs" href="javascript:routeIt('Hello','Meeting') "><span title="Make comments about the Meeting...">Meetings</span></a>
<a class="linqs" href="javascript:routeIt('Tzigane','Resolution')"><span title="Make comments about your Portfolio...">Portfolio</span></a>
<a class="linqs2" href="javascript:routeIt('Kratt','SendEmail') "><span title="Emails from ...">Email</span></a>
</body>
</html>
The last line does not work and the DIV or the contents do not show up... but it does not err in creating the DIV. So, I'm not even able to get the DIV to come up!
The data lists are coming in as follows:
zList1 = [['zebra','24'],['cat','153'],['paycheck','$123.56']]
zList2 = [['Wine','gloogloo'],['cereal','bowl'],['garage','three cars']]
Any help would be appreciated...
Dennis
Here is The Bug Fixed code: Try and post the comment,
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById("bodyID").appendChild(ta1);
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
}
add id="bodyID" to the the body tag definition.
Cheers, Arun

Accepting user entered strings in html pages using javascript

I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box

Categories

Resources