Posts Tagged ‘js’

Overlay Popup’s

Sunday, February 7th, 2010

On a webpage you usually have thumbnail images which you may want the user to enlarge, to view clearer. You can either link it directly to the image, or even better use a popup window so users dont get directed away from the page they were viewing. Sometimes popups can be annoying though, and usually people have browser popup blockers enabled.

Recently I’ve been seeing the use of Javascript for image enlarging, when the user clicks on a thumbnail to enlarge it, the image appears simply ontop of the webpage as an overlay. I really like this method because it looks nicer and a little more professional.

For my portfolio website (which has been developing very very slowly) I’ve integrated this technique for not only images but video as well, so the page will initally display just thumbnails or screenshots of the video, then once clicked the enlarged version will open ontop of the page in the same window.

Looking through the web i didnt really find any clean (free) template code, so i decided to just make my own. It was simple enough using javascript, and as a bonus, I now can show off some javascript knowledge :D . My method just uses JS to create a new fullscreen semi transparent box (div) to dim the background, and then another box in the middle which displays the content (i.e. video or image) as a closeable “window”.

pud9y popup JS code

CSS formats the ‘olbg’ and ‘ol’ div’s, but the JS just spits out the html content based on the variables. ‘type’ determines which html code to display, e.g. type=video will spit out the youtube embeding code and insert the url of the video using ‘input1′. ‘a’ is simply the anchor point in which the page will jump to when the popup is closed.

Example of the code in the works can be seen on my animations page:
http://pud9y.com/animation.html

Blog Feed onto Homepage

Tuesday, January 12th, 2010

Hi HOMEPAGE!!
I spent a while looking for methods of loading this blog’s RSS feed on to my website homepage. This should be appearing there now!

I did find some easy ones where you just type in the address of the feed and voila!
Common methods were using Javascript, and PHP scripts to generate JS or PHP code you can copy into your HTML doc.
best ones i found were:

Google Gadget – you simply typed the URL of your RSS feed e.g. http://pud9y.com/rss.xml onto the end of this address

http://www.gmodules.com/ig/creator?url=yoururlhere

and a page loads where you can adjust some simple settings and visuals, then generate the JS code.
The problem with this was WordPress’s generated RSS isnt an xml file (i.e. its a generated rss from a php script), and i think that’s what the problem was.

RSSinclude – I then found another simple one that worked, from rss-info.com, and didnt look too bad either. However i wanted more control over the visuals, and didnt want to generate that nasty rss-info.com link at the bottom.

Also up until now these two methods were both generating JS code so it wasnt the best for google, and i did want more freedom in controlling what content i displayed and how.

I considered using PHP to parse the RSS feed as an XML but i simply couldnt get it working with the WordPress feed (i.e. blog.pud9y.com/?feed=rss2) because of the use of the php variable method, while the XML parser needed a file, not a URL. (I did find in the wordpress folder wp-rss2.php forwarded to the same feed but ill explain that a little later)

So I browsed for some PHP methods. I found a few scripts here and there which made it easy for you to just put in the variables and generate your own RSS reader but I was determined to find a proper way. Even went as far as trying to generate an XML file from the RSS address then shoving that into the XML parser.

When I almost had given up i found this page:
RSS reader
http://www.scriptol.com/rss/rss-reader.php
it was another PHP script method and I was about to commit when i read at the top:

if the filename has the “.php” extension when it is generated by a CMS or such software, locally the file is processed by the server as a text file while remotely it is processed as a script.

It was then i realised i had been using the wp-rss2.php file locally, and therefore it was being treated as it was, the php code inside, and not what it is rendered as, an RSS XML. (so annoying).

SO finally i succeeded in displaying my latest posts on my homepage using the SimpleXML method, since RSS feeds are simple XML’s, and now I can do and display whatever the f* i want!!!

i wrote my own script for this, here it is:

<?php
$rss = simplexml_load_file("http://blog.pud9y.com/wp-rss2.php");
echo '<div id="rss">';
echo '<h2>My Latest Blog Posts</h2>';
foreach($rss->children() as $channel)
{
//for ($i=0; $i<=3; $i++)
$i=0;
foreach($channel->children() as $chanitem)
{
$item = $chanitem->getName();
if ($item == "item")
{
if ($i < 3)
{
foreach($chanitem->children() as $entry)
{
$name = $entry->getName();
if ($name == "title")
{
$title = $entry;
}
if ($name == "link")
{
$link = $entry;
}
if ($name == "description")
{
$description = $entry;
}
}
echo '
<h3><a href="'.$link.'">'.$title.'</a></h3>
<p>'.$description.'</p>
';
$i++;
}
}
}
}
echo '</div>';
?>

being able to program for the WEB is just so awesome!
i <3 PHP