Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
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.
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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/
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
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?
It doesn’t work.
Have you implemented something similar?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
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?
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
});
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?
Anyone, where do I load the jQuery library from?
Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
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
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?
