I am attempting to handle the click of a button in javascript/jquery. I am having an issued getting the trigger to fire. I have gleaned previous questions in hoping to find an answer, but have been unsuccessful thus far.
Below is my code to show one button and handle the click of the button. When the user clicks the button, the code should be catching the click event, but it is not.
I have debugged the code and set a breakpoint on the on click event. The breakpoint is never hit. I have trimmed the code down to a minimum example.
What am I missing regarding getting the on click event to fire?
I have included the entire file, including the html, in case I am missing something there.
<!DOCTYPE html>
<HTML>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Test</TITLE>
<link rel="stylesheet" href="<?= HOST_ADDRESS ?>/stylesheets/jquery-ui.min.css" />
<STYLE TYPE="TEXT/CSS">
.clear { clear: both; }
html {
background: #e9e9e9;
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1em;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0 auto;
padding: 0;
width: 100vw;
}
#btn_area {
padding-top:15px;
padding-bottom:0px;
}
.ui-widget-header {
border: 0px !important;
}
.ui-button {
width:110px !important;
height:30px !important;
font-size: 16px;
color:#4c4c4c;
}
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<SCRIPT>
$( document ).ready(function() {
$('#header_wrapper').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
$('#send1').on('click', function() {
aaa = true;
});
});
</SCRIPT>
<BODY>
<div>
Test Window
</div>
<div class="button_wrapper">
<div id="btn_area">
<div style="text-align:center;">
<input type="button" id="send1" name="send1" style="font-size:large" class='ui-button ui-widget ui-state-default ui-corner-all' value="Send">
</div>
</div>
</div>
</BODY>
</HTML>
I have tried running the code in a LAMP stack and a MAMP stack and get the same results.
What is aaa in your script? - Anyway, I've copied your code to a snippet below, as you can see the click is being received.
$( document ).ready(function() {
$('#send1').on('click', function() {
//RUN YOUR FUNCTION IN HERE.
});
});
$( document ).ready(function() {
//declare aaa
var aaa = false
$('#send1').on('click', function() {
//aaa will be true after button is clicked
aaa = true;
if (aaa = "true") {
console.log('aaa is now true')
}
});
});
.clear { clear: both; }
html {
background: #e9e9e9;
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1em;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0 auto;
padding: 0;
width: 100vw;
}
#btn_area {
padding-top:15px;
padding-bottom:0px;
}
.ui-widget-header {
border: 0px !important;
}
.ui-button {
width:110px !important;
height:30px !important;
font-size: 16px;
color:#4c4c4c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="#header_wrapper">
Test Window
</div>
<div class="button_wrapper">
<div id="btn_area">
<div style="text-align:center;">
<input type="button" id="send1" name="send1" style="font-size:large" class='ui-button ui-widget ui-state-default ui-corner-all' value="Send">
</div>
</div>
</div>
Related
I want fix on mouse over and mouse out so it can work for div.As you can see it cant worked,i dont know why.I want to do it when i move my mouse to change it to yellow,the other colors should be aqua.I did a lot but it didn't worked for me.How can i do single div be yellow by mouserover and how can i do it mouseout to do it aqua?thanks a lot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>exams</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#style
{
background-color: #00FFFF;
border-style: dotted;
}
#node2
{
background-color:#00FFFF;
border-style: dashed;
}
#node3
{
background-color: #00FFFF;
border-style: solid;
}
#node4
{
background-color: #00FFFF;
border-style: ridge;
}
#node5
{
background-color: #00FFFF;
border-style: inset;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: red;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
.feedback {
position: relative;
width: 60px;
}
#mybutton {
position: absolute;
top: 10px;
right: 10px;
}
}
#mybutton2{
position: absolute;
top:30px;
right:30px;
}
</style>
</head>
<body onload="myFunction()">
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div style="width:300px; height:200px; overflow:auto; background-color:#00FFFF;">
<span id="redText" style="color:red ">Red text for scroll test.</span>
<div style="height:200px;"></div>
</h1>
<h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node2">keimeno1</div> </h2>
<h3 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node3">keimeno2</div></h3>
<h4 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node4">keimeno3</div><h4>
<h5 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node5">keimeno4</div>
</div>
</h5>
<script>
function myFunction() {
alert("Page is loaded");
}
function mytimeFunction() {
setInterval(function(){ alert("Hello"); }, 5000);
timetrick();
}
function timetrick() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
}
function mouseOver() {
document.getElementById("demo").style.color = "yellow";
}
function mouseOut() {
document.getElementById("demo").style.color = "aqua";
}
</script>
<div id="mybutton">
<button class="1">first button</button>
</div>
<div id="mybutton2">
<button class="2">Second button</button>
</div
</body>
</html>
The solution for your functionality to work is to update the formatting in your script. It is quite obvious it wouldn't work because the script has an abundance of syntax errors. Firstly check your script block and you will find you've added a lone brace after the timetrick func, that prevents the mouseOver func to even get defined during runtime. Also the header tags (h1, h2,...) are very messy. For example, you have an extra div endtag before the h5 endtag. Also, like many others have already stated: remove the 'demo' id's. They are unnecessary. And add document.getElementById("node2").style.color = "yellow"; instead of the demo part. duplicate those lines inside of the function for every node in your body. This should be more than enough to make the mouseover work correctly.
Something like that could be helpful?
$('.acqua').mouseover(function() {
$('.acqua' ).css('background-color','yellow');
});
$('.acqua').mouseout(function() {
$('.acqua' ).css('background-color','aqua');
});
.acqua{
background-color: aqua;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acqua">Some text here</div>
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
The below code has two drop down menus which load container on button click and drop down closes on clicking anywhere on page. Though the window load works but the pages inside takes too much time to load even on local server obviously because my javascript code isn't the way it should. So guys what should my javascript code like so that it loads page correctly and at the same time closes drop down on clicking anywhere on page [if both drop downs are open both should close on click like in snippet].
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
$("#notificationContainer").load("notifications.php");
document.getElementById("myDropdown").classList.remove("show");
$("#scoreContainer").load("score.php");
document.getElementById("myDropdown2").classList.remove("show");
}
.dropdown,
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content,
.dropdown-content2 {
display: none;
background-color: #fff;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0;
}
.dropdown-content a,
.dropdown-content2 a {
padding: 10px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropbtn {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: red;
}
.dropbtn2 {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: green;
}
.dropdown-content,
.dropdown-content2 {
border: 2px solid #c6c6c6;
border-top: none;
}
#notificationContainer,
#scoreContainer {
min-width: 400px;
min-height: 100px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td style="padding-right:15px;">
</td>
<td style="padding-right:15px;">
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">one</button>
<div id="myDropdown2" class="dropdown-content2">
<div id="scoreContainer"></div>
</div>
</div>
</td>
<td style="padding-right:15px;">
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">two</button>
<div id="myDropdown" class="dropdown-content">
<div id="notificationContainer"></div>
</div>
</div>
</td>
</tr>
</table>
The above javascript is modified from the below single drop down menu code which loaded the page inside container instantly, but my modified version [above] takes too much time:
<script type="text/javascript">
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
$( "#notificationContainer" ).load( "notifications.php" );
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
there is nothing inherently wrong or slow about your javascript code. have you tried inspecting how long your PHP code runs? because that's where I would start looking for the problem.
There is nothing wrong with your dropdowns. They work fine. But they lack in design and the code looks way too much for such small control. I suggest you use Bootstrap. CSS and Javascript codes are external and you just need to place your dropdown in your project by coding some HTML.
There are several different designs and the way it works simpler than what you coded. Take a look at the below example and this page for more info about it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdown Example</h2>
<p>Nice design, easy usage, good performance.</p>
<p><b>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</b></p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>THIS</li>
<li>IS</li>
<li>A DROPDOWN</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle
I've searched around for a way to disable the error messages that are displayed next to invalid form elements and I have only found ways to customize the messages, not prevent them altogether.
I tried:
jQuery.extend(jQuery.validator.messages, {
required: ""
}
But that still places a blank space next to my text boxes and throws off the positioning. Anyone know a way that I can do this?
$('#submit').click(function(){
$("#contactform").validate({
errorPlacement: function(error, element) { },
debug:true
})
});
leaving the errorPlacement line blank did the trick.
You could use CSS to hide them
label.error { display:none; }
It's not a perfect solution, but it'll work
I created an over-ride of the existing "required" validator to return no error messages.
Over-Ride Required Method:
// Creates the NEW validator method
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
// Creates a new CSS Rule for the validator method
// so we can add it like "class='requriedNoMsg'".
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });
Full Example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Demo</title>
<!-- jQuery 1.6.1 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<!-- jQuery Validate 1.8.1 -->
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js" charset="utf-8"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/additional-methods.min.js" charset="utf-8"></script>
<style type="text/css">
body { margin: 0; padding: 0; font-family: Verdana, Tahoma, Arial, sans-serif; }
fieldset.main { margin: 1em; padding: 1em; width: 400px; font-size: .9em; }
fieldset.main ol { padding: 1em 1em 0 1em; list-style: none; }
fieldset.main li { padding-bottom: .5em; }
fieldset.main ol li label { display: block; width: 12em; margin-right: 1em; }
input[type=button] { width: 6em; height: 2.5em; }
input[type=checkbox] { }
input[type=text].error { border: 1px dotted red; background-color: yellow;}
</style>
<script type="text/javascript">
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });
$(document).ready(function () {
$('#myform').validate(
{submitHandler: function () { alert('Validation Passed!'); }}
);
});
</script>
</head>
<body>
<form id="myform" method="get" action="">
<fieldset class="main">
<ol>
<li>
<label for="CustomerCode" class="left">
Customer Code</label>
<input type="text" id="CustomerCode" name="CustomerCode" class="requiredNoMsg" />
</li>
<li>
<label for="DeliveryCode" class="left">
Delivery Code</label>
<input type="text" id="DeliveryCode" name="DeliveryCode" class="requiredNoMsg" />
</li>
<li>
<input type="submit" id="Add" value="Add" />
</li>
</ol>
</fieldset>
</form>
</body>
</html>