Have Geek Brain

Clicking on every HTML element regardless of their location

I am working on an application where we insert the application widget into the body of the site, at the bottom. We did it so that the position of the widget was fixed, at the bottom: 0. The widget will be saved regardless of where you are on the site; that is, at the bottom of the viewport. The problem is that the widget covers the elements at the bottom of the site.

Is there any way to nudge the content of the site, regardless of its content positioning (like position and float properties) so that our widget never covers anything on the site? Because of the "position: fixed" widget, it breaks out of the normal layout, and thus adding a margin or padding will do nothing.

I've tried a workaround where I add a div in front of the widget itself, that's the height of the widget, so that it pushes everything up and to the side. However, if the site itself has floated or bottom-positioned elements, they will still be closed.

Update: Thanks for all the answers. In the end, I pretty much gave up on this task as it seems to be site specific and the widget is meant to be embedded in any site via <script>

. I think I should have said that beforehand.

Update 2: Last answer solved it.

+1


a source to share


5 answers


In jQuery :

$('html').height( $(document).height() + numerical_height_of_your_widget );


This basically sets the height of the html tag as the sum of the content height (via jQuery magical $ (document) .height () and the height of any position: the fixed element you add (in this case, your widget).

+1


a source


Perhaps you can add a lower part of the lower body that is equal to the height of your position: a fixed element.



+2


a source


Have you tried inserting your widget at the very end of the tag <body>

? This will be at the bottom of the page and doesn't have to be fixed. It won't cover any content because it will follow the normal flow.

0


a source


You should continue using positioning your expanded absolute and place a div for the content and add a bottom margin equal to or greater than the height of your expanded one.

This will work I think.

0


a source


Create an empty field that sets the page height:

<style>
#content {width: 80%;
          margin-left: 18%; /* to create a gutter between content and widget 
                               and to allow for borders and such */
}

#widget {width: 18%;
         position: fixed;
         bottom: 0;
         left: 0;
         padding: 0.5%;
         border-top: 1px solid #ccc;
         border-right: 1px solid #ccc;
}

</style>

...

<div id="content">

    <p>All of the branding, headers and content goes in this wrapper div.</p>

</div>

<div id="widget">

    <p>Widget goes here.</p>

</div>

...

Should work, I think. Mainly because it creates a column for the widget to be inserted. Note: you may need to allow small screens to be created, so perhaps create some means to keep the widget from being pressed or at least to take on graceful fatigue.

0


a source






More articles:


All Articles