Div with scroll and content with absolute positions - javascript

I have a "div" with style: overflow-y: scroll; overflow-x: auto;
I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine.
Is there any solutions for this?
EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.

I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.

Wrap everything in a containing div that is positioned relatively on the page:
<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
<br />
<img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
<br />
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
<br />[scrolling content]<br />
</div>
<br />
</div>

Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>

Try float:left or float:right with margin
I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.
And a simple solution is using float.
my old code was-
position:absolute; right:10px;
and I replaced with the following and it worked-
float:right; margin-right:10px;

You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...

Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.

You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.
Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:
<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>
<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>
Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com
For a good tutorial on DIV positioning with CSS go to:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Cheers

The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.

Related

Fixed text visible only inside one div

There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.

display an image above the content using absolute positioning

I am just wondering how to display an image above the <p/> using absolute positioning. Note: the image has no define height, it could be longer or shorter. The goal is to display the image above the using absolute positioning.
<div id="wrap">
<p>Hello</p>
</div>
<script>
//Display an image above the <p/> using absolute positioning.
//Note: the image has no define height, it could be longer or shorter. The goal is to
display the image above the <p/> using absolute positioning.
</script>
If you want an <img> above the <p>, is there a reason why you can't do the following?
<div id="wrap">
<img src="path/to/img">
<p>Hello</p>
</div>
I would highly recommend this approach as the height or width of the image will not break anything and the <p> will move according to it's size.
But let's assume the <img> is elsewhere, like below it:
<div id="wrap">
<p>Hello</p>
<img src="path/to/img">
</div>
You can add the following CSS:
img {
position: relative:
top: -25px;
}
This is not a very good thing to do, though - as it literally just moves the image up 25 pixels. What if the size of the paragraph <p> changes? What if you add more content above the paragraph <p>?
You can also try:
img {
position: fixed;
top: 0;
}
This will put the image at the top of the viewport at all time. Again, using either of the these position methods present a lot of problems (unless it's what you want) and I recommend my first suggestion using pure HTML, and avoiding CSS position fixes.
I see no smart way to do this... why not $("#wrap").before("image"); without absolute position?
If you mean in terms of hiding, there you go:
Markup
<div class="wrapper">
<p>I will be hidden soon.</p>
</div>
CSS
.wrapper img{
position:absolute;
top: 0;
}
JS
$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));
See fiddle

Inherit div height from parent with absolute position

I want to achieve this kind of layout with pure CSS:
The gradient in the background is 100% the width of the browser window. The inner text is inside a 1000px div, centered inside the browser window. Now I want the text to define the height of the gradient. And here is the problem: The gradient is positioned absolute (left: 0px; width: 100%), but the text is inside another div.
I've tried some things with display:table; and display:table-cell; but once I put the gradient div to position:absolute it doesn't inherit the height of the text div.
Anyone a solution how to achieve this in pure CSS without javascript?
EDIT:
I'm sorry I forgot to mention that the gradient isn't the problem (I' using css3). And furthermore I also forgot to add the code: http://jsfiddle.net/kxu8N/1/
Absolutely-positioned elements are not part of the layout flow, therefore they cannot inherit dimensional information from parent elements.
You should be using a CSS background image (or a CSS3 gradient) on the element wrapping your text to give you the gradient instead of using a separate element.
You can use the css3 background-size property to scale the height of the gradient. Set the height to auto on a div with the gradient as its background.
Here's an answer without knowing your HTML structure: http://jsfiddle.net/8xagQ/1/
.gradient{
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);
margin:10px 0;
text-align:center;
color:#fff;
padding:10px 0;
}​
Note that I only included the gradient instructions for webkit.
<html>
<head>
<style type="text/css">
p,span{
margin-left:20px;
}
#logo{
font-weight: bold;
height:100px;
}
#slogan{
width:100%;
height:150px;
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
<div id="logo">
<p>Logo</p>
</div>
<div id="slogan">
<span>some text that defines hieght of this</span>
</div>
</body>
</html>
In my Case I move your blue into your gradient. that way, once you add more line, line of text it will increate automaticaly
<div id="container">
<div id="outer">
<div id="blue-background">
<div class="span3" id="blue">
Here is my content<br>
and this content should define the height of the underlying #blue-background <br />
and if we are adding more and more and more
</div>
</div>
</div>
</div>
Then to the text into it I change few setting in the CSS
#blue {
z-index: 1;
position:relative;
margin:auto;
text-align:center;
}
Because I didn't find any solution, I hacked it. Cause my content gets added dynamically through javascript, I added the content two times. The first time visible inside the overlaying div (over the blue background), and the second time inside the blue background. With visibility: hidden I hide all the divs inside the blue background.
And because both divs got the same content, they get the same height. Not beautiful, but it works.

Re-size Event on div captured by innerHTML hover and user can't grab the re-size triangle

Please no jQuery - only JavaScript or better yet simply CSS
You can see the problem here: Try to resize div.
I have a series of div tags that have dynamic content and need to be re-sizable by users. When the inner content has a hover event,it grabs the event and the user can't re-size. The dynamic content can be any size -usually bigger than the outer div. I'd love to solve this with css, but adding padding or margins to the outer div does not seem to help. This only has to work on latest Firefox and Chrome. This is not the exact code, but it's show the problem - at least in FireFox:
<head>
<style>
#inner:hover {
display:block;
color:#FF00FF;
background-color:grey;
width:500px;
height:400px;
}
</style>
</head>
<div id="outer" style="resize:both;width:20px;overflow:hidden;">
<div id="inner" style="width:90px;height:90px;">
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar
</div>
</div>

display div inside text area

I'm looking to display html in a text area. Is it possible to display a <div> containing form elements inside a <textarea> using javascript or jquery?
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();
Now you can append childs just like others.
You cannot place HTML elements inside a text area, only text content.
You can achieve this by using div with contenteditable attribute, instead of a textarea, like this:
<div contenteditable="true">
<div>inner div</div>
</div>
But if you try to change the innerhtml of this div dynamically then remember, you'll have to manage caret location by yourself.
No, it is not possible(it will not render the UI). If you want to show form fields why are you using textarea? You can just use normal html.
As such, it's not possible to use html tags in a <textarea>. You have to find a workaround.
I found your question when I was looking for a solution for something entirely else but however... With a wrapper you can easily place your input over your textarea. I'm not sure how much sense that makes but I believe it answers your question anyway.
.wrapper {
position:relative;
width:200px;
height:50px;
}
.wrapper textarea {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
resize: none;
z-index:1;
}
.wrapper input[name="test2"] {
position:absolute;
top:0;
left:50px;
z-index:2;
}
<div class="wrapper">
<textarea name="test1">This is</textarea>
<input type="text" name="test2" placeholder="(Sparta?)">
</div>

Categories

Resources