Centric Home Page JS

Community Forums Forums Design Tips and Tricks Centric Home Page JS

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  stinkykong 6 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #98518

    stinkykong
    Participant
    Post count: 169

    I’m not much of a javascript person but wish I was. I wonder if there is a way to bring the content below the solid blue area up into view (partially) so that the visitor sees there is more below. Then when they click on the center button, the partially visible content behaves as it currently does, scrolling up and aligning at the top.

    Currently, the blue background occupies 100% of any available screen height.


    Web Design by Websentia Web Services
    http://websentia.com

    http://tcgishare.com/thecrouchgroup.com/
    #98628

    Tom
    Participant
    Post count: 959

    I think this does what you want – replace the code in home.js with this. Adjust the value of 100 to whatever suits:

    jQuery(function( $ ){
    
        $('.home-featured .wrap') .css({'height': (($(window).height()-100))+'px'});
        $(window).resize(function(){
            $('.home-featured .wrap') .css({'height': (($(window).height()-100))+'px'});
        });
    
        $(".home-featured .home-widgets-1 .widget:last-child").after('<p class="arrow"><a href="#home-widgets"></a></p>');
    
        $.localScroll({
            duration: 750
        });
    
    });

    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #98718

    stinkykong
    Participant
    Post count: 169

    Tom, thank you so much. It took me a little while to find time to work on this. I changed the values from pixels to percentages and used 85%. It took some toying around to even figure out what each value did. Then I had to work with the CSS to balance my changes.

    This is all really cool when it works. I appreciate your help.


    Web Design by Websentia Web Services
    http://websentia.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.