could someone please explain to me, why id of "he" changes the font size, however id "clanky" stays the same.
<h1 id="he">Zoznam článkov / Article List</h1>
<main id="clanky"></main> //there are articles plugged in there in different function
function myFunction() {
document.getElementById("he").style.fontSize = "90px";
document.getElementById("clanky").style.fontSize = "90px";
}
I tried just changing the color to see if it works overall and yes, the color does change in both of them. Anyone might have an idea, what is blocking the "clanky" font size to be changed?
In order to increase every elements font size you will have to have a root/default set somewhere. This will usually just be in the styling of your <body>.
Example (CSS):
body {
font-size: 16px;
}
Now that there is a 'default' size, you can go to which ever element you want and use the rem and em units rather than px.
So instead of typing 16px on every element, you can now do 1em.
This means that so when you change the root size, every other element that uses em or rem should be effected.
(Note: the button's font size won't change in this snippet. If you would like that to happen you will have to add font-size: 1em; in CSS to your button tag.)
Read more about em and rem units here.
document.getElementById('increaseFont').onclick = function () {
var body = document.getElementsByTagName("BODY")[0];
body.style.fontSize = "22px"; // - Whatever you want the font the increase to.
};
document.getElementById('defaultSize').onclick = function () {
var body = document.getElementsByTagName("BODY")[0];
body.style.fontSize = "16px"; // -- THE DEFAULT FONT SIZE IN CSS
};
body {
font-size: 16px;
}
<h1>I am a heading!</h1>
<p>I'm just a small paragraph...</p>
<button id="increaseFont" type="button">
Increase all fonts
</button>
<button id="defaultSize" type="button">
Default font size
</button>
It does. You didn't include enough, but my guess is that you're changing the div, but there are tags inside the div that the CSS is controlling.
https://jsfiddle.net/24emLxn7
<h1 id="he">Zoznam / Article List</h1>
<main id="clanky">blah blah</main>
push me 1
push me 2
As you said that the article is plugged there from another place, there are inline font-size in that article that you can not override by setting font-size on parent element. Thats all.
Working fine. Maybe you have some other event on div inside the main tag.
<h1 id="he">Zoznam clánkov / Article List<br>Hello</h1>
<main id="clanky"></main>
<input type='button' value="Change Font Size" onclick='myFunction();'>
function myFunction() {
document.getElementById("clanky").innerHTML='Hello';
document.getElementById("he").style.fontSize = "90px";
document.getElementById("clanky").style.fontSize = "90px";
}
Related
I'm learning javascript!
What I need to do, is to change the background-color at the same time when the image is changing by clicking on the button.
Changing the picture, from light-On to light-off, is working properly, the only problem is that the color of the background of my html page, is not changing.
function colorize() {
var element = document.getElementById("azul");
element.style.backgroundColor = 'blue';
element.style.color = "yellow";
}
html{
background:
grey;
}
#azul:focus {
background: blue;
}
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG'">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
<button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>
You want to change background of html so what you have to do is...
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
}
You were taking button element and changing its color. you have to select html tag as you want to change the background-clor property assigned to it via css.
This is your solution call the colorize function too
<html>
<script>
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
element.style.color = "yellow";
}
</script>
<style>
html{
background:
grey;
}
#azul:focus {
background: blue;
}
</style>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG';colorize()">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
<button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>
</html>
You need to change the background color of the document, not element, which is your button.
Since you are new to JavaScript, let's get you off of some bad habits that you've already picked up.
Do not set up event handlers via HTML event attributes (i.e. onclick, onmouseover, etc.). This is a 25+ year old technique that we used before we had modern standards and best practices and because it's easy to use, people keep using it. But there are a variety of reasons why you should not use this technique and instead separate your JavaScript from your HTML. Instead, keep your JavaScript separate and use .addEventListener() to hook up your elements to their respective callback functions.
Whenever possible, work with pre-made CSS classes because these are easier to manage and reuse than inline CSS styles (via the .style property). You can then easily use the element.classList API to add or remove classes as needed.
See the comments inline below:
// Get references to the elements you'll need to work with
let targetImage = document.getElementById('myImage');
let btnOn = document.getElementById("on");
let btnOff = document.getElementById("off");
// Then, set up your event handlers in JavaScript, not HTML
btnOn.addEventListener("click", changeImage);
btnOff.addEventListener("click", changeImage);
function changeImage(){
// Set the target's source to the data-source attribute for the clicked button
targetImage.src = this.dataset.source;
targetImage.alt = this.dataset.alt // Now update the alt attribute
// Change the background color of the page by adding or removing a
// pre-made class to/from the body based on the button that was clicked
// Since this is a simple if/then scenario, we can use the JavaScript "ternary" operator
// which works like this: some condition ? what to do if condition is true : what to do if false
this.id === "on" ? document.body.classList.add("blue") : document.body.classList.remove("blue");
}
body { background-color: grey; } /* Style the body, not the HTML */
#on:focus { background: blue; color:yellow; }
.blue { background-color:aliceblue; } /* This will be added when on is clicked */
/* Just for this example only */
img { width:100px; }
<button id="on" data-source='https://cdn.wccftech.com/wp-content/uploads/2015/04/bulb_PNG1250.png' data-alt="On Image">Turn on the light</button>
<button id="off" data-source='https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg' data-alt="Off Image">Turn off the light</button>
<div>
<!-- <img> elements must have an alt attribute to be valid -->
<img id="myImage" src="https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg" class="mudar" alt="default image">
</div>
Here is your code:
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.getElementById('myImage').src = '/img/393533_02.PNG';
document.body.style.background = 'grey';
}
else {
document.getElementById('myImage').src = '/img/393533_01.PNG'
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="colorize(true)">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar"/>
<div id="yellow">
<button onclick="colorize(false)">Turn off the light</button>
</div>
</div>
</body>
Now in colorize function you can write as much parameters as you want for two different conditions.
I want to open a new page that has content identical to a div called Div1 in the old page.
In my JavaScript function I have a newWindow variable that is returned by a window.open command, and I write the inner HTML of Div1 into newWindow, and I want every single text within the new page has a font size of 7px. Here is what I wrote:
newWindow.document.write('<html><head><title>Hello World</title>');
newWindow.document.write('</head><body style="font-size:7px">');
newWindow.document.write($('Div1').html());
newWindow.document.write('</body></html>');
The new page renders but since the content in Div1 are splited into 3 fieldsets, only the legends of those fieldsets have their font size changed to 7px, everything within the fieldsets still has default font size (which is approximately 11px). How to change every text in the new page to 7px? I can document.write a link to a new stylesheet for the new page but I prefer inline styling. Thanks.
Old page (ASP.net):
<div id="Div1" runat=server>
<fieldset>
<legend class="LLegends"> Header </legend>
<asp:FormView ID="FormView1" runat="server">
contents that I want to be 7px in the new page
</asp:FormView>
</fieldset>
<!-- other 2 fieldsets with the same set up -->
</div>
Class LLegends (only class of elements that has CSS style)
.LLegends {font-size: large;}
You can try this snippet. Add your actual styles, then append them to the document with your other HTML.
SO is preventing the new window from opening, so try this url: http://output.jsbin.com/sobewavagi
(function(undefined) {
/**
*
*/
'use strict';
function addStyleOnOpen() {
var style,
stylesheet,
pageTitle = 'my title',
prnt = open();
style = document.createElement("style");
style.setAttribute('media', 'all');
style.setAttribute('type', 'text/css');
style.setAttribute('rel', 'stylesheet');
style.appendChild(document.createTextNode(""));
prnt.document.head.appendChild(style);
stylesheet = style.sheet;
stylesheet.insertRule('body {width: 100% !important;margin: 0 !important;padding: 0 !important;line-height: 1.45;font-family: "Open Sans", sans-serif;color: #999;background: none;font-size: 14pt;}', 0);
stylesheet.insertRule('#new-window {color: green;}', stylesheet.cssRules.length);
stylesheet.insertRule('h1 {color: red;}', stylesheet.cssRules.length);
prnt.document.title = pageTitle;
prnt.document.body.insertAdjacentHTML('afterbegin', '\n <h1>Heading</h1> \n <p id="new-window">Hello World!</p>');
}
document.getElementById('new-window').addEventListener('click', addStyleOnOpen, false);
}(undefined));
Open
Cannot do inline styling on the new page's body but I figure I can change
newWindow.document.write('</head><body style="font-size:7px">');
To:
newWindow.document.write('<style>.body {"font-size:7px"}</style></head><body>');
I have a slider that's in place on my website.
The basic way that it works is depicted in this jsfiddle -
http://jsfiddle.net/6h7q9/15/
I've written code to set the parent's height to the height of the content div. This worked fine, until I introduced some content that did not have a fixed height and whose height might increase while it was being shown on the page. Is there a way, I can dynamically change the height of this parent div whenever content inside it increases or decreases it's height.
HTML -
<div id="slider_container">
<div id="slider">
<div id="slide1">
Has content that might increase the height of the div....
</div>
<div id="slide2">
Has content that might increase the height of the div....
</div>
<div id="slide3">
Has content that might increase the height of the div....
</div>
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
I appear after the largest container, irrespective of which one is present....
</div>
JavaScript -
var currSlider = 1;
$('#btnNext').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) <= -400) {
return;
}
currSlider++;
// Moving the slider
$('#slider').css('margin-left', parseInt(margin) - 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) >= 0) {
return;
}
currSlider--;
// Moving to the previous slider
$('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnAddText').click(function() {
$('#slide' + currSlider).text('Hello World'.repeat(100));
});
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
};
I hope this "answer" gets you going in the right direction. Since i don't have the time to fully look this up right now, i hope to send you in the right direction. if you do find out how to do this properly, please shoot me a message, since i would really like to know ^_^
http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types
An example on how to use: (DOMSubtreeModified didn't work in IE from what i read. Therefor the propertchange event)
$('#slide1').on('DOMSubtreeModified propertychange', function() {
console.log('test',this);
});
Another option is by using the MutationObserver:
http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
Updated 6-8-2014 15:00 CET
Since i totally misread the original post, this answer was useless to say the best. But since the problem is actually really easy to solve (or... at least i hope i understand the problem this time), i thought i'd post an answer that worked for the situation: a slider with content of different heights.
What was the problem with the original slider? You moved the content out of the container, which made it hidden. However, the container would still pick up the height of it, since it only had a fixed width. The fixed height on the '#slider' did not prevent the container of picking up the height from the '#slide-*'. Had you set the height for the container... all would be fine :-)
Here's the outline of the hidden slide, moved 'off canvas': http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png
I did not fix your fiddle by completing your code. I just rewrote it to provide you with an easier to maintain slider. Here's a fiddle with a working slider where you can add and remove stuff in the slides: http://jsfiddle.net/3JL2x/3/
Just remove the height properties in the .slide1, 2 and 3 and add min-height instead.
Like that :
#slider > div {
min-height:200px;
float:left;
width : 200px;
}
#slide1 {
background-color : red;
}
#slide2 {
background-color: green;
}
#slide3 {
background-color: blue;
}
Live example
http://jsfiddle.net/6h7q9/27/
What i'm trying to accomplish is this:
I have a parent div which has multiple childs. I don't want to display the parent only the children. If I do this:
.navbar-default, #filters, #options {
display: none;
}
div#filter_date {
display: block;
}
Then it just doesn't show the the parent div with its children.
I have tried to make the question as easy as possible.
You cannot accomplish this the way you anticipate, as styles are inherited.
Your only solution would be to override the print styles for the parent to give the impression it was being hidden, e.g set any border to none, remove any background colors or images, remove padding, margin etc. Take whatever styles you have applied for the parent, and in your print CSS override them with properties which will provide the illusion the parent isnt in place.
Otherwise you are attempting to change the structure of your DOM with CSS alone, which is not possible.
Mmm, I think you can use jQuery .unwrap if I understand properly what you're trying to achieve.
Adapted from jQuery's own example...
<div class="yellow">
<p class="in-out">Am I in the </p>
<p class="in-out">div or out</p>
<p class="in-out">the div</p>
</div>
....
<button>Toggle</button>
---JS---
var pTags = $( ".in-out" );
$( "button" ).click(function() {
if ( pTags.parent().is( ".yellow" ) ) {
pTags.unwrap();
}
else {
pTags.wrap( "<div class='yellow'></div>" );
}
});
....
---CSS---
.yellow
{
background-color: yellow;
}
See example here...http://jsfiddle.net/richf/8LvJZ/
Obviously you don't need the button in your case.
I am trying to change the alignment of textbox dynamically and it is not working. But if I give through on load of widget that is working fine.
code; HTML
<input type="text" id="text1" style="text-align:center;width:80px" value="abc">
<input type='button' id="btn" value="click">
JavaScript:
document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style['text-align'] = "left";
}
You can fix this bug by using the ::-ms-value pseudo element. You need to add some padding so it triggers a repaint. As it is the pseudo element rather than the actual element you are adding padding too, it looks like it doesn't change the actual width of the input. It also has the advantage of not being applied to non-IE browsers.
CSS:
.update::-ms-value {
padding-right: 1px;
}
JS:
document.getElementById('text1').className += "update";
http://jsfiddle.net/yHnLK/22/
Of course, you’d want to store the text1 element in a variable so you don't keep calling getElementById each time. Adding the text-align: left; via CSS would also be better, rather than adjusting the style object directly.
Try this code. Hope it help you with a good solution.
I set width to zero value then using timer to set width to the previous value to make it rendering again.
HTML:
<div>
<textarea name="text">WANDER LUST</textarea>
</div>
<div>
<button class="btn-text-align" data-rule="textAlign" data-value="left">Left</button>
<button class="btn-text-align" data-rule="textAlign" data-value="center">Center</button>
<button class="btn-text-align" data-rule="textAlign" data-value="right">Right</button>
</div>
Javascript:
(function($) {
$('.btn-text-align').on('click', function(){
$obj= $(this);
rule= $obj.attr('data-rule');
ruleValue= $obj.attr('data-value');
textElement= $(':input[name="text"]')[0];
textElement.style[rule]= ruleValue;
width= textElement.style['width'];
textElement.style['width']= '0px';
timerElement = setInterval(function () {
textElement.style['width']= width;
clearInterval(timerElement);
}, 10);
})
})(jQuery);
http://jsfiddle.net/zLwq140x/
Try this code, it works in IE:
Javascript:
document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style.textAlign = "left";
}
MDN CSS Properties Reference