I hide input["type"] for styling "browse file" button.
<input type="file" id="photoUpload" multiple style="display: none"/>
<button class="addFile" id="fakePhotoUpload"> </button>
I try trigger click on a hidden input["type"] via jQuery function
$('#fakePhotoUpload').click(function() {
$('#photoUpload').click();
});
This code performs and working like a charm.
But, if I call it function
$('#photoUpload').click();
from browser console (Google Chrome) nothing happens.
Who can explain this behaviour of console?
That's for security purpose, you cannot open browser file dialog
without any user interraction, In your example, a click made anywhere on the page.
If you could, then it should be fixed urgently!
This is not a solution but is very helpful:
jQuery(function ($) {
$('#fakePhotoUpload').click(function () {
$('#photoUpload').click();
});
$('#photoUpload').click(function(e){
alert('hi');//make your own dialog box here. use UI dialog box.
});
$('#photoUpload').click();
})
fiddle
Related
After opening a jquery fancy box i'am trying to keep the iframe's content light as much as possible by avoiding the reload of jquery package. so i want to close the fancy box (iframe) using pure javascript, i've tried window.close(); but nothing happened.
I think you want to close fancybox on button click from the iframe.
for that you have to do a code like this.
Add this button in your iframe page.
<button class="btn btn-danger" type="button" id="btnCancel" onclick="self.parent.CloseFancyBox()">Cancel</button>
write down below function in your parent file.
function CloseFancyBox() {
$.fancybox.close();
}
If you want to close without click a button then you can directaly right below function in your iframe page.
function closeFancy(){
self.parent.CloseFancyBox();
}
Problem solved. window.close(); do the job
thank you for your answers
I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!
You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
I've tried PopBox to have a textarea pop up, but the functionality of PopBox seems to be incompatible with the game system. (For example, I know for a fact that alert(); and prompt(); works in the html page testing, but does not happen at all in the actual game)
Currently the game has this confirm box system implemented. Is there a way to add a textarea to this?
If not, is there any other Jquery/JS tricks/plugins that will allow a textarea box to pop up when a button is clicked?
I'm no expert but I think this is possible:
<div id="textAreaDiv" style="visibility:hidden;"><textarea></textarea></div>
<input type="button" onClick="showTextArea()">
<input type="button" onClick="hideTextArea()">
<script>
function showTextArea() {
document.getElementById('textAreaDiv').style.visibility="visible";
}
function hideTextArea() {
document.getElementById('textAreaDiv').style.visibility="hidden";
}
</script>
OR...
To toggle the DIV with one button, you could do this:
<script>
function showHideTextarea() {
if (document.getElementById('textAreaDiv').style.visibility="hidden")
{
document.getElementById('textAreaDiv').style.visibility="visible";
}
else
{
document.getElementById('textAreaDiv').style.visibility="hidden";
}
}
</script>
And this doesn't need the JQuery library to use.
Hope it helps...
check this plugin
jAlert
very easy and clean to use, you can do whatever you want.
its easy to change the input by a textarea
in jquery.alerts.js file, search for 'prompt' case, and change the input by textarea.
i made this for me and have been working so far.
You can have a on the page, which inserts a textarea box when the button is clicked, something like this...
In original HTML page, stick a blank area, maybe reserving space like so
<div id="Input_Area">
<br>
<br>
</div>
Then, put an onClick event on your button which replaces the innerHTML with your textarea (or create a function that does it, and call it with your onClick event).
you can try jquery dialog http://jqueryui.it/demos/dialog.
This pops open an overlay and a dialog. You can customize this display and interaction to your hearts desire.
My app is written using HTML, Javascript, and Jquery Mobile.
On my HTML page I have an <a href> that calls a Javascript that opens a custom Alert box. I am using several Jquery Mobile elements on the page also, such as buttons and sliders. These elements are on top of my alert box when called.
Any idea how to make my alert box take complete focus when called?
Here is some code:
Index.html:
Click Here
<div id="AlertBox" class="alert" style="display:none" onClick="document.getElementById('AlertBox').style.display='none'">Message Here</div>
Javascript:
function DisplayAlert(id,left,top) {
document.getElementById(id).style.left=left+'px';
document.getElementById(id).style.top=top+'px';
document.getElementById(id).style.display='block';
}
function Alert() {
var something = false;
if(something) {
}
else {
DisplayAlert('AlertBox',100,50);
}
}
1) without jQuery Mobile - what you started above, here is a similar discussion:
jQuery: How can i create a simple overlay?
2) and also you can accomplish dialogs using just jQuery Mobile like so:
Open dialog
Docs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-dialogs.html
I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).
Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.