turn off css sheet on specific page - javascript

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.

Related

Jquery script not working to alter CSS on change

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/

Increase font-size on all numbers on page (Javascript, JQuery, DOM manipulation)

I'm trying to search a page for all numbers, and selectively increase the font size only on numbers. So for the header "Over $3000" only '3000' should increase size. So far I have tried this, and a few other permutations on the same theme, but no dice. Any ideas?
$(function () {
function replaceText(i,el) {
var regex = /(\d+)/g;
if (el.nodeType === 3) {
if (regex.test(el.data)) {
$(el).css('font-size', '30px');
}
} else {
$(el).css('font-size', '30px');
}
}
$('body').each( replaceText );
});
What you could use is the .html() method. You can access the HTML of the element in a function as the second argument. However, using body as a selector is dangerously broad—narrowing down your range of selectors will also help greatly with performance.
Mistake: using .html() is extremely risky because you might end up replacing numerical attributes in HTML elements/tags. A better solution would be to fetch the text nodes in all children of the <body> element (although changing the selector to be more specific will help), using a previously published method, will work.
The code consist of two loops:
The first loop iterates through all descendents of the <body> element, i.e. using $('body').find('*').each(function() {...});—this is very costly. You should narrow down your selectors to achieve better performance.
The second loop occurs after retrieving the content of each child, using .contents(), and then filtering based on node type using .filter(). This gives us all text nodes in the body element. We simply replace these text nodes with the regex you have defined.
p/s: It's a good idea to separate the styling from your JS code, unless it has to be specific depending on context. Otherwise, simply declare an appropriate class and style it any way you desire:
$('body').find('*').each(function() {
$(this).contents().filter(function () {
return this.nodeType === 3;
}).each(function () {
$(this).replaceWith($(this).text().replace(/(\d+)/g, '<span class="number">$1</span>'));
});
});
span.number {
font-size: 30px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Over $2000.</p>
<div><p>Over $3000.</p></div>

How can i hide class contain specific value?

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();
});

have element change appreance with only javascript and CSS

attempting to have my webpage be a bit more dynamic by having the background change on some elements when a checkbox is clicked. I am trying to do this via class change and a CSS sheet. I have the following which is kicking out an error that my onclick function ins not defined (in IE9). More importantly will the webpage update if I only change the class of the object which would have a different class in the CSS file. Whats a better alternative if this does not work?
my elemenet and function
UPDATE
I made updates to both my HTML and CSS file as suggested by many. I am still getting no change in my webpage but the console is claiming that my function called from the onclick event is not defined which is a bit odd since it is. Also does this type for scripting belong in the HTML or should I pull it out and put in a seperate file. I figured since it was creating elements it belongs in the main html. Is there a cleaner more compact way of accomplishing this and not making my home screen html huge?
<tr class= 'tr.notchosen'><td><input type='checkbox' onclick='handleClick(this.id)'/></td></tr>
function handleClick(cb) {
var currentColumn = cb.parentNode
var currentRow = currentColumn.parentNode
if (currentRow.className === "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}
}
and my css file is the following
tr.chosen
{
background-color:rgba(255,223,0,0.75);
}
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
There are a couple of things going on here. First, your css selector is not quite right. In fact, I would suggest making the class name just "chosen" or "not chosen" and then selecting tr elements with that class.
<tr class='notchosen'>
And then you can target it from css (which was probably the original intention)
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
Further, although I would not suggest using inline javascript, using your example, you should pass this if you want to work with the element and not this.id which would pass a string.
onclick='handleClick(this)'
The last part would be to sync up your javascript with the class name change
if (currentRow.className == "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}

If span display set to inline do this

I'm working on a .net website that validates an input and if it fails adds an inline style
"display:inline;"
Im trying to use jQuery to see this style and add a class to the respective input field.
if(!!$('span.errorp').length ){
alert('hi');
}
the above is what im currently using to ensure i can target the correct tag which works,
I guess i need something similar too...
if(!!$('span.errorp').display:inline ){
alert('hi');
}
Try the following
if ($('span.errorp').css('display') === 'inline') {
...
}
You can use something like:
$('span.errorp').css('display', 'inline');
It's not necessary to check for length. If there are no matches, nothing happens.
if($('span.errorp[style=display:inline]')) {
// do stuff
}

Categories