jQuery Forum

I googled this problem and implemented some of the jQuery code provided but nothing worked. How do I get my datepicker to show up in front of the dropdown?

This is my HTML:

<table>

<tr><th>Start Date:</th><td>

<div class="input text">

<label for="MealplanEventDate"></label>

<input type="text" name="event_date" size="44" id="MealplanEventDate" maxlength="255"/>

</div>

</td></tr>

<tr><th>End Date:</th><td>

<div class="input text">

<label for="MealplanEndDate"></label>

<input type="text" name="end_date" size="44" id="MealplanEndDate" maxlength="255"/>

</div>

</td></tr></table>

This is my jQuery:

<script type="text/javascript">

     $(document).ready(function() {

    $('#MealplanEventDate').datepicker({

dateFormat: 'yy-mm-dd',

    });

$('#MealplanEndDate').datepicker({

      dateFormat: 'yy-mm-dd',

    });

  });

  </script>

This is my CSS:

#MealplanEventDate  {  position: relative; z-index: 10000 !important; } 

#MealplanEndDate  {  position: relative; z-index: 10000 !important; } 

.ui-datepicker {  position: relative; z-index: 10000 !important; } 

input[type=text] {position: relative; z-index: 1;}

In my script:

  

In my HTML:

<table><tr>

<td><div id="clickMe1">100 cal tiles</div></td>

<td><div id="clickMe2">200 cal tiles</div></td>

<td><div id="clickMe3">300 cal tiles</div></td>

<td><div id="clickMe4">400 cal tiles</div></td>

</tr>

</table>

<div id="showMe1" style="display: none;">lorem ipsum</div>

<div id="showMe2" style="display: none;">lorem ipsum</div>

<div id="showMe3" style="display: none;">lorem ipsum</div>

<div id="showMe4" style="display: none;">lorem ipsum dolor amet</div>

This only renders the last showMe element, id="showMe4", so it prints out "lorem ipsum dolor amet." If you click on any of the tiles, it returns just the last showMe div.

I want to prevent form submission when there is no input in the text boxes but the form submits even when the input is empty. How do I fix this?

Why doesn't my password validation work?

I want the rotate buttons to be on top of the submit button but when I put the rotate buttons on top and then click to rotate the form submits prematurely. Here is my plunker:

http://plnkr.co/edit/C8m9fPgZmzc49snWL1cL?p=preview 

I have a click function that works for one of my anchor tags but I want it to work for two (or more). When I click on the anchor with id get-data-1 it displays the json file microLesson1.json  for the div with class quiz-list-1. I want it to display the json file microLesson2.json when I click on the anchor with id get-data-2 as well.

microLesson1.json 

microLesson2.json

I have a modal on my web site and it doesn't work on a tablet. When I double-click the modal it justs zooms in and doesn't display the modal. How do I make my modal work on a tablet?

I want to set the data-max of my progress bar to zero but doing this causes the progress bar to count 'til infinity (100 divided by zero). How can I set my progress bar to zero?

Here is my HTML:

I link to jquery and modernizr.

Here is my javascript:

I created an animated progress bar but it doesn't work as hoped for. I want 20% of the bar to show up but 100% of the bar shows up instead. It does however show the percentage correctly. 

I link to jquery and modernizr.

Here is my javascript

$(document).ready(function() {

if(!Modernizr.meter){

alert('Sorry your brower does not support HTML5 progress bar');

} else {

var progressbar = $('#progressbar'),

max = progressbar.attr('max'),

time = (1000/max)*5,

       value = progressbar.val();

   var loading = function() {

       value += 1;

       addValue = progressbar.val(value);

       

       $('.progress-value').html(value + '%');

       if (value == max) {

           clearInterval(animate);           

       }

   };

   var animate = setInterval(function() {

       loading();

   }, time);

};

});

And here is my HTML:

<progress id="progressbar" value="0" max="20"></progress>

<span class="progress-value">20%</span>

        

$('.email').blur(function() {

if (!validateEmail($(this).val()) ) {

$(this).removeClass("blur").addClass("focus");

} else {

$(this).removeClass("focus").addClass("blur");

}

})

<input type="email" size="61" class="email"></input>

.focus{border: 1px solid red;outline: none;}

.blur{border: 1px solid #7dc855;outline: none; }

.focus:after{

content: "\00D7";

position: relative;

top: -24px;

left: 500px;

color: red;

}

.blur + label:before{

content: "\2713";

position: relative;

top: -24px;

left: 500px;

color: #7dc855;

}

When my email doesn't validate I want to add the red border from the class focus and an X mark from the pseudo-element before. The code shows the red border but it doesn't show the X mark. How do I add the pseudo-element to my text box?

<script>

$('.radio-btn').click(function() {

    if( $(this).is(':checked')) {

      $document.getElementsByClassName("row").addClass("hvr");

    }

}); 

</script>

.hvr {

background-color: #f2f2f2;

}

<div class="row"><input type="radio" class="radio-btn" name="payment-options"  /></div>

When I click on the radio button I want the background color of the containing div to change. What I have here isn't working. Can anybody help?

I want to make a large box into a form element. When the box is selected it should be submitted to the form. How do I change a div into a form element?

When my text input doesn't validate as an email address I want a tooltip to show. The jQuery code below doesn't work. Can anyone help me with this?

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$('.email').focusout(function(){

              $('.email').filter(function(){

              var emil=$('.email').val();

              var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

            if( !emailReg.test( emil ) ) {

$(this).tooltip({

  content: "<div style=\"position: relative; top: -20px; right: -500px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\">Please enter a valid email address.</div>"});

                }

                })

            });

});

</script>

<input type="email" class="ui-tooltip-content email" id="tooltip-1" name="tooltip-1" size="61">

If you hover over the images at http://quinnmoore.com you will notice that there is a slight delay as if it is stuttering. How can I get rid of this stutter effect and see it hover over more smoothly? Thanks in advance. 

See http://myownmealplanner.com/mealplans/add/5 for the example

If you drag a meal tile to the right side of the page then it should stay there after you click on <a href="/mealplans/add">Go back to list of meal tiles</a> but of course it doesn't because the entire page gets refreshed. I tried adding an anchor for just the mealplan tiles (like a back to top button) but still the entire page gets refreshed. I can't think of any way to do this with jquery, javascript or php. Any ideas? You're supposed to be able to add tiles from the 500 calorie list and then for example the 300 cal list. Right now I only have 500 calorie tiles but you can see how it's supposed to work. This was made with the cakephp framework but it's principally the same as for a normal website. 

I'm trying to add all of the calorie contents in my javascript like this:

total = parseFloat(myInt1 + myInt2 + myInt3);

$('#response').append(total);

Instead of adding the variables they get concatenated. I've tried using parseInt, parseFloat, and Number but I still just get concatenation and not addition. Please look at the view source at http://maureenmoore.com/momp_112412/121912_800.html

At http://maureenmoore.com/momp_112412/112412.html I am trying to make an array of the divs that were dragged into the droppable box. Please see the view source. 

I use $.post to send the divs to the php file process.php and it gives me 1 to 3 arrays depending on how many divs I dragged instead of just one combined array. I want to push the $_REQUEST object (i.e., the dropped div) into an array using 

but it gives me 1 to 3 arrays each with the key of zero. How do I get one array out of for example 3 dragged divs?