Why don't <section> elements accept width and height attributes just as <canvas> elements do?
(JSFiddle)
This is because section is a direct subelement of HTMLElement whereas Canvas is a HTMLCanvasElement which also extends HTMLElement but adds those 2 properties.
A section element is meant to be styled used CSS (similar to divs) whereas canvas is supposed to more of a HTML + Javascript interaction
I'd never recommend using javascript to style the look and feel of a HTML element, that's why CSS got invented for, right?
If you're really pushed for any reason to use it, then take a look at the js alternative below.
Try declaring the properties as you'd do with a normal HTML element (cross browser way to do it):
section.style.width = '250px';
section.style.height = '250px';
Have a look at this working fiddle.
Related
So Im trying to change the width of a specific element in real time. Meaning that as you scale the browser window, the element changes width along with it.
Now, the way im calculating this width is by using another element as a reference point. So i just basically copy the reference element's width and apply it to my own element. However the problem is that this is only applied after every page refresh instead of a real time change.
Im using the following jquery code:
$("#lists ul").css("width", $("#lists").width());
As you can see, the code is pretty simple. #lists ul is the elements whose width I am attempting to change and #lists is the reference element. My question is, is there a way to achieve this effect? or should I use a different approach? thanks for the help!
No need to use JavaScript to adjust widths. This should be all you need:
#lists ul { width: 100%; }
What you're trying to do sounds crazy. As others have pointed out, using a percentage in CSS is probably much smarter.
If you insist on doing it this way though... I'm guessing your event is firing within $(document).ready(). Instead, try this.
$(window).resize(function(){
$("#lists ul").css("width", $("#lists").width());
});
You can use a combination of JavaScript and CSS. I don't know what your specific needs are, but you can easily set the width of an object like this:
var element=document.getElementById("my_element");
element.style.width=10+"px";// Simple as that.
If you just want to scale your element based on its parent element's size, this is best done with CSS percent width and height.
CSS:
#my_element{
width:20%;
}
Then CSS takes care of all your scaling needs whenever the parent element is resized.
CSS by itself may not look like what you want it to be, but if you make sure to define all applicable CSS properties of your element (like margin, padding, border, etc...) and then bolster the layout with JavaScript, you can do quite a bit.
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.
Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements.
I further discovered that the <html> element covers the whole area of the browser-window. Is it safe to use that DOM-node when it is about the document properties? I.e. getting the width/height for example?
Does by any chance <html> correspond to what is referred to as document in javascript?
EDIT: Side note on the setup:
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. Working with the <html> node here seems to work out so far. I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node.
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. It is not like a <body> or <span> tag. It tells the browser that the following code or information is HTML. Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. For more information on that, check out this page.
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight. This should get the height and width of the entire window (excluding any scrollbars or toolboxes).
You can also use documentElement to get the width and height of the entire document.
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery.
var width = $(document).width();
var height = $(document).height();
The html represents all markup and content in the document, but it does not correspond to the document object. Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, e.g. document.children[0]).
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight.
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. You can see this if you set both a background and a border on it; the background may extend outside the border. Moreover, the CSS spec also specifies that if no background set for html, the background of body is used instead.
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
Are there any workarounds to read proper element dimensions when it's display value is set to none?
Well, one would be to hide it without changing the display, but visibility property instead. While it gives proper dimensions, the element affects document flow.
One more way I can think of is opacity, but then the browser support kicks in.
The element I'm working with is appended to body.
Oh yes, I'm looking for computed style. There are no static CSS properties set for dimensions etc.
Any other solutions?
When display is none, by definition elements non-block elements have no dimensions. (Thanks, #Pekka) One potential way around this is to position the element far off-screen by setting position: absolute and left: -999em. The element will still exist so you can get its dimensions, but it won't appear in the document and should not affect flow.
There is a way to do it with offsetHeight and javascript
<script type="text/javascript">
<!--
onload=function() {
var divh = document.getElementById('top').offsetHeight;
alert(divh +"px");
}
//-->
</script>