I m creating app. in facebook in that i m trying to show message to user while image is not completely loaded, the message is disappears when image is loaded completely and displayed to user. I used following code:
function imageloaded()
{
document.getElementById('testing').setStyle('visibility','hidden');
}
<div id="testing">
<font size="5" color="red">
Please wait to load image completely ......
</font>
</div>
<image src="" onLoad="imageloaded();">
The code works properly in mozilla, google crome but it doesn't work in IE. Please help me...
Instead of:
document.getElementById('testing').setStyle('visibility','hidden');
Try:
document.getElementById('testing').setStyle('display','none');
Note: In IE8 mode, getElementById performs a case-sensitive match on the ID attribute only. In IE7 mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results.
'visibility: hidden' hides the element, but it still takes up space in the layout.
'display: none' removes the element completely from the document. It does not take up any space, even though the HTML for it is still present in the source code.
Both of these worked in 'IE 8' and 'Firefox 3.6.8':
function imageloaded() {
var element = document.getElementById('testing');
element.setAttribute("style", "visibility: hidden");
}
function imageloaded() {
var element = document.getElementById('testing');
element.setAttribute("style", "display: none");
}
EDIT:
In response to the comment below, I tested the following online using 'http://browsershots.org' and although I couldn't check this in real-time, the text was not visible in the final output:
Firefox 3.6.8
MSIE 6.0 Windows XP
MSIE 7.0 Windows XP
MSIE 8.0 Windows XP
Safari 4.0 Windows XP
Safari 5.0 Mac OS X 10.5
So this should do the trick:
HTML Sample:
<div id="testing">
<font size="5" color="red">
Please wait for the image to load completely...
</font>
</div>
<img src="img/test.jpg" alt="" onload="imageLoaded();">
JavaScript Sample:
<script type="text/javascript">
function imageLoaded() {
var element = document.getElementById('testing');
element.style.cssText = 'display:none;';
}
</script>
Hope this helps!
Related
As Foundation 5 does not support IE8, I am showing a warning message to upgrade the browser with CSS (display:inline;) in conditional tags <!--[if lt IE 9]>, which is hidden on all other browsers (display:none;).
This works as intended. The markup of the message is placed in the body:
<div id="ie8warning" class="ie8warning">
<div>This site does not support <b>Internet Explorer 7 and 8.</b>
<div id="closewarning">×</div>
</div>
</div>
Now, the message contains a small 'X' (<div id="closewarning">×</div>), which should close the window, when it is clicked. I wrote the following JavaScript, which works in all modern browsers. However, the onclick-event is obviously not recognized in IE9 and below. IE9 is not important as the message will not show up, but IE8 and below are essential:
function closeWarning() {
var ie8Warning = document.getElementById('ie8-warning');
ie8Warning.style.display = 'none';
}
var ie8Button = document.getElementById('closewarning');
ie8Button.onclick = closeWarning;
Would appreciate your advice how to get this working in pure JavaScript.
IE8 is a HTML4 browser, hyphens in ids are not allowed. An id in HTML4 browsers can contain any alphanumeric string that begins with a letter. The underscore (_) can also be used.
To properly display a "loading" image in my application, I made the following script:
var spinnerVisible = false;
function ShowProgress() {
if (!spinnerVisible) {
$('div#layer').fadeIn("fast");
$('div#spinner').fadeIn("fast");
spinnerVisible = true;
var spinner = $('#spinner');
spinner.html('<span>Loading, please wait...</span><img src="/Content/ajax-loader.gif" width="250" height="250"/>').css('background', '#fff').show();
}
}
The ajax-loader.gif image is loading fine in internet explorer and Chrome, but it does not load in Firefox?
EDIT
I have obtained the url of the image, which goes like this:
http://localhost:63779/Content/ajax-loader.gif
If I copy-paste the url in firefox, the gif is loading, but now when the function is called...?
EDIT 2
I don't know if it is related, but I have found this:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes<
Maybe it is related to my problem?
EDIT 3
Ok, so something strange happened, which I don't really like, but here goes:
Firs I have tried this:
var element = document.getElementById('spinner');
element.setAttribute("'<span>Loading, please wait...</span><img src=\"/Content/ajax-loader.gif\" width=\"250\" height=\"250\" background=\"#fff\"/>')", element.innerHTML);
alert(document.getElementById("spinner").innerHTML);
As I tested in firefox it gave me an error saying that there were illegal characters in my string. So I put the element.setAttribute line in comments and I got the proper alert...
And the gif showed!
But that's not all: sometimes it plays, sometimes it does not. I'm slightly confused right now, I don't understand why.
I am trying to make a HTML element (in this case an object) scroll at the same time I scroll another element (div). So far I have tried multiple ways but cannot seem to get the element I want to move automatically to do so.
Here are a couple of ways I am trying to do this;
$(document).ready(function () {
$("canvas").scroll(function () {
$("FrameStyle").scrollTop($("canvas").scrollTop);
});
});
function elementOnScroll() {
var a = document.getElementById('canvas').scrollTop;
document.getElementById('FrameStyle').scrollTop = a;
}
Neither of these have had any affect on the scroll bar that should be moving and i'm not sure why now.
HTML:
<asp:Literal ID="litWebsiteFrame" runat="server"></asp:Literal>
<div id="canvas">
<canvas id="DrawingCanvas">
<p>
Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below.
</p>
<p>
Supported browsers: Chrome,
Opera, Firefox,
Safari, and Konqueror.
</p>
</canvas>
</div>
The literal is just the following html code:
"<object data='" + qa.GetURL + "' id='FrameStyle'></object>"
You have missed the selector symbol. FrameStyle and canvas is ID. You need to use the script like below.
$("#FrameStyle").scrollTop($("#canvas").scrollTop);
I have no idea if this is possible, I can't seem to find anything.
What I want is to offer the user the option of either "drag drop" an image or use the normal html file input box.
I don't the image to be uploaded until the form is saved. So I guess the drag and drop area would just update the field?
How would I go about doing that?
Thanks in advance.
I came here looking for the same answer. Ended up do the following, which looks to fit your need.
Make a div for your image drop box, then add your input type="file" inside the div. Set height and width as desired. Set opacity to 0. Now your input fills the div, can't be seen, but still functions.
<div class="divClass">
<input class="inputClass" name="inputName" type="file">
</div>
Styles below
<Style>
.divClass{
position: relative;
// anything else
}
.inputClass{
opacity: 0;
position: absolute;
top:0;
left: 0;
height: x // as desired
width: x // as desired
}
</style>
=== Edit ===
Ignore my styling up there, you really just need to use a form with an input type=file. Style/layout as needed.
As pointed out, by Shazoo, drag and drop of image does not work in IE. Works with Firefox and Chrome. Unsure of Opera and Safari. You cannot use JavaScript on the input type=file for security reasons -- it is read only as Jasny said, so you have to rely on what the browser vendor allows.
With that in mind, you can just give the IE user the option of clicking the field to select and upload a file. The default input type="file" in IE offers this ability, so as long as you leave the input visible, they should see it. (Default Edge input type=file)
Filter for IE example (based on https://stackoverflow.com/a/31757969/3136874)
function stopIeDefault(){
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
}
if (/MSIE 10/i.test(navigator.userAgent)) {
// This is internet explorer 10
stopIeDefault()
}
if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
// This is internet explorer 9 or 11
stopIeDefault()
}
if (/Edge\/\d./i.test(navigator.userAgent)){
// This is Microsoft Edge
stopIeDefault()
}
This tests for IE and edge. If it detects a version then it will use stopIeDefault to preventDefault for drag and drop. This keeps IE from loading the image if someone drags and drops it on the form. (Edge appears to prevent this by default, so you may not need to call stopIeDefault as I have.) Additionally, you could apply a different style or add blocks of code or what not to deal with IE. According to w3schools, IE browser share is 5.2-6.2% as of August 2016: http://www.w3schools.com/browsers/default.asp, if that helps you decide what to do.
If anyone can confirm if drag and drop works on safari or opera, please do.
=== Edit ===
No it can't be done. Dropped files can only be uploaded through AJAX.
The only way to upload a file in a normal HTML form is through <input type="file"> and file inputs are read-only.
It seems I can't really append elements to a new window in Firefox 4 beta (tested with beta 10). It works fine in Firefox 3, Opera, Chrome and IE6, but it seems FF beta 4 broke it.
Here's a simple demonstration HTML page
<html>
<head>
<script type="text/javascript">
function c() {
var o = window.open("", "", "status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1,width=400,height=400");
if(!o.document.body) {
var b = o.document.createElement("body");
o.document.body = o.document.appendChild(b);
}
var e = o.document.createElement("div");
o.document.body.appendChild(e);
e.innerHTML="abc";
}
</script>
</head>
<body>
abc
</body>
</html>
Basically, it's a page with a link, when clicked, pops up a new window with the text "abc" in it.
In Firefox beta 4, it pops up with the window, but nothing is displayed in it. Using Firebug, it appears the nodes are created, but everything under the tag, (including the tag itself) is faded out in the tree, similar to invisible elements. However, the computed CSS show that display and visibility styles are fine.
Does anyone have any idea on how to make it work in Firefox beta 4?
According to this bug report, a fix should have been pushed to the repository, some days after the release of 4.0. This means that this behavior is expected to be fixed in next version of Firefox.