Coming Soon

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.

This slideshow requires JavaScript.

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});
}
});
}

Advertisements
Previous Post
Next Post
Leave a comment

8 Comments

  1. Andrea

     /  May 12, 2014

    The problem is that sections with hyperlinks will have their link ‘available/clickable’ even when you are viewing another section.

    Now with your changes when i click on hyperlink i dont see the other section.

    Can u send me your style.css and your main.js?

    Thank you for helping me 🙂

    Reply
    • “Now with your changes when i click on hyperlink i dont see the other section.”

      Which hyperlink are you referring to?

      Reply
      • Andrea

         /  May 13, 2014

        if i put hyperlink in one section, because i need this link, this hyperlink doesnt work correctly.

        When you have multiple links in differents sections ( about, contact, etc ) you may click this link in the home page also if you dont see it (but if you put your mouse hover the link appear) and for me this is ugly.

        How i can solve this problem?

        Reply
        • Without seeing your code I can’t really give you an answer because it sounds like something else might be off. I would be happy to send you my style.css file and my main.js file, but I would recommend starting again with the original avenir file you downloaded from wegraphics. Make the fix changes offered by me or ca.stockton first and see if it works. If it does then continue to reapply your changes checking along the way that everything is running smoothly.

          Reply
  2. Andrea

     /  May 12, 2014

    For me the fix dont work.
    I changed css and also .js but the situation doesnt changes.

    With the fix the link dont work ….

    The problem is that, when you add some link in a section (for examples about section) this link is visible on the other pages and this create confusion.

    What i can do for fix the href problem ?

    Reply
    • I’m sorry Andrea, but I’m having trouble understanding your problem. The fixes I provided are suppose prevent the links from other sections from showing through the current active section by moving the inactive content off the screen. When you say href are you having problems with creating the link in the HTML file? It would help if I could take a look at your files, would you mind sending them to me or posting the code? I can try to help.

      Also did you take a look at ca.stockton’s fix? This is what he came up with, maybe it work better for you:

      I’ve solved this problem by changing main.js a little
      /* Main Navigation Clicks */
      jQuery(‘.main-nav ul li a’).click(function() {
      var link = jQuery(this).attr(‘href’).substr(1);

      if ( !jQuery(‘section.content.show, section#’ + link).is(‘:animated’) ) {
      jQuery(‘.main-nav ul li a’).removeClass(‘active’); //remove active
      jQuery(‘section’).addClass(‘hide’);
      jQuery(‘section’).css(‘display’,’none’);
      jQuery(‘section’).removeClass(‘show’).animate({‘opacity’ : 0}, {queue: false, duration: 1000,
      complete: function() {
      jQuery(‘a[href=”#’+link+'”]‘).addClass(‘active’); // add active
      jQuery(‘section#’ + link).removeClass(‘hide’);
      jQuery(‘section#’ + link).addClass(‘show’).animate({‘opacity’ : 1}, {queue: false, duration: 1000});
      jQuery(‘section#’ + link).css(‘display’,’block’);
      }
      });
      }
      });

      Reply
  3. Hi Shavanna and best of greetings from Muscat, thank you for the Avenir fixes!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: