I have to open file upload dialog by clicking some other button i.e i am hiding file upload control(visibility:hidden) and on clicking of some other button i want to open that dialog.
Below is the code which i am having:
<input type="file" style="visibility: hidden;" />
Below is the javascript:
$('#button').click(function() {
$('input[type=file]').click();
});
It is working fine in Firefox 4 and IE8 but in chrome12 it is not working i.e the dialog is not being opened. Any idea why?
Tested today the simple code given in the question and the situation has changed:
IE9: works
Chrome23: works
Firefox15: works
There is just one catch - on IE the .click() is a blocking operation while on other browsers it is not.
In your example, your file input did not have an id, yet you are trying to reference it with #input. This works for me:
$('#button').click(function() {
$('input[type=file]').click();
});
You should position input[file] just above your custom control. And then bind to it`s onclick.
Also make in it bigger font-size, as only this way you can increase it's height.
Related
I have the below code with which I am basically syncing textbox value changes across various fields sharing the same class name. The issue is that this is not working in IE but working in Chrome. Can some please have a look and let me know what I am missing here.
My scenario : I have two tabs where I have textboxes..Initially the second tab is hidden and when user saves the page the without postback the second tab becomes available. So the second tab has textbox which when becomes visible is not being bound to the change event. If I refresh the whole page then the sync is working fine.
$(document).ready(function () {
$(".txtDateFrom").keyup(function () {
$(".txtDateFrom").val($(this).val());
});
});
Thanks
I've created my page using bootstrap and have a link to fire off a fancybox box as below:
<a class="iframe" href="AForm.asp?ID=<%=Request("ID")%>"><button class="btn-warning">Action Form</button></a>
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
'type' : 'iframe',
'width':500,
'height':500,
'afterClose':function () {
window.location.reload(); }
});
});
</script>
The default functionality works fine to begin with: i can trigger fancybox to load, click the default cross icon and it closes the box - all working as expected.
When i submit a form within the fancybox (html/classic asp) and it does a redirect to a standard HTML page that literally just says "Please close this page" the default close cross icon does nothing. It is visible and in the correct place but there is no click functionality.
I have tried custom close buttons within the HTML page but nothing works - it just doesn't want to close at all. Anyone got any ideas? Thanks
Not so much an answer but after trying to fix this all day i gave up on Fancybox and found Colorbox to work pretty much out of the box for what i was trying to do. Colorbox
i'm not great with Javascript and jquery etc.
Using http://odyniec.net/projects/imgareaselect/ and a CSS popup, i'm trying to create a file upload that you can crop the image by choosing your selection with and then cancel or continue to upload the file.
I've got the popup opening with the image inside and you can crop the part of the image you want. My issue at the moment is that when you click on the "Cancel" button, the crop highlight still remains. How would I go about getting that to close too?
I've tried numerous things, checking to see if it can hide the div if the other div is pressed, or hidden, or not visible, and I just can't seem to get anything to work.
Here is my jsbin, the upload part isn't working though, so you can't actually see the error on there.
http://jsbin.com/eKaNupU/1
Thanks in advance for any help!
UPDATE:
Working (up until it doesn't!) example: http://www.costapass.es/imageupload/
Looks like you need to do cancelSelection() (see: http://odyniec.net/projects/imgareaselect/usage.html).
In order to get access that method you need to get a reference to your imgAreaSelect object. To do that, put the following in your <head> (or similar).
var ias = null;
$(document).ready(function() {
ias = $('#uploadPreview').imgAreaSelect({ instance: true });
});
Then modify your close button to be:
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
Cancel
<img id="uploadPreview" style="display:none;"/>
</div>
Your modified jsbin: http://jsbin.com/eKaNupU/11/edit
I have a problem where an element is not showing on Opera nor Firefox. Using firebug on Firefox I could see that an error saying that a function I use to initialize the code 'is not defined'
Now here's the thing, when I empty the cache on the Firefox browser, I can see my element which contains a "facebook button" and the error is gone, but once I refresh the browser I can't see my element and returns the error again. I would have to empty out the cache in order to see the button once again.
The element is supposed to be triggered with jQuery to show if a facebook user is online, and if not it will show that button. But this is only working on Chrome & Safari, and I believe on IE8 (which i don't have) but someone told me it worked.
This is the code to show the element on my Javascript file:
jQuery('#fbLogin').show();
Now, if i was to change this on my .css file:
#fbLogin {
display:none;
}
to this:
#fbLogin {
display:block;
}
it will display, but the problem i saw was that it showed all the time, and this needs to be hidden if the user is logged in. I basically have a code that says .show the button and .hide if logged in...
here's a link to a page if you want to take a look further:
http://gullypost.com/entertainment/tim-westwood-kendrick-lamar-interview/
On Safari & Chrome you will notice that the facebook button shows up on the right sidebar, but not visible on the other browsers.
Can someone help me solve the problem to this? Thanks.
There's a weird problem when using jQuery when trying to use .show() on an element that doesn't have a defined height. The fix is to set the height either explicitly or dynamically.
$(selector).height(function() { return $(this).height() });
It looks like the second time the page loads, you're getting the following JavaScript error:
fb_og_actions_init_vid is not defined
The file that contains the function is being added to the page correctly. My only guess would be to try and move the reference to the function:
fb_og_actions_init_vid("Connected to Facebook", "108821");
To within a document.ready function:
$(document).ready(function(){
fb_og_actions_init_vid("Connected to Facebook", "108821");
});
I believe this will work:
document.getElementById('fbLogin').style.display = 'block';
Firefox4 has a new feature → 【Prevent this page from creating additional dialogs】
But it was also a trouble with me when I hope an alert dialog opened more than once.
Now, A new problem has appeared ...like below ↓
1) I call the alert dialog more than once , and check the
【Prevent this page from creating additional dialogs】
2) I click a download button , My web application is down....
(my button' event is below.... and because it hasn't into the action , so I'm just write the client source....)
My Button Event
getDownloadFile:function(){
$('xform').submit();
}
My Page Code
<div style="display:none;">
<form id="xform" action="down.do" method="post" target="xfra">
</form>
</div>
<iframe id="xfra" name="xfra" src="/?scid=dummy.htm" style="width:0px;height:0px;visibility:hidden;"></iframe>
Hope anybody can help me ...thanks...
I am guessing the $ on your code means you are using jQuery (you should mention it in the tags if this is the case).
If you are not using jQuery, then I don't know much of the other frameworks' selectors. However, if it is jQuery, your selector is not correct, it should be:
$('#xform').submit();
not
$('xform').submit();
Since you are using PrototypeJS, the above is incorrect.
Here's a simple fix:
function myAlertMsg() {
alert("Whatever message you want");
location.reload(); /*This prevents the browsers pop-up disabler*/
}