Is there any way to create a copy to clipboard button on Safari? This is my code, but it does not work in Safari.
<input type="text" id="copy"/>
<button class="copy-button" id="button-copy">Copy</button>
<script>
jQuery(document).ready(function($){
document.querySelector('#button-copy').addEventListener('click',
function(e) {
$(this).prev().select();
document.execCommand("copy");
});
});
</script>
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?
I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>
I want to display the number of checkboxes ticked in the span element.
How do i achieve this?
This is my code -
<script>
$(document).ready(function(){
var n =$("[type='checkbox']:checked").length;
$("span").text(n);
});
</script>
</head>
<body>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
</body></html>
You can add an event listener on each, and updated the number of checked inputs on change:
$(document).ready(function(){
$.each($("[type='checkbox']"), inp => {
$(this).on('change', getChecked)
});
function getChecked(){
var n = $("[type='checkbox']:checked").length;
$("span").text(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
You must add change function to checkbox type.
The correct code is this:
$(document).ready(function(){
$("[type='checkbox']").change(function () {
var n =$("[type='checkbox']:checked").length;
$('span').text(n);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
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/
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);
});
});