I call a Colorbox page names enquiry.html 10 second after opening the base page IN enquiry.html page i added a close button but it does not work
have a look on my code
In Head of base page
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
In Body of base page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" async></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" async></script>
<script>
function openColorBox(){
$.colorbox({
iframe:true,
width:"90%",
height:"90%",
href: "enquiry.html",
onLoad: function() {
$('#cboxClose').remove();
setTimeout(function(){
$(window).colorbox.close();
}, 250000)
}
});
}
function countDown(){
seconds--
$("#seconds").text(seconds);
if (seconds === 0){
openColorBox();
clearInterval(i);
}
}
var seconds = 10,
i = setInterval(countDown, 1000);
</script>
in enquiry.html page
<input type="button" value="close" onclick=" $(window).colorbox.close()">
<form name="form1" method="post" action="">
<p class="close"> </p>
</form>
But on click on Close button it does not Close
Please Help
Thanks In Advance
you should try with $.colorbox.close() to close colorbox popup
refer this page for more details http://www.jacklmoore.com/colorbox/
Related
I was trying to make a play-pause button using jQuery but the mouse click event is not being captured. I am trying to remove and add font-awesome class on each click such that it can change its icon.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycarousel").carousel({interval: 2000});
console.log("document is ready");
$("#mycarousel").on("click", "#carouselButton", function(e) {
e.preventDefault(); //added after reading from one of the answers on stackoverflow
console.log("this is a click!");
if ($("#carouselButton").children("span").hasClass("fa-pause")) {
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass("fa-pause");
$("#carouselButton").children("span").addClass("fa-play");
}
else if($("#carouselButton").children("span").hasClass("fa-play")) {
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass("fa-play");
$("#carouselButton").children("span").addClass("fa-pause");
}
// return false;
});
});
</script>
</head>
<body>
<div id="mycarousel">
.......
<button type="button" id="carouselButton" class="btn btn-danger btn-sm" >
<span class="fa fa-pause"></span>
</button>
</div>
</body>
At the console I am only getting "document is ready" as output.
I also tried using $("#carouselButton").click(function() {...}); instead of $("#mycarousel").on("click", "#carouselButton", function() {...}); but the button didn't budged at all.
I tested it on edge and chrome after disabling caching on browser.
Any body has any suggestions how can I make this work or where am I going wrong?
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
This page: http://rippertshirts.co.uk/products/bazinga-t-shirt-brand-new-funny-geeky-big-bang-theory-ripper-s-m-l-xl/
I cannot add an item to the cart in Google Chrome.
Here is the input:
<input type="submit" value="Add to Cart" class="Cart66ButtonPrimary purAddToCart" name="addToCart_68" id="addToCart_68" disabled="disabled">
Can anyone think of a reason for this? Could it be the disabled="disabled feature"
I tried adding this to my header.php but no luck :(
<script type="text/javascript">
jQuery(document).ready(function(){
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input").removeAttr("disabled");
return(true);
});
});
</script>
Try to wrap your code inside DOM ready handler since you'are putting your jQuery code in the <head> section of your page:
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input:text").removeAttr("disabled");
return(true);
});
});
I want to perform some Jquery Event on clicking the Close sign on the alert Block of Jquery.
My VIew code is as below::
<div class=' alert alert-block fade in' >
<button type='button' class='close' data-dismiss='alert'>×</button>
<p>Just Close Me </p>
<div>
My Js code is as below::
$('button.close').click(function () {
var id = $(this).attr('data-id');
alert("deleted list is"+id);
});
As per the above code I am not able to detect or do Jquery events on clicking that 'X' button.
If you're using Bootstrap 3, you need to do this:
$('#my-alert').on('close.bs.alert', function () {
//code
});
I know this is quite old now but this is worth a look
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=alert-events
<script type="text/javascript">
$(document).ready(function(){
$("#myAlert").bind('closed.bs.alert', function(){
alert("Alert message box has been closed.");
});
});
</script>
<div id="myAlert" class="alert alert-info">
×
<strong>Note!</strong> Please read the comments carefully.
</div>
When you do a close, the dom element corresponding to the alert is removed from the Dom.
Try this instead:
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<form id="myform">
<input type="submit" value="Submit">
</form>
<div id="messages" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
<script>
$('#myform').submit(function(e) {
$('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
$('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
$('#modal').modal('show');
e.preventDefault();
});
$('#messages').on('close.bs.alert', function (e) {
$('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideDown().show();
e.preventDefault();
});
</script>
</body>
This is how you bind the close event
$('#my-alert').bind('close', function () {
//do something…
})
PS. You should read the manual, everything is in it.
you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.