I have the following code on a Wordpress Woocommerce website which outputs "From £189.00"
I am trying to remove the word "From". I'm sure there must be a simple way using something like .price:pre {display:none;}.
<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>
How can I hide the word "From" from this code, ideally using CSS? I am open to javascript in the functions.php as an alternative.
Due to the restrictive nature of Wordpress and the code it outputs, I'm unable to edit the snippet above. I have to manipulate the above code in CSS or in the functions.php
You can use font-size to hide the text, then overwrite it for the child span elements like so:
.price {
font-size: 0px;
}
.price span {
font-size: 16px;
}
<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span>
</p>
Since this is already said to be impossible, have a look at https://stackoverflow.com/a/23247837/1587329. Short answer:
.price>.woocommerce-Price-amount
{
visibility: visible;
}
.price
{
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
jsfiddle thanks to #Anthony's comment.
Like this:
.price {display:none;}
<p class="price">From: </p>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
£
</span>189.00
</span>
change the format of your html
<p class="price"><span class="from">From:</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>
and apply css like
.price .from {display:none;}
Related
I am using a dropdown for filters and want the selected value from the dropdown to appear at the top so users can see what their selection is when the dropdown closes and they continue browsing.
In this scenario, let's say I select "Option 2", I would want the span section value of "Category" to be replaced by "Option 2". ( I tried using the HTML select and option tags but they just don't work to trigger the filter.)
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
width: 50px;
padding: 4px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
p {
font-size: 16px;
}
<div class="dropdown">
<span>Category</span>
<div class="dropdown-content">
<a href="www.site.com/option1">
<p>Option 1</p>
</a>
<a href="www.site.com/option2">
<p>Option 2</p>
</a>
<a href="www.site.com/option3">
<p>Option 3</p>
</a>
</div>
</div>
Question is taggged [jQuery], therefore, without needing to change the HTML ...
$('a', '.dropdown-content').on('click', function() {
$(this).closest('.dropdown').find('span').text(this.text());
});
This expression will give all similarly constructed dropdowns on the page the required behaviour.
By traversing the DOM from the clicked element to the span element, there's no fear of cross-talk between different dropdowns.
Pretty simple stuff. To make it easier, I would add a class to each of the links and probably one to the span too for good measure. All in all, you would have something that looks like this:
<div class="dropdown">
<span class="selected-category">Category</span>
<div class="dropdown-content">
<a class="dropdown-option" href="www.site.com/option1"><p>Option 1</p></a>
<a class="dropdown-option" href="www.site.com/option2"><p>Option 2</p></a>
<a class="dropdown-option" href="www.site.com/option3"><p>Option 3</p></a>
</div>
</div>
document.querySelector('.dropdown-option').forEach(el => el.onclick = (e) => document.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);
if you can't add a class name, you just need to build a good selector using the element types instead.
const categorySpan = document.querySelector('.dropdown span');
const dropdownItems = document.querySelector('.dropdown div a');
then it's the same thing as with the class.
Edit: Updated based on comments from Heretic Monkey (thanks!)
This question already has answers here:
How do I target elements with an attribute that has any value in CSS?
(3 answers)
Closed 2 years ago.
I need to get a display none the above span by attribute "data-email".
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button"> </span>
The [attribute] selector is used to select elements with a specified attribute.
in your css you can do that:
span[data-mail] {
display: none;
}
or
span[data-mail="qwerty"] {
display: none;
}
span[data-email]{
color: red
}
span[data-email="test"]{
color: blue
}
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">hello </span>
<span data-email="test">world</span>
Just select element by attribute and apply CSS.
$('span[data-email="qwerty"]').css({
display: "none"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">Some text</span>
Because its HTML data attribute you can do the following in javascript
email_condition = "qwerty"; //you can set whatever condition you need
console.log(document.querySelector(`span[data-email="${email_condition}"]`));
document
.querySelector(`span[data-email="${email_condition}"]`)
.classList.add("display_none");
display_none is a class defined in css whose definition looks like
.display_none {
display: none;
}
You can refer my [codepen link]:https://codepen.io/ankitt8/pen/pogXJJV
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
As mentioned in the comment if you want to make the code work for multiple span tags with same email condition you can do as below
email_condition = "qwerty";
let allSpanEmailTag = document.querySelectorAll(
`span[data-email="${email_condition}"]`
);
// note its querySelectorAll previously it was querySelector only
// querySelectorAll returns a list of node based on specified condition.
for (let i = 0; i < allSpanEmailTag.length; ++i) {
allSpanEmailTag[i].classList.add("display_none");
}
The codepen link has been updated so you can refer that!
I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}
In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)
change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}
Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.
I am using JSONPath to select some elements from a JSON file. I want the selected elements to be displayed on an html page. (The entire JSON should be displayed with only the selected tags highlighted)
The final result should look like the
XPath Evaluator in the Defient.js site.
So far, I've managed to use the JSONPath to select the element I want and get it as the output. Also, I can use JSON.stringify in a <pre> tag to print the JSON to the webpage.
What I want to know is how I should go about highlighting the selected text. The output can't be simply used to generate a regex because it might match fields that are not selected by the JSONPath filter.
As you've told that you can get the path, it'll be just matter of wrapping the value for the corresponding path with a html tag and give a class. Then you can highlight with css.
pre {
background-color: ghostwhite;
border: 1px solid silver;
padding: 10px 20px;
margin: 20px;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}
<pre><code id="planets">[
{
<span class="json-key">name</span>: <span class="json-string">"Earth"</span>,
<span class="json-key">order</span>: <span class="json-value">3</span>,
<span class="json-key">stats</span>: {
<span class="json-key">life</span>: <span class="json-value">true</span>,
<span class="json-key">mass</span>: <span class="json-value">5.973600000000001e+24</span>
}
},
{
<span class="json-key">name</span>: <span class="json-string">"Saturn"</span>,
<span class="json-key">order</span>: <span class="json-value">6</span>,
<span class="json-key">stats</span>: {
<span class="json-key">life</span>: <span class="json-value">null</span>,
<span class="json-key">mass</span>: <span class="json-value">5.6846e+26</span>
}
}
]</code></pre>
Example replacer - but not necessarily.
I have this html
<div>
<span data-disabled class="myclass"> like </span>
<span class="myclass"> unlike </span>
</div>
scss is like this
myclass{
visibility: visible;
cursor: pointer;
&[data-disabled] {
visibility: hidden;
}
}
and based on click I am doing this
this.select('like').attr('data-disabled', true);
this.select('unlike').removeAttr('data-disabled');
It is working fine but my like and unlike are shown next to each other and they hide and become visible at their original position.
Is there any way to have same position and when I hide and unhide then they overwrite each other.
The problem is with the visibilty property you are using. You have to use display:none so that the item will not consume the space when hidden.
instead of
visibility: hidden;
use
display: none;
You can read more about it here.
Try JQuery Toggle function to achieve this task:
$(function(){
$(".myclass").click(function () {
$(".myclass").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="myclass"> like </span>
<span class="myclass" style="display:none"> unlike </span>
</div>