Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Needed with Template Tweaking

    Hi -

    First time visitor/poster here, and javascript wannabe. I'm kind of in a jam with a stock web template for a one-page site which is debuting tomorrow during a news conference. The template relies heavily on javascript, which I know a teensy bit about. I've tried a few things have been unable to modify two things which may be simple for someone who really knows javascript well.

    1) I'd like the top, fixed menu to appear from page load, rather than one verions of the menu appearing down the page then getting fixed to the top once the user scrolls just a tiny bit. I tried messing with the scrollTop in the main script, but didn't have any success. But, then, I don't really know what I'm doing! :-)

    2) I'd also like to eliminate the "Ken Burns" animation effect on the large header graphic as I feel it adds nothing to the site.

    The test site is here:

    Springfield Lifesave

    The main javascript file is here:

    http://www.springfieldlifesave.com/assets/js/app.js

    Any insight or help would be much appreciated.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    add to the end of the js file:
    Code:
     document.body.scrollTop=1;
    the other can be done by appending css:
    Code:
    body .ha-menu-wrapper .ha-header-img {
      -moz-animation: scaleanimation 0s ease-in-out;
      -o-animation: scaleanimation 0s ease-in-out;
      -webkit-animation: scaleanimation 0s ease-in-out;
    }
    cheers!
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [QUOTE=rnd me;1390489]add to the end of the js file:
    Code:
     document.body.scrollTop=1;
    The above doesn't seem to have any effect. I even tried adding it to the end of the HTML page in a script tag, and tried increasing the value to 100 just to make sure the "1" wasn't too small to cause the fixed menu to appear.

  • #4
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the CSS animation tip. I haven't used that particular feature of CSS before, so would not have thought to look there. The CSS tip worked great. Ken Burns effect is now gone. :-)

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    [QUOTE=tipperdon;1390491]
    Quote Originally Posted by rnd me View Post
    add to the end of the js file:
    Code:
     document.body.scrollTop=1;
    The above doesn't seem to have any effect. I even tried adding it to the end of the HTML page in a script tag, and tried increasing the value to 100 just to make sure the "1" wasn't too small to cause the fixed menu to appear.
    that's weird. it scrolls the page slightly for me when run in the console, scrolling the page down 1 pixel and making the "normal" navigation appear.

    let's try beefing it up:
    Code:
    $(function(){
      document.body.scrollTop=1;
      document.documentElement.scrollTop=1;
    });
    this should be added anywhere after jQuery is loaded in an external script or on the page at the bottom in a script tag.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •