is it possible to change to HTML root element style with js - javascript

Hi im trying to change to font-size of the whole HTML page currently i have in my css :
html {
font-size : 65.5%
}
and im looking to mutate the value with JS for ex :
document.getElementsByTagName('html').style.fontSize = '35%'
if that however is not possible please explain to me why and maybe provide a solution for this thanks

getElementsByTagName is grabbing an HTMLCollection vs. a single element. [0] index it to grab the html tag and proceed with what you had:
document.getElementsByTagName('html')[0].style.fontSize = '35%';
Alternatively, you could use querySelector, which would just select the first matching element:
document.querySelector('html').style.fontSize = '35%';

Another way, slightly more concise:
document.documentElement.style.fontSize = '35%'

As Carl said, your code runs into an issue by expecting a single <html> element from document.getElementsByTagName('html'), but is instead getting a collection of elements. Carl's answer will help you resolve that problem.
There is still another problem you may encounter though: if you are trying to reduce all font sizes by applying a smaller font size to the root <html> element you will only succeed in effecting font-sizes relative to the <html> element! Setting font-size: 20px; will cause that element to always have 20px font, no matter the font sizes of its ancestor elements.
We can see that some font sizes fail to change in the following example:
/* We attempt to shrink all font sizes: */
html { font-size: 66%; }
/* These styles just make it easier to see what's happening */
div {
box-shadow: 0 0 0 1px black;
padding: 4px;
margin-bottom: 10px;
line-height: 30px;
background-color: #ffffff;
}
body > div { background-color: rgba(0, 0, 0, 0.05); }
**Html font-size: 66%**<br/><br/>
<div style="font-size: 100%">
font-size: 100%;
</div>
<div style="font-size: 100%">
font-size: 100%;
<div style="font-size: 100%">
font-size: 100%;
</div>
</div>
<div style="font-size: 16px">
font-size: 16px; (not effected by html font-size!)
</div>
<div style="font-size: 16px">
font-size: 16px; (not effected by html font-size!)
<div style="font-size: 100%">
font-size: 100%; (not effected by html font-size!)
</div>
</div>
Following Carl's advice, and making sure all font-sizes in your page are relative, will give you the results you want!

Related

Can't store TagName positions in an array

