I feel I am very close to finishing this. I have a form with an "Add Children" button that when pressed will make a div show. The form has 15 divs hidden (#child1 - #child15). I have it working to show only the first row (#child1).
My problem is that when the button is pressed again, the next row (#child2, #child3, etc...) should appear and I am not sure how to get it to show. I tried putting in the counter but I am new to jQuery and any help would be very much appreciated. I don't expect this to be a difficult issue, just one that is eluding my novice ability.
Here is the jQuery. If i need to edit or add more code to help the question please let me know. Thanks in advance!
<script type="text/javascript">
var counter=0
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child1').show(function() {
counter++
});
});
});
</script>
Add a class children-to-show to your divs #child1 - #child15 and write
<script type="text/javascript">
$(document).ready(function() {
$('#addChildren').click(function() {
$('.children-to-show:hidden').first().show();
});
</script>
This way you dont't need a counter and the div id doesnt't have to be in a row, so you have more ways to configure your div ids.
Explanation
On every click on addChildren, the next hidden element with class children-to-show is shown.
EDIT
gdoron is right, so if you want to get it work with classes:
<script type="text/javascript">
$(document).ready(function() {
$('#addChildren').click(function() {
$('.children-to-show').not('.is-visible').first().show().addClass('is-visible');
});
</script>
If the <div>s are in order 1,2,3,4...15:
$('#addChildren').click(function() {
$('div[id^="child"]').eq(counter).show();
counter++;
});
If they are not in order:
$('#addChildren').click(function() {
$('#child' + (++counter)).show();
});
you can just use for loop if you know exact amount of divs
$(document).ready(function() {
$('#addChildren').click(function() {
for (i=1; i<=15; i++)
{
$('#child'+i).show();
}
});
});
This should do it for you
<script type="text/javascript">
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
</script>
You can add a condition to check the limit of 15 as well. Something like ..
<script type="text/javascript">
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
if(counter <= 15) {
$('#child' + counter).show(function() {
counter++
});
}
});
});
</script>
You could just concatenate the counter variable into the jQuery selector:
<script type="text/javascript">
var counter=0
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
</script>
You need to make the div you're showing a variable like $('#child' + counter) so it will show a different div as the values of counter get updated.
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
I've put together this demo to show you.
Related
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>
Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});
Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>
I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>
this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/
<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..
Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});
<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});
I'm trying to get a button to be toggled if a div contains a string of text. Something like:
$(document).ready(function(){
$(function() {
if ('$div#trackingnumber:contains('Hello')');') {
$("dinput#submitam").toggle()});
}
});
Does anybody know how to do this?
You are on the right way. I only see some syntax errors. Try this
$(document).ready(function(){
if ($("#trackingnumber:contains('Hello')").length != 0)
{
$("dinput#submitam").toggle();
}
});
Checkout this jsFiddle too.
Just do like this
$(document).ready(function(){
if ($("div#trackingnumber:contains('Hello')").length > 0)
$("dinput#submitam").toggle();
});
$(document).ready(function() {
if ( $("#trackingnumber:contains('Hello')").length > 0 ) {
$("#submitam").toggle();
}
});
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.
here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})
The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>
Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>