Sucess with JS navigation!
29th January 2012
Finally I've had the chance to sit down and try and get the navigation on this site incorporated into a javascript so that I don't have to update every damn page. I asked my brother to point me in the general direction and he suggested that the JS should be creating the required divs and lists so that each page just needed somewhere to put all the information.
First off then I needed to find out how to get a JS to create a div. With a little Googlefu that answer came up easily enough and I played around with the code to see exactly what each part was doing. The problem was that it was just creating the div in the body rather than within another div. I tried getElementById but that didnt work so I spent the next hour trying to find out how to make this bloody div appear in a pre existing div with no luck. Then I tried getElelemtById again and it worked. Clearly my fat fingers had screwed it up the first time but finally I was getting somewhere.
next up was trying to get that div populated with the ul that would make up my navigation. For some reason I tried to create the ul just like I had the div until I found that I could just use innerHTML to create a variable that could then be inserted into a div. Since that innerHTML also included IDs and Classes it all got rendered exactly how my pre existing tiresome navigation did which was excellent. So now here it is. The navigation on the Index, About and Aquarium is all appearing from JS after a new Div is created for it to sit in. Now I only have to edit one file and it changes everything. Much better!
I've no idea if this is the best way of doing it but it works and that's fine by me. Now I'm going to get that all added into the Vita site also which will obviously have much more individual pages once more content goes live.
The fiddling I did to get this working was once again done on this page
trying to remember JavaScript
19th January 2012
Tonight I've had a few hours to try and remember and perhaps even learn a little more javascript! All the work from tonight is on this page
No progress
18th January 2012
It's been another 17 days since I had a lok at all of this which doesn't bode well does it!
I've added a new section for a new hobby of mine which will be getting in to full swing over the next week or so and as a result I had to make some changes to the navigation bar along the top since the world "Aquarium" was too long to fit into the original fixed width layout.
What I really need to work out is how to get my navigation into a seperate document instead of having to be included and updated on every page. Depending on which computer I'm on at work determines how easy it is for me to do anything and recently I've not been on the one machine with Visual Web Dev on so thats not helped.
Hopefully on my days off I can get some done and try and keep up with the learning.
Functions in your functions and a bit of tidying up
1st January 2012
I've not had a chance to tinker for a couple of weeks which has been a little annoying. I'd just started playing with Javascript and most of it has probably been forgotten by now! Today and yesterday I spent some time cleaning up some of the images in use thus far on the Vita site. Everything was calling full sized files when half of thme actually needed to be much much smaller. Now everything has thumbnails and medium sized versions to call as appropriate
I've also been playing with javascript again and now have the banner and social networking icons that appear on the Vita site to be part of a couple of seperate functions. There is one function that then calls both of these in one single clean onLoad event. That now means that I can change the banner and social links on every page easily and also saves a lot of repeated code on every page.
I still need to get more done in a similar fashion. At the moment all of the navigation is still done on every single page which would obviously take ages to update if the site was large. I'll be trying to sort that next and then I'll try and add in the onHover lessons I learnt a few weeks ago to the main vita page. I'm a little reluctant to go crazy on making content as it's all still actually part of each page rather than being called from a database. I'll probably do a few more styles for different types of content and then try and integrate a DB later.
Happy New Year by the way!
Layout tinkering and some external JavaScripts
16th December 2011
First thing tonight was to try and get a JavaScript running from within a separate .js file so that I can use the same scripts on many pages. The example left a few things out that might have been readily apparent to some but to me it wasn’t clear why I couldn’t get it to work. I removed the script tags on the .js file but couldn’t fathom why it wasn’t working until I realised that the type=”text/javascript” was also part of the tag and needed to go also. Once I’d done that I had a copy of yesterdays page running with the scripts on a separate page.
While creating a new div on that page I found a few problems with the blog layout that meant that some things were not being displayed displayed correctly. Because I hadn’t done anything specifically this way before it hadn’t come up and so I didn’t realise it was an issue. An hour or so of tinkering with margins and padding and floats and all appears fixed.
I’d really hoped to get more done tonight but never mind, plenty of time left to learn everything! Todays tinkering is here but it looks almost identical to yesterday, it just access a different place for its scripts.
More scripts!
15th December 2011
Tonight I’ve tried to get a handle on scripts a little more by creating a new page with a headline image, some text and three thumbnails. As you hover over each thumbnail it changes the main image and the text as if you were filtering through different main stories. It also changes the background colour of the div that each thumbnail is nested in so that you can see that it is highlighted and so it also needed to set the other two to have white backgrounds so that they were not selected. I couldn’t seem to get the GetElementByID to allow me to put in two different IDs and save a line of code so I had to do each line independently.
Once I was happy with that I’ve added an onload to the body to run the first script which selects the first image/headline. I’d like to get a scrip in there that automatically runs through the separate thumbnail scripts after say 5 seconds so that it changes automatically if the user doesn’t do it.
The page with my tinkering can be found here.
A mildy productive day - Scripts
14th December 2011
Today was a beginning for learning about scripts as well as finishing a few more bits off on the blog page here. First off I managed to get the tabs at the top there to overlap on top of each other rather than behind using the z-index and position styles. The other day I;d also noticed that my layouts were jumping to the ight whenever you went from a page with a vertical scroll bar to one without. By using the overflow-y:scroll I got it to stop. Now the scroll bar is always visible but greyed out when not needed. I found that Google do the same thing so I'm confident that its a good way of dealing with it and not just a bodge!
Once I'd sorted those out I had a look at my first script which was making the date appear. The entire date. With everything. Even my inside leg measurement appeared I think. No doubt there is something I can do to only use a bit of it but thats by the by. The first go through worked just fine as I was following the tutorial. The problem came when I tried to do it myself. for about 15 minutes I sat staring at what I had done trying to figure out why it refused to work even though it looked idential to the one a few lines up. There was swearing until I wondered if the script had to be after the thing I was trying to modify and sure enough I moved it around and it worked. On the next page of the tutorial it mentioned that!
I carried on playing around and started playing with my first function. The example had you change the contents of a button, my practical had you hovering over an image and the heading and paragraph changing directly below. I also added some hr and br in there to see if that would all still work and it did. Hopefully I can impliment a little of that onto the Vita site tomorrow. It's still not perfect since it's not grabbing from a DB but its still a step in the right direction! To take a look at my handywork click here. Hover over the gradient to change the content of the text box and hover over the image to change the words below.
Nowt else to say really, hopefully I can make more progress tomorrow!
My first blog entry
13th December 2011
Welcome to my blog. I don't expect anyone is listening but thats not the point. This is really just a place for me to log what i've been upto in my quest to learn HTML/CSS and all the associated gumpf that one needs in order to create websites. I started learning on Friday 2nd December 2011 so it is still very early days however I have the basics of HTML and CSS down enough to enable me to build this and my PlayStation Vita testbed.
Since it is still so early all of this is being done on a page by page basis, it's not pulling anything from a database or anything, I'm literally sitting here typing everything out in Visual Web Developer Express. Obviously that isn't ideal so I'll soon be trying to learn whatever the hell it is I need to make life a little easier. A simple blog like this should be easy enough to maintain but my plans for my Vita site are just too much to manage like this.
I've pretty much finished my design for this one now, nice and simple with some tabs at the top for navigation. I want to try and figure out how to get the selected tab to show in front of the others instead of a bit behind but I'm sure I'll figure it out. The only other thing that I need to do is sort out an About page which I have a button for but no actual page yet.
Tomorrow I'll have to get that about page done and then either continue on with the design for the Vita site or try and learn something useful like databases and such as I'm going to need some kind of CMS and loads of other stuff. Lots to learn but I'm quite pleased with my progress thus far. I'm also going to try and work out how to get thumbnails like the below to open nicely rather than just in the tab.
