Category Archives: Website Stuff

Stuff to do with PHP, and webservers

Animation in CSS, Animate your website

CSS stands for Cascading Style Sheet, it is a format that tells the web browser how to display the page. In CSS3 you can add transitions and effects to a page with only a little CSS and sometimes JavaScript. Animation in CSS can make your website look more professional, it can also look tacky. Animated CSS means not having to load JQuery on your website for an effect, however It may not be compatible with all browsers (most work though).

Examples of Animation in CSS

If you go to my website often then you will know I like the “fade in with slide down” effect – you should have seen it when you loaded this page. If you didn’t then you may be using an unsupported browser, though some computers aren’t powerful enough to display the effects properly. Here is an Example of a pure CSS div fade in.

If you want the HTML and CSS for the above page, it’s here:

<p>
This example uses pure CSS, and will fade in a div over 20 seconds.
</p>
<style type="text/css">
.fade1{
    animation: fadeani 20s; /* All modern browsers that obey the W3C standerds SHOULD obey this */
    -moz-animation: fadeani 20s; /* Firefox Compat */
    -webkit-animation: fadeani 20s; /* Safari & Chrome Compat */
    -o-animation: fadeani 20s; /* Opera Compat */
}
/* The actual fade */
@keyframes fadeani { /* W3C */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-moz-keyframes fadeani { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-webkit-keyframes fadeani { /* Safari & Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-o-keyframes fadeani { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
</style>
<div id="example1">
<p>
Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content!!!
</p>
</div>

So that is how you do a fade in on a div.

What else can I do with CSS Animation

If you bring in an element of JavaScript, the world is your oyster! You can make things expand on click and fade on, well whatever you wanted!

You could make an Ubuntu style notification display, by using the following code, but before we get to that, do you want to see an example of that? (For those of you who do not use Ubuntu, you should run you mouse over the black box on the example page)

HTML, CSS and Javascript:

<div id="example1" onmouseover="mover();" onmouseout="mout();">
<p>
Example text goes here,<br/>(I can't afford latin filler text)</p>
</div>
<p>
This example uses CSS and Javascript to make an Ubuntu style notification... Sort of...
</p>
<style type="text/css">
.notify{
	-moz-border-radius: 15px; /* Give it rounded look in older firefoxes */
	border-radius: 15px; /* Give it rounded look in everything except IE */
	float: right; /* Make it sit to the side */
	background-color: #000000; /* Make it black */
	opacity: 0.8; /* Make it slightly transparent */ 

	-moz-transition: all 1s; /* Make any change in javascript fade (older firefox compat)*/
	-webkit-transition: all 1s;  /* Safari & Chrome */
	-ms-transition: all 1s;  /* Internet explorer? */
	-o-transition: all 1s;  /* Opera */
	transition: all 1s; /* W3C (works with newer firefoxes) */

	width: 300px;
}
</style>

<script type="text/javascript">
function mover(){ //Called on mouse over
	var obj = document.getElementById('example1'); //Get our element
	obj.style.opacity = 0.2; //Set opacity to 0.2 (CSS will fade this for us)
}
function mout(){ //Called on mouse out
	var obj = document.getElementById('example1'); //Get element again
	obj.style.opacity = 0.8; //Fade back
}
</script>

(Yes I know, “firefoxes” is not a word, I just thought it would be funny)

So that is an example of using Javascript with CSS. Animation in CSS can be used to give your website, web app, online wizard or anything else you could think of a nice dynamic feel! But it can also be used on events too, so you could make text change color when something is finished.

Animation in CSS is more than just fades

You can do much more with CSS animation than just a mere fade. You can use (almost) every CSS property available, there are some that will not transition though.

Have a tinker and I’m sure you will find a transition that looks great on your website! It does not have to be on page load, (though I like the load effect on my website) it can be on anything you want. Experiment and try different things! Make the web more “fluid” and less “rigid” in feel.

Change blogger’s title template

First, why would I want to change the title template?

Good question, let me answer it with another question. When you search the internet (be it with Google or DuckDuckGo) and see a result, what is the first part of the title you read? The first part of the title of course! So, would you want the name of your blog first or the name of your post first?

If you look at the title of this post (yes I know I’m not using blogger) you will see that I have the post name and then the site name.

Change blogger's title template | PC Thingz

When someone sees that they know from the start that its about “changing blogger’s title template” however if you have it formatted as “Blog Title | Post Title” then it will show as follows:

PC Thingz | Change blogger's title template

Though knowing your blog name is important, the user just wants to find what they are looking for. It may not seem like much, they only have to read two words, but they want to find their content as fast as possible, and it may “help” them click on your post. (Tell me the truth, what one would you rather click?)

Changing the title template

This is the part where I tell you what to do. In your blog overview, click on template.

blogger-dash

Blogger’s blog overview page

Then, there should be a button underneath the live preview on your blog labelled “Edit HTML”. Click that, and find the part that says <title><data:blog.pageTitle/></title>. Delete the entire “<title><data:blog.pageTitle/></title>” out of the code and insert the following code:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>
code highlight

The part you need to replace is highlighted in blue (Click to enlarge)

What does the code do?

The code you have pasted into the template will find out if the user is viewing a post or the main page. If the user is viewing the main page then it just display the blog title, if the user is viewing a post then it displays the title in the “Post Name | Blog Name” format.
(instead of the default “Blog Name: Post Name” format)

You’re done!

You have now set up blogger to display the title in a more user friendly and search engine friendly way! This won’t bag you millions of views, but people will like the look of your links more!

PS: Your search engine result will not update until the web bots visit your website again.

Progress Bar in PHP

Now, first to clarify, this is not a progress bar like in an application, but a progress bar for a web wizard…

Have you ever found yourself making a wizard in PHP, and making the h2 tag “Step 2/5″? Do you want a way to show the user all the steps, while still letting them know what step they are on? If you said yes to both of those questions then I have another, do you think this looks good?

pbar
Sorry for sounding like an infomercial but, if you like the look of that, what if I told you that you could have this on your own website for free?

This is a PHP script I have made, it shows your progress through a wizard, and even has support for errors. If you would like to see an example, look at the Progress Bar example page, it has a dummy wizard on it, and if you want to test the error stage, don’t accept the “non existent terms and conditions”. Sorry about the bad spelling on the example, I have not checked it as I was in a rush when I made it…

 

So, how do I use this in my PHP script?

First you need to include "progress-lib.php"
Then, when you get to the place where you want to add the bar, invoke progress_start(); without any args, then run add_item(str name, bool current, bool error); as many times as needed,

The add_item function takes three args, the name of the step, if that step is the current step, and if that step has an error. So you will need to run this function for each step.

When you are done adding all the steps, you must close the bar by invoking progress_finish(); without any args. You have now successfully made a progress bar.

 

What may I use this for oh mighty one?

Well, I’m glad you asked! You may use this script for commercial or non-commercial use, as long as the credit in “progress-lib.php” is not edited, modified, or removed.

 

So, where can I download it?

You can download the main script with an example script included here. If you would like to share what you are using this for, then please, feel free to comment on this post!

I’m now using WordPress

So you may have noticed that I am no longer using Blogger, well about 14 hours after this tweet,Screenshot from 2013-03-09 18:04:23 I moved to WordPress.

So I am now moving away from Google, I have stopped using Google for web search (I use DuckDuckGo now) and E-Mail (I host it on this domain), there is no way of replacing YouTube so I’ll have to keep the account but its a start. I myself don’t like Google, however that is not saying that its a bad service, its a great service! But I believe in complete privacy, and I feel I should be able to give governments my information if requested, and I would as I have nothing to hide but I don’t like the whole idea of Google doing everything, as stated here. This is all my opinion, and it is just how I feel.

Mad Dog Domains fix "(7) Cannot Connect To Host" error in Zen-Cart

Intro
I was setting an e-commerce site up for a friend using MadDog Domains and used their installer for Zen-Cart. We had set up zen-cart the way we wanted it but when we hooked it up to PayPal and tested it there was a long wait and then finally we got this error “(7) Cannot Connect To Host”.
What Happened
After doing a fair bit of research we decided to change hosting providers, we have read CURL is required for communications to PayPal and after looking at MadDog’s help file there was nothing to say that CURL was installed on their Windows hosting (however CURL was available on their linux hosting). The new hosting provider was windows too (as we have some asp.net scripts).
When I tried Zen-Cart on the new hosting provider I got the same error, after doing more research I found out that the “CURL PROXY REQUIRED” setting should always be set to false and as of Zen-Cart 1.5.0 the “CURL PROXY\ REQUIRED” setting cannot be edited as it should never be changed to true, the MadDog installer sets it to true when it installs. You can see the problem.
The Fix
This fix may work on MadDog however I have not tested it and there are no guarantees as the fix was done on phpMyAdmin on Arvixe web hosting…
I went into the Zen-Cart database and changed the value of “CURL_PROXY_REQUIRED” in the “zen_configuration” table from “True” to “False” and that solved the problem. If this doesn’t work for you the error must be caused by another problem.

 More Information

We ended up using a Linux server for serving Zen-Cart. The shopping cart is for video downloads and the first thing we noticed is that the page loaded much quicker! The reason we changed to a Linux server is because we had major download problems with the Windows server – these were fixed as soon as we switched to the Linux server. Through all of this the Arvixe support has been phenomenal.

If you wish you can see the shopping cart here!!!