Vertical Divider Between p2 and p3 Recent Posts

ThemeShaper Forums » Thematic

[closed]

Vertical Divider Between p2 and p3 Recent Posts

(17 posts)

Started 3 years ago by Deirdre
Latest reply from lindathep
This topic is not resolved

Tags:

vertical divider

Deirdre
Member

All right, I feel like I'm talking your ears off! I've just run up against a situation with this design I'm working on that I haven't had to work with before:

On the home page at http://sanslux.com you can see that I have 3 recent post boxes: p1, p2 & p3, with separate styles. However, the divider line is supposed to grow and shrink based on the longest content of either boxes.

How I now have it set up is p2 has a right border of 1px and p3 has a left border of 1px, *but* the divider bar does not change length. So, something is up because as you can see, the content in p3 is longer but the border of p3 hasn't extended. The second part of the problem is that even if it *had* grown according to the content in that box, only the border of that p3 box would grow, and *not* the border in p2, which would throw of the divider look. Basically, I have no idea how to go about doing this. o.O

My instinct in any other situation would be to somehow wrap p2 and p3 in a div and create a background image repeating x that would give the impression of a dividing border line. But I don't know how I would do something like that in WP - and maybe that isn't the right solution, either.

Does anyone have any suggestions? Totally lost on this one and am fighting the urge to hit my head into the laptop keyboard, lol.

Cheers,

~Deirdre

Posted 3 years ago #
Chris
Moderator

.. will take a look later today. Missing Firebug on my iPhone ;)

Chris

Posted 3 years ago #
Deirdre
Member

=) I may actually marry Firebug ad have his babies.

Posted 3 years ago #
Chris
Moderator

.. I would suggest a jQuery based solution .. let me check this tomorrow.

Posted 3 years ago #
Deirdre
Member

Wow, thanks =)

Posted 3 years ago #
Chris
Moderator

Back from work .. take a look at this post: Equal Height Columns with jQuery

You can see it in action here.

Put the script into a function and add this function to the wp_head action hook.

Chris

Posted 3 years ago #
Deirdre
Member

Thanks Chris - I'll check into this shortly. Appreciate you taking the time to check on that.

~Deirdre

Posted 3 years ago #
Deirdre
Member
Ok this looks like what I am looking for - thanks. Right now I'm currently trying to wrap the code into a function. The original function listed on that site is:
```
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
```
So in function.php, I have tried something like this:
```
function equal_height() { ?>
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
<?php }

add_action('wp_head', 'equal_height');
```
But on refresh of the page, I am getting errors. Also, the second code from that site:
```
$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});
```
I am unclear on where the above code should go -- or if it should be included in the same php function.

I'm going to keep playing around with it - I am assuming I'm not creating the function correctly. I have used this page http://themeshaper.com/action-hooks-wordpress-child-themes/ to try and guide me along but I'm must be overlooking something - I'm new to using functions in my WP designs.

Thanks,

Deirdre
Posted 3 years ago #
amygail
Member

Don't know what errors you're getting - off the bat though...

You need to use "no conflict mode" for your jQuery
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

replacing the '$' with 'jQuery' in your jQuery code is an easy way

Posted 3 years ago #

Chris
Moderator

No .. it needs to be added to a function as a script:

function my_scripts() { ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
        equalHeight($(".recent-article"));
        equalHeight($(".footer-col"));
    });
    </script>

<?php }
add_action('wp_head','my_scripts');

Chris

Posted 3 years ago #

Deirdre
Member

Chris,

The code you posted was inserted into my functons.php and is no longer causing errors, so I am guessing its working, however, I'm just having trouble targeting those recent post boxes.

Looking at the code, I figured I'd have to change the ".recent-article" from:

equalHeight($(".recent-article"));

to the div that contains the post, which is #content (I also tried ".content" & just "content", but it seems to have no effect on the recent post boxes and I wonder if it has something to do with how I have them styled?

For instance, the blue quote box atop and the 2 boxes side by side below, are coded in the CSS as:

body.home #content .p1 {} <Blue Box
body.home #content .p2 {} <Bottom Left Box
body.home #content .p2 {} <Bottom Right Box

Any suggestions?

http://sanslux.com

Thank you!

~Deirdre

PS And thank you for your suggestion, Amygail =)

Posted 3 years ago #

Chris
Moderator

Just played a bit with the script .. could you please change:

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

to:

jQuery(document).ready(function() {
        equalHeight($(".p2, .p3"));
    });

Posted 3 years ago #

Deirdre
Member

It now seems to be targeting that area, but is doing something funky:

http://sanslux.com

I'll leave that as is for a few hours that you might be able to see it.

=) Deirdre

Posted 3 years ago #
Deirdre
Member

Hi Chris - wanted to give you and update:

For the home page - and I could kill myself for not thinking of this - I think I found a way to trick it out. The border in between posts is 2px thick, so... why not just make the side border of each box 2px thick, and then just overlap them - I think that is going to work.

However -

I still am interested in a better solution because the Category page is setup in a way that the trick isn't going to work. It's similar to the home page in that there are the divided borders between 2 posts, but the difference is that they are stacked on top of another row of posts - here, it's probably easier to see:

http://sanslux.com/category/week-1-giving-up-cable-television/

When you see this, it will probably look like its all fine and dandy, but that's because I have them formatted for just the current category posts - if I type in something with less text, they become skewed. I dunno.

By the way, I know that this kind of support is often a thankless job - just wanted to express my deep appreciation for the help you and others have given me.

I'll check in with you all tomorrow!

~Deirdre

Posted 3 years ago #
Deirdre
Member

Hey guys,

Just wanted to give a heads up - decided to keep the category page boxes a fixed height and width. Couldn't find a solution and the client and I decided it wasn't realy imperative for just the categories.

Thanks so much for everything

~Deirdre

Posted 3 years ago #
Chris
Moderator

.. anyway .. will try to figure out, what went wrong with the jQuery script.

Chris

Posted 3 years ago #
lindathep
Member

Hi Chris, please have a look at my response here [same sort of subject, equal heights] http://themeshaper.com/forums/topic/equal-height-columns-with-thematic.

I juggled with it a bit more and managed to load the script in the headsection (CSS newbie made a plugin as well). To make it work I need two more things (I think):
1 - How do I add a new specific class like ".equal" to the div's I want to have the same size (#content & primary);
2 - How do I write the function/action to equal them? I know I have to use this, but how?

jQuery(document).ready(function() {
equalHeight($(".equal"));
});

Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.