Monthly Archives: November 2014

Navigation Plus Javascript

Posted on by

All of the work I’ve done so far has just been with the home page of the website, but what about the other ones? We’ll get into creating those very soon, but first we need to fix up the navigation bar we created weeks ago.

Te navigation bar we have now is fine for jumping from one page to another. But what if we scrolled down to the point where we couldn’t see much of the info on the page and were wondering which page we’re on. The way to fix this is using some javascript to add a class to the current page that makes the text in the link for that page a different color than the rest.

This is the code that I used for it (put inside of my header file, so it applies to each page):

$(function(){
var current = location.pathname;
if (current == “/”)
{$(‘#nav li a[href=”/”]’).addClass(‘active’);}
else{
$(‘#nav li a’).each(function(){
var $this = $(this);
if($this.attr(‘href’).indexOf(current) !== -1){
$this.addClass(‘active’);
}
})}
});

location.pathname grabs anything in the url past the main domain name. For example, calling location.pathname on google.com/images will give you “/images/”. In the case of a domain without any extras, google.com, you will just get a forward slash, /. The “if” statement in the start of the code checks for this to see if it should add the class to the “Home” link. Everything in the “else” statement will check which link to add the class to based on the “href” part of the link.

The “active” class is simply a class with the attribute color (set to whatever color you want). In my case I chose gold.

If you want to see this in action create a new php file called photos.php in your /xampp/htdocs/ directory. Include your header and footer to it, with a <div> with the id “content-area” in between. Now just make sure the “Photos” link in your navigation bar has the link “/photos.php”. When you click on “Photos” it should now take you to that page you just created, and “Photos” should be highlighted in your navigation bar, like this:

CodeAdventures12

Pre-made Javascript

Posted on by

Remember how I created a function to make loading a post into a page of the website much easier? Well the same sort of thing can be done with javascript but on a slightly larger scale. Some other person out in the world can create a function in javascript and save all of that code into a new file. Then, people like me who don’t know javascript well enough or have the time to make some really fancy things can use that file.

In my case I used a javascript file called dotdotdot, which can be found here http://dotdotdot.frebsite.nl/. If you look at that site you will see that the javascript will make it so any text that goes outside the bounds of its container is replaced by an ellipsis.

To implement this on your own site, simply download the .zip file from their site with the “Download” link, unzip that folder to the main directory where you are keeping your website (probably the /xampp/htdocs folder if you’ve been following along).

Next you will need to put some code into the <head> section of your site. Much like with when adding the ability to use javascript generally, you will need to put a <script> tag. However, this time the src should be either the .js or .min.js file in the folder you just extracted. It will likely look like this:

<script type=”text/javascript” language=”javascript” src=”/jQuery.dotdotdot-master/src/js/jquery.dotdotdot.js”></script>

Finally, inside of any set of <script> tags on the page with the area you want to have an ellipsis simply put $(‘id of element to have ellpisis’).dotdotdot();

In my case with the posts section, I put $(‘.post’).dotdotdot();

Now, instead of having to manually put in an ellipsis so your page doesn’t look like this,

 

 

CodeAdventures9

 

You can instead have a neat page that looks like this,

CodeAdventures10

Javascript Post Loading

Posted on by

To set up to be able to put a section of javascript into your site you first need to add a line to your <head>. Kind of like how you had a line to link your css file to your site, you will use the line <script type=”text/javascript” language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;. This will make it so that in any file that has the <head> you can put in a set of <script> tags with javascript code in between.

In my case, I put this code on my Home page:

<script>
function loadPost(postName){
document.write(‘<div id=”‘+postName+'” class=”post”>’);
$(‘#’+postName).load(‘/posts/’+postName+’.php .postTitle, .date, .postContent’);
document.write(‘</div>’);}
</script>

The first line simply is the name of the function that I created and the variable that it will take as a parameter. That variable can then be later used throughout the function by calling “postName”. The next line writes out <div id=”whatever postName was entered” class=”post”>, the same line that I wrote in the simpler version of posts.

The third line may look a little confusing at first glance, but is really not that bad. Basically what it does is within the element with the id “whatever postName was entered” (which ends up being the div that was created just before hand) it places elements from the file path /posts/”whatever postName was entered”.php that have the classes “postTitle”, “date”, and “postContent” after the <div> that was just created. Lastly, it writes a closing <div> tag. Now, all we need to do to put a post into an area of the page is put loadPost(‘postName’) inside a set of <script> tags.

This is what it might look like using the same post information as previously:

CodeAdventures8

But what if we want to have a couple of posts all with the same size in the same area? Well if you just left the code as is and loaded multiple posts you would get a bunch of overlapping text that would be unreadable and look terrible. Well by downloading some javascript that other people in the world have written all of that can be easily fixed. But that will have to wait until next week.

Getting Ready for Javascript

Posted on by

Basically, the purpose of using javascript here is to make the process of putting the title, post date, and some information from a post into an area using one line of code. The first step towards being able to do this is correctly sectioning and labeling posts so that you can correctly grab each part later on.

As usual, whatever class or id name I give an element, you can give your something else, so long as you’re consistent when you start writing the javascript. In my case, I created a new php file that I named post01.php, and put it in a new folder inside of the /xampp/htdocs directory that all of my other files were in. In that file I first created a <div> with the class post. Inside of that I created three elements; a link element linking to itself and with the classes “postTitle gold-text”, a paragraph with class “date”, and another <div> with class “postContent”. Inside of that “postContent” <div> I just put whatever actual information is within the post.

Next I added some styling to each of these new id’s created. Gotta keep everything looking nice. For the “post” class I set height: 230px, width: 540px, padding-bottom: 10px, and border-bottom: 1px dotted white. As with the sidebar list I also added a :last-child styling of border-bottom: none to the “post” class.

Lastly, I gave styling to the last three classes, “postTitle”, “date”, and “postContent”. For “postTitle” you can set the font-family and font-size to whatever you want. The options I found most important were padding-left: 8px, line-height: 40px, and text-decoration: none. For “date” I set padding-left: 8px, and line-height: 0px. You can set color to whatever you would like. For “postContent” I set padding-left: 20px. Again, you can set the font-family, font-size, and color to what you would like.

You can create any number of posts with this method.

Next time we’ll move on to the javascript needed to put these posts onto a page.