|
Hi,
In firefox, and chrome, I have a progress bar when someone uploads a file, however the same code doesn't work in IE (surprise surprise), it fails on:
var file = this.files[0];
My question is how do I do the equivalent for IE? Pointing me to the documentation would best.
code is:
function uploadImage(){
$('#percent').progressbar({
value: 0
});
$( "#dialog" ).dialog({
resizable: false,
height:150,
modal: true,
buttons: {
Cancel: function() {
if (xhr){
xhr.abort();
xhr = null;
}
$( this ).dialog( "close" );
}
}
});
document.getElementById('photo').addEventListener('change', function(e) {
var file = this.files[0];
var formdata = new FormData();
formdata.append('file', file);
xhr = new XMLHttpRequest();
xhr.file = file;
xhr.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$('#percent').progressbar('value', (Math.floor(done/total*1000)/10));
}, false);
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$('#percent').progressbar('value', (Math.floor(done/total*1000)/10));
};
}
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(this);
$('#src').val(this.responseText);
$('#dialog').dialog('close');
xhr = null;
}
};
xhr.open('post', '/index/fileupload', true);
xhr.send(formdata);
}, false);
}
|
|
|
|
|
try to find a file object or collection for IE at http://msdn.microsoft.com/en-us/library/ms533050.aspx
|
|
|
|
|
Hi,
came acoss this bit of code & don't fully understand it:
Value <<= 1
as in if((Value <<= 1) <= 255).......
I know << is equivalent to XOR but does this mean:
Value = Value << 1
if(Value <= 255)...
or something else???
Also:
value1 ^= value2....
is this equivalent to:
value1 = value1 ^ value2
Some of these short cuts get me and do you think I can find out about <<=...try googling that.
Any help appreciated
|
|
|
|
|
<< means bitshift left
>> is bitshift right
^ is XOR.
and a <operator>= b is the same as:
a = a <operator> b
|
|
|
|
|
“Object doesn't support property or method 'ready'”
I am getting this error while using custom dropdown list with js mootools slider. I have downloaded js slider and custom dropdown and while trying to merge it, I am facing this error.
I have downloaded js slider plugin from here:
http://landofcoder.com/index.php?option=com_jdownloads&Itemid=372&task=view.download&cid=6
Code of index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof SliderNews 1.0 - Mootool 1.1</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/mootools.svn.js"></script>
<script language="javascript" type="text/javascript" src="js/lofslidernews.mt11.js"></script>
<!-- DropDown -->
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
<script type="text/javascript" src="msdropdown/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="msdropdown/js/jquery.dd.js"></script>
<!-- DropDown -->
<style type="text/css">
/** css for override **/
/* move the main wapper to the right side */
.lof-snleft .lof-main-wapper
{
margin-left: auto;
margin-right: inherit;
clear: both;
height: 300px;
}
/* move the navigator to the left side */
.lof-snleft .lof-navigator-outer
{
left: 0;
top: 0;
right: inherit;
}
.lof-snleft .lof-navigator .active
{
background: url(images/arrow-bg2.gif) center right no-repeat;
}
.lof-snleft .lof-navigator li div
{
margin-left: inherit;
margin-right: 18px;
}
.lof-snleft .lof-navigator li.active div
{
margin-left: inherit;
margin-right: 18px;
background: url(images/grad-bg2.gif);
}
</style>
<script language="javascript" type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
$("#websites2").msDropDown({ mainCSS: 'dd2' });
});
</script>
</head>
<body>
<div id="container">
<h1>
<strong>Lof SliderNews 1.0</strong> - Mootool 1.1</h1>
<p>
<strong>Direction: Up to Down - Navitagor on the left side .</strong> The plugin
allow to use the wheelup and wheeldown to previous|next item in the list
</p>
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent lof-snleft">
<div class="preload">
<div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="lof-main-wapper">
<div class="lof-main-item">
<select name="websites2" id="websites2" style="width: 258px;">
<option value="msDropDown">One</option>
<option value="PrototypeCombobox">Prototype Combobox</option>
<option value="jQuery Tabs">jQuery Tabs</option>
<option value="Common Accordion">Common Accordion</option>
</select><br />
</div>
<div class="lof-main-item">
Page2
</div>
<div class="lof-main-item">
Page3
</div>
<div class="lof-main-item">
Page4
</div>
<div class="lof-main-item">
Page5
</div>
<div class="lof-main-item">
Page6
</div>-->
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="lof-navigator-outer">
<ul class="lof-navigator">
<li>
<div>
<img src="images/lofthumbs/791902news3.jpg" />
<h3>
NewsFlash 1
</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu...
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/435576news10.jpg" />
<h3>
NewsFlash 2
</h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3>
NewsFlash 3
</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3>
NewsFlash 4</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3>
NewsFlash 5</h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3>
NewsFlash 6</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie.
Ac sit eu. ..
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery.noConflict();
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent(_lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
interval: 3000,
direction: 'vrdown'
});
object.start(true, _lofmain.getElement('.preload'));
</script>
</div>
</body>
</html>
Please reply ASAP.
Thanks.
|
|
|
|
|
You've used jQuery.noConflict() and then tried to access jQuery using the $() function. If you use noConflict, you have to use the full jQuery() function instead of $() - see here for details: http://api.jquery.com/jQuery.noConflict/[^]
|
|
|
|
|
Tried TypeScript? I've been playing around with it for a few days and I'm not sure what I think of it. It's almost javascript, but you get some benefits by using types and maybe a easier syntax.
I installed Mads Kristensen's Web Essentials 1.3 and of course the official plug-in for Visual Studio
Web Essentials crashes from time to time, but Mads is working on it 
Do you have any experiences using TypeScript? Maybe some examples to share? How do you solve using libraries like jQuery(ui), knockout, underscore etc? It's really boring to write all these typescript interfaces. Typescripts homepage should have a directory for interfaces for the most used js-libraries (or maybe such directory exists somewhere?)
--------------------
When Chuck Norris' dreams come true, your worst nightmares begin.
|
|
|
|
|
Had installed this plugin and must say that it is tragically slow for me.
Now it is disabled and i don't think I will ever enable this again since it don't add anything useful.
And for type script? I really don't understand why people want to do C from JS. It is dynamic language. Type checking is fun
and make thinks little easier. But JS is for DOM manipulation and client events. Nothing serious really.
I had written bigger library with JS for WebGL, and I must say that this language is not for that kind of work. Now trends for doing rich, complicated web apps is good, but in my opinion we trying to force JS to do work it not suppose to. I think we need better language for this, and experiments coffe script, and type script is half step into good direction. If you have know JS anyway it isn't a solution.
No more Mister Nice Guy... >: |
|
|
|
|
|
n.podbielski wrote: in my opinion we trying to force JS to do work it not suppose to.
I agree with you. 
/ravi
|
|
|
|
|
|
Please open any website like msn.com or yahoo.com and hover the mouse over links you will get underline effect then click on any sub menu and do the same again this time you will notice that underline have still persist under links even you will go to other links on the page. how can we resolve this issue, feel free to ask me if any thing specific required input from my side.
Thanks,
Ambesha
|
|
|
|
|
Ambesha wrote: feel free to ask me if any thing specific required input from my side.
Yes. we ask that you post your question ONCE. Crossposting like this only annoys those who might otherwise help you.
Peter
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
|
|
|
|
|
function favAnimal(button) {
alert('You like '+button.value+'s.');
}
Kangaroo
Opossum
Tasmanian Tiger
|
|
|
|
|
Does any of the message you posted have a purpose?
Regards,
Jon
|
|
|
|
|
One approach is to provide a message that the form has been submitted, and then provide some means to prevent the web page reader from submitting the form again. In its simplest variation, the following would work:
function validateSubmission(evt) {
...
alert("Thank you, we're processing your order right now");
document.getElementById("submitbutton").disabled=true; // disable
Multiple concurrent form submissions are one of the worst problems that can occur in a user interface. Most people would be unhappy if, say, they found they had purchased two of the same item when they were only expecting to purchase one.
There are several different approaches you can take to prevent duplicate form submissions, and how strict you want to be depends on the seriousness of the double submission.
Custom and high Qualified ASP.Net Web Development Services
asp.net development
|
|
|
|
|
|
It really depends on what you are doing. There are a lot of UI test suites out there.
I personally do a lot of jQuery development and find that the qUnit framework works great. You could give that a go.
Thanks!
Spiff 
|
|
|
|
|
I have been working on a project that requires me to create a vertical auto-hide toolbar that appears on the right side of the webpage. I am not even sure if that is possible using javascript as I am quite new to javascript.
|
|
|
|
|
If you question is if it is possible in Javascript?
My Answer is yes quite possible. As a matter of fact you just gave me the idea. I will implement this for my in house application today.
For your help:
read about
1. CSS visibility
2. OnMouseOver action
3. OnMouseOut action
I wish I could believe there is an after life.
|
|
|
|
|
Ok, thanks for your help.
|
|
|
|
|
I thinking about posting some code to help out, but every circumstance if different. It's actually a combo of jquery and javascript, and i'm afraid you won't understand it.
It takes a panel you create in asp.net at left -360px with the id of "_ib_ProductEditor_Toolbox_Next", create a event bind in the dom for click, loads up dynamic html for a progress wheel, and then loads data, parts list, and fly's out to the right using animation. Requires Jquery 1.6 something. it makes a close link in the upper right, and create another bind, to animate the close back to -360px.
It should give you and idea of how to start yours at least.
$(document).ready(function () {
$('[id*="_ib_ProductEditor_Toolbox_Next"]').click(function () {
toolbox_ProductItem_Next_MouseOver();
return false;
});
});
function toolbox_ProductItem_Next_MouseOver() {
var panelPosition = $('[id*="_panel_ProductEditor_ToolBox_Next"]').css("left");
if (panelPosition == "32px") {
unload_Navigator_Tab();
}
else if (panelPosition == "-360px") {
var table_Navigator_Container = document.createElement("table");
table_Navigator_Container.id = "_table_Navigator_Container";
table_Navigator_Container.cellSpacing = 0;
table_Navigator_Container.cellPadding = 0;
table_Navigator_Container.style.width = "320px";
table_Navigator_Container.style.margin = "15px";
table_Navigator_Container.style.backgroundColor = "rgb(217,215,197)";
table_Navigator_Container.style.borderRadius = "12px";
table_Navigator_Container.style.border = "solid 2px rgb(176,167,144)";
var tr_Navigator_Container_Close = table_Navigator_Container.insertRow(-1);
var td_Navigator_Container_Close = document.createElement("td");
td_Navigator_Container_Close.style.width = "100%";
td_Navigator_Container_Close.style.height = "16px";
td_Navigator_Container_Close.style.textAlign = "right";
tr_Navigator_Container_Close.appendChild(td_Navigator_Container_Close);
var lb_Navigator_Close = document.createElement("a");
lb_Navigator_Close.id = "toolbox_close";
lb_Navigator_Close.style.color = "rgb(0,0,0)";
lb_Navigator_Close.style.fontSize = "0.8em";
lb_Navigator_Close.style.textDecoration = "underline";
lb_Navigator_Close.style.paddingRight = "25px";
lb_Navigator_Close.style.cursor = "hand";
lb_Navigator_Close.style.cursor = "pointer";
lb_Navigator_Close.innerText = "Close Panel";
lb_Navigator_Close.innerHTML = "Close Panel";
td_Navigator_Container_Close.appendChild(lb_Navigator_Close);
var tr_Navigator_Container_Title = table_Navigator_Container.insertRow(-1);
var td_Naviator_Container_Title = document.createElement("td");
td_Naviator_Container_Title.style.width = "100%";
td_Naviator_Container_Title.style.height, "32px";
td_Naviator_Container_Title.style.textAlign = "left";
tr_Navigator_Container_Title.appendChild(td_Naviator_Container_Title);
var span_Navigator_Container_Title = document.createElement("span");
span_Navigator_Container_Title.style.color = "rgb(0,0,0)";
span_Navigator_Container_Title.style.fontSize = "1.2em";
span_Navigator_Container_Title.style.fontWeight = "bold";
span_Navigator_Container_Title.style.letterSpacing = "-1px";
span_Navigator_Container_Title.style.paddingLeft = "10px";
span_Navigator_Container_Title.innerText = "Quick Navigator";
span_Navigator_Container_Title.innerHTML = "Quick Navigator";
td_Naviator_Container_Title.appendChild(span_Navigator_Container_Title);
var tr_Navigator_Container_Content = table_Navigator_Container.insertRow(-1);
var td_Naviator_Container_Content = document.createElement("td");
td_Naviator_Container_Content.style.width = "100%";
td_Naviator_Container_Content.style.height, "490px";
td_Naviator_Container_Content.style.textAlign = "center";
td_Naviator_Container_Content.style.valign = "top";
td_Naviator_Container_Content.style.paddingTop = "10px";
td_Naviator_Container_Content.style.paddingBottom = "10px";
tr_Navigator_Container_Content.appendChild(td_Naviator_Container_Content);
var panel_Navigator_Container_Content = document.createElement("div");
panel_Navigator_Container_Content.id = "_panel_Navigator_Container_Content";
panel_Navigator_Container_Content.style.width = "320px";
panel_Navigator_Container_Content.style.height = "470px";
panel_Navigator_Container_Content.style.verticalAlign = "top";
panel_Navigator_Container_Content.style.overflowX = "hidden";
panel_Navigator_Container_Content.style.overflowY = "scroll";
panel_Navigator_Container_Content.style.textAlign = "center";
panel_Navigator_Container_Content.style.margin = "2px auto";
td_Naviator_Container_Content.appendChild(panel_Navigator_Container_Content);
var table_Container_Progress = document.createElement("table");
table_Container_Progress.cellpadding = 0;
table_Container_Progress.cellspacing = 0;
table_Container_Progress.style.width = "100%";
panel_Navigator_Container_Content.appendChild(table_Container_Progress);
var tr_Container_Progress_Image = table_Container_Progress.insertRow(-1);
var td_Container_Progress_Image = document.createElement("td");
td_Container_Progress_Image.style.width = "100%";
td_Container_Progress_Image.style.height = "180px";
td_Container_Progress_Image.style.textAlign, "center";
td_Container_Progress_Image.style.verticalAlign = "Bottom"
tr_Container_Progress_Image.appendChild(td_Container_Progress_Image);
var img_Navigator_Container_Progress = document.createElement("img");
img_Navigator_Container_Progress.src = $('[id*="_txt_ProductEditor_ProgressIndicator"]').val();
td_Container_Progress_Image.appendChild(img_Navigator_Container_Progress);
var tr_Container_Progress_Message = table_Container_Progress.insertRow(-1);
var td_Container_Progress_Message = document.createElement("td");
td_Container_Progress_Message.style.width = "100%";
td_Container_Progress_Message.style.height = "320px";
td_Container_Progress_Message.style.textAlign, "center";
td_Container_Progress_Message.style.verticalAlign = "top";
tr_Container_Progress_Message.appendChild(td_Container_Progress_Message);
var span_Navigator_Container_Message = document.createElement("span");
span_Navigator_Container_Message.style.fontSize = "1.4em";
span_Navigator_Container_Message.style.fontWeight = "bold";
span_Navigator_Container_Message.innerText = "Loading Items";
td_Container_Progress_Message.appendChild(span_Navigator_Container_Message);
$('[id*="_panel_ProductEditor_ToolBox_Next"]').empty();
$('[id*="_panel_ProductEditor_ToolBox_Next"]').append(table_Navigator_Container);
$('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);
$('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(51,51,51)" }, 300);
if (panelPosition != "32px") {
$('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);
}
load_Navigator_Tab();
$("#toolbox_close").click(function () {
unload_Navigator_Tab();
return false;
});
}
}
function unload_Navigator_Tab() {
$('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(32,32,32)" }, 300);
$('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "-360px" }, 300);
}
|
|
|
|
|
Oh men! Why your simple auto-hide panel is so complicated? 2 css classes and maybe one ajax for dynamic loading of content should be enough! 
No more Mister Nice Guy... >: |
|
|
|
|
|
It auto loads a product database based on filters, so you don't have to leave the page to edit a product SKU with over 100 fields.
It's what evolved after hundreds of complaints from the initial simple ones we made in the beginning.
|
|
|
|
|
Ok. I understand that but why not replace those hardcoded styles with css classes and jQuery().addClass("xxx")?
Why you using selector: panel_ProductEditor_ToolBox_Next? Its obviously part of asp.net generated id. Why not set CssClass property just for selecting?
Than you have clear selector that will not change when you edit parent container(s)?
Why you setting both innerText and innerHtml? For simple string like "Close Panel" one from them is enough and they mean the same?
For simple case like in question this is achievable with single css rule:
.parent-container:hover .autohider{
display:block;
}
.parent-container .autohider{
display:none;
}
and html
<div class="parent-container">
<div class="autohider">
some hider content
</div>
</div>
I don't say that it's wrong. Just overcomplicated.
No more Mister Nice Guy... >: |
|
|
|
|
|
It's part of a back end application, that controls the front end of the website.
Customers were changing the css and messing it up, so we just hard coded the fonts. Got tired of having to fix it all on every installation.
We just use css names now for jquery on certain modules, so we can do a mass edit using each on css types. It appeared to be more effective and faster in speed.
on the innertext versus innerhtml, that's something I'm still messing with. It dates back to earlier in the year with compatibility issues between IE, Firefox, it use to be 2 different scripts, but I tried to combine them into one. Still working on that, and help was hard to find.
That script is still experimental, and is the 5th revision of it. At least the complaints went away on it, and it renders correctly every time, on both browsers and versions. It can use more optimization, but the speed and performance of the fly out tab is quite impressive and very reliable.
Feel free to suggest some optimizations, and I'll rewrite that module in October using your feedback.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
