I am learning jQuery. I made a button to show/hide a box using jQuery. It works well for the first time only. After first time it automatically showing the box after I hide it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./styles.css" />
<script
src="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script>
</head>
<body>
<div class="playbox">
<div class="button"><button>Hide/Show</button></div>
<div class="box"></div>
</div>
<script src="./jQuery.js"></script>
<script>
$(".playbox").css({
width: "100%",
height: "50vh",
});
$(".button").css({
width: "50%",
height: "100%",
float: "left",
});
$("button").css({
width: "150px",
height: "100px",
});
$(".box").css({
width: "50%",
height: "100%",
background: "red",
float: "left",
});
$('button').click(function () {
$('.box').hide(2000, function () {
$('button').click(function () {
$('.box').show(2000);
});
});
});
</script>
</body>
</html>
jQuery version 1.11.3.
How can I fix it? Please help.
Every time you click the button you:
Hide the box
Add an event handler to show the box
So the second time you click the button you:
Trigger the first event handler which:
Hide the box
Add an event handler to show the box
Trigger the second event handler which:
Shows the box
Bind one event handler which behaves differently depending on if it is hidden or not.
You could write that logic yourself, but the toggle() method is already written.
Replace:
$('button').click(function () {
$('.box').hide(2000, function () {
$('button').click(function () {
$('.box').show(2000);
});
});
});
With:
$('button').on('click', () => $('.box').toggle(2000));
There is an inbuilt function in jQuery called toggle. Use it to hide/show on 1 click.
See below for example.
Thanks me later.
$(".playbox").css({
width: "100%",
height: "50vh",
});
$(".button").css({
width: "50%",
height: "100%",
float: "left",
});
$("button").css({
width: "150px",
height: "100px",
});
$(".box").css({
width: "50%",
height: "100%",
background: "red",
float: "left",
});
$('button').click(function () {
$('.box').toggle(2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="playbox">
<div class="button"><button>Hide/Show</button></div>
<div class="box"></div>
</div>
$('button').click(function () {
$('.box').toggle(2000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./styles.css" />
<script
src="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script>
</head>
<body>
<div class="playbox">
<div class="button"><button>Hide/Show</button></div>
<div class="box"></div>
</div>
<script src="./jQuery.js"></script>
<script>
$(".playbox").css({
width: "100%",
height: "50vh",
});
$(".button").css({
width: "50%",
height: "100%",
float: "left",
});
$("button").css({
width: "150px",
height: "100px",
});
$(".box").css({
width: "50%",
height: "100%",
background: "red",
float: "left",
});
</script>
</body>
</html>
you could fix that:
$('button').click(function () {
if($('.box').is(":visible")){
$('.box').hide(2000);
}else{
$('.box').show(2000);
}
});
or use toggle():
$('button').click(function () {
$('.box').toggle(2000);
});
Related
i am creating qr codes using This Libary and this is how it works, it creates an image tag and stores the qr code image in the src as a binary image. i want to download the qr code image, it works perfectly on my laptop but when i tested it on my mobile phone it didn't work, i even tried to alert the src of the image but it came out empty, how can i solve this?
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>qrcode</title>
<style>
#qrcode {
width: 160px;
height: 160px;
margin-top: 15px;
}
</style>
</head>
<body>
<input type="button" id="cmd" value="Save PNG" onclick="saveimg()" />
download
<div id="qrcode"></div>
<script src="./qrcode.min.js"></script>
<script type="text/javascript">
// var qrcode = new QRCode("qrcode");
var qrcode = new QRCode("qrcode", {
text: "",
width: 200,
height: 200,
colorDark : "#000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
function makeCode() {
let TickectId = location.href.split("=")[1];
let dfd = qrcode.makeCode("TickectId")
}
function saveimg() {
alert(document.getElementsByTagName("img")[0].src)
document.getElementById("download").href = document.getElementsByTagName("img")[0].src;
}
makeCode();
document.getElementById("cmd").addEventListener("click", () => {
alert(document.getElementsByTagName("img")[0].src)
document.getElementById("download").href = document.getElementsByTagName("img")[0].src;
})
</script>
</body>
</html>
add this to your code
var can = document.querySelector("#qrcode canvas");
alert(can.toDataURL())
document.getElementById("download").href = can.toDataURL();
I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.
Here's where I'm trying to add a progress bar.
<p class="infoBox">
<h3>Skills</h3>
<h4>Computer Languages</h4>
Java <div id="container"></div></br>
Python</br>
Here's my javascript.
<script type="text/javascript" src="/require.js">
console.log("Hello World!"); // a test for js and it's not showing up in chrome's console
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
</script>
Here's my css.
#container {
margin: 20px;
width: 400px;
height: 8px;
}
Here's what's coming up when I run it.
You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.
If you want to execute javascript code you have two options.
Option 1: Inline Javascript like this:
<script src="require.js"></script>
<script>
console.log("test")
</script>
Option 2: Create your own .js file and extract the code there:
<script src="require.js"></script>
<script src="your_own_js_file.js"></script>
If src is in the tag it will not read its contents. Simply remove the src and it should work.
According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",
And yes, you need to split and your script like
<script src="/require.js"/>
<script>
Your script here
</script>
Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.
index.js
window.onload = function onLoad() {
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%', height: '100%' },
});
bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ProgressBar.js - Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
margin: 20px;
width: 400px;
height: 8px;
}
</style>
</head>
<body>
<p class="infoBox"></p>
<h3>Skills</h3>
<h4>Computer Languages</h4>
<p>Java</p>
<div id="container"></div>
<p>Python</p>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
<script src="index.js"></script>
</body>
</html>
I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!
Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview
I am curious to know how to add add image icon using jquery as in stack overflow. When user clicks it, it increases its size and goes wherever user places it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<image src="/addImage" />
</div>
</body>
</html>
Here I have added simple image on which user should able to place where he wants to place image. I don't know how to increase the size of that div after dragging. Also I want to get the position where user have added it.
I also want it should ask to browse on pc to upload a image
This code will increase the size of the draggable after it is been dragged and will return the position (as offset) of the draggable-element:
$(function () {
$("#draggable").draggable({
stop: function( event, ui ) {
ui.helper.css({
width: '200px',
height: '200px'
});
$('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
}
});
});
Demo
Reference
.draggable()
I have the example code from jQuery animate
and I would like to make the div expand automatically based on a counter, based on the time, as the counter or time changes the div gets wider. I can't figure out how to use a variable to replace the width: "70%"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<style type="text/css">
div {
background-color:#bca;width:100px;border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<button id="go">» Run</button>
<div id="block">
Hello!
</div>
<script type="text/javascript">
/* Using multiple unit types within one animation. */
$("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );});
</script>
</body>
</html>
Please sample code to use a variable for width:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<style type="text/css">
div {
background-color:#bca;width:100px;border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<button id="go">» Run</button>
<div id="block">
Hello!
</div>
<script type="text/javascript">
var someWidth = "70%";
/* Using multiple unit types within one animation. */
$("#go").click(function(){ $("#block").animate({ width: someWidth, opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );});
</script>
</body>
</html>
You can use relative animation by specifying += as follows
$("#go").click(function(){
$("#block").animate({
width: "+=5%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
This will expand div by 5% every time function is called.Adjust it fit your need.
Rather if you would like to animate on interval basis call this function in setInterval.This will call animate every 2000 milliseconds.
setInterval( function(){
$("#block").animate({
width: "+=5%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
},2000);