How create a user interactive popup kind of form - javascript

I am looking for something which comes up as a popup on click of a link or button but It must be more than just a popup. It must be a Interactive form which asks for inputs and when Inputs are provided it takes The input back to the parent window. I am not asking for the code. I just don't know which kind of technology it is. Do you know what I am Talking about?

1, Include jQuery into your HTML via <script src=..>
2, See this tutorial on how to create modal overlays via jQuery:
http://jquerytools.org/demos/overlay/modal-dialog.html
http://www.jacklmoore.com/notes/jquery-modal-tutorial

With jQuery, in the child window (popup) you can call your parent window (the opener) and target a field therein with something like this:
$("#fieldInParent", opener.window.document).val("new value");
opener.window.document tells jquery that the ID is in the window that opened the popup.

I can suggest doing something like the following.
In JS:
$container = $("#container");
$("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>").hide().appendTo($container);
....
function showPopup() {
$("#popup-id").show().offset({
left : yourX,
top : yourY
});
}
in HTML:
<!-- container of popup -->
<div id="container">
...
<div>
...
<a onclick="showPopup()">Show Pop Up</a>
in CSS
div.popup {
display: inline-block
}
That should work.
UPD. And even more. Instead of creating div with $("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>"). You can use jquery.tmpl() function.

Related

How to override jquery _blank?

I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.
Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris

Jquery: Create a popup window when the mouse pointer enters and leaves the elements

I would like to create a popup window in the middle of the web browser when the mouse pointer enters and leaves the elements. The pop up window shows an image that I provide.
How should I implement this in Jquery? Or is there any good plugin to do it?
Thanks
Try jQuery UI dialog box.
DEMO
Bind the event handler to a mouseout event. See the link for more info:
http://api.jquery.com/mouseout/
One way to approach the problem is to create a div(which will hold your popup window) and use the hide and show jquery effects along with it.
That's quite easy, you can do it like that:
$('.hovered_element').mouseenter(function() {
// you can use some plugin here, or just a simple .show()
$('.popup_element').show();
//if you want popup to fade in
//$('.popup_element').fadein(600);
});
$('.hovered_element').mouseleave(function() {
// again: any js plugin method, or just .hide()
$('.popup_element').hide();
//if you want popup to fade out
//$('.popup_element').fadeout(600);
});
Of course you need to style your .popup_element so it shows up in the center, or anywhere you like.
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:
(1) Include both jQuery and the jQueryUI libraries in your <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
Note that you can put any HTML in the html() method, including an image.
The above code allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
jsFiddle Demo
HTML:
<div id="myDlg"></div>
<div id="questiona" class="allques">
<div class="question">What is 2 + 2?</div>
<div class="answer">4</div>
</div>
<div id="questionb" class="allques">
<div class="question">What is the 12th Imam?</div>
<div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').hover(
function(){
//hover-IN
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
},
function(){
//hover-OUT -- do nothing
}
);
Resources:
How to use Plugins for PopUp
http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI Dialog Box - does not open after being closed
Dynamically changing jQueryUI dialog buttons
jQuery UI dialog - problem with event on close

jQuery drop in Social Sharing Buttons at the Bottom if inline buttons are not on screen

I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.
I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.
Anyone knows a library or some lines of code doing this?
Thx I really appreciate your expertise!
You could try like this
JS:
$( window ).scroll(function() {
if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
hiddenSocialButton.stop().animate({'bottom': 0}, 100);
else
hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})
jsfiddle demo
Please refer to this question. Used the reference to code this
HTML :
<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>
JS :
function triggerFunction()
{
if(isScrolledIntoView('.social_links'))
{
$('.bottom_links').fadeOut();
}else{
$('.bottom_links').show();
}
}
DEMO HERE

Alterantive to popup window alert in Javascript function

I have an alert that lets the user know that their selection has refreshed. What I would like to know is how can I display the selection change in a text label instead of a popup alert window to indicate the environment is loading and the environment is loaded. Thanks.
<section id="scripts">
<script type="text/javascript">
$('#Areas').change(function ()
{
****Help-Environment is loading***
Application.Refresh();
****Help-Environment is loaded***
});
</script>
</section>
What you probably want to do is have an alert element on your page that defaults to display: none;, and then change it's content and display property on change.
HTML
<div id="alert" style="display: none;></div>
JS
$('#Areas').change(function ()
{
var alert = $('#alert');
alert.html('Your Selection Changed!');
alert.show();
});
This is about as basic an example as possible and should be very easy to extend with some CSS+jQuery
Use jqModal or similar.
https://github.com/eyoosuf/jqModal
It is designed for exactly this purpose.

Twitter Bootstrap manually close tabs

UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.
Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>

Categories