...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
March 14, 2012

Cut down a string in text area within particular limit in jquery

Question by Benedict Peter

I have a text area in my user description form . I need to cut down the string , if user enter more than 100 chars. I want to use jquery for this

Answer by duke

simply use this

$('#textarea').bind('keyup', function() {
    $('#textarea').val($('#textarea').val().slice(0, 100));
});

Answer by Starx

For better result restrict the text or keypress event

var maxchar = 100;
$('textarea').keypress(function(e){
  if($(this).val().length > maxchar){
      $(this).val($(this).val().substring(0, maxchar));
  }
});

Demo

Read more

Sending XML through AJAX

Question by sebbl.sche

I create a xml document in jQuery as following

var xmlDocument = $('<xml/>');
var foo = $('<foo/>');
var bar = $('<bar/>');

foo.append(bar);
xmlDocument.append(foo);

and try to forwards it to the server.

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false,
   contentType     :   'text/xml',
   data            :   xmlDocument,
   sucess          :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});

Even if the server echos a ‘foo’ only, I get the alert('ajax request completed') and not the alert('success'). What am I doing wrong? Is it the way I’m creating the xml document or is it the way I forward it to the server?

An ajax request without a xml document works fine and I get the ‘foo’ back.

UPDATE #1

After changing precessData to processData and sucess to success i get the failed to send ajax request dialog.

When I change the data parameter in the ajax method to

$.ajax({
   ...
   data :   {
      data: xmlDocument
   },
   ...
});

I also get the failed to send ajax request dialog.

The code on the server side should be fine cause it’s only

<?php
echo 'foo';
?>

UPDATE #2

I converted my string as in AndreasAL’s answer

// Convert to string instead of DOM Elements
xmlDocument = $("<wrap/>").append(xmlDocument).html();

// Url encode the string
xmlDocument = encodeURIComponent(xmlDocument);

but i still get the same dialog box (failed to send the ajax request). So i thought the error could be in my xml document and overwrote my xml document by using the code snipplet from AndreasAL’s answer.

xmlDocument = $('<xml/>');
foo = $('<foo/>').appendTo(xmlDocument);
bar = $('<bar/>').appendTo(foo);

Still the same behaviour.

So I checked my xml document again and printed it in a dialog box and it looks fine.

I’m running out of ideas where the error could be …

Answer by sebbl.sche

Finally, I decided to convert the xml document and send it as a string to the server.

$xmlString = $(xmlDocument).html();

Due to the fact, that I only have to store the recieved data, it makes no difference if I’m revieving it as string or xml.

I only had to change my ajax request at everything works fine now.

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   data            :   'data=' + xmlString,
   success         :   function( data ) {
      alert(data);
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});

Answer by Starx

You are using jQuery Object through the entire process.

Write your XML like this, concatenating the string together. Not making them as DOM Object.

var xmlDocument = '<xml/>';
xmlDocument += '<foo/>';
xmlDocument += '<bar/>';

Then post it, like this

$.ajax({
   url             :   'js/foobar.php',
   type            :   'POST',
   precessData     :   false,
   contentType     :   'text/xml',
   data            :   { 
                           data: xmlDocument //wrapped inside curly braces
                       },

   // Here is your spelling mistake
   success          :   function( data ) {
      alert('success');
   },
   error           :   function() {
      alert('failed to send ajax request');
   },
   complete        :   function() {
      alert('ajax request completed');
   }
});
Read more

HTML tables: horizontal scroll in a td only when needed

Question by user523129

I have a table with the following:

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">ee@yahoo.com</div>
</td>
</tr>
</table>

This code shows an horizontal scroll in the email cell.

When the email is a short one like ee@yahoo.com the scroll shows but it is not enabled as it is not needed, and when the email is longer let’s say

eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

the scroll enables so you can see the entire email.

This is good, but what I need is the scroll not to show at all when the email is a short one.

How can I do that??

I’ve tried:

overflow-x:auto;

And it does not show the scroll when a short email but when the email is a long one it just cut it no scroll at all. I think this happens because there are no spaces in the email.

Thanks a lot!

Answer by Starx

By defining overflow-x: scroll you are indicating for a scroll bar to appear no matter what.

You should use overflow-x:auto. Here is a working demo

Read more

load content when scroll over to bottom of window

Question by azarudeen ajees

I create a program for display hotels when particular location clicked .In this i want to display first 10 hotels and then user scroll to bottom it will display another 10 hotels continously it loads till hotel list ends.
I need a jquery for this project in which it has two php file.
1.The first file for load first 10 hotels.
2. second php file for load balance hotels.

thanks in advance

Answer by Starx

What you are searching for is jQuery Infinte Scroll Plugin.

Read more

How to enable Jquery intellisense in the VS2008

Question by Searcher