I have a page which displays a story, with buttons at the button to go from page 1 to page 2 and 3 and vise versa, the story is in a one array position which i've sliced using a character length to fill out each page. The text which im appending to the paragraphs on each page contains tags. Im trying to add tooltips for each bit of i've placed in bold tags. I'm trying to get all on the page, log the x and y position and then create an element with the text which is needed for each element. Here's an example of what my code looks like
pageItemsArray = [
['The <b tooltip ="make: rennault">car</b> is a round <b tooltip ="name: oak">tree</b>.']
['make: rennault', 'name: oak']
]
note: tooltip="make: rennault" and tooltip="name: oak" is only there for people trying to solve this with css, and is not there for people trying to solve this with javascript, however it doensn't need to be removed
html :
<p class="insertStoryPageHere"><p>
javascript:
for(i=0; i<document.getElementsByTagName("b").length; i++) {
/*run code for all tooltips here*/
element = document.createElement("SPAN");
element.innerHTML = pageItemsArray[1][i].toString();
element.setAttribute("class", "tooltip");
document.body.appendChild(element);
x = document.getElementsByTagName("b")[i].offsetLeft;
y = document.getElementsByTagName("b")[i].offsetTop;
element.setAttribute("left", x);
element.setAttribute("top", y);
}
However, the spans are positioned at the bottom of the page, and not anywhere near where they are meant to be.
Update: Still not answered :(
heres css for people trying to solve via css
b:hover[tooltip]:before {
content: attr(tooltip);
position: absolute;
z-index: 1;
top: 0rem;
left: 0rem;
padding: 5px;
background-color: black;
color: white;
border-radius: 5px;
.insertStoryPageHere {
position: relative;
font-family: Proxima;
font-size: 16px;
line-height: 2em;
height: 311px;
}
The problem with the css solution is that the tooltips are moving the paragraph text on hover...
What it looks like, the with the css
Here is a quick and dirty CSS only solution. I simply added a tooltip attribute to <b> with some text (slightly different from your array, though). This should give you some direction. No need for a complicated construction with remembering positions and what all not. Keep things simple and save the headache for the really hard stuff.
body { margin: 0; padding: 5rem } /* some spacing */
p { position: relative } /* creat a stacking context */
b:hover[tooltip]:before {
content: attr(tooltip);
position: absolute;
/* position within parent stacking context (the <p>, default is <body>) */
top: -2.5rem;
padding: 0.5rem;
background-color: black; color: white;
}
<p>this is a text about <b tooltip="car brand">Renault</b> and how you can keep it running for <b tooltip="unit of time">years</b>

Javascript: table layout is ignored when using innerHTML

When I use Javascript to place some table tags on a webpage, the displayed text is ignoring the table tags. It just places the text next to each other, instead of displaying it in columns.
This picture shows what is displayed:
In blue are the column headers, in black the table content. As you can see the table content does not follow the column headers...
This is the relevant piece of Javascript code:
document.getElementById("searchresults").innerHTML =
'<div class="table-row">
<div class="table-cell">114</div>
<div class="table-cell">GebouwEigenaar</div>
<div class="table-cell">Paleis het Loo</div>
<div class="table-cell">Begane Grond</div>
<div class="table-cell">Koffiecorner 1</div>
<div class="table-cell">Kantoorruimte</div>
</div>';
This is the relevant HTML code:
<div id="searchresults"></div>
The CSS used to display table rows and cells is used without issues elsewhere in the webapplication. It is also used to display the column headers in this way:
<div class="table-row-header">
<div class="table-cell col-2" >Sticker-ID</div>
<div class="table-cell col-2" >Gebouweigenaar</div>
<div class="table-cell col-2" >Gebouw</div>
<div class="table-cell col-2" >Verdieping</div>
<div class="table-cell col-2" >Ruimte</div>
<div class="table-cell col-2" >Ruimtefunctie</div
</div>
CSS code:
.table { display: table; width: 100%; border-collapse: collapse;}
.table-row { display: table-row; width: 100%; cursor: pointer; position: relative; margin-top: 20px;}
.table-row:nth-child(even) { background: #fafafa; }
.table-row:nth-child(odd) { background: white; }
.table-row-header { display: table-row; width: 100%; color: #0867b3; border-bottom: 1px solid #d7d7d7; background: white; }
.table-cell {display: table-cell; padding: 10px 10px; position: relative; }
.table-cell span { display: none; font-weight: bold; }
.col-2 { width: 16.66%; }
It appears that the browser does not render the HTML inserted by JavaScript.
But why that happens...?
I have tried replacing .innerHTML with .value, but that did not display anything.
Any suggestions are highly appreciated.
Thank you!
There is something that is preventing your table row and table cells from picking up their .css attributes. It's hard to guess why without knowing your .css files and surrounding context. But as a surface level guess, consider looking at
1) Your table cell/row css properties aren't being imported correctly.
2) Whether your parent table's css properties are overriding their children's properties.
As a clue, you should try pasting those divs outside the context of your table. Does the css styling automatically show up? If so, you now know that it's something to do with the parent divs. If not, you know the problem is with the child divs.
The issue has been resolved.
It was caused by an incorrect use of table-formatting tags.
That caused the formatting to be incorrect.
Thanks everyone for the provided suggestions!

Smart DOM Insertion (preserve styles of child element)

This is a very odd question, of which I am fairly confident I already know the answer, however, before I go ahead with the fix that I am trying to avoid, I thought it was worth asking others as you may see this from a different angle
I am currently writing a plugin that takes a certain element (can be any DOM node), and wraps it with a div. The purpose of the plugin is to add a 'blinds' effect to elements which can then be used to reveal the element on scroll.
Note: Wrapping with a div is absolutely essential to the functionality I am implementing.
My question, quite simply, is anybody aware of a smart way to preserve the styles from the element being wrapped and ensure it visually remains the same as it was before the div wrapping, and, whilst retaining the dimensions so another div can be inserted within the wrapper and be the same dimensions of it's sibling.
See this very basic example (before and after - notice the blue blind):
.test {
display: flex;
flex-flow: column;
height: 200px;
text-align: center;
}
.test:nth-child(1) {
background: #999;
}
.test:nth-child(2) {
background: #666;
}
.test > * {
flex: 0 1 auto;
}
.test h1 {
margin: auto 0 0;
color: #fff;
}
.test p {
margin: 0 0 auto;
color: #fff;
}
.test-wrapper {
position: relative;
width: max-content; /* Fix for example purposes */
margin: 0 auto; /* Fix for example purposes */
}
.test-wrapper .blind {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: blue;
opacity: 0.5;
}
<div class="test">
<h1>Before wrapper inserted</h1>
<p>Some description</p>
</div>
<div class="test">
<div class="test-wrapper">
<div class="blind"></div>
<h1>After wrapper inserted</h1>
</div>
<p>Some description</p>
</div>
Before answering, these are the solutions I am trying to avoid:
'copying' or 'moving' the styles (or certain styles) from the child to the parent as this is likely to cause a huge mess... Open to suggestions though
Defining styles for test-wrapper in the site's CSS as test-wrapper is a plugin specific element.
The obvious, and very easy, solution is to just define the styles for the wrapper instead of the child in my CSS (SCSS). I appreciate this may be the only way, but I ideally want to avoid this as what I am building is a plugin and I want the HTML/CSS to work with and without the element wrapper in place.

"float" a DIV to bottom of parent DIV not working. (Using Pos: rel, Bottom 0 etc)

Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.

Position badge over corner of image automatically

I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:
It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.
I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.

Categories

Resources