HTML document has some HTML-Elements such as div, p, img, ...
Most of them are dynamically created ( if helpful css: "position:absolute;").
Every time after OnClick the element has to come to the front of other elements.
I mean:
element.parentNode.appendChild(element);
or
element.parent().append(element);
or
// E.g. with css as follows:
$('#ObjId').css('z-index', HighestIndx+1 );
I prefer the use of appendChild, due to the css style z-index won't be inserted into the element.
But I don't know whether the choice of appendChild vs z-index would be better.
My question: What is better to use z-index or append/appendChild ?
Thanks.
I would use z-index because I assume its faster and reliable in old browsers but anyway that's me.
Here is a useful article:
Why would appendChild disregard zIndex?
The article implies some points but isn't entirely focused to your question.
I don't think that appendChild() has anything to do with the z-index. It just add a new child to the calling parent to bottom as a last child. If you want to show your div in front of the other div then it is recommended that you should go with the z-index property.
Related
I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.
Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.
There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.
I want the element to use only css that are in the "A" section and ignore the "B" section.
Is it possible?If javascript can do this, How?
Thanks you.
You can not do that with the example you've provided. The C in CSS stands for Cascading, the styling rules cascade down the DOM tree.
You have to reset the styling of the element to what you want with a more specific selector, e.g. #Examplewrapper input{}. By using a more specific selector, it'll overwrite/suplement the previous styling, without the need for !important.
Alternatively, you can set the most upper selector more specific, e.g. #content input{}. This way, when you place a form in the #footer, it will not have the styling, as #content doesn't have a #footer in it (it cant cascade).
I do recommend to define a general input as you have. This way, all forms have the same font, size and styling throughout your website. If you want another color border, you only have to change that one settings. This is the way many (profesional) sites work, because it is the most efficient.
This is how the inheritance works. You can only overwrite styles if others are set globally (i.e. for all input elements).
You can always limit the global styles of input with some classname, like input.myStyle so the raw input will have no styles set.
I have a <div> element reference in JavaScript as follows:
custom_div = document.createElement("div")
I want to change the position of this element to absolute and set the bottom alignment to 0, through JavaScript. I am looking for suggestions.
There are SO many ways to do this, but direct manipulation of DOM is not recommended. Either use CSS classes or try jQuery.
You can simply use:
document.getElementById("div#example").style.position="absolute";
document.getElementById("div#example").style.bottom="0";
FIDDLE IS HERE (logs to console)
The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.
This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.
Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.
Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?
Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.
It might work to use the offset plus the difference of the height of the html element minus the body element.
console.log("body.offset().top = "+ ($('html').offset().top + $('html').height() - $('body').height()));
Update: This solution will only work if there is not a margin-bottom on the page.
You could additionally add a clear div at the bottom of the page.
$('body').append("<div style=\"clear: all;\"> </div>");
Note that the div must have content to work.
http://jsfiddle.net/SCGdZ/7/
I found a John Resig post about how fast and awesome getBoundingClientRect is here... I wonder why it is not used for jQuery's offset()!
I shall use this method instead and hopefully it will not suffer from this same issue.
Update: Looks good! (the non integer top value is due to the somehow having style -webkit-margin-before: 0.67em;)
You can see that the body has margin=8
jQuery 1.9.0 has addressed this issue. Thanks so much, jQuery is awesome.
Find Here
a[0].style.marginTop it remains uninitialized even after declaring it in css that's why it was returning nothing.
Therefore we must take care of initializing a[0].style.marginTop
I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).
I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.
This might not be conventional but you can try the <marquee> tag
it works both in IE and FF, and the last time I checked, safari too.
<marquee behavior="scroll" direction="up" height="250"
scrollamount="2" scrolldelay="10"">
Your content goes here
</marquee>
should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...
Edit in response to your comment
It gets better, try this in any browser
onmouseover="this.stop()" onmouseout="this.start()"
And this in IE
style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100,
Style=1, StartX=0, FinishX=0, StartY=0, FinishY=10)
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0,
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)"
As attributes of the marquee tag...
function scrollDivUp(id){
document.getElementById(id).scrollTop-=1
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
try something like that maybe.
you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.
You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"
Try changing the div's scrollTop. There is an example here.
I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!