WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar bg extend dynamically with jQuery (16 posts)

  1. insurgenesis
    Member
    Posted 1 year ago #

    There's been a lot of misunderstanding as to why it's not possible to "extend" the height of 2 sidebars (when you're using 2) to 1.) match the content and 2.) to appear to be of equal length.
    A min-height setting only works if it's pre-established how long all pages will be.

    I haven't come across elegant solutions and I'm certainly not willing to go with the so-called "faux-column" idea described here:
    http://wordpress.org/support/topic/twentyeleven-sidebar-height?replies=3
    This is nonsense because it goes against the dynamism of cms and css capabilities. There has to be another way.

    Anyone experimented with JavaScript or jQuery thingy to extend the sidebar background fill dynamically based on scroll parameters? The effect should be that the background colour self-propagates to produce more of itself as the area to be filled becomes available when scrolling down.

    And then, the pending question, where oh where in the template files would it be inserted? In the sidebar template?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    The effect should be that the background colour self-propagates to produce more of itself as the area to be filled becomes available when scrolling down

    Can you provide a visual example of this?

  3. insurgenesis
    Member
    Posted 1 year ago #

    This is amazing but not readily implementable in WP:
    http://johnpolacek.github.com/scrollorama/
    Already I imagine a forum post like this: "how to include jQuery into WP". These examples don't necessarily meet the criteria but introduce lovely behaviours that are solicited by scrolling parameters.

    What I'm thinking of (example) is to fill a space dynamically with a colour based on scrolling parameters that determine how the colour extends. The space accommodates more colour as scrolling reveals more visible space to be filled. So the view-port area always appears to be filled because scrolling causes the space to be populated by the colour or fill.

  4. insurgenesis
    Member
    Posted 1 year ago #

    Oh, and this - this is what I need:
    http://www.cssnewbie.com/equalheights-jquery-plugin/
    But again, how one would integrate it into template files is a mystery.

    Have you experimented with something similar?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oh, and this - this is what I need:
    http://www.cssnewbie.com/equalheights-jquery-plugin/
    But again, how one would integrate it into template files is a mystery.

    You could, assuming you are using a Custom or Child Theme, add the files mentioned in the tutorial to your header.php file.
    E.g

    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>

    Then add the jQuery in your footer.php file, above the </body> element.
    E.g

    <script>
    $(document).ready(function() {
    	$(".columns").equalHeights(100,300);
    });
    </script>
    </body>

    Just make sure your selector is correct
    http://api.jquery.com/class-selector/

  6. insurgenesis
    Member
    Posted 1 year ago #

    Thanks for your response.
    I'm assumin that's the standard method for including it into WP, right?
    Have you looked at the last one in particular?
    I'm hoping it will work but I don't know jQuery...

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    I'm assumin that's the standard method for including it into WP, right?

    It's the standard technique for all websites.

    Have you looked at the last one in particular?

    The last what, sorry?

  8. insurgenesis
    Member
    Posted 1 year ago #

    It's the standard technique for all websites.

    What I mean is not all websites use modularised template files which dynamically compose pages we regard on the web with .php extensions. I thought WP had a standard way to declare scripts.

    Just make sure your selector is correct

    Is that the css selector containing the right sidebar, left sidebar and main area?

  9. insurgenesis
    Member
    Posted 1 year ago #

    It doesn't work.
    Have you implemented something similar?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    I haven't implemented something similar to this tutorial, but when jQuery doesn't work, I use Google Chrome browser, right click and select "Inspect element". Then I can choose the 'Console' tab and see if any errors are produced.

    Have you tried this? If so, what are the errors?

  11. insurgenesis
    Member
    Posted 1 year ago #

    In link to the example I had identified as a workable one
    http://www.cssnewbie.com/equal-height-columns-with-jquery/
    the function that I inserted in the footer is further augmented like so:

    function equalHeight(group) {
    	var tallest = 0;
    	group.each(function() {
    		var thisHeight = $(this).height();
    		if(thisHeight > tallest) {
    			tallest = thisHeight;
    		}
    	});
    	group.height(tallest);
    }

    and:

    $(document).ready(function() {
    	equalHeight($(".recent-article"));
    	equalHeight($(".footer-col"));
    });

    Do these also go into the footer?

  12. I thought WP had a standard way to declare scripts.

    It does: Check out wp_enqueue_scripts, and use the version of jQuery that's included in WordPress rather than adding your own (possibly conflicting) version.

    Also, whenever you're working with jQuery, call it in no-conflict mode (that is, using the full jQuery label instead of the $ shortcut): instead of using

    $(document).ready(function(){
         $(#somefunction) ...
    });

    wrap it in

    jQuery(document).ready(function($) {
        // $() will work as an alias for jQuery() inside of this function
    });
  13. insurgenesis
    Member
    Posted 1 year ago #

    Thanks Amy, that's what I was looking for.

    Now, I understand I'm supposed to be using class selectors but
    the selectors I need to equalise (height) include an id as well:
    equalHeight($(".three-column #primary"));
    Will this cause trouble?

    I must say, the example link I posted isn't very clear about what the final implementation looks like so I'm just guessing here.

    I'm not convinced that the entire function resides in the footer either. Is it directly embedded in the footer or does the actual code reside in the plugins directory to where the function call is made?

    BTW why should the function call be wrapped in a $(docment).ready() function if it's in the footer which loads last?

  14. insurgenesis
    Member
    Posted 1 year ago #

    Anyone, where do I load the jQuery library from?

  15. It ships with WordPress. Just queue it up via your theme's functions.php file.

    add_action('wp_enqueue_scripts', 'my_scripts_method');
    function my_scripts_method() {
        wp_enqueue_script( 'jquery' );
    }

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  16. insurgenesis
    Member
    Posted 1 year ago #

    I've not found a way to get it to work but here's what I've managed so far:
    http://pastebin.com/q353b76V
    Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic