I am hoping someone smarter than me can figure this out, I feel like I am really close...
Check it out here: http://jsfiddle.net/9rjW3/4/
This is the Jquery I added
$('tr:gt(0)').each(function () {
$(this).find('td:eq(2)').html(function () {
if($('span').height() > 18)
return $(this).html().replace('#','\n#');
else
return 'this';
})
})
It works, but the only problem is I haven't figure out how to change "this" to the value of the cell...
When I try to change
return 'this';
to
return $(this).html();
It doesn't work, any suggestions?
I'd personally suggest:
$('tr + tr td:nth-child(3) span').html(function(i,h){
return $(this).height() > 18 ? h.replace(/#/g, '\n#') : h;
});
JS Fiddle demo.
you don't need $(this).html, you already have that directly available.
$('tr:gt(0)').each(function () {
$(this).find('td:eq(2)').html(function (index, html) {
if($('span').height() > 18) {
return html.replace('#', '<br />#');
} else {
return html;
}
});
});
It is correctly adding \n before #, you can see it in the debugging console. you likely instead meant to add a <br />
Update:
Your logic for wrapping after a certain height isn't going to work because the text will never wrap in a table cell unless you specifically set the width of the table cell. You'll have to either always append the break, or give that column a set width.
Related
My first time writing my own javascript/jQuery for-loop and I'm running into trouble.
Basically, I have a series of divs which are empty, but when a button is clicked, the divs turn into input fields for the user. The input fields are there at the outset, but I'm using CSS to hide them and using JS/jQuery to evaluate the css property and make them visible/hide upon a button click.
I can do this fine by putting an id tag on each of the 7 input fields and writing out the jQuery by hand, like this:
$('#tryBTN').click(function(){
if ( $('#password').css('visibility') == 'hidden' )
$('#password').css('visibility','visible');
else
$('#password').css('visibility','hidden');
}
Copy/pasting that code 7 times and just swapping out the div IDs works great, however, being more efficient, I know there's a way to put this in a for-loop.
Writing this code as a test, it worked on the first one just fine:
$('#tryBTN').click(function() {
for(i = 1; i <= 7; i++) {
if($('#input1').css('visibility') == 'hidden')
$('#input1').css('visibility', 'visible');
}
});
But again, this only works for the one id. So I changed all the HTML id tags from unique ones to like id="intput1" - all the way out to seven so that I could iterate over the tags with an eval. I came up with this:
$('#tryBTN').click(function () {
for (i = 1; i <= 7; i++) {
if ($(eval('input' + i)).css('visibility') == 'hidden')
$('input' + i).css('visibility', 'visible');
}
});
When I put in the eval stuff - it doesn't work. Not sure what I'm doing wrong. A sample of the HTML looks like this:
<form>
<div class="form-group">
<label for="page">Description: Specifies page to return if paging is selected. Defaults to no paging.</label>
<input type="text" class="form-control" id="input7" aria-describedby="page">
</div>
</form>
You were forgetting the #:
$('#tryBTN').click(function () {
for (i = 1; i <= 7; i++) {
var el = $('#input' + i); // <-- The needed `#`
if (el.css('visibility') == 'hidden') {
el.css('visibility', 'visible');
}
}
});
#Intervalia's answer explains the simple error in your code (the missing #), and the comments explain why you should never use eval() unless you absolutely know it's the right tool for the job - which is very rare.
I would like to add a suggestion that will simplify your code and make it more reliable.
Instead of manually setting sequential IDs on each of your input elements, I suggest giving them all a common class. Then you can let jQuery loop through them and you won't have to worry about updating the 7 if you ever add or remove an item.
This class can be in addition to any other classes you already have on the elements. I'll call it showme:
<input type="text" class="form-control showme" aria-describedby="page">
Now you can use $('.showme') to get a jQuery object containing all the elments that have this class.
If you have to run some logic on each matching element, you would use .each(), like this:
$('#tryBTN').click( function() {
$('.showme').each( function( i, element ) {
if( $(element).css('visibility') == 'hidden' ) {
$(element).css( 'visibility', 'visible' );
}
});
});
But you don't need to check whether an element has visibility:hidden before changing it to visibility:visible. You can just go ahead and set the new value. So you can simplify the code to:
$('#tryBTN').click( function() {
$('.showme').each( function( i, element ) {
$(element).css( 'visibility', 'visible' );
});
});
And now that the only thing we're doing inside the loop is setting the new visibility, we don't even need .each(), since jQuery will do the loop for us when we call .css(). (Thanks #TemaniAfif for the reminder.)
So the code becomes very simple:
$('#tryBTN').click( function() {
$('.showme').css( 'visibility', 'visible' );
});
this is my first post on StackOverflow. I hope it doesn't go horribly wrong.
<input type="Text" id="filterTextBox" placeholder="Filter by name"/>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
$("#filterTextBox").on("keyup", function () {
var search = this.value;
$(".kurssikurssi").show().filter(function () {
return $(".course", this).text().indexOf(search) < 0;
}).hide();
});
</script>
I have a javascript snippet like this on my school project, which can be found here: http://www.cc.puv.fi/~e1301192/projekti/tulos.html
So the search bar at the bottom is supposed to filter divs and display only those, that contain certain keyword. (t.ex, if you type Digital Electronics, it will display only Divs that contain text "Digital Electronics II" and "Digital Electronics". Right now, if I type random gibberish, it hides everything like it's supposed to, but when I type in the beginning of a course name, it will not hide the courses that dont contain the certain text-string.
Here is an example that I used (which works fine): http://jsfiddle.net/Da4mX/
Hard to explain, but I hope you realize if you try the search-function on my page. Also, I'm pretty new to javascript, and I get the part where you set the searchbox's string as var search, the rest I'm not so sure about.
Please help me break down the script, and possibly point where I'm going wrong, and how to overcome the problem.
in your case I think you show and hide the parent of courses so you can try
$("#filterTextBox").on("keyup", function () {
var search = $(this).val().trim().toLowerCase();
$(".course").show().filter(function () {
return $(this).text().toLowerCase().indexOf(search) < 0;
}).hide();
});
Try this this is working now, paste this code in console and check, by searching.
$("#filterTextBox").on("keyup", function () {
var search = this.value; if( search == '') { return }
$( ".course" ).each(function() {
a = this; if (a.innerText.search(search) > 0 ) {this.hidden = false} else {this.hidden = true}
}); })
Check and the search is now working.
Your problem is there :
return $(".course", this)
From jquery doc: http://api.jquery.com/jQuery/#jQuery-selection
Internally, selector context is implemented with the .find() method,
so $( "span", this ) is equivalent to $( this ).find( "span" )
filter function already check each elements
then, when you try to put $(".course") in context, it will fetch all again...
Valid code :
$("#filterTextBox").on('keyup', function()
{
var search = $(this).val().toLowerCase();
$(".course").show().filter(function()
{
return $(this).text().toLowerCase().indexOf(search) < 0;
}).hide();
});
In fact, you can alternatively use :contains() CSS selector,
but, it is not optimized for a large list and not crossbrowser
http://caniuse.com/#search=contains
You were accessing the wrong elements. This should be working:
$(".kurssikurssi").find('.course').show().filter(function () {
var $this = $(this)
if($this.text().indexOf(search) < 0){
$this.hide()
}
})
I have a snipit of jquery that almost does what want, I want the row to change color not just the cell with the value.. can anyone help please been trying for hours
$(document).ready(function() {
$('.nr2').filter(function(){
return $.trim($(this).text()) > '0'
}).css('background-color', '#24AD36');
});
fork on fiddle
just chain the parent() method after the filter() to get the row
$(document).ready(function () {
$('.nr2').filter(function () {
return +($.trim($(this).text())) > 0
}).parent().css('background-color', '#24AD36');
});
Example: http://jsfiddle.net/dpyu0mhq/1/
As a side note, I suggest to set a class instead of a css property , just to keep off style from javascript and make the code mantainance easier, e.g.
Javascript
.parent().addClass('highlight');
CSS
.highlight {
background-color: #24AD36
}
You can use closest() to find the nearest tr element. I would also suggest you convert the td value to an integer to compare against 0. Using greater than against strings can lead to some interesting results.
$('.nr2').filter(function () {
return parseInt($.trim($(this).text()), 10) > 0
}).closest('tr').css('background-color', '#24AD36');
Updated fiddle
I'm trying to use "toggleClass" when the numeric value inside of the span.points is greater than "0". So it'll null, and then, if the value changes to 1, it'll add a class. Not sure how to accomplish this? Learning jQuery at snails pace... any help would be helpful. Thank you guys!
HTML
<div class="box">
<span class="points">4</span>
</div>
Failed JS Attempt
var points = $('.box > .points').length;
if(points > 0) {
$('.box').toggleClass('orange');
} else {
return false;
}
You should be using .text() or .html() and parse that to a number.
var points = parseFloat($('.box > .points').text());
if(points > 0) {
$('.box').toggleClass('orange');
} else {
return false;
}
Fiddle
Don't forget to either put that in a function or in an $(document).ready({ ... }) statement.
im creating a blog post where onclick 'like' it finds the class for the number of likes and adds plus one to it. i think i can do this with parse int.. can anyone help me with this >
That is the HTML
<span class="button_class"><a class="lik_right_stat_like" href="javascript:;">4255 Likes ยท</a></span>
This is the javascript.. onclick like works fine.. having trouble parsing the value for the above class and adding one to it. This is the jquery
$(this).parent("div").find(".lik_right_stat_like").attr("alt", count) parseint()++;
(im quite new to jquery)
Try
$('.button_class').click(function () {
$(this).parent("div").find(".lik_right_stat_like").text(function (idx, text) {
return $.trim(text).replace(/^(\d+)/, function (str) {
return (parseInt(text.match(/^(\d+)/), 10) || 0) + 1;
});
});
});
Demo: Fiddle