My Code :.....
<html>
<head>
<script>
function demo()
{
var win=window.open("demo.html",'_blank');
alert('Requested Page Loaded...');
win.focus();
}
</script>
</head>
<body>
<input type="button" value="demo" onClick="demo()"></input>
</body>
</html>
I want to close the alert event dynamically using JavaScript event.
When alert is come in seen and it will close automatically using JavaScript event fire and close it..
You could create a pseudo-alert.
You can make it a modal if it is closed by a programmed event (instead of screen-triggered).
HERE is a fiddle. (click on two colors to open and close alert.
HTML
<div class='testdiv'></div>
<div class='testdiv3'></div>
<div id='dialogtest' class='testdiv2'>Alert!</div>
CSS
.testdiv {
width: 100px;
height: 100px;
margin: 0px auto;
background-color: red;
}
.testdiv3 {
width: 100px;
height: 100px;
margin: 0px auto;
background-color: green;
}
.testdiv2 {
background-color: green;
width: 50px;
height: 50px;
font-size: 15px;
}
.ui-dialog-titlebar {
display: none;
}
JS
$( ".testdiv2" ).dialog({
autoOpen: false,
modal: false,
height: 50,
width: 'auto',
position: { my: "right middle",
at: "left middle",
of : ".testdiv" }
});
$('.testdiv').click(function(){
$('.testdiv2').dialog('open');
});
$('.testdiv3').click(function(){
$('.testdiv2').dialog('close');
});
Related
I'm stuck in trying to make a popup using jQuery for a second A tag inside a div. You can see what I tried here:
$(function() {
$(".sites").find("a").eq(1).css("color", "red").dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 500
}
});
$(".sites").find("a").eq(1).on("click", function() {
$(".sites").find("a").eq(1).dialog("open");
});
});
div {
margin: 2rem 0 0 2rem;
width: 300px;
height: 150px;
border: 1px solid gray;
}
a {
display: block;
font-size: 2rem;
color: blue;
padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>
<div class="sites">
Site 1
<br>
Site 2
</div>
How do I force the dialogue popup to open and display "Hello !"?
You can use Ids to reference the second element, also, the function call is slightly wrong. Here it's a correct version:
$(function() {
$("#site2").addClass("color-red");
$("#site2").on("click", function(e) {
e.preventDefault();
$(this).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 500
}
}).dialog( "open" );
});
}());
div {
margin: 2rem 0 0 2rem;
width: 300px;
height: 150px;
border: 1px solid gray;
}
a {
display: block;
font-size: 2rem;
color: blue;
padding: 1rem;
}
.color-red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>
<div class="sites">
<a id="site1" href="https://www.site1.com">Site 1</a>
<br>
<a id="site2" href="https://www.site2.com">Site 2</a>
</div>
Im creating a menu for mobile, and I want to add a function for overlay click.
When I click on menu (purple part), it doesn't need to close, but when I click on blue section, then its need to close.
I wrote a jQuery, who gets only purple section, but when I click on blue part the alert didn't appear.
There's gonna be my JSFiddle for test, to see.
And here is my code
$('.outer-content .inner-content').on('click', function() {
$(".outer-content .inner-content").data('clicked', 'yes');
var isClicked = $('.outer-content').data('clicked');
if (isClicked == 'yes') {
alert("clicked the blue block");
} else {
alert("clicked the purple block");
}
});
.outer-content {
width: 100%;
height: 200px;
background: lightblue;
position: relative;
}
.inner-content {
width: 300px;
background: purple;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.
e.stopPropagation();
JSFIDDLE
Your code:
$('.outer-content').on('click', function(e) {
alert("clicked the blue block");
});
$('.inner-content').on('click', function(e) {
alert("clicked the purple block");
e.stopPropagation();
});
.outer-content {
width: 100%;
height: 200px;
background: lightblue;
position: relative;
}
.inner-content {
width: 300px;
background: purple;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
$('.outer-content').on('click', function(event) {
if ($(event.target).hasClass('inner-content')) {
alert("clicked the purple block");
} else {
alert("clicked the blue block");
}
});
.outer-content {
width: 100%;
height: 200px;
background: lightblue;
position: relative;
}
.inner-content {
width: 300px;
background: purple;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
When I click on menu(purple part), it doesnt need to close, but when I
click on blue section, then its need to close
Why not target the blue element directly and only process any code to close when it is clicked as seen below.
If you need other code to execute when the purple element is clicked, bind to that separately.
$('.outer-content').on('click', function(e) {
if (e.target == this) {
// add "close" code here
alert("will close");
}
});
// You still can add code when clicking the purple element if needed...
$('.inner-content').on('click', function(e) {
alert("I'm purple but separate code and will not close");
});
.outer-content {
width: 100%;
height: 200px;
background: lightblue;
position: relative;
}
.inner-content {
width: 300px;
background: purple;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
You can do that by adding event on outer content and then use the event.target property to check the element that has been clicked
$('.outer-content').on('click', function(e) {
if( $(e.target).hasClass('outer-content')){
alert("clicked the blue block");
} else {
alert("clicked the purple block");
}
});
Due to event bubbling any event in the child element will be propagated to parent element as well.
$('.outer-content, div:not("inner-content")').on('click', function() {
$(".inner-content").slideToggle();
});
.outer-content {
width: 100%;
height: 200px;
background: lightblue;
position: relative;
}
.inner-content {
width: 300px;
background: purple;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
$('div').on('click', function(e) {
e.preventDefault();
e.stopImmediatePropagation()
if($(e.target).is('.inner-content')){
alert("clicked the purple block");
}else{
alert("clicked the blue block");
}
});
.outer-content{
width:100%;
height:200px;
background:lightblue;
position:relative;
}
.inner-content{
width:300px;
background:purple;
position:absolute;
margin:auto;
top:0; bottom:0; right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
<div class="inner-content"></div>
</div>
I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>
I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.ch{
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch");
$(droppedElement).draggable({containment:
"dropArea"});
droppedElement.appendTo('#dropArea');
}
});
});
</script>
</body>
</html>
Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.
i want make a popup window for login/signup.
so i'v written this code. but not working...
.css
#main_box
{
border: 1px solid black;
height: 300px;
left: 34%;
position: fixed;
top: 32%;
width: 300px;
}
#close_btn
{
float: right;
}
#main_box
{
display: none;
}
#box_a, #box_b
{
float: left;
}
#box_a, #box_b, #box_c
{
border: 1px solid black;
height: 82px;
width: 82px;
margin: 10px;
}
</style>
.js
<script type="text/javascript">
$(document).ready(
function () {
$('#login_btn').click(
function () { $('#main_box').show(); }
);
$('#forgt_p').click(
function () { $('#box_c').show(); }
);
$('#close_btn').click(
function () { $('#main_box').hide(); }
);
}
);
</script>
.aspx
login
<div id="main_box">
<button id="close_btn" name="close">close</button>
<div id="box_a">
//////////////////////login code
</div>
<div id="box_b">
//////////////////////signup code </div>
<div style="clear: left;"></div>
forgot password
<div id="box_c">
//////////////////////forgot password code
</div>
</div>
also want to close this on pressing escape and make it smooth in working as much as it could by jquery
You should consider the amazing JQueryUI plugins like dialog
It permits to create CSS styled dialog boxes with plenty of options :
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});