Alterantive to popup window alert in Javascript function - javascript

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.

Related

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

Issues in onload function in jquery

I am working with shopify store.
I have created to show fancy box when entered my website.
This is code i used:
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>
And i used notifIt.js and jquery.js files. Now its working fine, I have taken code from this site http://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/
Instead of click the text box, i need to show that notification box automatically.
So i changed above script onclick to onload.. but nothing seems to be work
May i know, what is my mistake? Thanks in advance.
Do you want to show your notification on page loading?
If you do, you can use this:
$(document).ready(function() {
not1();
});
Call Your function, directly. It will be called automatically on script tag loading.
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
not1(); //CALLING FUNCTION, It will be called automatically. I hope it would help.
</script>
For reference see Can't apply simple hide function on div

How create a user interactive popup kind of form

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.

Is it possible to override javascript in an iFrame from the parent? If so how?

I'm using the Telerik RadSpell control in one of our touchscreen applications. I've managed to style it just right however the darn thing uses window.alert and window.confirm for prompting the user if they want to keep changes etc.
I want to disable these alerts without having to pull apart and modify the telerik controls.
The issue is that the spellcheck dialog uses an iframe and I can't seem to override the window.confirm function inside the iframe.
Sample Code to test overriding confirm.
<!-- mainpage.htm -->
<html>
<head>
<script type="text/javascript">
window.confirm = function(msg){ alert(msg); }
confirm("Main Page Confirm");
</script>
</head>
<body>
<iframe src="./iframepage.htm" >
</iframe>
</body>
</html>
<!-- iframepage.htm -->
<html>
<head>
<script type="text/javascript">
confirm("iframe confirm");
</script>
</head>
<body>
Some content.
</body>
</html>
Results in
Is it possible to override the javascript in an iframe from the parent? If so how?
I just shared an easier solution in the first forum, which demonstrates how to override the cancelHandler and hide the confirm dialog.
For your convenience I am pasting the solution below:
I would propose an easier way to disable the popup and it is to override the cancelHandler function. To do that follow the steps below:
1) Create a JS file named dialog.js in the root of the web application and populate it with the following function:
Telerik.Web.UI.Spell.SpellDialog.prototype.cancelHandler = function (e) {
if (this._cancel.disabled) {
return $telerik.cancelRawEvent(e);
}
//changes will be applied only if spell handler response is received, text has changed
//and the user confirms
this.closeDialog(this._spellProcessor && this._spellProcessor.textChanged() && true);
return $telerik.cancelRawEvent(e);
}
2) Save the file and set the DialogsScriptFile property of RadSpell to point to this file, e.g.
3) Test the solution.
I hope this helps.
You can get a reference to the innerwindow using javascript IFF the frame is from the same exact domain as the parent.
//Get iframe element by getElementById, frames[0], or whatever way you want
var myFrame = document.getElementById("myFrame");
//Get the window of that frame, overwrite the confirm
myFrame.contentWindow.confirm = function(msg){ alert("I overwrote it! : " + msg); }
You should be able to:
document.getElementById('iframe').contentWindow.confirm = [this is confirm in the iframe];
Perhaps something like this might work nicely for you:
document.getElementById('iframe').contentWindow.confirm = window.confirm;
This would link the confirm of the iframe to the confirm of the parent, which is nice if you already have some handling for confirms in the parent.
Note that you also will want to add some handling for possible undefined objects.
var iframe = document.getElementById('iframe');
//iframe exists
if(iframe){
var iframe_window = document.getElementById('iframe').contentWindow;
//window exists (won't if frame hasn't loaded)
if(iframe_window){
iframe_window.confirm = window.confirm;
}
}
You can take a look at the following resources, which could be helpful for your scenario:
http://www.telerik.com/community/forums/aspnet-ajax/spell/how-do-i-turn-off-the-confirm-dialog.aspx
and
http://www.telerik.com/help/aspnet-ajax/spell-client-check-finished.html
They show how to remove the RadSpell confirm and alert popups.
Best regards,
Rumen

How can I generate a click on a certain part of the page when the page loads?

Basically I want a certain spot on my page to be clicked when the visitor loads the page. I want this one click to happen without the user even clicking. Is it possible?
<script type="text/javascript">
$(document).ready( function() {
// target represents the id of the element you are wanting to be clicked.
$('#target').click(function() {
// your click handler logic goes here
});
// click the element for the user...
$('#target').click();
});
</script>
<div id="target">This is the element on the page that will be clicked on pageload</div>
UPDATE: This is using JQuery, which is a JavaScript library. Here is a script tag you can use to import JQuery in your HEAD section, if you're not already using it:
<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
...
</head>
http://jquery.com/
Using a JavaScript library, such as JQuery, will ensure that this functionality works cross-browser.
If you want to achieve the same purpose without using a javascript library you can use the following code:
<script type="text/javascript">
window.onload=function(){ //when the window loads
var paragraph = document.getElementById("google"); //store the object into a
// variable
//set the functions that will fireup when click happens - not necessary -
//for example purposes
paragraph.onclick = function(){
this.style.background="red";
}
paragraph.onclick(); //simulate click
}
</script>
<p id="google">Google text</p>
demo here: http://jsfiddle.net/9azTR/2/
You can fire specified event on DOM ready. You can to that using jQuery...
$(document).ready(function(){
$('#clickme').bind('click', function() {
alert('Here goes code you would like to perform');
alert('And another pieco of code, if you wish');
});
$('#clickme').trigger('click');
});
Agreed with #Felix Kling. If you are trying to simulate a click from a user on an object you can just invoke the function.
But from the way the question was worded it sounds like you want to simulate a click on an ad to generate revenue on your site? If so the DOM will not allow you to access another containing frame (e.g. an iframe) - that's a security violation.
If you want to that you would have to somehow hijack the user's mouse though an ActiveX control or other malicious means, which of course is unscrupulous.

Categories