Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #23965 > unrolled thread

Hybrid of absolute and float for positioning a DIV?

Back to article view | Back to comp.lang.javascript

Contents

  Hybrid of absolute and float for positioning a DIV? Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-04-26 16:54 +0100
    Re: Hybrid of absolute and float for positioning a DIV? JJ <duh@nah.meh> - 2014-04-27 06:17 +0700
    Re: Hybrid of absolute and float for positioning a DIV? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-04-26 23:01 -0700
    Re: Hybrid of absolute and float for positioning a DIV? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-04-27 10:17 +0200
      Re: Hybrid of absolute and float for positioning a DIV? Dr J R Stockton <J.R.Stockton@physics.org> - 2014-04-27 03:43 -0700
        Re: Hybrid of absolute and float for positioning a DIV? Dr J R Stockton <J.R.Stockton@physics.org> - 2014-04-27 05:57 -0700
    Re: Hybrid of absolute and float for positioning a DIV? Christoph Michael Becker <cmbecker69@arcor.de> - 2014-04-27 15:17 +0200

#23965 — Hybrid of absolute and float for positioning a DIV?

I want to have a page which looks, statically, like a page with a
float:right styled DIV element; the main text wraps round the DIV.

But I want the DIV element to be at a fixed height, probably top=0, in
the window, as if it were positioned absolutely, but with the main text
wrapping rather than going underneath.

Can that be done reasonably easily, and if so how?

-- 
 (c) John Stockton, nr London, UK.   E-mail, see Home Page.    Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [next] | [standalone]

#23966

On Sat, 26 Apr 2014 16:54:22 +0100, Dr J R Stockton wrote:
> I want to have a page which looks, statically, like a page with a
> float:right styled DIV element; the main text wraps round the DIV.
> 
> But I want the DIV element to be at a fixed height, probably top=0, in
> the window, as if it were positioned absolutely, but with the main text
> wrapping rather than going underneath.
> 
> Can that be done reasonably easily, and if so how?

Is it even possible with current HTML/CSS standards?
That should be the question.

[toc] | [prev] | [next] | [standalone]

#23967

On Saturday, April 26, 2014 10:54:22 AM UTC-5, Dr J R Stockton wrote:
> I want to have a page which looks, statically, like a page with a
> float:right styled DIV element; the main text wraps round the DIV.
> 
> But I want the DIV element to be at a fixed height, probably top=0, in
> the window, as if it were positioned absolutely, but with the main text
> wrapping rather than going underneath.
>
> Can that be done reasonably easily, and if so how?

I can't think of an approach that isn't awkward. Assuming a structure like the following:

<div class="content">
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    ...

    <div class="floatish">
        ...
    </div>
</div>

My approach would be to use position:fixed on ".floatish" and move it to the top right. Then listen to the scroll event of ".content"

In the scroll event find all the <p>'s that are currently covered by ".floatish" and adjust their widths so that they are no longer covered, and vice-versa for the other <p>'s.

This won't look perfect for paragraphs w/ a height larger than the "floatish" height of course.

[toc] | [prev] | [next] | [standalone]

#23970

Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 26 apr 2014 
in comp.lang.javascript:

> I want to have a page which looks, statically, like a page with a
> float:right styled DIV element; the main text wraps round the DIV.
> 
> But I want the DIV element to be at a fixed height, probably top=0, in
> the window, as if it were positioned absolutely, but with the main text
> wrapping rather than going underneath.
> 
> Can that be done reasonably easily, and if so how?

Yes, I think.

Just make the float the first element in the top-div.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#23971

On Sunday, April 27, 2014 9:17:06 AM UTC+1, Evertjan. wrote:
> Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 26 apr 2014 
> in comp.lang.javascript:
> 
> > I want to have a page which looks, statically, like a page with a
> > float:right styled DIV element; the main text wraps round the DIV.
> 
> > But I want the DIV element to be at a fixed height, probably top=0, in
> > the window, as if it were positioned absolutely, but with the main text
> > wrapping rather than going underneath.
> 
> > Can that be done reasonably easily, and if so how?
> 
> Yes, I think.
> 
> Just make the float the first element in the top-div.

I don't think I understand that, or if I do you've not answered the question intended.

But I can get at least near the desired effect by making the DIV a standard float-right and, when the button that fills the DIV is clicked, using insertBefore to move the DIV to the region of the button.  Perhaps one of the scroll methods can then move the top of the DIV to the top of the window.


-- 
  (c) John Stockton, near London, UK.  Using Google, no spell-check.
 Mail: J.R.""""""""@physics.org or (better) via Home Page at
 Web:  <http://www.merlyn.demon.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#23973

On Sunday, April 27, 2014 11:43:39 AM UTC+1, Dr J R Stockton wrote:

> But I can get at least near the desired effect by making the DIV a standard
> float-right and, when the button that fills the DIV is clicked, using 
> insertBefore to move the DIV to the region of the button.  Perhaps one of the 
> scroll methods can then move the top of the DIV to the top of the window.

Yes, Mobile.scrollIntoView() does that.

I would additionally like to do Mobile.scrollIntoView() when the main text is
scrolled by the reader.  MDN says "The scroll event is fired when the document
view or an element has been scrolled.", but I cannot recall how to handle such
an event. ????

-- 
  (c) John Stockton, near London, UK.  Using Google, no spell-check.
 Mail: J.R.""""""""@physics.org or (better) via Home Page at
 Web:  <http://www.merlyn.demon.co.uk/> (may move soon)
 FAQish topics, acronyms, links, etc.; Date, Lagrange, JavaScript, ..|

[toc] | [prev] | [next] | [standalone]

#23975

Dr J R Stockton wrote:

> I want to have a page which looks, statically, like a page with a
> float:right styled DIV element; the main text wraps round the DIV.
> 
> But I want the DIV element to be at a fixed height, probably top=0, in
> the window, as if it were positioned absolutely, but with the main text
> wrapping rather than going underneath.
> 
> Can that be done reasonably easily, and if so how?

I assume that this can be done neither easily nor exactly.  Michael's
suggestion[1] might be the best approximation.

However, you may consider using another layout, for instance, a
"slide-in", i.e. a small tab on the right hand side with a fixed layout,
that expands on mouse-over.

[1] <news:dbce10d6-4aa9-4d1d-92b5-1d215664e048@googlegroups.com>

-- 
Christoph M. Becker

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web