Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
Suppose if we give some properties to all h1 tags using external css and we have to give one more property (not present in css) to only one of the h1 tag with same remaining properties in css.So do I have to write seperate code by giving that tag a id or there is any shorter way?
two classes sounds like the right way to go, even better than generic h1 tag directly, for example:
index.html
<div>
<h1 class="generic-class">generic</h1>
<h1 class="generic-class">generic</h1>
<h1 class="generic-class specific-class">specific</h1>
</div>
style.css
generic-class {
color: red
}
.specific-class {
font-weight: 800
}
This way, all of them are red, and the last one is red and bold too.
Another solution is to add inline css code directly into the style attribute of the element. In the snippet below I show multiple ways of selecting which element you want to edit with various selectors and js functions.
Though you should keep in mind it's better to have only 1 <h1> on a webpage, mostly for SEO purposes.
// Select h1 by query, for example query below selects the first h1
let h1 = document.querySelector('h1:first-of-type');
h1.style.color = "black";
// Select h1 by id
let h1_2 = document.getElementById('h1_to_select');
h1_2.style.color = "blue";
// Select h1 by index
let h1_3 = document.getElementsByTagName('h1')[1];
h1_3.style.color = "green";
h1{
font-size:16px;
font-family:sans-serif;
color:red
}
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1 id="h1_to_select">This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
Related
This question already has answers here:
CSS :first-letter not working
(3 answers)
Closed 13 days ago.
It looks like <sub> and <sup> are not supporting the ::first-letter CSS pseudo-element. Any idea how to solve it?
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
Update
As #temani-afif pointed out, this was answered on html - CSS :first-letter not working - Stack Overflow, just I wasn't able to find it focusing specifically on <sub> and <sup> tags, which are not mentioned in that topic.
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content.
-- ::first-letter - CSS: Cascading Style Sheets | MDN
The <sub> and <sup>elements are not block-level elements by default, but using the CSS display Property with the inline-block value
can change this.
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
sub,
sup {
display: inline-block;
}
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've got a very amateur question since I am very new to coding!
I have 4 button inputs "skolefag", ""sport", "fritid", "diverse" and 4 large squares (stacked upon eachother, different colors, but you can only see the red one)
I want to switch between divs (the large squares) when i click on the different categories, so that the contents and background color of the correct/matching large square shows.
What would be the easiest technique to achieve this trough?
Sorry again and thank you in advance!
You need to use onclick attribute on you button or add a click eventListenner to it.
Then you create a function that is called by onclick="myfunction(idButton)" or by your eventListener :
function myfunction(idButton) {
document.getElementById("my-elmt-to-set-up").backgroundColor = docuement.getElementById(idbutton).backgroundColor
}
and same thing for color properties, review javascript lesson I think --> after lesson you can make some incredible interactions
Here is one solution (which I think is neat):
document.addEventListener("DOMContentLoaded", function() {
change_menu("home");
});
function change_menu(
menu_to_show
) {
['home', 'second', 'third'].forEach(function(memuee) {
document.getElementById(memuee).style.display = 'none';
});
document.getElementById(menu_to_show).style.display = 'block';
}
<div style='display: flex;font-size: 200%;'>
<div>
<div style="background:green" onclick="change_menu('home')">Home</div>
<div style="background:red" onclick="change_menu('second')">Go To Second</div>
<div style="background:blue" onclick="change_menu('third')">Go To Third</div>
</div>
<div id="home" style="background:green">
HOME PAGE
</div>
<div id="second" style="background:red">
SECOND PAGE
</div>
<div id="third" style="background:blue">
THIRD PAGE
</div>
</div>
Of course this could be further optimized by referencing "page" divs by the "button" div's ids (e.g. home_page from home_button) or grouping ids within given "wrapper" divs, using classes, etc., but I think this is the essential solution.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
is there a way where in I can disabled a certain element/class/id to be appended?
<div class="someHtmlElementHereWillAppendOnPageLoad">
-- but it dont want this part to be appended --
</div>
Sure -- add the attribute canAppend="no" to an element then use the attribute selector like this:
$(document).ready(function() {
/* add the attribute selector [canAppend!="no"] to your select or */
$("div[canAppend!='no']").append(" appended content here");
});
div { border: 2px solid black }
<!-- regular divs that dont have the noAppend attribute -->
<div>div 1</div>
<div> div 2</div>
<!-- special div that has the noAppend attribute -->
<div canAppend='no'>div 3 no append </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
EDIT
Since you dont know when the append operation will take place, just do this:
use jQuery to grab all of the values of for divs with a certain class and store those values into an atttribute by using encodeURIComponent() and $("").attr()
THen make a timer that constantly replaces the div's HTML with the desired HTML
$(document).ready(function() {
$(".someHtmlElementHereWillAppendOnPageLoad").each(function(i, ele) {
$(ele).attr("lockedContents", encodeURI($(ele).html()))
});
setInterval(function() {
$(".someHtmlElementHereWillAppendOnPageLoad").each(function(i, ele) {
$(ele).html(decodeURIComponent($(ele).attr("lockedContents")));
})
}, 100);
});
div {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someotherdiv">#1 dont care if it gets edited</div>
<br>
<div class="someHtmlElementHereWillAppendOnPageLoad">
-- but it dont want this part to be appended --
</div>
<br>
<button value="append to all divs" onclick="$('div').append(' appended text ');">Append to all divs </button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm playing with the following incoming HTML structure that I don't control:
<div id="someRandom1">
<div id="someRandom2">
<div id="someRandom3">
<div id="someRandom4">
...
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
And this
<p>Some more content</p>
...
</div>
</div>
</div>
<p id="additionalGarbage">Don't need this</p>
</div>
What I'm trying to accomplish is to end up with the following:
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
And this
<p>Some more content</p>
I don't know how many divs there will be but I do know there's only one child div and the stuff inside the last div is what I need. Logic should probably be to check for a child div, get the contents and check for a child div. If another child div, do check again or else finally return the content. Every loop I've written so far crashes Chrome so I'm obviously writing it wrong. Please advise.
EDIT: After all the comments, I'll try to make this more concise in some bullets.
There's an unknown number of nested divs. (I don't have any control of this).
The child div may or may not be the first element inside the parent div.
The html structure in the deepest div needs to be kept in tact.
Bonus: minimal lines of code.
Assuming...
you have the top level (since you said you're getting it from an API)
you only need to remove the outermost divs (by tag name)
the divs targeted for removal will be the first div among its siblings (though there may be other elements with different names around it)
...you can do this:
// Assumes you have a handle on the root level
var node = $("#someRandom1");
var div = node.children("div")
while (div.length) {
node = div.first()
div = node.children("div")
}
// now node.children will be the content
alert(node.children().map(function(i, n) { return n.nodeName }).toArray())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someRandom1">
<p class="garbage"></p>
<div id="someRandom2">
<p class="garbage"></p>
<div id="someRandom3">
<p class="garbage"></p>
<div id="someRandom4">
...
<p>Actual content</p>
<ul></ul>
<p></p>
...
</div>
</div>
<p class="garbage"></p>
</div>
<p id="additionalGarbage"></p>
</div>
This simply starts with the outermost div, and if it has at least one div div, it traverses down to that. So you end up with node being the innermost consecutive div child and node.children holds its content nodes.
This shall do the trick:
document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I wish to dynamically add a button on a html form so that a user can upload multiple files when filling-in the form. The css design is both elastic and fluid and the intention is that whenever a user clicks on the "add file" link, a new button is added to allow the user to browse for the file, add it and finally upload it. The buttons should appear on the main content area of the page and should not overflow outside the footer area and should be rendered vertically with each button appearing on a newline. The code below does exactly that. This question is very much related to this question but with a twist of the css (design) requirements.
function myFunction() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Browse..");
btn.appendChild(text);
var newbutton = document.getElementById("button"); //new div button element introduced on html.
document.body.insertBefore(btn,newbutton);//insert before method
}
/*Mailu*/
div {
padding: 1px 0;
}
#header {
background: #DDDDDD;
}
#footer {
clear: both;
background: #DDDDDD;
}
/*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
button{display:block;}
<!DOCTYPE html>
<html>
<body>
<link href="button.css" rel="stylesheet" type="text/css"/>
<div id = "header">
<p>Home</p>
</div>
<p>Upload file.</p>
First name: <input type = "text" name = "Firstname"><p>
<div id = "button"> <!--added div button on html-->
<a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
</div>
<div id="footer"><p>footer</p>
</div>
</body>
</html>
[1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick
Replace:
#button {
With:
button {
The # is an id selector, meaning it will apply the styles to the element that has id="button".
If you leave out the #, it will match all <button> elements.