Script works partially in Chrome and IE but not in Firefox - javascript

The following code works somewhat in chrome and IE but not in Firefox.
The idea is to force users to check an "Agree" box before advancing by following either one of the possible links available.
<script type="text/javascript">
function agreeCheck()
{
valid = false;
var agree = document.getElementById('agree');
if(isAgree(agree)){
valid= true;
}
return valid;
}
function isAgree(elem)
{
if ( elem.checked == false )
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
function Show_Stuff(warning,on_off)
// Function that will swap the display/no display for
// all content within span tags
{
if ((warning.style.display == "none")&&(on_off =="true"))
{
warning.style.display = "";
}
else
{
warning.style.display = "none";
}
}
</script>
<input type="checkbox" name="agree" value="signed" id="agree">
I agree</input> <span ID="agreespan" style="display: none">
<font color="red">You must agree in order to proceed</font>
</span>
<button type="button" title="Proceedt" class="btn-proceed" onclick="if (agreeCheck()==true){ window.location='myURL'; } else{ return agreeCheck();}"></button>
<input type="image" src="anotherURL" title="myTitle" onClick="return agreeCheck();"/>
Notes:
obviously myURL and anotherURL are
actual valid URLs
clicking on the first button when the box is not checked prevents the page from progressing but does not reveal the error message in the span in Chrome and IE. In Firefox it does nothing regardless of the box status
clicking the image link (input type="image") when the box is not checked works well in Chrome and IE and the error message appears. In Firefox the link is followed regardless of the box's status.
I realize that this could be written differently to simplify things. The problem is that I am implementing this in Magento where I only have access to chunks of code separately so I can't combine the parts of the If Else statement in a separate function.
**edit: I changed the if statement (one line before last) to
if (agree.checked ==true){ ...
this fixed the issue in chrome and IE and now those browsers are behaving properly. Firefox is still not doing what I want it to do

The problem is in isAgree function. Try the following:
function isAgree(elem)
{
if (!elem.checked == "Checked")
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
Hope it solves the issue. The solution resolves around this "checked" property.

span_tag.style.display is used for layout purposes not to hide or show the span tag
It doesn't work in your case because the JavaScript is probably breaking.
Try changing everything to use the following code
warning.style.visibility = "hidden";
warning.style.visibility = "visible";

Related

Confirm method works fine in Chrome but not in Firefox

I am using confirm method of JavaScript, which executes fine in Chrome, but it is not working in Firefox. addListItem() function is not executed when I am using Firefox. (check=true) I did validation of radio buttons group. jf all buttons are checked then only want to submit form.
if(check) {
confirmOnsubmit();
} else {
alert('Please make sure all statememt are answered and remark is filled if rating of any statement given as Rarely or Never');
return false;
}
function confirmOnsubmit(){
if(confirm("Are you sure you want to submit")) {
addListItem();
return true;
} else {
alert("You selected cancel");
return false;
}
}

PrtScn Button in the IE not behaving as other browsers using java script

I've been using the following javascript code that blocks Normal users (not professionals of course) from using print screen & Ctrl+A & Ctrl+C on the browser.
it does work as expected on Firefox & Chrome but it sometimes works on IE and some other times it fails. Please review the code if you can a little help of maybe what's going wrong on IE. and why it fails?
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
function copyToClipboard() {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", "You can no longer give print-screen. This is part of the new system security measure");
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("You can no longer give print-screen. This is part of the new system security measure.");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
$(window).focus(function() {
$("body").show();
}).blur(function() {
$("body").hide();
});
I have tested it and it works for me using Chrome, Firefox, IE11.
But, if someone use Inspect Element to disable CSS restriction, then he will disable it :)

onblur functionality stops working in IE11

I have a simple function that checks a field is a number, and that it begins "000".
This is checked using "onblur", to provide instant(ish) feedback to the user.
My code:
function IsNumeric(input)
{
return (input - 0) == input && (''+input).trim().length > 0;
}
function checkNumber(field) {
if (!IsNumeric(field.value)) {
seterrorlabel("That's not a number");
toggleButton('SubmitButton', true);
} else if (!(field.value.substring(0, 3) == "000")) {
seterrorlabel("All numbers must begin 000. One 0 for external. Two 0's for an international number.");
toggleButton('SubmitButton', true);
} else {
toggleButton('SubmitButton', false);
seterrorlabel("");
}
}
function toggleButton(button,disableit) {
var input = document.getElementById(button);
input.disabled = disableit;
}
function seterrorlabel(message) {
var thelabel = document.getElementById('numbererror');
thelabel.innerHTML = message;
}
The problem is that in Internet Explorer 11, the onblur function appears to work only once. I can enter a number such as "001234" and receive the expected error, but after correcting the error, and entering a valid "0001234" the label is not cleared.
Similarly, if i add letters, to make this non-numeric, the label does not update.
In Chrome, this works pefectly however, and it updates each time i would expect onblue to fire.
Any ideas?
just want to confirm that when you enter '001234' and hit the button, does your button gets enabled when focus again to the textbox
This was fixed in Internet Explorer by using a different function for IsNumeric - the previous one was causing issues, though they were not showing the console until changing the function definition to global scope.

HTML5 drag and drop not working on IE11

Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.
the dragging appears to be working but drop isnt happaning on IE.
another small question - in IE i got a half transparent square around my draggable element, but its background is transparent(the image is done like that), and on chrome/firefox i dont have that square and the image look without any background while dragging.
this is the drop area:
<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>
this is the draggable element:
<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>
function drag_start(e)
{
e.dataTransfer.effectallowed = 'copy';
e.dataTransfer.dropEffect = 'copy';
e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
}
function drag_enter(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
}
function drag_leave(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
}
function drag_drop(e) {
var element = e.dataTransfer.getData("Text"); // the player
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
alert("invalid Move");
return false;
}
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
moveHandler(element, e.target.getAttribute('id'));
}
function drag_end(e) {
e.dataTransfer.effectallowed = 'copy';
alert("drop end")
}
}
}
I remove some code of printing stuff to make the code more shorter.
IE10/11 uses Text as the data string and it breaks if you use text/plain.
If you use Text, it breaks in Firefox.
I get around this by doing something like this in whatever drag and drop functions I need to write:
var setDataString = 'text/html';
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly.
this.changeDataStringForIe = (function() {
var userAgent = window.navigator.userAgent,
msie = userAgent.indexOf('MSIE '), //Detect IE
trident = userAgent.indexOf('Trident/'); //Detect IE 11
if (msie > 0 || trident > 0) {
setDataString = 'Text';
return true;
} else {
return false;
}
})();
I'd love to know of a solution that doesn't use userAgent sniffing.
You are setting data of type text/plain, but retrieving data of type Text. While some browsers might understand them to be one and the same, others may not. In this case, it seems Internet Explorer is being pedantic while Chrome and Firefox are being lax.
Personally, I'd suggest using Text. It might be old, but that's what would make it work fine, even as far back as IE5, if memory serves, given some small adjustments to the event handling.
If someone does not drag and drop in IE 8.1 W at 11 just in the Internet Options Security tab and remove the check mark box protected mode or run IE as administrator
The problem is the browser defaults to pan actions rather than touch actions...look at http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx for information on how to control default action in css.

