How can i hide a the text under class named amount using javascript or php?
<span class="amount">$0.00</span>
I tried the following but no luck
<script language="javascript">
$(".amount:has(a:contains('$0.00'))").hide();
</script>
Assuming jQuery based on code in original question.
Your original script was close. All you really need is:
$('.amount:contains($0.00)').hide()
Documentation: https://api.jquery.com/contains-selector/
Bonus
If you can't use jQuery, here's how to do it the old fashioned way.
Array.prototype.forEach.call(document.getElementsByClassName('amount'), function (e) {
if (e.innerText == '$0.00') {
e.style.display = 'none';
}
})
Setting styles is JavaScript isn't too clean, so the better thing to do would be to set a class, with corresponding CSS to hide elements matching that class. For example e.classList.add('hidden'); and .hidden { display: none; }
Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach (IE 9+)
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList (IE 10+)
Try something like:
<script>
// Assign object
var AmtObj = $(".amount");
// Get contents
var Amount = AmtObj.html();
// If equals '$0.00', hide
if(Amount == '$0.00') {
AmtObj.hide();
}
</script>
try with this code:
var item = $(".amount");
if(item.html() === "$0.00"){
item.hide();
}
Its a lot of trouble for what you want especially if you wanna extract the numbers without the formatting.
If you control the data add a data-value to your attribute and put the raw number their such as <span class="amount" data-value='0.00'>$0.00</span> and then select it and hide it.
$(document).ready(function(){
$(".amount:contains('$0.00')").hide();
});
Related
I'm struggling to get this working because I don't know the right formatting.
What I am attempting is to get a CSS modal to display depending on what a user selects as a value in a Javascript applet.
The idea is to return .style.display = "block";
function onClick(event){
<something>.style.display = "block";
}
Where contains a value that has being saved in the format of intersects[0].object.title
So if for example I have selected "manhattan"
alert(intersects[0].object.title)
I'll get the string "manhattan" displaying correctly. That works perfectly.
But I can't get manhattan.style.display = "block"; returned and WORKING inside the function? I tried :
function onClick(event){
intersects[0].object.title.style.display = "block";
}
Also tried
function onClick(event){
(intersects[0].object.title).style.display = "block";
}
Any help would be greatly appreciated
This may not be directly what you're looking for, but it may help anyways. To make it work in your case, just change the button press to be a check for the selected value.
Rather than adjusting the CSS directly, this route modifies the element's classList to remove or add a .hidden class that contains the correct CSS.
// Loop through all modal buttons
document.querySelectorAll('.modal-button').forEach(function(element) {
// Add a click event listener to all modal buttons
element.addEventListener('click', function() {
// Toggle the target modal on click
toggleModal(element.dataset.target);
});
});
// Create the function to toggle the modals
function toggleModal(target) {
// Find the target
let targetElement = document.querySelector(target);
// Check if the target is hidden
if (targetElement.classList.contains('hidden')) {
// If it is, show it
targetElement.classList.remove('hidden');
} else {
// If it isn't, hide it
targetElement.classList.add('hidden');
}
}
.hidden {
display: none;
}
<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>
I'm not certain from your question how the pieces of your puzzle are related to one another, and it would be helpful if you could clarify by showing more of your HTML and Javascript code, but I'll toss a couple of ideas at you in the meantime. Apologies if I'm telling you stuff you already know.
The only sort of object you would usually be able to set "style.display" on is an HTML element. To tell Javascript which HTML element you want to modify, you usually use a CSS selector like "document.getElementById('myDiv')"
It sounds like "manhattan" might be a piece of information you could use to uniquely identify the HTML element you intend to show. If so, there are four simple parts to showing the correct element:
associate the element with that particular string (eg via an id)
get the string at runtime (the same way as you did for the alert)
select the element based on the matching string
display the selected element
All together, it might look like this:
<div id="manhattan"></div>
<script>
var identifier = intersects[0].object.title;
alert(identifier) //I'm assuming this alerts "manhattan"
var elementToShow = document.getElementById(identifier);
elementToShow.style.display = "block";
</script>
Is this on the right track? If not, just provide more detail, and I'll see what else I can suggest.
Give to you div some id and then just change that:
<div id="test"></div>
document.getElementById("test").style["display"] = "block";
or
document.getElementById("test").style.display = "block";
or
document.getElementById("test").style.setProperty('display', 'block');
or
document.getElementById("test").setAttribute('display', 'block');
I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.
Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.
You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.
Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/
I'm new to jquery and I'm trying to turn off a specific css sheet when a specific page loads. This is the code that I've been using and I'm not sure that it is correct.
if(location.pathname=="/mycart") >= 0){
$('link[rel=stylesheet][src~="/media/css/responsive.css"]').remove();
}
The problem might be that path name check... also, instead of removing, try disabling the stylesheet:
if (location.pathname.indexOf('/mycart') >= 0) {
$('link[href*="/media/css/responsive.css"]').prop('disable', true);
}
Edit: The ~= selector looks for a space deliminated word, so use the *= selector instead.
Update (full code)
<script>
$(function () {
if (location.pathname.indexOf('/mycart') >= 0) {
$('link[href*="/media/css/responsive.css"]').prop('disable', true);
}
});
</script>
Instead of complicating things with on the fly style-sheets "canceling" why don't you simply create a wrapper class around objects that change on your page and define two sets of selectors that apply in case the wrapper does or does not have a specific class.
Lets say this is your HTML code.
<div class="my_cart">
<!-- Lots of shiny elements defined inside your cart... -->
</div>
Now you simply add two sets of stylesheets depending on how you actually want to style your cart in different situations.
.my_cart input {
...
}
.my_cart p {
...
}
/* The following two selectors will be applied to .my_cart ONLY if it also has the .disabled class assigned to it. */
.my_cart.disabled input {
...
}
.my_cart.disabled p {
...
}
Now all you have to do is following.
$(document).ready(function(){
if(location.pathname == "/mycart"){
$('.my_cart').addClass('.disabled');
}
});
Simple as that.
I am traversing checkboxes like this:
$('.day').each(function() {
// here I need to get the following 4 text inputs in the HTML
// and set some attributes on them
});
After every checkbox there are four text input fields (there are also some div, span tags for CSS around them). So inside the loop above I need to get four text input fields that follow the checkbox in the HTML source so I can set some attributes on them.
How would I go about that?
Hard to say without the markup, but you could try this.
$('.day').each(function() {
$(this).nextAll('input').slice(0,4).attr('someAttribute','somevalue');
});
If there's some stopping point, like another .day element, you could use nextUntil then .filter().
$('.day').each(function() {
$(this).nextUntil('.day').filter('input').attr('someAttribute','somevalue');
});
EDIT: When you say there are some <div> and other tags around them, I assumed that you meant in between them.
If you're actually saying that the inputs are nested in them, then you could do something like this:
$('.day').each(function() {
$(this).nextAll(':has(input)').slice(0,4).find('input').attr('someAttribute','somevalue');
});
or perhaps this:
$('.day').each(function() {
$(this).nextAll().find('input').slice(0,4).attr('someAttribute','somevalue');
});
or again, if there's a stopping point you can indicate like another .day, use nextUntil():
$('.day').each(function() {
$(this).nextUntil('.day').find('input').attr('someAttribute','somevalue');
});
if they are siblings within a parent container, you might be able to use $(this).nextAll('input').each(function(){}); or $(this).nextAll().find('input').each(function(){}); depending on your html structure. Or var p = $(this).parent(); if (p && p[0]) p[0].find('input').each(function(){});
This is a total guess, since you've shown no markup whatsoever:
$('.day').each(function() {
var $this = $(this);
var $inputs = $this.nextAll('input[type=text]');
$inputs.each(function () {
// do whatever with the inputs here
});
});
if your trying to set css properties to the inputs you can use css selectors which are quite powerful, like this
.day ~ input {
//set your styles for the input
}
what this means is you are selecting all the inputs exactely after .day
hope this helps.
Try
$('.day').each(function() {
// get input fields
var first_input = $(this).nextAll().filter('input:first');
var second_input = first_input.nextAll().filter('input:first');
var third_input = second_input.nextAll().filter('input:first');
var fourth_input = third_input.nextAll().filter('input:first');
// set attribute xyz to value
first_input.attr('xyz', 'value');
second_input.attr('xyz', 'value');
third_input.attr('xyz', 'value');
fourth_input.attr('xyz', 'value');
});
I'm trying to modify the behavior of some web parts in Sharepoint (thus forcing IE down my throat) for our users who use the Project server pages. I'm not really the best JavaScript guy, and this is driving me nuts.
On one webpart to display the work from Project, there is a subrow 'Planned' shown below the actual data entry row that clutters the view. We want to turn the 'Planned' row off.
I can do it with a simple three liner like this:
<style type="text/css">
.XmlGridPlannedWork {display:none;}
</style>
But the users want to toggle the lines on and off.
So I thought I'd try reading then writting the current CSS value like so:
<script type="text/javascript">
function toggle_PlannedLine()
var ObjPlanned = Document.getElementById("tr").getElementsByTagName("XmlGridPlannedWork");
for(var i=0;i<ObjPlanned.length;i++)
{
if (OjbPlanned[i].display != "none")
{
// toggle the 'Planned' line off
ObjPlanned[i].style.display = "none";
}
else
{
// toggle the 'Planned' line on
ObjPlanned[i].style.display = "inline";
}
}
return;
}
</script>
<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>
The actual segment I'm targeting looks like this:
<tr class="XmlGridPlannedWork" RowID="694810f9-e922-4321-9236-e495dd5048d9B" ID="GridDataRow">
Of course, when you click the button, the rows don't disappear.
At this point, I'm pretty sure I'm missing something obvious, but like I mentioned, I'm no JavaScript guru.
Easiest Solution
Ok, so my answer below should help you out, but here is another way to approach it that is much simpler:
CSS
<style type="text/css">
.XmlGridPlannedWork {display:none;}
body.showPlanned .XmlGridPlannedWork { display: block}
</style>
HTML/JavaScript
<script type="text/javascript">
function toggle_PlannedLine() {
if(document.body.className.match(/\bshowPlanned\b/) > -1)
document.body.className = document.body.className.replace(/\bshowPlanned\b/,'');
else
document.body.className += " showPlanned";
}
</script>
<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>
Original Answer
You were really close in the concepts you wanted, but as the other answers point out a number of things were missing. I rewrote your function to work cross browser, and please ask if you have any questions about it:
<script type="text/javascript">
function toggle_PlannedLine() {
var objs = [];
if( document.querySelector){
objs = document.querySelectorAll('tr.XmlGridPlannedWork');
} else if (document.getElementsByClassName) {
objs = document.getElementsByClassName('XmlGridPlannedWork');
} else {
var temp = document.getElementsByTagName('tr');
for(var j = 0; j < temp.length; j++){
if(temp[j].className.match(/\bXmlGridPlannedWork\b/) > -1){
objs.push(temp[j]);
}
}
}
for(var i=0;i<objs.length;i++)
{
if (objs[i].style.display != "none")
{
// toggle the 'Planned' line off
objs[i].style.display = "none";
}
else
{
// toggle the 'Planned' line on
objs[i].style.display = "inline";
}
}
}
</script>
<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>
For those arguing that jQuery is not a valid answer, please take the following code as an example of why jQuery is so easy to use. All of the previous code is summed up like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('button.toggle').click(function(){
$("tr.XmlGridPlannedWork").toggle();
})
})
</script>
<button class="toggle">Toggle Planned Line</button>
You forgot the opening brace for your function.
You are using getElementByTagName incorrectly. This function gets elements that match based on tag name (a, img, etc.) not CSS class. You can use jquery to accomplish what you want, or you can enumerate through every element on the page until you find the one you want. There are some open-source implementations of this available online. Your best bet, though, would be to add an id to the tag you care about, and then use getElementById.
Finally, Document should be document, and JavaScript is case sensitive.
Hope this helps!
document.getElementsByTagName looks for elements based on the name of their HTML tag, not their class attribute. Newer (not IE) browsers have support for document.getElementsByClassName(), and there are open source functions that do the same thing, falling back on the browser-native versions where available. This function will return a NodeList containing all the elements that use that class, and you can access each element and hide it through that list.
First, document should be lowercase in your var ObjPlanned declaration.
Second, getElementById returns an element based on a unique ID and you're passing it the element, or tag, name. getElementsByTagName returns an array of elements matching a certain tag but you're passing it a className. There is no 'getElementsByClassName' built in to JavaScript, but you can easily use Google to find a solution.
Use jQuery. It provides a very useful $.css() method, which does what you're looking for in a very simple fashion.