im currently working on how to change the background image of my html document when the user selects a speficifc group from the dropdown menu from chatrooms. But im currently stuck I cant seem to get my jQuery to work any help you could offer would be great thank you :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soc Talk</title>
<script src="resource/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="resource/css/bootstrap.min.css" />
<link rel="stylesheet" href="resource/css/style.css" />
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('bg.png','url(resource/GamingSoc.jpg)');
});
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>SocTalk</h1>
</div>
</div>
<div class="container chat-signin">
<form class="form-signin">
<h2>Chat Login</h2>
<label for="nickname">Nickname</label> <input type="text" placeholder="Nickname" id="nickname">
<div>
<label for="chatroom" class="chatroom">Chatroom</label> <select size="1" id="chatroom">
<option>Select Room</option>
<option>Gaming Soc</option>
<option>Pokemon Soc</option>
</select>
</div>
<button type="submit" id="enterRoom">Sign in</button>
</form>
</div>
<!-- /container -->
<div class="container chat-wrapper">
<form id="do-chat">
<h2></h2>
<h4></h4>
<table id="response" ></table>
<fieldset>
<legend>Enter your message..</legend>
<div>
<input type="text" placeholder="Your message..." id="message" style="height:60px"/>
<input type="submit" value="Send message" />
<button type="button" id="Exit-room">Exit Room</button>
</div>
</fieldset>
</form>
</div>
<div class="alt1">
<div class="container">
</div>
</div>
<div class="alt2">
<div class="container">
<footer>
<p>Passive Aggressive Liberals</p>
</footer>
</div>
</div>
</body>
</html>
Use background-image property to change or set background image.
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('background-image','url(resource/GamingSoc.jpg)');
});
Possible duplicate of Setting background-image using jQuery CSS property
$('body').css('background', 'url(resource/GamingSoc.jpg)')
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I am new to Five9. I want to make a Script where there is some Fields where the agents can write some text, and after pressing a button, the text from the Field will go to the List updating the current record. Is there any possibility to realize this without using any CRM or something. Like there is any API request which can do this thing?
Thank you for your help!
<html>
<head>
<title> Script </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="nav_bar">
<button onClick="toggle('target', 'replace_target','replace_target2')">Adatlap</button>
<button onClick="toggle('replace_target', 'target','replace_target2')">Sugo</button>
<button onClick="toggle('replace_target2', 'target', 'replace_target')">Script</button>
</div>
<div>
<span id="target">Test</span>
<p> This is Test</p>
</div>
<div style="display:none" class="Sugo">
<span id="replace_target">Test2</span>
</div>
<div style="display:none" class="script">
<span id="replace_target2">SCript</span>
<p> This is SCript</p>
<div class="page1">
</div>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function toggle(target, source, source2) {
this[target].parentNode.style.display = 'block'
this[source].parentNode.style.display = 'none'
this[source2].parentNode.style.display = 'none'
}
</script>
</body>
</html>
I want to create a form in HTML that can take the inserted Name by the user and then after pressing submit shows the corresponded value (Age) to that user. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
The problem is that after pressing submit the Name will be shown in the myshow span section(Age:) just
for a fraction of second and then it disappeares and url changes to localhost:5000/?Name=Jack rather than localhost:5000/the current path/?Name=Jack
You should use onSubmit on the form element to call the function and then return false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
return false;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="" onSubmit="return myFunction();">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" value="Submit"><br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Ps: you did not close the submit tag properly
I think that you don't need submit.
If you don't need to submit, You have to change this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>