Problem with event.target in IE

I'm writing js for a status update system to be used on various pages throughout a app that I'm working. I am really just starting to get more comfortable with javascript so it has been somewhat of a challenge to get to the point where I have everything now.
The status system is basically a facebook clone. For the most part everything is supposed to function the way that facebook's status updates and status comments do. The intended behavior is that when the user clicks in the status textarea, the div under the status textarea slides out revealing the submit button as well as some other checkboxes.
If the user clicks anywhere else on the page except a link or any element that has the class prevent_slideup the div slides up hiding the submit button and any checkboxes.
I'm using a document.body click function to determine what the user clicked on so I know which form elements to hide if I should even hide them. I do not want this slideup to take place on a textarea if that textarea has focus or the user is selecting a checkbox that goes with that form. Hence the prevent_slideup class. I also do not want to bother running the slideup logic if the user has clicked on a link. I'd prefer they just leave the page without having to wait for the animation.
The code that I was using to accomplish this task can be found in the $(document.body).click(function (e) section below where I'm doing a .is('a') check on the event target.
This code works as expected in chrome and firefox, however in ie when a link is clicked for the first time it seems that the element stored in var target is actually a div instead of an anchor. What ends up happening is that the submit div slides up and the user is not taken to the link that they just clicked on. If a link is clicked a second time the user is taken to the page as you would expect.
It seems to me that there's some kind of a lag in ie as to what the current event being fired is.
The entire status module is working other than this one strange ie bug regarding the users click on the link not being carried out the first time that they click a link after opening the status textarea. Does anything jump out in this script that would explain this behavior or does anyone have any other advice?
Thanks in advance for your help.
$(document).ready(function(){
$("textarea.autoresize").autoResize();
});
$(document.body).click(function (e){
var target = e.target || e.srcElement;
console.log(target);
console.log($(target).is('a'));
if($(target).hasClass('prevent_slideup') || $(target).is('a'))
{
return true;
}
else
{
var active_element = document.activeElement;
var active_status_id = $(active_element).attr('data-status_id');
var active_has_data_status_id = (typeof active_status_id !== 'undefined' && active_status_id !== false) ? true : false;
$('textarea').each(function(){
if($(this).hasClass('status_comment_textarea'))
{
var status_id = $(this).attr('data-status_id');
if($('#comment_textarea_'+status_id).val() === '' && (!active_has_data_status_id || active_status_id !== status_id))
{
hide_status_comment_submit(status_id);
}
}
else if($(this).attr('id') === 'status_textarea')
{
if($('#status_textarea').val() === '' && $(active_element).attr('id') !== 'status_textarea')
{
$('#status_textarea').html($("#status_textarea").attr('placeholder'));
hide_status_submit();
}
}
});
return true;
}
});
$("#status_textarea").live('click', function(){
if($('#status_textarea').val() === $("#status_textarea").attr('placeholder'))
{
$('#status_textarea').html('');
}
show_status_submit();
return false;
});
$(".comment_toggle").live('click', function(){
var status_id = $(this).attr('data-status_id');
show_status_comment_submit(status_id);
return false;
});
$(".status_comment_submit").live('click', function(){
var status_id = $(this).attr('data-status_id');
$('#status_comment_submit_wrapper_'+status_id).addClass('status_comment_submit_successful');
return false;
});
$(".show_hidden_comments").live('click', function(){
var status_id = $(this).attr('data-status_id');
$('#status_hidden_comments_'+status_id).show();
$(this).hide();
return false;
});
function hide_status_submit()
{
$("#status_textarea").removeAttr('style');
$("#status_textarea").blur();
$("#status_block").removeClass('padding_b10');
$("#status_submit_wrapper").slideUp("fast");
return false;
}
function show_status_submit()
{
if ($("#status_submit_wrapper").is(":hidden"))
{
$("#status_block").addClass('padding_b10');
$("#status_submit_wrapper").slideDown('fast');
}
return false;
}
function hide_status_comment_submit(status_id)
{
if(!$('#status_comment_submit_wrapper_'+status_id).is(":hidden"))
{
$('#status_comment_submit_wrapper_'+status_id).hide();
$('#fake_comment_input_'+status_id).show();
$('#comment_textarea_'+status_id).removeAttr('style');
}
return false;
}
function show_status_comment_submit(status_id)
{
if($('#status_comment_submit_wrapper_'+status_id).is(":hidden"))
{
$('#fake_comment_input_'+status_id).hide();
$('#status_comment_submit_wrapper_'+status_id).show();
$('#comment_textarea_'+status_id).focus();
}
return false;
}
function status_comment_submit_successful()
{
hide_status_comment_submit($('.status_comment_submit_successful').attr('data-status_id'));
$('.status_comment_submit_successful').removeClass('status_comment_submit_successful');
return false;
}
I figured out that there were two main issues with my script...
1.) The document.body function and the #status_textarea live click funtioins were conflicting with each other.
2.) After adding the logic for the #status_textarea function into the document.body function I noticed that the script still didn't quite work as expected in internet explorer unless I had an alert in the function. The problem at this point was that the autoresize plugin that I'm using on the textarea was also conflicting with the document.body function.
I was able to rectify the situation by adding a dummy text input and hiding the status textarea. On click of the dummy text input the status textarea is shown and the the dummy text input is hidden. I have no idea why this worked, but it seems to have solved my problems.

Categories