I downloaded jquery-1.7.1.min.js and jquery-1.7.1-vsdoc.js.
I am working with VS2008.
I included those .js files into my file. but while using jquery intellisense is not coming.
How to do that.I read the web site jquery intellisense. Even though i did like this i am not getting the intellisense. whats wrong in there. Please help me. I included in my file like this

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>.
<script type="text/javascript" src="scripts/jquery-1.7.1-vsdoc.js"></script>

Thanks,

Answer by Niranjan Kala

Have you checked the following statement on the Scottgu’s blog…

VS 2008 SP1 adds richer JavaScript intellisense support to Visual
Studio, and adds code completion support for a broad range of
JavaScript libraries.

The jQuery intellisense annotation support will work great with VS 2008 SP1.

First you need correct patch KB958502 – JScript Editor support for “-vsdoc.js” IntelliSense doc. files. Install it and use as:

my script tag said

<script type="text/javascript" source="Scripts/jquery-x.js"></script>

then follow these reference links:

jquery + intellisense + vs2008 pro fails to load
Jquery and Intellisense in VS 2008 with hotfix and SP1
jQuery Intellisense in VS 2008
jQuery and Microsoft
JQuery IntelliSense in Visual Studio 2008

Answer by Starx

To detect the file as an intellisense, you need to have at least SP1 of Visual Studio 2008 and Visual Studio 2008 Express. You can find it here

As per a blog post. You should do something like this

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>.
<% if(false) { %>
    <script type="text/javascript" src="scripts/jquery-1.7.1-vsdoc.js"></script>
<% } %>
Read more

Button to select all check boxes and change entire table's bg color

Question by Unicorn

this is what i have so far:
– a table with 20 to 30 cells
– each cell has 1 check box and a value (different value of course)
– two button to trigger select all and select none checkboxes.

Codes so far:
– to trigger select all/none:

Javascript:

function set_checked(checked) {
    $('input[name=test]').attr('checked', checked);
}

buttons:

onclick="set_checked(true)" and onclick="set_checked(false)" for both buttons.

now, how do i add color change on both buttons? for example, entire table bg color change to green when select all and change to white when select none.

Answer by Starx

This should do, what is needed

function set_checked(checked) {
    $('input:checked').attr('checked', checked); //select all checkbox
    if(checked) {
         $("table").css("backgroundColor", "#ddd"); //new color
    } else {
         $("table").css("backgroundColor", "#fff"); //old color
    }
}
Read more
March 13, 2012

Refresh only a div in php

Question by user1241123

I have a chat box that i want to update 🙂 But I want only to refresh the div and not the hole page… Can someone help me??

Code:

<div align="right" id="chat">
<?php
include 'Chat.php';

?>
</div>

Answer by Starx

You can’t do it with a server side script like

However, Using jQuery, when you need to update the div. Simply use

$("#chat").load("Chat.php");

For an example, make a request to the server when a user finishes typing on a textbox, and load the recent chat text.

$("#textbox").change(function() {
    $("#chat").load("Chat.php");
});
Read more

how do I position two objects that are floated right?

Question by waa1990

I have two Divs that are floated right, but I would like one to come before the other. right now the #logout div is to the left of the #theme div. how do I get them to both float right but switch positions?

Answer by Starx

There is golden rule in programming and any field where it is related with developement.

KISS: Keep it short and simple

Its a very simple logic, why are you thinking complex on such simple problem?

JUST Switch your Markup

Read more

CSS3 Hanging animation

Question by Ryan

Is there a way to achieve a hanging animation of an element bouncing up and down using margin-top? Something that imitates elastic.

Basically i want the first frame to be margin-top:0px, the second frame: margin-top:15px; and should be infinite.

Answer by Starx

There are lots of example on the web.

Check it out from this tutorial. It is done with pure CSS.


I just created a simple demo. Check it out. This one runs on both webkit and mozilla browsers.

@-webkit-keyframes bounce {
       from{ -webkit-transform: translate(0px,0px); }
       to { -webkit-transform: translate(0px,-30px); }  
      }

@-moz-keyframes bounce {
       from { -moz-transform: translate(0px,0px); }
       to { -moz-transform: translate(0px,-30px); }  
      }

.bounce{
    display:block;
    height:20px;
    width:20px;
    background:#ff0000;
    border-radius:20px;
    margin:50px;
    -webkit-animation-name: bounce;
        -webkit-animation-duration:.3s;
        -webkit-animation-direction:alternate;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:0s;
        -webkit-animation-iteration-count:infinite;
    -moz-animation-name: bounce;
        -moz-animation-duration:.3s;
        -moz-animation-direction:alternate;
        -moz-animation-timing-function:linear;
        -moz-animation-delay:0s;
        -moz-animation-iteration-count:infinite;
}

Check out this demo

Hope you like it.

Read more
...

Please fill the form - I will response as fast as I can!