[jQuery] Re: Redirect to anchor after form submit
I've just found this plugin that seems to work fine and the minified version is only 2 kb ... : http://flesler.blogspot.com/2007/10/jqueryscrollto.html Is this the best way ? Thankyou. Jsbeginner a écrit : Hello, I've got a simple form with a return false function to stop it being submitted as I use ajax to update it. However I've come accross a functional problem : if the user's screen is to small and he has not scrolled down enough then he doesn't see the search results and gets the impression nothing has happened. Is it possible to have a form submit button that does not send the form but redirects the page to an anchor (id) on the page, so if the user submits the form and the result is not visible on the page, the page automaticaly scrolls down to the form so the user can see what is happening ? I suppose I could generate a link which would show only after the submit button has been clicked to scroll down to see result, but it would be alot nicer if I could make the page go down to an "id" and act like a link to anchor at the same time as updating the page with the ajax answer. I hope I've been clear enough and that this is possible ...
[jQuery] Redirect to anchor after form submit
Hello, I've got a simple form with a return false function to stop it being submitted as I use ajax to update it. However I've come accross a functional problem : if the user's screen is to small and he has not scrolled down enough then he doesn't see the search results and gets the impression nothing has happened. Is it possible to have a form submit button that does not send the form but redirects the page to an anchor (id) on the page, so if the user submits the form and the result is not visible on the page, the page automaticaly scrolls down to the form so the user can see what is happening ? I suppose I could generate a link which would show only after the submit button has been clicked to scroll down to see result, but it would be alot nicer if I could make the page go down to an "id" and act like a link to anchor at the same time as updating the page with the ajax answer. I hope I've been clear enough and that this is possible ...
[jQuery] SildeDown and table rows.
Hello,
I'm trying to use the jquery slidedown function with table rows but it
does not work as jquery defines them with display:block which places the
whole row in the first colomn and makes the whole table layout go wrong ...
Do you have any suggestions how to get around this ?
Here's my code :
$("#tableid tbody").append("id=\"rownum"+TotalRows+"\">"+data.rowone+""+data.rowtwo+"
"+data.rowthree+"");
$("#rownum"+TotalRows).slideDown();
This code is placed in an ajax request success function and I would like
the new row to slidedown and not just appear...
Here is the html code generated by the slideDown function :
Data 1Data 2
Data 3
It's the display: block that make the layout not work in Firefox etc...
If you don't think it's possible to do this then it's not the end of the
world, I just thought it would look nicer for not much more code ...
Thankyou.
[jQuery] Detect when all ajax queries launched by "for" have finished
Hello,
I've got a script that takes all the elements of a list and on click of
a button it runs an ajax query for each item. It all works fine however
I would like to have a "searching" message during the search and a
"finished" message after the search has finished, but I can't think how
to detect when the for cycle has finished and all ajax queiries ...
Here's the code :
function checkall(){
$('#myform').submit(function() {
$("#status").html("Searching");
$("#mylist>option").each(function(i){
lst[i] = $(this).val();
});
for ( var e in lst) {
checkajax(lst[e]);
}
});
$("#status").html("Finished");
}
function checkajax(e){
$.ajax({
url : "/scripts/checkdata.php",
type : "POST",
data : "number="+e,
dataType : "json",
cache: false,
error : function (xhr, desc, exception) {
$("#status").html("Error");},
success : function (data) {
$(#mytable).append(""+data.id+""+data.name+"")
}
}
});
}
As you can guess the following line :
$("#status").html("Finished");
makes the status be finished before the ajax answers have been recieved...
I would like to keep the ajax being asynchronous but detect when all the
queries sent by the "for" have finished and not when they have just been
sent ...
Do you have any suggestions how I could achieve this ?
Thankyou.
[jQuery] Best way to select dom element ? (find or children ?)
Hello,
I'm trying to get the value of an option in a select list contained in a
different li item...
Here is the html code :
Option 1
Option 2
Option 3
Option 4
Option 1
Option 2
Option 3
Option 4
I would like to be able to get the text of .test2 option:selected when I
change the value of .test1 option selected ...
Here is the JS code I've written .:
$(".test1").change(function(){
var test1 = $("option:selected", this).val();
var test2 = $(this).closest("ul").find("li > p > .test2
option:selected").val();
alert("Test1 : "+test1+" and Test2 :"+test2);
});
Is this the best way? or is there a better way to achieve the same result ?
Thankyou.
[jQuery] Re: Toggle Help
I almost forgot in my last message, don't forget the return false; if you don't want your link to lead anywhere ... Something like this : $(document).ready(function(e){ $('a.typeswitch').toggle( function () { $(".typeselect").attr("selected","TV Shows"); return false; }, function () {$(".typeselect").attr("selected","Movies"); return false;} ); }); Ben Shelock a wrote: Im just starting out with jQuery. Im getting stuck though. Im trying to get jQuery to manipulate my form. Changing the drop down menus to a given value. It does the first toggle fine, but won't do the second. Could someone explain why and provide a solution. Ive been trying for hours. Heres what Ive got. $(document).ready(function(e){ $('a.typeswitch').click(function(e) { $('a.typeswitch').toggle( function () { $(".typeselect").attr("selected","TV Shows"); }, function () { $(".typeselect").attr("selected","Movies"); } ); }); }); Thanks :)
[jQuery] Re: Toggle Help
Hello, maybe I've got this wrong but when I tested the toggle function I
don't think I needed the .click function...
Try this :
$(document).ready(function(e){
$('a.typeswitch').toggle(
function () {
$(".typeselect").attr("selected","TV Shows");
},
function () {
$(".typeselect").attr("selected","Movies");
}
);
});
Ben Shelock a écrit :
Im just starting out with jQuery. Im getting stuck though.
Im trying to get jQuery to manipulate my form. Changing the drop down
menus to a given value. It does the first toggle fine, but won't do
the second. Could someone explain why and provide a solution. Ive been
trying for hours.
Heres what Ive got.
$(document).ready(function(e){
$('a.typeswitch').click(function(e) {
$('a.typeswitch').toggle(
function () {
$(".typeselect").attr("selected","TV Shows");
},
function () {
$(".typeselect").attr("selected","Movies");
}
);
});
});
Thanks :)
[jQuery] Re: Simple toggle between slide up slide down and changing paragraph html contents not working...
Thankyou, I've at last got it working, I used the href attribute to
specify if the text is hidden or not (I will add the html code with
javascript and will supply a PHP version for navigators that are not
compatible with javascript), to begin with I wanted to use the toggle
function but I needed to be able to skip a status and didn't know if
this was even possible. I don't know if there is a better way but here
is how I ended up doing it (any advice to make my code better would be
great :)) :
Here is my code :
JS :
-
$("a.change").each(function(){
$(this).click(function(){
if($(this).attr("href") == "up"){
$("a.change").each(function(){
if($(this).attr("href") == "down"){
$(this).parent("p").prev("p").slideUp(300);
$(this).attr("href","up");
$(this).text("Click to show");
}
});
$(this).parent("p").prev("p").slideDown(300);
$(this).attr("href","down");
$(this).text("Click to hide");
} else {
$(this).parent("p").prev("p").slideUp(300);
$(this).attr("href","up");
$(this).text("Click to show");
}
return false;
});
});
-
HTML :
-
Item 1
Hidden contents 1
Click to show
Item 2
Hidden contents 2
Click to show
Item 3
Hidden contents 3
Click to show
-
Jonathan wrote:
.each() should do what you want.
It will iterate through each element that has the class "Item" and
will set "this" to that individual element. So no $(this) will not be
the same as $(.item) e.g with this markup
$(".item").each() will execute twice with "this" being the DIV then
the SPAN.
Jsbeginner wrote:
Hello again, I've been continuing my search and it seems that the .each
function is not working the way I wanted it to...
From what I've understood $(".item").each(function(){}) just counts how
many elements have the 'item' class, and then executes the code that
number of times with $(this) being the same as $(".item").
How would I go about running a function on each element ? would I have
to do something with a counter an the next function to achieve this ? or
is there an easier way ?
Thankyou.
Jsbeginner wrote :
Hello,
I've been struggling with a very simple code that I can't get to work ...
Simplified html :
Item 1
Hidden contents 1
Click to show
Item 2
Hidden contents 2
Click to show
Item 3
Hidden contents 3
Click to show
This is what I want to do :
When you click on a Click to show link it shows the hidden contents
contained in the item's "toggle" paragraphe and changes the link text
to "Click to hide".
I also want to only be able to have one hidden contents showing at a
time, so I would like to be able to hide any other visible hidden
contents before showing the hidden contents asked for.
I know my code isn't perfect but the following code works to some
extent : I can show or hide the contents but not hide all other
contents before showing new contents.
--
function down() {
$("a.down").each(function(){
$(this).click(function(){
reinit();
$(this).parent("p").prev("p").slideDown(300);
$(this).parent("p").html("Click
to hide");
up();
return false;
});
});
}
function up() {
$("a.up").each(function(){
$(this).click(function(){
$(this).parent("p").prev("p").slideUp(300);
$(this).parent("p").html("Click to show");
down();
return false;
});
});
}
function reinit(){
$(".toggle").each(function(){
$(this).slideUp(300);
$(this).next("p").html("Click to
show");
});
}
$(document).ready(function(){
down();
});
--
There is just one line that doesn't work it's in the reinit function :
$(this).next("p").html("Click to show");
I've been trying lots of ways to get this working without success... I
thought it would work with the next function but no luck.
If it will help you to find what I've done wrong I've put all the
necessary code (except the jquery library) in one html file, I've not
added it to this help request to not make it too long, but if you
find it difficult to follow me I can post it's contents so you can
test it.
Thankyou.
[jQuery] Re: Simple toggle between slide up slide down and changing paragraph html contents not working...
Hello again, I've been continuing my search and it seems that the .each
function is not working the way I wanted it to...
From what I've understood $(".item").each(function(){}) just counts how
many elements have the 'item' class, and then executes the code that
number of times with $(this) being the same as $(".item").
How would I go about running a function on each element ? would I have
to do something with a counter an the next function to achieve this ? or
is there an easier way ?
Thankyou.
Jsbeginner wrote :
Hello,
I've been struggling with a very simple code that I can't get to work ...
Simplified html :
Item 1
Hidden contents 1
Click to show
Item 2
Hidden contents 2
Click to show
Item 3
Hidden contents 3
Click to show
This is what I want to do :
When you click on a Click to show link it shows the hidden contents
contained in the item's "toggle" paragraphe and changes the link text
to "Click to hide".
I also want to only be able to have one hidden contents showing at a
time, so I would like to be able to hide any other visible hidden
contents before showing the hidden contents asked for.
I know my code isn't perfect but the following code works to some
extent : I can show or hide the contents but not hide all other
contents before showing new contents.
--
function down() {
$("a.down").each(function(){
$(this).click(function(){
reinit();
$(this).parent("p").prev("p").slideDown(300);
$(this).parent("p").html("Click
to hide");
up();
return false;
});
});
}
function up() {
$("a.up").each(function(){
$(this).click(function(){
$(this).parent("p").prev("p").slideUp(300);
$(this).parent("p").html("class=\"down\">Click to show");
down();
return false;
});
});
}
function reinit(){
$(".toggle").each(function(){
$(this).slideUp(300);
$(this).next("p").html("Click to
show");
});
}
$(document).ready(function(){
down();
});
--
There is just one line that doesn't work it's in the reinit function :
$(this).next("p").html("Click to show");
I've been trying lots of ways to get this working without success... I
thought it would work with the next function but no luck.
If it will help you to find what I've done wrong I've put all the
necessary code (except the jquery library) in one html file, I've not
added it to this help request to not make it too long, but if you
find it difficult to follow me I can post it's contents so you can
test it.
Thankyou.
[jQuery] Simple toggle between slide up slide down and changing paragraph html contents not working...
Hello,
I've been struggling with a very simple code that I can't get to work ...
Simplified html :
Item 1
Hidden contents 1
Click to show
Item 2
Hidden contents 2
Click to show
Item 3
Hidden contents 3
Click to show
This is what I want to do :
When you click on a Click to show link it shows the hidden contents
contained in the item's "toggle" paragraphe and changes the link text to
"Click to hide".
I also want to only be able to have one hidden contents showing at a
time, so I would like to be able to hide any other visible hidden
contents before showing the hidden contents asked for.
I know my code isn't perfect but the following code works to some extent
: I can show or hide the contents but not hide all other contents before
showing new contents.
--
function down() {
$("a.down").each(function(){
$(this).click(function(){
reinit();
$(this).parent("p").prev("p").slideDown(300);
$(this).parent("p").html("Click
to hide");
up();
return false;
});
});
}
function up() {
$("a.up").each(function(){
$(this).click(function(){
$(this).parent("p").prev("p").slideUp(300);
$(this).parent("p").html("Click
to show");
down();
return false;
});
});
}
function reinit(){
$(".toggle").each(function(){
$(this).slideUp(300);
$(this).next("p").html("Click to
show");
});
}
$(document).ready(function(){
down();
});
--
There is just one line that doesn't work it's in the reinit function :
$(this).next("p").html("Click to show");
I've been trying lots of ways to get this working without success... I
thought it would work with the next function but no luck.
If it will help you to find what I've done wrong I've put all the
necessary code (except the jquery library) in one html file, I've not
added it to this help request to not make it too long, but if you find
it difficult to follow me I can post it's contents so you can test it.
Thankyou.
[jQuery] Re: Ajax tabs in non JavaScript browsers
You can use PHP or most other languages to manage your tabs. For example you could do something like this : tab links : http://yoursite.com?t=1 For tab 1 http://yoursite.com?t=2 For tab 2 http://yoursite.com?t=3 For tab 3 and an simple PHP code : This is tab3 contents Tab 3 contents This is tab 2 contents Tab 2 contents This is tab 1 contents Tab 1 contents Of course with jquery you simply desactivate the links... (return FALSE;) so your page either uses PHP if javascript is not activated or your javascript if it is activated. Playtime a écrit : Dear all, I'm new to jquery and am just started to use the Ajax tabs in a site I am building. However I do notice that if I disable javascript the tabs just open the pages normally, which is no good as then inserted pages don't contain any navigation or other elements. Is there a way to get the tabs to still work without javascript, I have seen some sites that still manage to do this and am unsure of how? Thanks, Phil
[jQuery] Re: Jquery Ajax one request, multiple answers problem
Thanks, I haven't tested it much yet but it seems to have solved the
problem :)
ricardobeat a écrit :
set cache: false in your $.ajax call to disable cacheing of responses.
You can also add a random query parameter to the URL if that doesn't
work.
- ricardo
On Feb 20, 8:53 am, Jsbeginner wrote:
Hello,
I've been working on a jquery projet (with the lastest stable version of
jquery) that retrieves information using json from a php script that
requests information from an API.
The script lists all the different extensions with a status colomn that
says what it's doing (waiting, searching or result).
The script gets the list of extensions form an input select drop down
that's generated by PHP (this allows me to manage extensions using a
database). It then launches the search for the selected extension and
when the search is finished it launches the search for all the other
extensions.
I need one answer per query but it seems that the ajax success function
is launched more than once which is not what I want, also sometimes it
seems to keep some sort of memory of what the answer was last time (if I
add a sleep function to the php script sometimes it gets the first
answer befor the sleep is over) ...
I've got a php script to check whois servers that replys with either
taken, available or error.
When the whois servers answer quickly there are no visible problems, but
when they are slow the ajax request seems to be launched a second time
and sometimes a third time when they are very slow.
So I might see for example : domain.com, status : available, and then 2
seconds later it will be replaced by domain.com, status : error and
sometimes then replaced by domain.com, status : available.
In order to test this I replaced ".html(" by ".append(" and I can then
see all the different results...
Of course I could check that the html id contains the "searching" text
and if not to not change it's value, but I would like to stop it
launching the search more than once ... !
Is this a bug or an error in my code ? should I try it with an earlier
version of jquery ?
Here is my javascript code :
function CheckWhois() {
$('#domchk').submit(function() {
ls = Array();
$("#dext>option").each(function(i){
i = i+1;
ls[i] = $(this).val();
});
var ndom = $('#ndom').val();
var dext = $('#dext').val();
$("#domresult").html("Sel.DomainstatusChose TLD"+ndom+dext+"Autres Extensions");
for ( var e in ls) {
if (dext != ls[e]) {
$("#domtab").append(""+ndom+ls[e]+"");
}
}
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain="+ndom+"&ext="+dext,
dataType : "json",
error : function (xhr, desc, exception)
{$("#chosenstatus").html("Error"); },
success : function (data) {
if(data.error) {
extd.html("Erreur");
} else {
$("#chosenstatus").html(data.status);
for ( var e in ls) {
var extd = $("#status"+e);
if (dext != ls[e]) {
extd.html("");
GetWhois(ndom,ls[e],e);
}
}
}
}
});
return false;
});
}
function GetWhois(ndom,ls,e){
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain="+ndom+"&ext="+ls+"&num="+e,
dataType : "json",
error : function (xhr, desc, exception) {
$("#status"+e).html("Error");},
success : function (data) {
if(data.error) {
$("#status"+e).html("Error");
} else {
$("#status"+data.num).append(data.status);
}
}
});
}
$(document).ready(function(){
CheckWhois();
});
Thankyou !
[jQuery] Re: Jquery Ajax one request, multiple answers problem
It only happens when the api servers are slow and tonight they are all
answering within 2 seconds so I can't make it happen.
I thought about it changing the wrong element but I don't see how one
element could be changed twice or three times as all the elements are
changed by the end and the query is only launched once for each ID. To
make sure of this I set it to send the element id name through the ajax
request and change the corresponding id name with the ajax result.
Also I don't know if it could change anything, I launch the ajax request
more than ten times simultaniously using the same PHP script but just
changing the values sent to this script. Would it be quicker or better
if I duplicated the PHP script and sent each ajax request to a seperate
script ?
Thankyou for your answer I will keep an eye on it and check with firebug
next time it happens.
James wrote:
Could you set up a test page with this code? It's difficult to tell
just by looking at it.
Use Firebug to check and make sure whether it's really resending a
request or not, or whether it's somewhere in the code that is
incorrectly modifying the wrong parts of the DOM from subsequent
requests.
On Feb 20, 1:53 am, Jsbeginner wrote:
Hello,
I've been working on a jquery projet (with the lastest stable version of
jquery) that retrieves information using json from a php script that
requests information from an API.
The script lists all the different extensions with a status colomn that
says what it's doing (waiting, searching or result).
The script gets the list of extensions form an input select drop down
that's generated by PHP (this allows me to manage extensions using a
database). It then launches the search for the selected extension and
when the search is finished it launches the search for all the other
extensions.
I need one answer per query but it seems that the ajax success function
is launched more than once which is not what I want, also sometimes it
seems to keep some sort of memory of what the answer was last time (if I
add a sleep function to the php script sometimes it gets the first
answer befor the sleep is over) ...
I've got a php script to check whois servers that replys with either
taken, available or error.
When the whois servers answer quickly there are no visible problems, but
when they are slow the ajax request seems to be launched a second time
and sometimes a third time when they are very slow.
So I might see for example : domain.com, status : available, and then 2
seconds later it will be replaced by domain.com, status : error and
sometimes then replaced by domain.com, status : available.
In order to test this I replaced ".html(" by ".append(" and I can then
see all the different results...
Of course I could check that the html id contains the "searching" text
and if not to not change it's value, but I would like to stop it
launching the search more than once ... !
Is this a bug or an error in my code ? should I try it with an earlier
version of jquery ?
Here is my javascript code :
function CheckWhois() {
$('#domchk').submit(function() {
ls = Array();
$("#dext>option").each(function(i){
i = i+1;
ls[i] = $(this).val();
});
var ndom = $('#ndom').val();
var dext = $('#dext').val();
$("#domresult").html("Sel.DomainstatusChose TLD"+ndom+dext+"Autres Extensions");
for ( var e in ls) {
if (dext != ls[e]) {
$("#domtab").append(""+ndom+ls[e]+"");
}
}
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain="+ndom+"&ext="+dext,
dataType : "json",
error : function (xhr, desc, exception)
{$("#chosenstatus").html("Error"); },
success : function (data) {
if(data.error) {
extd.html("Erreur");
} else {
$("#chosenstatus").html(data.status);
for ( var e in ls) {
var extd = $("#status"+e);
if (dext != ls[e]) {
extd.html("");
GetWhois(ndom,ls[e],e);
}
}
}
}
});
return false;
});
}
function GetWhois(ndom,ls,e){
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain=&qu
[jQuery] Jquery Ajax one request, multiple answers problem
Hello,
I've been working on a jquery projet (with the lastest stable version of
jquery) that retrieves information using json from a php script that
requests information from an API.
The script lists all the different extensions with a status colomn that
says what it's doing (waiting, searching or result).
The script gets the list of extensions form an input select drop down
that's generated by PHP (this allows me to manage extensions using a
database). It then launches the search for the selected extension and
when the search is finished it launches the search for all the other
extensions.
I need one answer per query but it seems that the ajax success function
is launched more than once which is not what I want, also sometimes it
seems to keep some sort of memory of what the answer was last time (if I
add a sleep function to the php script sometimes it gets the first
answer befor the sleep is over) ...
I've got a php script to check whois servers that replys with either
taken, available or error.
When the whois servers answer quickly there are no visible problems, but
when they are slow the ajax request seems to be launched a second time
and sometimes a third time when they are very slow.
So I might see for example : domain.com, status : available, and then 2
seconds later it will be replaced by domain.com, status : error and
sometimes then replaced by domain.com, status : available.
In order to test this I replaced ".html(" by ".append(" and I can then
see all the different results...
Of course I could check that the html id contains the "searching" text
and if not to not change it's value, but I would like to stop it
launching the search more than once ... !
Is this a bug or an error in my code ? should I try it with an earlier
version of jquery ?
Here is my javascript code :
function CheckWhois() {
$('#domchk').submit(function() {
ls = Array();
$("#dext>option").each(function(i){
i = i+1;
ls[i] = $(this).val();
});
var ndom = $('#ndom').val();
var dext = $('#dext').val();
$("#domresult").html("id=\"domtab\">Sel.Domainstatuscolspan=\"4\">Chose TLDtype=\"checkbox\" name=\"sel\" value=\""+ndom+dext+"\"
/>"+ndom+dext+"src=\"images/domload.gif\" alt=\"en cours ...\" />colspan=\"4\">Autres Extensions");
for ( var e in ls) {
if (dext != ls[e]) {
$("#domtab").append("type=\"checkbox\" name=\"sel\" value=\""+ndom+ls[e]+"\"
/>"+ndom+ls[e]+"src=\"images/domball.gif\" alt=\"waiting ...\" />");
}
}
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain="+ndom+"&ext="+dext,
dataType : "json",
error : function (xhr, desc, exception)
{$("#chosenstatus").html("Error"); },
success : function (data) {
if(data.error) {
extd.html("Erreur");
} else {
$("#chosenstatus").html(data.status);
for ( var e in ls) {
var extd = $("#status"+e);
if (dext != ls[e]) {
extd.html("src=\"images/domload.gif\" alt=\"searching ...\" />");
GetWhois(ndom,ls[e],e);
}
}
}
}
});
return false;
});
}
function GetWhois(ndom,ls,e){
$.ajax({
url : "scripts/ajaxwhois.php",
type : "POST",
data : "domain="+ndom+"&ext="+ls+"&num="+e,
dataType : "json",
error : function (xhr, desc, exception) {
$("#status"+e).html("Error");},
success : function (data) {
if(data.error) {
$("#status"+e).html("Error");
} else {
$("#status"+data.num).append(data.status);
}
}
});
}
$(document).ready(function(){
CheckWhois();
});
Thankyou !
[jQuery] Horizontal menu with slide down and hover bug with firefox
Hello,
I've been looking for a way to make my horizontal menu work with firefox
using jquery slideDown and Up animations instead of fadeout .
The problem is that with firefox if you move the mouse out of the sub
menu area and then in again before the animation had finished the sub
menu starts sliding up and down untill you move the mouse away again.
Here is how I've done my menu :
HTML :
Item 1
Item 1.1
Item 1.2
Item 1.3
Item 1.4
Item 2
Item 2.1
Item 2.2
Item 2.3
Item 2.4
CSS :
#menu dd {
display: none;
}
Javascript :
function mnutoggle(){
$('#menu dl').each(function(){
var menu = $(this);
menu.hover(function(){$('> dd',this).slideDown('fast') } ,
function(){$('> dd',this).slideUp('fast') });
});
}
$(document).ready(function(){
mnutoggle();
});
To try and stop this problem I decided to try and delay the slidedown
unless slideup has finished and stop the slideup unless the slide down
has finished.
In order to do this I introduced a variable which says if the animation
has finished or not, this works in the sense that if you hover quickly
over an element it continues to finish the animation but for some reason
still has the same bug with firefox, here's the code (I used the
following code to do the delay of 300 ms :
animate({opacity: 1.0}, 300)
Here is the full code :
function mnutoggle(){
$('#menu dl').each(function(){
var state = 'up';
var menu = $(this);
menu.hover(function(){
if(state == 'up') {
$('> dd',this).slideDown(300, function(){ state =
'down' })
} else {
$('> dd',this).animate({opacity: 1.0},
300).slideDown(300, function(){state = 'down';});
}
} , function(){
if(state == 'down') {
$('> dd',this).slideUp(300, function(){state = 'up';})
} else {
$('> dd',this).animate({opacity: 1.0},
300).slideUp(300, function(){state = 'up';});
}
});
});
}
$(document).ready(function(){
mnutoggle();
});
This code makes the menu go right up and right down each time but
firefox seems to store the next thing to do and when you bring the mouse
over the sub menu before the animation has finished it goes up and then
down and then up continues untill you move the mouse away.
Is there a way to get around this problem ? FadeIn and out does not have
this problem but I prefer the slidedown and up animation ...
Thanks in advance for any suggestions ...
[jQuery] Re: Firefox problems ( with input reg. exp. verification).
The length check >= 5 does not do anything rearly as with a .com you
already have 4 characters so it allows b.com which is not possible. But
if you change the 5 to 6 it stops two letter domains for two letter
extensions. As for the 62 maximum size I've solved this problem with
html setting the maximum number of characters allowed.
So I've used your code without the length checkup and have used PHP's
Regular expressions check to catch any domains with only one character
before the extension.
I guess the only solution would be to use javascript to split the domain
into hostname and extension and then to check the individually... but
this would be a pain.
I find it strange that Firefox can not seem to handle such a simple Reg
Exp ... :(
Rik Lomas wrote:
Hey, the problem seems to be with the {2,63} bit, so I've rewritten
your code (again), it's not as strict as before but it's a lot faster
now because it tests string length rather than regex lengths:
$(document).ready(function(){
var reg = /^[a-z0-9]+[a-z0-9\-\.]*\.[a-z]{2,4}$/i;
$('input#domain').keyup(function(){
var domain = $(this).val();
if (reg.test(domain) && domain.length >= 5 && domain.length <= 68) {
$("#ok").html("Correct format...");
} else {
$("#ok").html("Wrong format...");
}
});
});
Rik
2008/11/20 Jsbeginner <[EMAIL PROTECTED]>:
Your code is alot better than mine and the use of test instead of match is
better too. However I still have the same problem, even with your code with
Firefox after 16 characters even typed slowley, Firefox becomes slow and
after 20-25 characters it even blocks... Is this a bug with firefox or with
my code ? How can I fix this problem ?
Is it my RegExp ? I can't see how it could be the code as yours is very
simple
Rik Lomas wrote:
I've simplified your code for you and sped up your testing by using
the regular expression "test()" method
$(document).ready(function(){
$('input#domain').keyup(function(){
var domain = $(this).val();
var reg = /^([a-z0-9]+(\-?\.?[a-z0-9]*)){2,63}\.([a-z]){2,4}$/i ;
if (reg.test(domain)) {
$("#ok").html("Correct format ...");
} else {
$("#ok").html("Wrong format ...");
}
});
});
2008/11/19 Jsbeginner <[EMAIL PROTECTED]>:
Hello, this is my first topic here, so I hope that I'm doing the right.
I've
done a search on google and on this forum without finding anyone with the
same problem as me, but maybe I'm not looking for the right keywords.
Here is my problem : I've created a very simple script that checks if a
domain is in a valid format or not, however with Firefox 3 it does not
like
domains that are more than 20 characters long and firefox slows down and
then completly blocks.
Here is my code :
test.js :
function domchk() {
var domain = $("input#domain").val();
var reg = /^([a-z0-9]+(\-?\.?[a-z0-9]*)){2,63}\.([a-z]){2,4}$/i ;
if (domain.match(reg)) {
$("#ok").html("Correct format ...");
} else {
$("#ok").html("Wrong format ...");
}
}
function simple_chk(target_items){
$(target_items).each(function(){
$(this).keyup(function(){
domchk();
});
});
}
$(document).ready(function(){
simple_chk("input");
});
test.html :
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Test page
Javascript domain check ...
Not changed yet...
--
View this message in context:
http://www.nabble.com/Firefox-problems-%28-with-input-reg.-exp.-verification%29.-tp20580852s27240p20580852.html
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
Rik Lomas
http://rikrikrik.com
--
View this message in context:
http://www.nabble.com/Firefox-problems-%28-with-input-reg.-exp.-verification%29.-tp20580852s27240p20598552.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Firefox problems ( with input reg. exp. verification).
Your code is alot better than mine and the use of test instead of match is
better too. However I still have the same problem, even with your code with
Firefox after 16 characters even typed slowley, Firefox becomes slow and
after 20-25 characters it even blocks... Is this a bug with firefox or with
my code ? How can I fix this problem ?
Is it my RegExp ? I can't see how it could be the code as yours is very
simple
Rik Lomas wrote:
>
>
> I've simplified your code for you and sped up your testing by using
> the regular expression "test()" method
>
> $(document).ready(function(){
> $('input#domain').keyup(function(){
> var domain = $(this).val();
> var reg = /^([a-z0-9]+(\-?\.?[a-z0-9]*)){2,63}\.([a-z]){2,4}$/i ;
> if (reg.test(domain)) {
> $("#ok").html("Correct format ...");
> } else {
> $("#ok").html("Wrong format ...");
>}
> });
> });
>
>
>
> 2008/11/19 Jsbeginner <[EMAIL PROTECTED]>:
>>
>>
>> Hello, this is my first topic here, so I hope that I'm doing the right.
>> I've
>> done a search on google and on this forum without finding anyone with the
>> same problem as me, but maybe I'm not looking for the right keywords.
>>
>> Here is my problem : I've created a very simple script that checks if a
>> domain is in a valid format or not, however with Firefox 3 it does not
>> like
>> domains that are more than 20 characters long and firefox slows down and
>> then completly blocks.
>>
>> Here is my code :
>>
>> test.js :
>> function domchk() {
>> var domain = $("input#domain").val();
>> var reg = /^([a-z0-9]+(\-?\.?[a-z0-9]*)){2,63}\.([a-z]){2,4}$/i ;
>> if (domain.match(reg)) {
>> $("#ok").html("Correct format ...");
>> } else {
>> $("#ok").html("Wrong format ...");
>> }
>> }
>>
>> function simple_chk(target_items){
>> $(target_items).each(function(){
>> $(this).keyup(function(){
>> domchk();
>> });
>> });
>> }
>>
>>
>> $(document).ready(function(){
>> simple_chk("input");
>> });
>>
>>
>> test.html :
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
>> http://www.w3.org/1999/xhtml";>
>>
>>
>> Test page
>>
>>
>>
>>
>>
>> Javascript domain check ...
>>
>>
>>
>> Not changed yet...
>>
>>
>>
>>
>> --
>> View this message in context:
>> http://www.nabble.com/Firefox-problems-%28-with-input-reg.-exp.-verification%29.-tp20580852s27240p20580852.html
>> Sent from the jQuery General Discussion mailing list archive at
>> Nabble.com.
>>
>>
>
>
>
> --
> Rik Lomas
> http://rikrikrik.com
>
>
--
View this message in context:
http://www.nabble.com/Firefox-problems-%28-with-input-reg.-exp.-verification%29.-tp20580852s27240p20598552.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Firefox problems ( with input reg. exp. verification).
Hello, this is my first topic here, so I hope that I'm doing the right. I've
done a search on google and on this forum without finding anyone with the
same problem as me, but maybe I'm not looking for the right keywords.
Here is my problem : I've created a very simple script that checks if a
domain is in a valid format or not, however with Firefox 3 it does not like
domains that are more than 20 characters long and firefox slows down and
then completly blocks.
Here is my code :
test.js :
function domchk() {
var domain = $("input#domain").val();
var reg = /^([a-z0-9]+(\-?\.?[a-z0-9]*)){2,63}\.([a-z]){2,4}$/i ;
if (domain.match(reg)) {
$("#ok").html("Correct format ...");
} else {
$("#ok").html("Wrong format ...");
}
}
function simple_chk(target_items){
$(target_items).each(function(){
$(this).keyup(function(){
domchk();
});
});
}
$(document).ready(function(){
simple_chk("input");
});
test.html :
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Test page
Javascript domain check ...
Not changed yet...
As you can see I've reduced the code to the bare minimum to make sure that
it was not another part of the code causing the problem, and also so that
you can maybe see the problem without having to read through lots of code.
This simplified version does exactly the same thing as the main one so the
problem is in the few lines of javascript. I've not includes the latest
stable version of jquery as I guess that you already have it...
Thanks in advance :).
--
View this message in context:
http://www.nabble.com/Firefox-problems-%28-with-input-reg.-exp.-verification%29.-tp20580852s27240p20580852.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
