i just created a html page and designed it and its ready to use,
so what I need to do is to show it as dialog like :
$("#alertBtn").click(function(){
//show dialog
});
create a div with a certain ID with all the HTML you want inside.
For example
<div id="dialog">
<p>This is some tekst inside the dialog</p>
</div>
Then in your CSS set it's display property to none, like this:
#dialog{
display: none
}
In your click function, write the following:
$('#dialog').click(function(){
this.dialog();
});
I'm writing this out of my head, so it's possible you'll need to tweak it a little for it to work. If you type 'jquery dialog' into google, you'll also get lots of information like this: https://www.tutorialspoint.com/jqueryui/jqueryui_dialog.htm
Or you could try some of the comments, I'm pretty sure they all work too...
EDIT
Maybe it's better to initialize your dialog immediately and hide it using the .hide() jquery function. Like this:
$(document).ready(function(){
$('#dialog').dialog();
$('#dialog').hide();
}
When the user clicks your button, you then call the 'show'-function of jquery to show your dialog.
$('#someButton').click(function(){
$('#dialog').show();
}
Related
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.
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.
I have a tab container with tabs, that depending on what tab is selected, i would like a function to run. I have already created the function in Java Script, that will either Hide or Display a window. The function works fine. How do i tell the tabs to run this function? In the code below, i show in the "Contents" of a tab, a function intitled "hidediv". I also have a function called "showdiv". I want to remove it from the contents, and have it run automatically when the tab is selected. any suggestions? I do not want it to affect the contents of the tab at all.
Thank you!
<div dojoType="dijit.layout.ContentPane" title="Setup">
Hide div
</div>
This is well described in the reference guide.
Basically, if your TabContainer has id "myTabs", you can do:
dojo.subscribe("myTabs-selectChild", function(selected){
// Do whatever you need here, hidediv() etc..
console.log(selected.title);
});
Edit: If you only want something triggered for a particular tab, you can check the title inside the function:
dojo.subscribe("myTabs-selectChild", function(selected){
if(selected.title == "Setup")
{
hidediv();
}
});
Perhaps a more elegant way to do it, is to use the ContentPane's onShow event, for example like this:
<div dojoType="dijit.layout.ContentPane" title="Setup"
onShow="hidediv">
<!-- Content -->
</div>
i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!
What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp
you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/
To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!
HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m
You will not be able to do this with alert, but you should take a look at how to create modal windows.
I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.
I've been trying to get this code to work. I have a hidden div that shows a flash video using the object/embed method.
This is the js code I'm using.
jQuery(document).ready(function(){
jQuery("a[id^='scrshot_']").fancybox(
{
'autoDimensions' : false,
'width' : 640,
'height' : 360
});
return false;});
I'm using this method I found on this site http://www.jdmweb.com/resources/fancy_videos and pretty easy to implement. I use dynamically created ID tags. BUT for some reason fancybox will open but the div inside stays hidden. When I use firebug to look at it, it shows the flash object inside but it still has the display:none attribute attached to it. How do you get it to show the contents inside that div and not the whole div? If the div is showing and use the link, fancybox open with the player fine. Obviously that wont work because I don't want the video to show until it launches in fancybox.
Example of my html code.
<a class='scrshot' id='scrshot_1' href='#showvid_1'>Click Here</a>
<div class='showvid' id='showvid_1'>my embedded code here</div>
Instead of hiding the div, make it visible but wrap it inside another div that is hidden.
(I don't know why fancybox doesn't toggle the visibility, rather annoying.)
try adding this to your jQuery(document).ready(function(){
jQuery('.scrshot').live('click',function(){
jQuery('.showvid').hide(); //hide any that might be open
jQuery(jQuery(this).attr('href')).show(); //show the div we clicked for
});
Have you looked at fancybox documentation/blog?
http://fancybox.net/blog (4. Show youtube clips. this must help);
http://fancybox.net/howto;
http://fancybox.net/api;