Archive for jQuery

jQuery – append to table rows

If you use jQuery for everyday, it might be wonderful to learn how you can do an “append” for your tablet without your lines goes amork.

Even I have started using a very smart method which makes I can remove tr’s without my rows / fields breaks down.

Start to create your table so it looks like this

<table>
<thead>
<tr>
<th>Titel</th>
</tr></thead>
<tbody id="test">
</tbody>
</table>

Now you have made ​​your javascript to execute an append to your table’s tbody

function testAppend()
{
var contentData = '';
contentData += '<tr>';
contentData += '<td></td>';
contentData += '</tr>';
$('#test').append( contentData );
}

After you have created this JavaScript function, you now just lie it on a button with an onclick and so it seems.

slideTroggle – jQuery

Har længe ledt efter en måde at lave “slideup” og “slidedown” på i jQuery, faldt tilfældigvis over denne stump kode, som gør netop det som jeg altid har kodet mig ud af, nu klares det bare på en linje isted for 10 (:

<button>Toggle</button>
 
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>

jQuery hover effekt i Chrome fix

Efter at have brugt hover effekten i jQquery ( $(this).hover(over,out); ) har det skabt et enklet problem som virket meget underligt, nermlig i Chrome hvor der bliver brugt et div tag til login boks med input felter.

Chrome mener åbenbart at hvis du har input felter i dit div tag så er du uden for boksen hvis du rammer et input felt, dette problem opstår ikke i andre browser ( Internet Explore, Safarie og Firefox ) men netop i Chrome gør den.

Jeg søgte rundt på nettet for at se hvad der kunne gøres, jeg fandt så ud af der var flere med netop samme problem, den måde det kan løses på er at bruge mouseover og mouseout isted for.

Jeg har her under vedlagt min tilrattet kode så du kan se hvad jeg har gjort for at løse netop dette problem.

Orginal kode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".topnav").mouseover(function(){
$(this).find("div.subnav").show();
 
$(this).find("input").keypress(function(e)
{
if(e.which == 13)
{
$(this).find("form").submit();
}
});
 
}).mouseout( function(){
$(this).find("div.subnav").hide();
});

Check element is visible – jQuery

Står du og mangler en måde hvor på du kan se om dit element faktisk er lavet allerede eller om det er skjult? Ja så er der med jQuery en ganske simple måde at gøre dette på.

1
2
3
4
5
6
if( $('#element').is(':visible') ) {
// hvis element findes gør nået her.
}
else {
// hvis element ikke findes gør nået her.
}

Hvis du ønsker at finde ud af om det element du skal have vis eks. er hidden så kan du undersøge det ved hjælp af dette.

1
2
3
4
5
6
if( $('#element').is(':hidden') ) {
// hvis dit element er hidden gør nået her.
}
else {
// hvis dit element ikke er hidden gør nået her.
}

Javascript / jQuery dropdown menu

Har tit selv forsøgt mig frem med at finde så simple en dropdown menu som muligt, finder man dem i ren CSS er det alt alt for komplex til man kan ændre nået remlig hurtig.

Så gik jeg til Javascript methoden og i langtid har jeg kun fundet alt alt for store dropdown bibloteker, så nu søgte jeg igen her igår og fandt denne side http://javascript-array.com/

den er super fed da der er en simple, jQuery og Multi level dropdown menu i Javascript og i jQuery, der næst er menuere super simple at rette og tilføje indhold til.

Snart jQuery

Da jeg her i weekeden afprøvet JavaScript bibloteket jQuery, er det nu slået fast at jeg vil til at benytte det mere og mere.

jQuery har nogle fede basic ting i sig som eks. slideUp og slideDown, det gør at det er nemt at få ting til at slide.

jQuery har også funktioner som eks. FadeOut og FadeIn med en masse andre ting også.

hvis du vil prøve jQuery kan du hente det helt gratis på http://jquery.com