The following code is used as a visual filter on an application I'm building. Basically, when a user types something into the textbox with id 'filter', the code below runs to hide those that match.
$('#filter').keyup(function() {
delay(function(){
$(".patient:not(:contains('" + $('#filter').val() + "'))").fadeOut();
$(".patient:contains('" + $('#filter').val() + "')").fadeIn();
}, 300 );
});
The code works fine in Firefox and Chrome, but in IE7 two things happen that I don't like:-
1) The selected divs dont fadeOut/In - they just appear..
2) Occasionally, I get an error from IE that the script is taking too long and may become unresponsive.
In terms of problem 2 I've read that returning control to the browser (again maybe using a timeout) might prevent the issue but I'm not sure if this is possible using my code or how to do it.
Can you guys help?
(PS - for the record, I HAVE to use IE7 in my organisation. Bad, I know, but I can do nothing about this, just in case your solutions involve changing browser :))
I managed to fix it and prevent the errors. Maybe I was just asking too much of the browser, so I changed the code as follows:-
$('#filter').keyup(function() {
delay(function(){
$(".patient").hide();
$(".patient:contains('" + $('#filter').val() + "')").fadeIn();
}, 300 );
});
This now works pretty much perfectly.
Related
I wonder if I could get some direction on this problem. I have a forum with a js function to surround text in a message with bb code, but it only works in Opera. In other browsers, it just doesn't do anything, the highlighted words just become not highlighted any more. The actual parser to convert from bbcode to html works fine, its just this surroundText function which is not working.
Here is the routine:
$('.surroundText').click(function(event) {
event.preventDefault();
var before = $(this).data('text'),
after = $(this).data('text-after');
surroundText(before, (after) ? after : '');
});
Ultimately I am going to have to install some debugging software and deal with this, but could someone see anything here which is fixable? For some reason Opera works perfectly and everything else doesn't, for a few minor functions on the platform. This is the biggest one.
Edit: Oh and the buttons have this code:
<a class="bold" href="javascript:void(0);" onclick="surroundText('[b]', '[/b]'); return false;" title="Bold">Bold</a>
This is from a working sample...the code is the same, I was confused. Can anyone see a clear problem?
Finally, I figured this out, its so simple. The jQuery wasn't loading in the other browsers at all. The issue was pretty simple,
When the JavaScript was loaded, the line looked like this:
.script("http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js").wait()
and the problem was that the http: isn't supposed to be there, therefore jQuery wasn't loaded at all.
So the proper line is:
.script("//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js").wait()
I'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.
I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.
Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more
I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.
First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).
I am using organictabs plugin, which I initiate in every page load in this form:
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
The tabs work fine in all browsers, and then I perform an ajax call which regenerates the tabs with the following code:
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText,'page-wrap');
$(function() {
$("#example-two").organicTabs({
"speed": 200
});
});
}
Again, the tabs are regenerated properly and everything works fine in all browsers EXCEPT in IE, when I try to switch tabs it doesn't work. I am initiating the jquery code onreadystate change, and i really can't figure out what can the problem be with IE?
Any help will be greatly appreciated.
All the best
The problem was with how IE handles the ("a.sample_class").attr("href") attribute. In Chrome/FF the relative path is returned(in this case just the anchor #tag), whereas in IE, after I was calling an ajax page, the absolute path was being returned(http://www.mysite.com/#tag), hence trying to find the entire anchor(string) in the current page.
More information regarding this issue you can read in this article: http://www.glennjones.net/2006/02/getattribute-href-bug/
Hope this is of help to someone, as it really took a few days of my time
My javascript won't load because of errors it receives, only in IE. I used debugger to get the following errors. This page renders the javascript correctly in Safari, FF and chrome but not in IE and only on specific pages like this.
http://tsqja.deznp.servertrust.com/Lakeside_721_2_Shelf_Heavy_Duty_Utility_Cart_p/lak-721.htm
1) No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
2) Invalid argument. jquery.min.js
Any ideas what the first error implies? I have switched out my jQuery build with the latest and it still does the same thing.
UPDATE I have updated my jquery.min.js to the latest and it I figured out this is where the page stops loading...after the invalid argument pops up in the jquery-latest.min.js, line 16 character 15511 which is the following letter 'b':
finally{b=[e,f],c=0}}return this}
DEMO https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
1) - No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
is caused by the <g:plusone /> button on your site: ( google is busy of this notice )
the only way i found to circumnvent this issue is by doing something like this:
$(function() {
setTimeout(function() {
gapi.plusone.render("plusone-div");
},
1500);
});
2) - Invalid argument. jquery.min.js
looking into your source-code is a chaos! ;-) OMG
you have lot's of errors like ( missing http:// protocol specified ):
different folder case-name like /v/newsite/ and /v/Newsite/ this really matter if you are under nix but since you are using ASP...
code like this AttachEvent(window, 'load', store_init); while using jquery like jQuery(document).ready(function() {
multiple inclusion of the same file ( this file is included 3 times ) /a/j/product_details.js
massive use of $(function(){ & $(document).ready(function(){ & $(window).load(function(){ multiple times when just one needed;
js global's all around the page, at the top, in the middle and at the bottom, they should stay all on top IMHO...
different version of jquery loaded at same time like: jquery-1.4.4.min.js & jquery-1.6.2.js & 1.4.2/jquery.min.js together
minor but always crappy, you have <meta /> , <link /> and <script /> in mixed order just like a chicken salad, where they should stay in order meta, links and script preferably at the end of the page.
missing semi-colon ; all around;
non-sense/malformed code like below and much much more...
if (!/\/shoppingcart\.asp/i.test(window.location.pathname)) {
jQuery(document).ready(function() {
jQuery('a').each(AddCartLink)
});
}
var global_Config_EnableDisplayOptionProducts = 'False';
var global_ImageSeed = 'test.jpg';
global_ImageSeed = global_ImageSeed.substring(...
your site with no errors: https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
what i have done is:
reordered main tags meta,links,script
removed shitty widgets like addthis, google, facebook
"tried" to place all the globals to the top;
commented the part of the code that cause chrome problems in the TopScriptsTEST5.js this file is your main problem, ( you should see an huge chunk of code commented )
removed duplicate file inclusion,
removed latest version of jquery, cause i strongly doubt that all the rest of your code work with the latest jquery version, so use the 1-4-4 instead
some other fix here and there... nothing special
hope this check-up help a little, but i think you need an exorcist ;-)