Archive for the ‘Website’ Category

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

State-of-the-site

Wednesday, December 9th, 2009

I’ve put up the layout and menu’s for my portfolio website, check it out here:
pud9y.com/about.html

Still needs content and page descriptions but its functioning, so almost there. Again its all in css, and its even functional with the style sheet removed.
I want to JAVASCRIPT! but how ever much fun JS is, i havnt really found a need for it yet :( , in time.

hmm and splash screen, i’ve already got something planned for that, just a matter of implementing :S

Website Concepts

Monday, December 7th, 2009

I’m in the middle of finishing the menu’s for my portfolio website. Thought I’d share some of the concepts before it went online.

website concept layout

website concept layout final

The second is the design of the final layout i settled for. Diagonal tabs for each pages and mouseover effects that describe each pages content, all in CSS :)

(Diagonals are tricky)(but so cool)

Alive on the Web

Wednesday, December 2nd, 2009

This is really the first time I’ve had my own website, on my own webspace, and trying to think of the best way to express myself and my abilities in a concise website is tricky.

In website design theres always the question of, should it be fun, interesting and arty (to express my creative and ‘designer’ personality) or should it be functional, simple and web standard (for the expression of my programming and usability knowledge). You’ll always try to do both, but in the end it has to be either CSS or FLASH and you cant try to do one thing with the other.

I’ve got some plans, and CSS is always the more practical method (although my FLASH knowledge is probably more superior) I’m thinking to develop a nice clean website that still expresses my graphics design and creative abilities, and in the future possibly develop a flashy interactive version if it comes to that.

colour scheme im planning, with majority being grey white and blue

colorscheme

blog will ofcourse get the same treatment, but for now default layouts FTW