Currently have this code, and am wanting to bold and green the text via CSS whenever the shipping is free, but not sure where i am going wrong with jQuery?
<script>
$("td[data-title='Shipping']").contains('Free').css('color', 'green');
</script>
<td data-title="Shipping">
FREE EXPRESS SHIPPING!
</td>
<td data-title="Shipping">
$4.99
</td>
jQuery instances ($() => jQuery instance) do not have .contains method. You should use the contains as a selector:
$("td[data-title='Shipping']:contains('Free')").css('color', 'green');
jQuery constructor has a contains method but it's used for a different purpose.
try change the script into this one:
<script>
$('td[data-title="Shipping"]:contains(Free)').css('color', 'green');
</script>
Above script only change color for the first td only, since the last td does not contain Free text.
if you want to change both of them, try change the tr instead:
<script>
$('td[data-title="Shipping"]:contains(Free)').parents('tr').css('color', 'green');
</script>
Related
I have this row with two <td>'s with classes messageROW and titleROW following a checkbox with the ID of 'activecd'. I'm trying to change the bg color of both messageROW and titleROW (the whole row) when the checkbox is toggled but instead titleROW only changes colors.
Any suggestions?
$('[id^=activecd]').change(function(){
$('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});
HTML:
<tr>
<td class="messageROW"></td>
<td class="titleROW"></td>
<td><input id="activecd"></td>
</tr>
I'd suggest the following, albeit untested:
$('[id^=activecd]').change(function(){
$(this).closest('tr').toggleClass('colorcode', this.checked);
});
This listens for the change event on the specified element(s), finds the closest tr element and adds the colorcode class if the checkbox is checked, and removes the class if not.
Try jQuery $().add(selector), $().toggleClass("bgOn") with css
<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>
Not clear question, I think.
<button onclick="someFunction(this)">Toggle color</button>
function someFunction(this){
var $this=$(this);
$this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
// or
$this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}
might help you.
EDIT: okay I put everything in the script tag in a
$(document).ready(function) {
So now the evenTd's do hide.
I have a table and the code is below
<table>
<tr>
<td>itemOne</td>
<td class="evenTd">itemTwo</td>
</tr>
</table>
Now, I want it so that at the beggining, the first td is the only td which is visible (anything in evenTd should not be visible). After that, I want it so that when you click the first td (itemOne) then itemTwo slides and appears. So far I have
$(document).ready(function() {
$('.evenTd').hide();
});
and it is hiding the evenTd's, however, now the td's which don't have the evenTd class are taking up the entire screen. How do I make it so that the layout doesn't change?
If this is the entirety of your code, and this appears before the relevant elements (whether in the head or body elements, the problem is that the script is run before the DOM nodes exist.
Therefore, you can either place this in $(document).ready():
<script>
$(document).ready(function(){
$('.evenTd').hide();
});
</script>
Or place the script after the elements, in the HTML, upon which you want to act.
<body>
<table>
<tr>
<td>itemOne</td>
<td class="evenTd">itemTwo</td>
</tr>
</table>
<script>
$('.evenTd').hide();
</script>
</body>
Do bear in mind, though, that adding and removing individual table cells is likely to cause layout problems, it's probably better to hide the descendant elements of the relevant td, rather than the td itself.
For example, given the current HTML:
<table>
<tr>
<td>itemOne</td>
<td class="evenTd"><div>itemTwo</div></td>
</tr>
</table>
And:
$(document).ready(function(){
$('.evenTd').hide();
});
This gives: demo, causing the single visible td to take up the whole row-space.
Using the above HTML with the following jQuery:
$(document).ready(function(){
$('.evenTd div').hide();
});
This gives: demo, which still demonstrates layout-changes (because there's no visual content to show inside of the td), but the td remains visible (so it's a marginally-smaller change).
The following jQuery simply makes the content of the td 'hidden' (so it's not visible on the page, but is still 'there' taking up space in the document's flow):
$(document).ready(function(){
$('.evenTd div').css('visibility','hidden');
});
This gives: demo.
I would, however, prefer, certainly if this visibility is to be restored at some point, to add, or remove, a class on the td itself, and use CSS to address the specifics of each state:
$(document).ready(function(){
$('.evenTd').addClass('hidden');
$('tr').on('click', 'td.evenTd', function(){
$(this).toggleClass('hidden');
});
});
JS Fiddle demo.
You need to wait for DOM, before doing any Action:
<script type="JavaScript">
jQuery(document).ready(function(){
jQuery('td').hide().click(function(){
jQuery('td.visible').toggle().removeClass('visible');
jQuery(this).toggle().addClass('visible');
});
jQuery('td')[1].show().addClass('visible');
</script>
To show and hide elements you can use toggle() method.
<td id="cell32">cell data</td>
cell32 = document.getElementById("cell32");
cell32.style.display = "none";
I need to change the color of the text based on the drop down list selection.
<select id="room2">
<option>#0808cf</option>
<option>#0E9E26</option>
</select>
<input type="text" id="txtColor">
John: <p style="color:#0808cf" > test </p>
jquery
$('#colors').change(function(){
$('#txtColor').val($("#colors").val());
var fontColor = $('#txtColor').val();
});
I dont want the change to be in the css cause the select id will not be constant. I want it to be inserted in the p style tag. And also i need the text to be John: test to be in one line. I tried this but not working. Thank you.
<p style="color:"+fontColor+" > test </p>
demo: http://jsfiddle.net/kX3EN/
Try - http://jsfiddle.net/kX3EN/7/
$('#colors').change(function(){
$('p').css( 'color', $(this).val() );
});
If you want your "John: test" to be on the same line, you need to:
Change the p (block-level) to something like a span (inline) or
Force the p to act as inline with css (display: inline).
Using jQuery, you need to use the css() function to change the style attribute of an element. Like so:
$('selector for element you want to change').css('color', $("#your-select-element").val());
You'll probably put this in an event handler for your select:
$("select#colors").change(function() {
$("span.changemycolor").css('color', $(this).val());
// 'this', in this case, is your select element
});
got it working by placing the tag after my html code filter. So everytime I append a message will be stored as variable and read as JS when the var is sent to the websocket send method. Thank you
Im just trying to get to grips with javascript / ajax / jQuery so Im building a ticket system for my website.
Anyway, I have a table at the top of the page;
<table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black">
<tr class="subtopic" style="font-size: 15px;">
<td><a onClick="javascript: ShowNewTickets()">New Tickets</a></td>
<td><a onClick="javascript: ShowYourTickets()">Your Tickets</a></td>
<td><a onClick="javascript: ShowPuplicTickets()">Public Tickets</a></td>
</tr>
</table>
When the page loads I want "New Tickets" to have the class "selected". If they hover the mouse over any of the unselected menus then it has a highlighted effect. Once they click onto another link the "selected" class will be removed from the other TD and added to the new TD.
I have tryed onmouseover and onmouseout to do the highlight effect but it messes up when it comes to the link which is already highlighted.
I have also tryed,
$('.off').live('mouseenter', function() {
if ($(this).hasClass('selected') == false) {
$(this).removeClass('off').addClass('highlighted');
}
});
But that then keeps the TD highlighted.
Thanks for reading.
As Sergio Tulentsev mentioned, you should use the :hover pseudo class to handle the highlight effect. To handle the "selected" class, you could do something like this:
$('.subtopic').on('click', 'a', function(e) {
$('.subtopic a').removeClass('selected'); // remove the class from all the links
$(this).addClass('selected'); // add it to the clicked link
}
Note that I am using the new jquery function .on() instead of .click, .live or .delegate. The way .on() works, you will make sure you only bind events to the links in the .subtopic row. Using .on() also guarantees your events will still fire when adding new links dynamically to the DOM.
You should use :hover pseudo-class.
It will handle mouse over/out for you.
Check out.toggleClass(), it does what the name suggests.
<table>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
</table>
$("[test]='111'").css('background-color', 'red');
LIVE: http://jsfiddle.net/MPmyc/1/
How can i set css only for test == 111 ? Now this added css for all TD.
$("td[test='111']").css('background-color', 'red');
The usual method to test for an attribute goes like this:
$('td[test="111"]').css(...);
with the entire test inside the [], not partially outside as in your sample.
You wrote your attribute selector incorrectly. Instead of:
[test]='111'
Write:
[test='111']
Edited code:
$("[test='111']").css('background-color', 'red');
http://jsfiddle.net/MPmyc/2/
Also, if you're not basing your selection off an element id, then I recommend limiting selectors to the narrowest sensible scope. I.e. select td elements:
td[test='111']
If the table had a class or id, I'd also narrow the scope to be under that table.
This will work:
$("[test='111']").css('background-color', 'red');
The predicate box mus surround the entire condition.
Change $("[test]='111'") to $('[test="111"]')
$('[test="111"]').css('background-color', 'red');
You need to enclose your attribute conditional test in between the brackets, not just the attribute name.
$("td[test=111]").css('background-color', 'red');