Like alert bar of stackoverflow here.
It should not be position:fixed,because it's not supported by all browsers.
Absolutely,neither will position:absolute do.
You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.
function positionView()
{
return (window.pageYOffset) ?
window.pageYOffset :
(document.documentElement.scrollTop) ?
document.documentElement.scrollTop :
document.body.scrollTop;
}
function setPosition(object)
{
object.style.top = positionView() + "px";
}
Then just pass in the DIV object you want to use, with document.getElementById.
I'd use position: fixed;. Many people still use IE6, though, which does not support it.
Put the div under the body tag, give it position absolute, top:0, left:0
And if you want it to push the content, just put it there without the CSS I gave you.
Its very simple step if you are using any class in css apply one more property z-index = 1;
it will make that div to always on top, if that div is relative to its parent div.
Make sure the element is directly nested under the body tag, use css with absolute position and top:0;
By the way, fixed is used by a large majority of the browsers.
Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.
Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.
Related
Is it possible to work only on css, to set a dynamic height of the div to a proportion of full screen?
Would like to have something like the following example
.my_div {
width:100%;
height:90%;
}
No, only dynamic width. You need javascript to adjust height dynamically.
Unless you are looking to do this, in which case search before asking next time. :)
I agree with #Alexander O'Mara.The parents like html or body or any wrapper must have dynamic heights on js that their children elements are free to set their heights with percentage.It is not possible to work only on css.
I'm trying to use a Bootstrap 3 popover as a relatively positioned element that is inserted in normal document flow, so it pushes down the subsequent DOM elements. That is, I have a big image at the top, followed by a form. When the image is clicked, I want a popover to appear below the image, pushing down the form.
I understand that popovers generally have an absolute position as in the normal use case this makes sense. However, in my particular case, I'd like it to be relatively positioned, but still appear below the element it belongs to. Is there a (non-hacky) way to accomplish this?
You can use simple CSS to override Bootstrap's position:absolute..
.popover {
position:relative;
}
Demo: http://www.bootply.com/129257
Do you have to use the popover for this? Seems like you would be better served by the collapse component: http://getbootstrap.com/javascript/#collapse
And if you don't absolutely HAVE to use Bootsrap for this, jQuery's slideToggle function would accomplish what you're looking for, too: https://api.jquery.com/slideToggle/
I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.
How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)
A cross platform solution is needed
The div has a scrollTop property that you can set (and its pal, scrollLeft).
jsFiddle Demo
scrollTop on MDN
scrollLeft on MDN
there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here
As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:
$(function() {
$('#scroll').scrollTop(100);
});
Add a div (where you want to scroll):
<div id="#scroll-here">Test..</div>
and add a link like this:
Scroll to Test
if you want a smooth scroll you can check this
You have to target taht div and set scrollLeft. scrollTop property.
const scrollingDivElement = document.getElementsByClassName("class_name");
if(scrollingDivElement && scrollingDivElement.length > 0){
//this is the div element that scrolls
scrollingDivElement[0].scrollLeft += 50;
}
I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.