jquery click on each line of td to pop up window content
javascript jquery
Saturday, January 20, 2024
3 ways to implement multiple languages website
HTML Css,
javascript jquery,
php mySQL
Friday, April 29, 2016
There is 3 ways to implement multiple languages website.
1)put english, malay, chinese hyperlink on each pages profile-malay.php, profile-english.php, profile-chinese.php. Goodness is simple coding. Two weakness : Weakness 1 is the url is long and ugly. Weakness 2 is hard to maintaince, let say there is the word "age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.
2)profile.php page body content can be changed by using jquery call profile-malay.php, profile-english.php, profile-chinese.php. Goodness is url is short and beautiful. Two weakness : Weakness 1 is lot of jquery coding in begining, for example, if profile-malay.php has the link of edit-malay.php, u need to modify the edit-malay.php to edit.php, then in edit.php jquery call edit-malay.php. What if edit-malay.php have another link save-malay.php? Lot of modifications. Weakness 2 is hard to maintaince, let say there is the label"age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.
3)change all html label into php variable, save all different languages labels into database. Examples, php variable $age for malay language table in database is "umur". Goodness is easy to maintance, when need to change "age" to "how old", no need open all pages, just need to edit the record in database. Goodness 2 don't need to use jquery call another page. No weakness.
1)put english, malay, chinese hyperlink on each pages profile-malay.php, profile-english.php, profile-chinese.php. Goodness is simple coding. Two weakness : Weakness 1 is the url is long and ugly. Weakness 2 is hard to maintaince, let say there is the word "age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.
2)profile.php page body content can be changed by using jquery call profile-malay.php, profile-english.php, profile-chinese.php. Goodness is url is short and beautiful. Two weakness : Weakness 1 is lot of jquery coding in begining, for example, if profile-malay.php has the link of edit-malay.php, u need to modify the edit-malay.php to edit.php, then in edit.php jquery call edit-malay.php. What if edit-malay.php have another link save-malay.php? Lot of modifications. Weakness 2 is hard to maintaince, let say there is the label"age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.
3)change all html label into php variable, save all different languages labels into database. Examples, php variable $age for malay language table in database is "umur". Goodness is easy to maintance, when need to change "age" to "how old", no need open all pages, just need to edit the record in database. Goodness 2 don't need to use jquery call another page. No weakness.
Html disable browser autofill textbox
HTML Css,
javascript jquery
Friday, April 29, 2016
Why password textbox is not empty but still show error message "密码不能为空"? because google chrome messing with the form. Google chrome autofill the username and password textbox. My javascript code CANNOT detect the textbox is not empty if the textbox is filled by chrome autofill feature. All chrome autofill is yellow background. There is no way to disable autofill in chrome new version, cannot use autocomplete="false", cannot use autocomplete="off" too, even in HTML5 also cannot. So decide to hack it by css and jquery :
But above method got 2 weakness : 1) Eg : username textbox autofill "zac1987" but the user want the username textbox to be empty, css change autofill words into white color, so the user cannot see the words, so the user thought the textbox is empty, so when click submit button "zac1987" value will be inserted into database.
2) Since ccs change autofill words into white color, when browser show autocomplete / autofill choices of selection drop down list, eg : "zac1987", "Michelle", "Peter". when the user select any choice from the autocomplete drop down list, Eg, if the user select "Peter", the user cannot see the word "Peter" in the textbox because css change autofill word into white color. The worse is jquery and javascript cannot detect the textbox value is autifill word or keyboard type in word.
Since this method has 2 weakness, so I am not going to use this method. Try very hard to figure out other method on how to prevent browser autofill / autocomplete. There is no way, so use other hack. Chrome only autocompletes the first <input type="password"> and the previous <input>. So I added:
To the top of the <form> and the case was resolved.
jquery resizable image
javascript jquery
Tuesday, March 29, 2016
Codes above allow user use mouse to drag the button to resize the image, but above codes have many bugs :
bug 1 : The image sometime doesn't show up on screeen. Why? Reason is the image must have html width and html height. (not css width and not css height). If you don't know the height of image. Browser nowaday apply height to image automatically, if you want to get the height of image that given by browser, u can use the code below :
bug 2 : You cannot get the image height given by browser. Why? Reason is your code start run when the image is not finish load yet. How to use jquery wait image finish loaded then only start get image height? Use the codes :
bug 3 : Now your image always show up on screen, good job. But Resize button sometime doesn't show up on the Image. Why? It is because event is fired before you attached a handler to listen for it (e.g. loading from cache). You need to check if it's loaded and fire it yourself, like this:
Finally full codes with bug free :
Uncaught TypeError: $(...).Jcrop is not a function
javascript jquery
Friday, February 19, 2016
The reason is because u include jquery.js file for 2 times, must delete 1 of them. For example above and bottom of page have this line src="javascripts/jquery.js" type="text/javascript" language="javascript"
html button onclick call javascript function submit multiple data with Ajax
javascript jquery
Friday, January 15, 2016
html :
javascript:
other page message-send.php :
Javascript allow textbox accept numbers and 2 decimal points only
javascript jquery
Sunday, February 05, 2012
javascript select drop down menu
javascript jquery
Sunday, February 05, 2012
Change s.options[i].text to s.options[i].value if u want to refer to value instead of text.
Jquery convert new line / new row to <br> tag
javascript jquery
Saturday, January 21, 2012
Let's say I typed in a <textarea> :
I
Love
You
Then I save it to myphpadmin database. Then I use mysql to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How to make the <div> show exactly like the database field and textarea which has multiple rows?
My question here. I did try to use css white-space:pre; but it is not working on IE7 and IE5. So I tried to find another solution which replace all new line / new row with <br> tag, I found the solution from here. Here is the codes :
or use php str_replace :
$value = "I
love
u";
$order = array("\r\n", "\n", "\r"); $gg = str_replace($order , "
", $value);
I
Love
You
Then I save it to myphpadmin database. Then I use mysql to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How to make the <div> show exactly like the database field and textarea which has multiple rows?
My question here. I did try to use css white-space:pre; but it is not working on IE7 and IE5. So I tried to find another solution which replace all new line / new row with <br> tag, I found the solution from here. Here is the codes :
or use php str_replace :
$value = "I
love
u";
$order = array("\r\n", "\n", "\r"); $gg = str_replace($order , "
", $value);
How to update div on 1st page by jquery code on 2nd page?
javascript jquery
Monday, January 16, 2012
I planned to post my question to stackoverflow.com to ask some experts from there. But when I was typing my question in very detail on stackoverflow.com, then only I realize my code "hideposting();" show on 2nd page and it works to hide the posting from 1st page although the code is on 2nd page, so I stated think "why???" and I suddenly realize 1st page call the code from 2nd page, so the code on 2nd page is still on 1st page, that's why the code on 2nd page is working on 1st page!
Sometime we just need to think deeply and go for very detail then we will realize our problem is not a problem actually.
Anyway, since I types so many words for my question on stackoverflow.com, but I cannot click "submit" button because it is not a question for me anymore since I got the answer already, I feel it is wasted if I delete my question from stackoverflow.com, so I print screen and save the picture here :
Sometime we just need to think deeply and go for very detail then we will realize our problem is not a problem actually.
Anyway, since I types so many words for my question on stackoverflow.com, but I cannot click "submit" button because it is not a question for me anymore since I got the answer already, I feel it is wasted if I delete my question from stackoverflow.com, so I print screen and save the picture here :
Set focus after last character textarea
javascript jquery
Monday, January 16, 2012
I have tried many solutions from this discussion but only 1 of them is working for me. Here is the codes :
But above codes is not working on IE7!!! So I find other codes and here it is :
But above codes is not working on IE7!!! So I find other codes and here it is :
Php and Ajax prevent resubmitting form when page reload or when click "back" button
javascript jquery,
php mySQL
Thursday, October 13, 2011
Problem : Resubmitting form when click "f5" to reload the page. There are 3 different solutions :
Solution 1 :
1) page1.php does 3 different tasks :
Task 1 is show a textbox and submit button in a form if $_Get['success']=="true".
Task 2 is show errors message such as "name is used by other" or "multiple inputs too fast" if $_Get['success']=="false".
Task 3 is show the records from database if $_Get['success']=="".
2) page2.php does the data processing. Process the data after the user click submit button on page1.php. Then :
Task 1 is redirect the user to page1.php?success=true by code header('Location: page1.php?success=true'); if data process successful.
Task 2 is redirect the user to page1.php?success=false by the code of header('Location: page1.php?success=false'); if data process fail.
How it works?
1) User submit data by clicking the "submit button on page1.php,
2) Post method <form name="frm_register" action="page2.php" method="post"> jump to page2.php to process the data.
3) After page2.php finish process the data, it redirect user to page1.php?successful=true by header('Location: page1.php?successful=true'); (If you use header to redirect, the page will not remember anything happened previously, it will not remember page1.php did submit the form before). That's why it will not resubmit form when click "f5" to refresh the page1.php.
4) User submit data fail (because the name is used by other or because multiple input too fast), redirect to page1.php?success=false, and error message pop up.
5) If the user reload the page, it will still pop up the error message. It will not resubmit the form, because of this two reasons :
Reason 1 : The page doesn't show the form when $_Get['success']=="false".
Reason 2 : Just now you redirect to page1.php by header(), so page1.php will not remember the form is sent before.
6) If the user click "back" button, the page url will change the url back to page1.php?success=true which shows records and doesn't show the form. If click "back" button again, it will change the url back to page1.php which shows the form, but it will not resubmit the form because just now page2.php had redirected to page1.php by using header() which make page1.php forget everything in the past.
Note that header('Location: http://localhost/plekz/page1.php'); must has spacing after the sign of : and must have full path of url which has http://.
Weakness of solution 1 : If display records must depend of php if else statement, then you need to wrap the html codes of displaying records by php echo. It will be a lot of works to wrap all html in php echo.
Solution 2 :
1) page1.php does 2 different tasks :
Task 1 is show a textbox and submit button in a form if $_SESSION['error123']=="".
Task 2 is show error message if $_SESSION['error123']="samename".
Task 3 is process the data after the user click submit button :
- If process data successful, redirect user to page2.php to view records by code header('Location: page2.php');
- If process data fail because of same name or multiple input too fast, redirect use to page1.php?error123=samename by code header('Location: page1.php?error123=samename');
2) page2.php displays the records from database.
How it works?
1) User submit data by clicking the "submit button on page1.php,
2) Post method <form name="frm_register" action="page1.php" method="post"> jump to page1.php (same page) to process the data.
3) After finish process the data, it will use header() to redirect user to page2.php if no error, it will redirect user to page1.php if there is error.
If the user press "f5" button to reload the page or click "back" button, it will not resubmit the form because just now page1.php use header() to redirect this page, so this page won't remember everything in the past. So It don't remember the form is submitted before, so it will not resubmit the form when the user press "f5" button and "back" button.
Example of codes :
If you want to redirect user to page2.php after user click "OK" button on javascript alert box, u can use this codes : echo "<script type='text/javascript'>alert('Your info FAIL to be saved for this time, because each visitor can save info for 1 time per minute.'); document.write('Loading....'); window.location='page2.php'; </script>";
Note that header('Location: http://localhost/plekz/page1.php'); must has spacing after the sign of : and must have full path of ur which has http://
Solution 3 : You can use onclick to call ajax function to submit the form. So it will not recall the funtion to resubmit the form until u click submit button again. Example of codes :
Reference at http://stackoverflow.com/questions/7747569/prevent-resubmit-form-after-click-back-button/7747700
Solution 1 :
1) page1.php does 3 different tasks :
Task 1 is show a textbox and submit button in a form if $_Get['success']=="true".
Task 2 is show errors message such as "name is used by other" or "multiple inputs too fast" if $_Get['success']=="false".
Task 3 is show the records from database if $_Get['success']=="".
2) page2.php does the data processing. Process the data after the user click submit button on page1.php. Then :
Task 1 is redirect the user to page1.php?success=true by code header('Location: page1.php?success=true'); if data process successful.
Task 2 is redirect the user to page1.php?success=false by the code of header('Location: page1.php?success=false'); if data process fail.
How it works?
1) User submit data by clicking the "submit button on page1.php,
2) Post method <form name="frm_register" action="page2.php" method="post"> jump to page2.php to process the data.
3) After page2.php finish process the data, it redirect user to page1.php?successful=true by header('Location: page1.php?successful=true'); (If you use header to redirect, the page will not remember anything happened previously, it will not remember page1.php did submit the form before). That's why it will not resubmit form when click "f5" to refresh the page1.php.
4) User submit data fail (because the name is used by other or because multiple input too fast), redirect to page1.php?success=false, and error message pop up.
5) If the user reload the page, it will still pop up the error message. It will not resubmit the form, because of this two reasons :
Reason 1 : The page doesn't show the form when $_Get['success']=="false".
Reason 2 : Just now you redirect to page1.php by header(), so page1.php will not remember the form is sent before.
6) If the user click "back" button, the page url will change the url back to page1.php?success=true which shows records and doesn't show the form. If click "back" button again, it will change the url back to page1.php which shows the form, but it will not resubmit the form because just now page2.php had redirected to page1.php by using header() which make page1.php forget everything in the past.
Note that header('Location: http://localhost/plekz/page1.php'); must has spacing after the sign of : and must have full path of url which has http://.
Weakness of solution 1 : If display records must depend of php if else statement, then you need to wrap the html codes of displaying records by php echo. It will be a lot of works to wrap all html in php echo.
Solution 2 :
1) page1.php does 2 different tasks :
Task 1 is show a textbox and submit button in a form if $_SESSION['error123']=="".
Task 2 is show error message if $_SESSION['error123']="samename".
Task 3 is process the data after the user click submit button :
- If process data successful, redirect user to page2.php to view records by code header('Location: page2.php');
- If process data fail because of same name or multiple input too fast, redirect use to page1.php?error123=samename by code header('Location: page1.php?error123=samename');
2) page2.php displays the records from database.
How it works?
1) User submit data by clicking the "submit button on page1.php,
2) Post method <form name="frm_register" action="page1.php" method="post"> jump to page1.php (same page) to process the data.
3) After finish process the data, it will use header() to redirect user to page2.php if no error, it will redirect user to page1.php if there is error.
If the user press "f5" button to reload the page or click "back" button, it will not resubmit the form because just now page1.php use header() to redirect this page, so this page won't remember everything in the past. So It don't remember the form is submitted before, so it will not resubmit the form when the user press "f5" button and "back" button.
Example of codes :
If you want to redirect user to page2.php after user click "OK" button on javascript alert box, u can use this codes : echo "<script type='text/javascript'>alert('Your info FAIL to be saved for this time, because each visitor can save info for 1 time per minute.'); document.write('Loading....'); window.location='page2.php'; </script>";
Note that header('Location: http://localhost/plekz/page1.php'); must has spacing after the sign of : and must have full path of ur which has http://
Solution 3 : You can use onclick to call ajax function to submit the form. So it will not recall the funtion to resubmit the form until u click submit button again. Example of codes :
Reference at http://stackoverflow.com/questions/7747569/prevent-resubmit-form-after-click-back-button/7747700
Javascript detect active window and mouse moving / stop
javascript jquery
Saturday, June 11, 2011
Facebook won't update the new post on wall if you didn't move your mouse on the screen. It is because Facebook want to save bandwidth when you are not viewing facebook website. For example, if you open facebook website, but you away from keyboard/computer for 3 hours, maybe u go toilet or go out to work, facebook will not waste bandwidth to update new posts on wall. Facebook know you are afk by detecting your mouse movement. The same as Gmail switches your chat status from away to online / busy when you weren't having your gmail tab active for a while.
For my case, my website keep auto reload a javascript function for every 10 seconds by setInterval( "checklatestmsgidLive();", 10000 ); The function will still keep reloading the function even when the user is viewing other website on other tab. How to stop reloading it when the user is on other tab? How to make it reload the function only when the user is viewing my website? To do that, I just need to use window.onfocus and window.onblur function, but too bad IE cannot support it, so need modify the codes, adding if (/*@cc_on!@*/false) to detect whether or not the browser is IE. So now I can detect the user is on other tab or is active on my website. I also added mouse movement detection to determine the user is viewing my website by document.onmousemove. Too bad there is no document.onmousestop function, so need to do some trick on document.onmousemove function. Below is the codes :
<div id="test" style="color: black;">
mouse is stop</div">
<div id="test2" style="color: black;">
pause</div">
<script type="text/javascript">
document.onmousemove = (function() {
var onmousestop = function() {
document.getElementById('test').innerHTML="mouse is stop!!!";
}, thread;
return function() {
document.getElementById('test').innerHTML="mouse is moving!!!";
clearTimeout(thread);
thread = setTimeout(onmousestop, 200);
};
})();
function onBlur() {
document.getElementById('test2').innerHTML="window is inactive, pause everything!";
};
function onFocus(){
document.getElementById('test2').innerHTML="window is active";
};
if (/*@cc_on!@*/false) { // check if it is Internet Explorer the double c on is jsript that only ie has
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onload=window.onfocus = onFocus;
window.onblur = onBlur;
}
</script>
You can view the Demo here.
For my case, my website keep auto reload a javascript function for every 10 seconds by setInterval( "checklatestmsgidLive();", 10000 ); The function will still keep reloading the function even when the user is viewing other website on other tab. How to stop reloading it when the user is on other tab? How to make it reload the function only when the user is viewing my website? To do that, I just need to use window.onfocus and window.onblur function, but too bad IE cannot support it, so need modify the codes, adding if (/*@cc_on!@*/false) to detect whether or not the browser is IE. So now I can detect the user is on other tab or is active on my website. I also added mouse movement detection to determine the user is viewing my website by document.onmousemove. Too bad there is no document.onmousestop function, so need to do some trick on document.onmousemove function. Below is the codes :
<div id="test" style="color: black;">
mouse is stop</div">
<div id="test2" style="color: black;">
pause</div">
<script type="text/javascript">
document.onmousemove = (function() {
var onmousestop = function() {
document.getElementById('test').innerHTML="mouse is stop!!!";
}, thread;
return function() {
document.getElementById('test').innerHTML="mouse is moving!!!";
clearTimeout(thread);
thread = setTimeout(onmousestop, 200);
};
})();
function onBlur() {
document.getElementById('test2').innerHTML="window is inactive, pause everything!";
};
function onFocus(){
document.getElementById('test2').innerHTML="window is active";
};
if (/*@cc_on!@*/false) { // check if it is Internet Explorer the double c on is jsript that only ie has
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onload=window.onfocus = onFocus;
window.onblur = onBlur;
}
</script>
You can view the Demo here.
Cannot have the same name of Javascript function on 3 differents pages!
javascript jquery
Friday, June 10, 2011
Today I have spent 5 hours to find out the bug on my websites. My page structure is something like this : main page has 3 boxes - man, woman, animal. On the main page, I use jquery to fetch the information from man.php, woman.php, animal.php and display them onto the 3 boxes. Each of 3 pages (man.php, woman.php, animal.php) have a javascript function :
function showresponddiv(messagedivid){
jQuery.get("showRespLive.php, function(data2) {
$('#dialog .poptext').append(data2);
});
};
The bug was when a user click on an information in the box of man by onclick=\"javascript:showresponddiv(this.id)\", supposedly it should call the function showresponddiv() on man.php, but it fail to do so. It will call the function showresponddiv() on other page like woman.php or animal.php. Why? It is because I use jquery to show them 3 pages together into 1 main page. So actually the function showresponddiv() was declare 3 times on the main page.
To fix the bug, just change the name of the functions to showresponddiv2() and showresponddiv3().
function showresponddiv(messagedivid){
jQuery.get("showRespLive.php, function(data2) {
$('#dialog .poptext').append(data2);
});
};
The bug was when a user click on an information in the box of man by onclick=\"javascript:showresponddiv(this.id)\", supposedly it should call the function showresponddiv() on man.php, but it fail to do so. It will call the function showresponddiv() on other page like woman.php or animal.php. Why? It is because I use jquery to show them 3 pages together into 1 main page. So actually the function showresponddiv() was declare 3 times on the main page.
To fix the bug, just change the name of the functions to showresponddiv2() and showresponddiv3().
How to check if receive new response on the posts that user responsed before?
javascript jquery,
php mySQL
Wednesday, June 08, 2011
Let's say there are 10 messages, I have posted 3 responses onto 7 messages. There are 3 messages that I never responded. The system need to check if the 7 messages receive a new response from other users, the system should not check the 3 other messages.
Question 1 : SELECT msg-id FROM responsesLive WHERE username='{$myUsername}'; //This will output many duplicated msg-id if I sent multiple responses onto a particular message. How to prevent the duplicated msg-id?
Answer : SELECT DISTINCT msg-id FROM responsesLive WHERE username='{$myUsername}';
Question 2 : After I got the msg-id, I need to get the rsp-id of last response in each of the messages. How to do that?
Answer :
$query3 = "SELECT msg-id, response, max(rep-id) FROM responseslive WHERE msg-id in (SELECT DISTINCT msgid FROM responsesLive WHERE username='{$myUsername}') GROUP BY msg-id";
$result3 = mysql_query($query3,$connection) or die (mysql_error());
confirm_query($result3);
while($rspinfo = mysql_fetch_array($result3)){
$latestrsp-id= $rspinfo['max(rsp-id)'];
echo $latestrsp-id . " | ";
}
Question 3 : Isn't I need to loop through all the posts that user responded before? Let's say the user responded on 99999 posts before, i need to check all the 99999 posts to see whether any of them receive a new response? Sure it will slow down the entire page. May I know how did facebook.com or plurk.com do that? I saw plurk.com can tell the user when a very very very old post received a new response. Maybe my steps are wrong? I guess what they do are something like this :
Let's say there are 10 messages, Peter posted comments onto 7 messages. Next time when a user post a new comment onto any 3 of the 7 messages, the website will show the count button "3 new comments". When peter click on the button, the website will show the 3 messages which has the new comments.
Step 1 : Select the message id when a user post a new comment onto the message.
Step 2 : Select all username of users that have posted comment onto the message before.
Step 3 : Add username and message id onto table "new_response_count" in database.
Step 4 : Compare logged in username to the username in table of "tblNew_response_count" in database :
If ($username-login == $username-in-new-rsp-count) {
$query3 = "SELECT msgid FROM tblNew_response_count WHERE username='{$username-login}'";
$result3 = mysql_query($query3,$connection) or die (mysql_error());
confirm_query($result3);
$numCount = mysql_num_rows($result3);
}
Step 5 : <a href="javascript:;" id="newrspbtn"><</a>
Step 6 : Pass msgid from php variable to javascript variable then jquery bind click like :
$('#newrspbtn').bind('click',function(){
jQuery.get("showRSPtest.php?lastmsgID=" + love2, function(newitems){
$('#div123').append(newitems);
});
});
Step 7 : Every 10 seconds will auto reload the function of Step 4.
Note that when the user click the button, two tasks will be carried out : 1) all messages that has new response will be displayed, 2) delete the records (username and msgid) on tblNew_response_count in database.
Question 1 : SELECT msg-id FROM responsesLive WHERE username='{$myUsername}'; //This will output many duplicated msg-id if I sent multiple responses onto a particular message. How to prevent the duplicated msg-id?
Answer : SELECT DISTINCT msg-id FROM responsesLive WHERE username='{$myUsername}';
Question 2 : After I got the msg-id, I need to get the rsp-id of last response in each of the messages. How to do that?
Answer :
$query3 = "SELECT msg-id, response, max(rep-id) FROM responseslive WHERE msg-id in (SELECT DISTINCT msgid FROM responsesLive WHERE username='{$myUsername}') GROUP BY msg-id";
$result3 = mysql_query($query3,$connection) or die (mysql_error());
confirm_query($result3);
while($rspinfo = mysql_fetch_array($result3)){
$latestrsp-id= $rspinfo['max(rsp-id)'];
echo $latestrsp-id . " | ";
}
Question 3 : Isn't I need to loop through all the posts that user responded before? Let's say the user responded on 99999 posts before, i need to check all the 99999 posts to see whether any of them receive a new response? Sure it will slow down the entire page. May I know how did facebook.com or plurk.com do that? I saw plurk.com can tell the user when a very very very old post received a new response. Maybe my steps are wrong? I guess what they do are something like this :
Let's say there are 10 messages, Peter posted comments onto 7 messages. Next time when a user post a new comment onto any 3 of the 7 messages, the website will show the count button "3 new comments". When peter click on the button, the website will show the 3 messages which has the new comments.
Step 1 : Select the message id when a user post a new comment onto the message.
Step 2 : Select all username of users that have posted comment onto the message before.
Step 3 : Add username and message id onto table "new_response_count" in database.
Step 4 : Compare logged in username to the username in table of "tblNew_response_count" in database :
If ($username-login == $username-in-new-rsp-count) {
$query3 = "SELECT msgid FROM tblNew_response_count WHERE username='{$username-login}'";
$result3 = mysql_query($query3,$connection) or die (mysql_error());
confirm_query($result3);
$numCount = mysql_num_rows($result3);
}
Step 5 : <a href="javascript:;" id="newrspbtn"><</a>
Step 6 : Pass msgid from php variable to javascript variable then jquery bind click like :
$('#newrspbtn').bind('click',function(){
jQuery.get("showRSPtest.php?lastmsgID=" + love2, function(newitems){
$('#div123').append(newitems);
});
});
Step 7 : Every 10 seconds will auto reload the function of Step 4.
Note that when the user click the button, two tasks will be carried out : 1) all messages that has new response will be displayed, 2) delete the records (username and msgid) on tblNew_response_count in database.
window.onload = function(){} VS $(document).ready (function(){}
javascript jquery
Sunday, June 05, 2011
$(document).ready(function(){
//your code here
});
$(function(){
//your code here
});
To wait until the page is finish loaded before execute particular code, you can use any one of jquery codes above. The both codes above are 99% the same. They are just make sure the codes of the pages are finish loaded, but they can't make sure the images on the pages are finish loaded. To detect images, you need to use the codes below :
window.onload = function(){
//your code here
};
$(window).load(function(){
//your code here
});
The 1st code above window.onload is normal javascript which is bad idea because it prevents you from setting onload from anything else or will erase any other "onload". To avoid overwriting the hooks that are already attached to the window.onload, attach your function with jQuery: $(window).load(function(){});
//your code here
});
$(function(){
//your code here
});
To wait until the page is finish loaded before execute particular code, you can use any one of jquery codes above. The both codes above are 99% the same. They are just make sure the codes of the pages are finish loaded, but they can't make sure the images on the pages are finish loaded. To detect images, you need to use the codes below :
window.onload = function(){
//your code here
};
$(window).load(function(){
//your code here
});
The 1st code above window.onload is normal javascript which is bad idea because it prevents you from setting onload from anything else or will erase any other "onload". To avoid overwriting the hooks that are already attached to the window.onload, attach your function with jQuery: $(window).load(function(){});
javascript / jquery scroll to bottom of div when the page is loaded (IE problem)
javascript jquery
Tuesday, May 24, 2011
In order scroll to bottom of div, you need to know the height of the div. The more contents inside the div, the more value of height. So basically you need to wait for all contents finish display on the div, then only you can get the height of the div, then only you can execute the function scrolling to bottom of div.
To scrolling to bottom, you just need javascript codes below :
<script type="text/javascript">
function asd(){
d = document.getElementById('div_id');d.scrollTop = d.scrollHeight;
}
asd();
</script>
It work perfectly on Firefox, but it is not working on IE. Why? Because the contents are not finish displayed inside the div before execute asd();. You need to wait for all contents finish rendered into the div, then only execute asd();. To do that, you can use either 1 of them :
1 - <body onload="asd()"> or
2 - jquery $(document).ready(function(){asd();}); or
3 - jquery $(function(){asd(); });.
The 3 methods above work perfectly when the contents of div are not fetched from other page by AJAX or Jquery. If you use ajax or jquery to fetch the contents from other page into the div. For example, jQuery.get("showMsg.php, function(data) { $('#div_id.span_class').append(data); });, you will have another problem on IE. The 3 methods are just to make sure the body/document is finish rendered, too bad they can't detect whether or not ajax/jquery has finish fetching data from other page into the div. To detect it, you can use this javascript functions :
function countdivnum(){
var totalItems=$('#content div').length;
if (totalItems<20){ // make sure all 20 items are loaded, then only start execute scroll funtion.
setTimeout("countdivnum();",1000);
} else if (totalItems==20){
//alert("asdw");
updatestatus();
scrollalert();
}
}
$('document').ready(function(){
countdivnum();
});
Let me explain the codes above. As I use ajax/jquery to fetch multiple <p>...</p> from other page into the div. When the page is loaded, I call countdivnum() which counting the number of <p>(s) inside the <div id="content">. If (totalItems<20) mean the contents are not finish loaded, so wait for 1 seconds then call coundivnum() again to count the number of divs again.
To scrolling to bottom, you just need javascript codes below :
<script type="text/javascript">
function asd(){
d = document.getElementById('div_id');d.scrollTop = d.scrollHeight;
}
asd();
</script>
It work perfectly on Firefox, but it is not working on IE. Why? Because the contents are not finish displayed inside the div before execute asd();. You need to wait for all contents finish rendered into the div, then only execute asd();. To do that, you can use either 1 of them :
1 - <body onload="asd()"> or
2 - jquery $(document).ready(function(){asd();}); or
3 - jquery $(function(){asd(); });.
The 3 methods above work perfectly when the contents of div are not fetched from other page by AJAX or Jquery. If you use ajax or jquery to fetch the contents from other page into the div. For example, jQuery.get("showMsg.php, function(data) { $('#div_id.span_class').append(data); });, you will have another problem on IE. The 3 methods are just to make sure the body/document is finish rendered, too bad they can't detect whether or not ajax/jquery has finish fetching data from other page into the div. To detect it, you can use this javascript functions :
function countdivnum(){
var totalItems=$('#content div').length;
if (totalItems<20){ // make sure all 20 items are loaded, then only start execute scroll funtion.
setTimeout("countdivnum();",1000);
} else if (totalItems==20){
//alert("asdw");
updatestatus();
scrollalert();
}
}
$('document').ready(function(){
countdivnum();
});
Let me explain the codes above. As I use ajax/jquery to fetch multiple <p>...</p> from other page into the div. When the page is loaded, I call countdivnum() which counting the number of <p>(s) inside the <div id="content">. If (totalItems<20) mean the contents are not finish loaded, so wait for 1 seconds then call coundivnum() again to count the number of divs again.
Comment Tags For Every Coding
HTML Css,
javascript jquery,
php mySQL
Monday, February 07, 2011
Html
<!-- comment here -->
Css
/*comment here*/
Javascript
<!-- comment 1 here
javascript code here
// comment 2 here -->
Without the <!-- and -->, the browser will display "comment here 1" as normal text. So if it is html document, you need to put <!-- and -->, if it is js document, you don't need to put <!-- and -->.
The two slash // tell the browser's JavaScript interpreter that the rest of the line is not valid JavaScript code.
Ajax
// comment here
Php
1) // comment here
2) # comment here
3) /* comment here */
Mysql
/* comment here */
Asp
'comment here
<!-- comment here -->
Css
/*comment here*/
Javascript
<!-- comment 1 here
javascript code here
// comment 2 here -->
Without the <!-- and -->, the browser will display "comment here 1" as normal text. So if it is html document, you need to put <!-- and -->, if it is js document, you don't need to put <!-- and -->.
The two slash // tell the browser's JavaScript interpreter that the rest of the line is not valid JavaScript code.
Ajax
// comment here
Php
1) // comment here
2) # comment here
3) /* comment here */
Mysql
/* comment here */
Asp
'comment here
