This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?
Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.
I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.
Related
so I have a webpage which should work on both desktop and mobile devices. I'm having quite a bit of trouble making the buttons work, however.
This is how a button looks like:
<a class="button" id="upload-media-button" onclick='uploadMedia();'>Upload</a>
And this is the uploadMedia code:
var uploadMedia = function() {
if(!isUploadFormVisible){
alert(isUploadFormVisible);
event.preventDefault();
event.stopPropagation();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
} else {
alert(isUploadFormVisible);
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = 'hidden';
isUploadFormVisible = 0;
$("body").removeClass("modal-open");
refreshMedia(true);
}
}
The funny thing is that the buttons work fine on desktop and it partially works on mobile as well (if instead of onclick='uploadMedia(); I do onclick='alert(whatever); the alert is displayed successfully). I've spent most of yesterday and today trying to fix the issue, but it is simply not working.
I've tried something like this as well:
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(){
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
And this still doesn't work.
Edit:
Even though the answer helped me fix the issue, it was only a momentary fix: this was absolutely unbelievable and I was really confused on how to make those damn buttons work. I had tried everything.
By investigating the issue, I found out that this problem never appeared on desktop (with both static file compression off and on), however, on mobile, compression did make a difference as without it it worked fine.
The conclusion to this investigation is clear: check your code for syntax errors. I was missing maybe a dozen semicolons and the console didn't complain whatsoever (in fact it worked ok on desktop w/ compression).
Anyways, if you use compression like me, make sure to grab the source from the compressed file and run it through JSHint (or whatever works for you), to check for syntax errors.
Now I get why people hate JS.
An <a> tag with no href attribute is not a tap target for touchscreens.
Add href="#" (with a suitable event.preventDefault(); call) or href="javascript:void(0);" to make it an actual, clickable (tappable) thing.
I've been working on a project for work where I need to create a Javascript "jump-menu" within a page.
(Q:Wait, a jump-menu? Why don't you just use a elements and namespaces to navigate within your page?
A: Because that would defeat the purpose! So please, don't provide answers like that. I need to do this with Javascript (AND I'M NOT USING JQUERY!!!))
So, here is what I do:
I make a list at the top of the page, and a list at the bottom of the page.
I add an event listener to each list item at the top of the page and I attach a reference to that list items corresponding content item within the page.
When the link at the top is clicked, I grab to offsetTop of the item I want to scroll to, and I set either the document.body.scrollTop or the window.pageYOffset.
I've never actually needed the window.pageYOffset, but somewhere told me it would work and I never removed it from my code. Either way, this appears to work with the document.body.scrollTop in Chrome, Safari, and Opera, yet it doesn't work in Firefox or IE. Why?
Here is the code block where I set the document.body.scrollTop:
if(elem.jump_ref)
{
if(document.body.scrollTop || document.body.scrollTop === 0)
{
document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding;
}
else if(window.pageYOffset || window.pageYOffset === 0)
{
window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding;
}
}
And Heres The Project In JSFIDDLE
I've stepped through and found that "Yes, I am grabbing the right element." and "Yes, I am setting the document.body.scrollTop, and "No, I am not setting the document.body.scrollTop to zero." and yet it still doesn't work! Please help! My webpage is supposed to go public on Tuesday!
Well, I believe I have found my answer. So far, it appears to work in Chrome, Firefox, IE, Opera, and Safari (these were the only ones I was able to test). I don't know what type of mobile support this feature will have (if any), but my page already has an entirely different functionality for mobile anyway.
Either way, here's the fix. Its the window.scrollTo method!:
this.jump = function(evt)
{
var elem = evt.srcElement || evt.currentTarget;
var page_top_padding = 100;
if(elem.jump_ref)
{
window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding));
}
}.bind(this);
And like I said, it works great in nearly everything! Everything except JSFiddle. lol. I don't quite get it, but luckily no one is going to be visiting my webpage in JSFiddle.
I am trying to resolve a "browser compatibility" issue on our old website, which has a lot of javascript, css and html. they are asp pages, but I'm evaluating what actually is getting sent to the browser.
We have a page that has several text boxes (html input element of type=text) that you can't type into them unless you are on IE 7. Newer versions of IE and other modern browsers, when you click on the text box, you don't even get the flashing I beam cursor. But it momentarily flashes the border.
In Chrome, I right clicked and did Inspect Element, and I removed the text boxes class and all event handlers and the problem remained. Then I inspected the usual suspects: read-only, disabled, enabled, max-length, and they are all unrestricted.
What other DOM properties or style attributes can I check? Should I not assume that just because I removed html in Chrome inspect elements tab, it took effect?
I'm just looking for a list of weird things to check since I'm not primarily a web developer. The fact that it works in an older browser but no newer browsers makes me think that some html, css or javascript has come to be interpreted differently or additional things are being handled that were not handled before. Perhaps the newer browsers have uncovered (brought to the surface) some bad / illogical code.
EDIT:
Here is a fiddle that reproduces the problem, at least in Chrome:
http://jsfiddle.net/2n2sJ/6/
<input type="text"/>
var ns6 = document.getElementById && !document.all
var isMenu = false;
var menuSelObj = null;
var overpopupmenu = false;
function mouseSelect(e) {
var obj = ns6 ? e.target.parentNode : event.srcElement.parentElement;
if (isMenu) {
if (overpopupmenu == false) {
isMenu = false;
overpopupmenu = false;
document.getElementById('menudiv').style.display = "none";
document.getElementById('Div1').style.display = "none";
return true;
}
return true;
}
return false;
}
document.onmousedown = mouseSelect;
When a click or focus event is handled by javascript, and the javascript returns false, this will make the text box appear to be disabled.
Have the handler return true instead of false to allow the event to occur.
I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click(), now I am working on different methods for different browsers but I can't seem to get them it working together.
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? Here is the code I am trying to get working:
window.onunload=leave;
function leave() {
// For Internet Explorer only.
if (navigator.appName == "Explorer"){
document.getElementById('kioskform:broswerCloseSubmit').click();
}
// For Chrome only
if (navigator.appName == "Chrome"){
// add code for Chrome to use.
}
// for Safari only
if (navigator.appName == "Safari"){
// add code for Safari to use
}
// for Firefox only
if (navigator.appName == "Firefox"){
// add code for Firefox to use
}
}
So far the only thing working is IE but the other web browsers are not liking the code in the document. But I want to try other methods for the other browsers I am working with. But I can't seem to get browser detection to work at all, any idea's or suggestions or advice is greatly appreciated thank you.
Some browsers (Chrome / FF) does not support the window.onunload method.
See: http://bugs.jquery.com/ticket/10509
In my website I have this javascript code, adding a vertical offset when in the url a specific section of the page is specified (#):
if (!!window.location.hash)
window.scrollBy(0,-60);
However this only works in Firefox... I'm pretty sure window.location.hash works in all browsers, that is, the symbol "sharp" is correctly detected in the url.
However, the -60 offset only works in Firefox... this is the url, could you give me some insight ?
http://patrickdiviacco.co.cc/#432
thanks
It seems to me that the default behavior is applied in a different order. So your code runs first, then the browser aligns the window according to the #hash. Push it to the event queue to run it afterwards.
if (typeof window.location.hash == "string") {
setTimeout(function(){ window.scrollBy(0, -60); }, 1);
}
I tested it in IE 7 and it works, also in FireFox and Chrome...
If this really don't work try using this:
function jumpScroll(amount) {
document.body.scrollLeft += amount;
}
jumpScoll(100);
or value which you want...