sarahjadesigns

Thanks for the response Andrew. While this solution helps with the positioning of the fixed sidebar, it doesn’t solve the problem of the sidebar or widget getting re-sized. The reason this happens is detailed in my 2nd post.

After a bit more research and trial and error I’ve figured out the problem, but not the solution. Below is a better explanation of the problem.

I’m working on a responsive layout and I would like a widget to remain fixed/sticky, meaning it’ll follow you as you scroll down the page.

Simplified HTML:

<div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

CSS:

.page {
    width:96%;
    max-width:1000px;
    margin:0 auto;
}
.content {
    width:65%;
}
.sidebar {
    width:28%;
    float:right;
}
.widget1 {
    position:fixed;
    padding:7.15%; /* 20px of 280px */
    z-index:10;
}

The problem: widget1 gets taken out of the flow by adding position:fixed. This results in the padding percentage being calculated from the body and completely ruining my layout. Because it’s removed from the flow, it also no longer takes up 100% width of the sidebar.

What I need: have widget1 (with a percentage of padding) fit the full width of sidebar.

The closest solution I’ve found suggests to add width:inherit on the fixed element. This works great, but only if the parent’s width is set in pixels, not in percentage. It also doesn’t help with the fact that I need to add padding.

Any insight or suggestions would be greatly appreciated. I’d prefer a CSS solution, but I’m not against using jQuery.

If it helps, I’m working on a responsive theme based on Twenty Ten. The site is here: https://odin.reaktortest.no/hvorfor-velge-fixit/
It’s the beige box I’d like to keep fixed (#iwajax_contact_widget-2).

I second this. If the same HTML that can be used in posts can be used in the quotes, it stands to reason that shortcodes should work here as well.

Does anyone know of a way to add this functionality to the plugin? Or does the developer plan on adding this in a future release?

Worked like a charm, thanks for the help!

Aha! It was using simplex_comment, but my_comments_callback was still there hidden between comment tags. Removing that comment fixed the problem.

Thanks so much, I never would’ve figured it out without you!

Woot! It works! And the moveForm event is still working too.

Thanks a bunch!

Thanks for the response and the tip about the JQuery toggle() method. Scripting really isn’t my strong suit, so I just google until I find something I know how to implement.

You said the code you suggested can be added if there is no other onlick event, but there is one already if you scroll to the right to see the rest of my code above:

onclick='return addComment.moveForm(\"$add_below-$comment->comment_ID\", \"$comment->comment_ID\", \"$respond_id\", \"$post->ID\")

I believe this is what moves the comment form from its default location to underneath the comment you’re replying to.

Would there be a solution with JQuery in this case as well?

This fixed it, thanks so much!

I spent the better part of a weekend trying to figure this out and was going crazy!