Whoa! I know it’s been a while since my last post. A lot has happened: summer ended, fall started, the government shut down, I got a full-time job, and I resigned from said job. Sometimes things just don’t work out, but I sure learned a lot during the process. That’s why you keep calm and carry on. So I keep plugging away, working on my design skills.
One of my main focuses will be web design and I’ll be home schooling myself. I love to see progression. I remember my first website from high school, complete with flaming dragons and HTML4 (cheesy, I know). I was so proud that I completed that project; I look back later and realize how much better it could be. I constantly go through this process and then work to in fact make my work better. As a result, I’m redesigning my website again. I’m not sure what I want yet, but I’m studying HTML5 and CSS3. Then I’ll move onto Javascript and WordPress.
Currently, I have up a placement holder aka coming soon page. I found this sleek template on WeGraphics called Avenir – A Free Coming Soon HTML Template. It’s easy to customize, if you are familiar with HTML and CSS. You don’t really have to touch the Javascript unless you want to. There are some issues with the code. There are three “pages” to the site, but it’s really a fancy switch of the content using id’s. When the page first loads (which you can see in the demo) the links on the home page are not clickable, As a matter of fact, you can see shadows of other links from the other “pages.” Essentially the content from each page “rests on top of each other” and the opacity is switched on and off depending on which page is active.
It took me a while to figure out a workaround to this, since I haven’t gotten to Javascript yet, but I have used Actionscript before and the theory is similar. I move the content that isn’t visible off screen to the left, so that nothing interferes with the current content on screen making all links clickable. I’ve included my code fix below, but first here are screenshots of my coming soon page.
CSS Fix – styles.css file
.show{
display: block;
left: 5px;
}
.hide{opacity: 0;
left:-900px;
}
Javascript Fix – main.js file (also note that I have changed the duration of the animation to 0 because I didn’t like having the text ease in from the left. It was too busy for me)
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0, 'left': -900}, {queue: false, duration: 0,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1, 'left': 5}, {queue: false, duration: 0});
}
});
}
Inside My Head 