I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
Related
I have already some css style on my element (my element has 1500px of height). But when i tried to change the colors of it, the height was replaced by the colors putted, so the height of my element is deleted..
Here is the code :
document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";
But i want to not replace the background color by the existing css style, i just want to add this background color to the css already existing, how to do this please ?
I don't think so this(document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";) will replace your css with previous css, but you can do the following
there is multiple ways to solve your problem
1:Add class in javascript
in css
.class{
background-color:#e9e9e9;
height:1500px !important;
}
in JS
var element = document.getElementById("tabcmp0");
element.classList.add("class");
2: If you are using jquery
$('#tabcmp0').css({'background-color':'#e9e9e9'});
and if you want to use multiple css
$('#tabcmp0').css({'background-color':'#e9e9e9', 'height':'1500px'});
hope this solves your problem
As you edited your question, my answer will be changed and you can only have one css color at a time on a particular element,
what you can do now is add 2 <div> inside your element and add css on both the div separatly
like
<myElement>
<div stlye="your backgroundcolor">
</div>
<div stlye="your backgroundcolor">
</div>
</myElement>
I have tested this and it should not overwrite your existing style.
You can check it in action HERE
Here is the code (maybe you can use it to find what you are missing or what is causing your issue).
<!DOCTYPE html>
<html>
<head>
<style>
#democlass {
color: red;
font-size:100px;
}
</style>
</head>
<body>
<h1 id="democlass">Hello World</h1>
<p>Click the button to add an id background style to the h1 element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("democlass").style.backgroundColor = "#e9e9e9";
}
</script>
</body>
</html>
Note that the font-size doesn't change when adding the backgroundColor.
Use Object.assign
Object.assign(yourelement.style,{backgroundColor:"#e9e9e9",height:"1500px"});
thank you for taking the time to review my question! :-) I am attempting to write better, cleaner, more maintainable HTML using custom HTML elements as opposed to the traditional 'div' methods. I have a very simple example that works using a div and a class on it to map my link to the div that I want to show/hide and this does work. I include this as a working example of the kind of functionality I am trying to produce:
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
However, I am trying to provide this kind of functionality with multiple links to multiple sets/subsets of text, I have tried the following but am obviously doing something silly as I can't get it to work:
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
Topic 2
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
Introduction
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
Detail
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
Please, can someone help me figure out what I am doing wrong. I really want to produce the aforementioned functionality with a simple bit of CSS or JS that is as dynamic as possible. Ideally I wont need to specify specific (especially repeated code for each topic or HTML tag that I want the ability to show/hide via a button/link. Obviously, I will probably have to set a few default assignments, maybe turning detail off by default, but if I can avoid required extra repetitive code for each "context" I wish to flip that would be amazing!!!
Any pointers in any direction that can help me achieve what I am attempting without having to use jQuery or a verbose library over and above JS and CSS would really make my day!
Many thanks in advance and apologies if I am doing something really stupid, I haven't done that much work with custom elements and so probably am.
Kind regards,
James
** Latest Attempt **
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
Do the test that works using extra layer of div with mapped class
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
Topic 1
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
Topic 2
<p>When I have it working I hope to be able to have: </p>Topic 3
<p>And... </p>Intro
<p>And this... </p>Detail
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
you don't need a .unhidden class, only a .hidden class. It looks like:
.hidden{
display:none;
}
simply use classList like classList.toggle("hidden") or .add or .remove.
If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
CSS ::after has a nice feature in combination with content and attr(), that lets you insert any attr value as the pseudo-element content.
For general debugging purposes, I'm looking to append a little yellow label to all HTML elements with the content as name of the element.
I can do ids and classes with CSS.
But for elements (p div span etc) javascript is the only option?
Yes you have to use javascript or jQuery that makes it much easier : DEMO
HTML test
<div>
</div>
<p></p>
<form></form>
<span></span>
CSS test
[data-tag]:before {content:attr(data-tag);}
jQuery
$("body").children().each(function() {
var domel= $(this).get(0);
$(this).attr("data-tag",domel.nodeName);
})
it produces this :
<div data-tag="DIV"></div>
jQuery can select all elements of a certain type/tag, I'd recommend using that.
If I understand correctly you want to do the following and you do not need javascript.
http://jsbin.com/wepayija/3/edit
<style>
p::after {
background-color: yellow;
content: 'p'
}
.my-class::after {
background-color: green;
content: 'p'
}
div:after {
background-color: yellow;
content: 'div'
}
</style>
<p>I have no class</p>
<p class="my-class">I have a class</p>
<div></div>
I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.