Archive for category HTML

jQuery fadeTo only firing once

I had a simple div that appears when a record saved. How simple?

    
        Record Saved    

The jQuery to make it popup then fade away after two seconds was not much more complex:

   function showMessage() {
       $("#rs").fadeTo(2000, 500).slideUp(500, function () { $("#rs").alert('close'); });
   }

This worked great… once. If I was updating multiple records, only the first time I saved a record would the popup appear. After that, nada.

My fix was to remove the div from the HTML code and modify the showMessage function. Instead of fading an existing div, I would create one on the fly:

   function showMessage() {
       $("body").append('
Record Saved
')     $("#rs").fadeTo(2000, 500).slideUp(500, function () { $("#rs").alert('close'); }); }

This worked. The problem with the original method is that the fadeTo method, on completion, set the div tag’s “display” property to “none”, meaning the div was completely removed from the page. So when a second record was updated, there was no div left to reference. The new method creates one every time the function is executes, and fades it away into oblivion.

,

Leave a comment

Attaching events to checkboxes

I needed attach events to a group of checkboxes. So in my HTML page, I have a list of checkboxes, and a div tag to hold the results:

      <input id="1" type="checkbox" class="cb" /Do Stuff
      <input id="2" type="checkbox" class="cb" />Do More Stuff
      

I then have jQuery code to attach the actual events, and I call the attachCheckboxEvents function below when the page loads. Note that I am looping through the “cb” classes to get the DOM items I need:

      function attachCheckboxEvents() {
       $(".cb").click(function (e) {
           $("#results").html('<p>' + $(this).attr('id') + '</p>');
       });
      }

Leave a comment

POST command fails to Web API

I had been successfully making GET calls using jQuery to my Web API service, but when I tried a POST, it failed, the request never reaching the breakpoint in my C# code. After using the IE developer tools, I saw that it was pointing to “/sites/apps/MyPost”, and it should have been pointing to “localhost/MyPost”. On the HTML page, there was this line:

 <base href="/sites/apps/" />

I commented-out that line, and the POST command was successful.

Leave a comment

li hover styling in HTML

To create a hover effect on <li> elements (you know, all those elements inside a <ul>), style the elements in the style block in the HTML page header, like so:

<style type=”text/css”>

     li div {height: 50px; width: 150px; background-color: green;}

     li div:hover {background-color: blue;}

</style>

The HTML portion looks like this:

<ul>

     <li><div>Room 1</div></li>

     <li><div>Room 2</div></li>

     <li><div>Room 3</div></li>

</ul>

 

(I have other styling that I have removed. If I was just using text, I wouldn’t have used a div.)

The first time I tried to add a hover effect, I had the styling on the element and not in the style block:

 

     <li><div style=”height: 50px; width: 70px; background-color: green”>Room 1</div></li>

 

This didn’t turn out right, though. The first  row looked funky when I hovered over it:

li hover1

That’s pretty ugly regardless of the color scheme. So remember, keep the styling outside of the <li> to get the hover effect working.

Leave a comment