so i need a button to change an image then it is clicked but to also change a certain text. to do so I require two onclick functions. how do I do this? this is my code so far.
<style>
.eventsImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
.connectImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
</style>
<body>
<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">
<div id="chgtext">This is my current text</div>
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1()" onclick = "document.getElementById('chgtext').innerHTML='Change the text using javascript';">
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2()" onclick = "document.getElementById('chgtext').innerHTML='bla bla bla';">
<script>
function imageChange1()
{
document.getElementById("mobileImage").src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
}
function imageChange2()
{
document.getElementById("mobileImage").src="https://media.istockphoto.com/photos/child-hands-formig-heart-shape-picture-id951945718?k=6&m=951945718&s=612x612&w=0&h=ih-N7RytxrTfhDyvyTQCA5q5xKoJToKSYgdsJ_mHrv0=";
}
</script>
so I can change the images when the buttons are clicked but I cant make the text change as well.
This will do the job.
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1();document.getElementById('chgtext').innerHTML='Change the text using javascript';">
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2();document.getElementById('chgtext').innerHTML='bla bla bla';">
You should use One onclick event that calls multiple functions separated by semi-colon.
Its considered bad practice to write JavaScript inline in HTML tags.
Alternatively, you can do both changes in one function.
function imageChange1(){
let txt = document.querySelector("#chgtext");
let img = document.querySelector("#mobileImage");
img.src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
txt.innerHTML = "Change the text using javascript";
}
function imageChange2(){
let txt = document.querySelector("#chgtext");
let img = document.querySelector("#mobileImage");
img.src="https://media.istockphoto.com/photos/child-hands-formig-heart-shape-picture-id951945718?k=6&m=951945718&s=612x612&w=0&h=ih-N7RytxrTfhDyvyTQCA5q5xKoJToKSYgdsJ_mHrv0=";
txt.innerHTML = "bla bla bla";
}
.eventsImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
.connectImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">
<div id="chgtext">This is my current text</div>
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1()">
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2()">
<style>
.eventsImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
.connectImage{
background-color: transparent; /* Green */
border: 3px solid #0E489A;
color: white;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:70px;
height:70px;
width:70px;
}
</style>
<body>
<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">
<div id="chgtext">This is my current text</div>
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1()">
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2()">
<script>
function imageChange1()
{
document.getElementById("mobileImage").src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
document.getElementById('chgtext').innerHTML='Change the text using javascript 1;
}
function imageChange2()
{
document.getElementById("mobileImage").src="https://media.istockphoto.com/photos/child-hands-formig-heart-shape-picture-id951945718?k=6&m=951945718&s=612x612&w=0&h=ih-N7RytxrTfhDyvyTQCA5q5xKoJToKSYgdsJ_mHrv0=";
document.getElementById('chgtext').innerHTML='Change the text using javascript 2;
}
</script>
Is there any way to go from desktop layout to mobile layout as shown on the image below using CSS? (responsiveness layout).
On the image below, every square is a div including the red square (anonymous).
I have the following divs: {A, B, C, D, red}.
On my requirements it is not possible to move the div A inside the red div (html source code). I just need the rendering takes care to put div A after div B.
Below you have a sample you can run by yourself.
Also you have the jsfiddle here: https://jsfiddle.net/tjztgn5d/
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
Any idea on how to achieve this without Javascript?
Yes, this can be done without altering the HTML or using Javascript. The trick is to use absolute positioning. It can work in your case because you are using fixed sizes anyway.
https://jsfiddle.net/anzL79py/
This is what I have added:
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
And the full snippet.
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
In your case by not using JS, it would be better to use
Bootstrap Column + Flexbox in Media Query
.contain{
max-height:800px;
}
.A{
color:white;
font-size:100px;
background:red;
height:100vh;
border:10px solid white;
}
.B{
color:white;
font-size:100px;
background:green;
height:100vh;
border:10px solid white;
}
.C{
color:white;
font-size:100px;
background:blue;
height:50vh;
border:10px solid white;
}
.D{
color:white;
font-size:100px;
background:pink;
height:50vh;
border:10px solid white;
}
#media only screen and (max-width: 768px) {
.contain{
display:flex;
flex-direction:column;
}
.A{
order:2;
border:0px;
}
.B{
order:1;
border:0px;
}
.three{
order:3;
border:0px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class="row contain">
<div class="col-sm-4 A">1</div>
<div class="col-sm-4 B">2</div>
<div class="col-sm-4 three">
<div class="row">
<div class="col-sm-12 C">3</div>
<div class="col-sm-12 D">4</div>
</div>
</div>
</div>
</div>
i wanna add next and previous button to my page jsp , I have actually multiple form which i can reach with a menu but i would like to pass from a form to another by clicking both on next or previous and with the menu
thank you for you attention and help I've seen a lot of topic but none of them could help me
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == ''){
hasError = true;
$this.css('background-color','#FFEDEF');
}
else
$this.css('background-color','#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError){
error = -1;
valclass = 'error';
}
$('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
});
*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
margin:15px auto;
text-align:center;
width:600px;
position:relative;
height:100%;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
background-color:#f9f9f9;
width:600px;
overflow:hidden;
}
#steps{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.step{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.
ted a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
span.checked{
background:transparent url(../img/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background:transparent url(img/error.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:590px;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background-color:#f4f4f4;
border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#steps form p.submit{
background:none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}
#steps form button:hover {
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
ul{ border:0; margin:0; padding:0; }
#pagination-clean li
{
border:0;
margin:0;
padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a
{
border:solid 1px #DEDEDE
margin-right:2px;
}
#pagination-clean .previous-off, #pagination-clean .next-off
{
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a, #pagination-clean .previous a
{
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active
{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link, #pagination-clean a:visited
{
color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover
{
text-decoration:none;
}
p.prev::before {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
p.prev::after {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul, #slider li
{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li
{
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords"
content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css"
media="screen" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript" >
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt=""
title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email"
placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name"
type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country"
name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone"
placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website"
name="website"
placeholder="e.g. http://www.hps.com
type="
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text"
AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text"
AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your
registration will be made . Otherwise an error message will be
generate .In this last step the user can confirm the submission of
the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body></html>
You could try to do something like this.
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
This will check if there is a next/prev li when you click on a `button.
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i) {
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function(e) {
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current - 1] + 'px'
}, 500, function() {
if (current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function() {
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e) {
if (e.which == 9) {
$('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps() {
var FormErrors = false;
for (var i = 1; i < fieldsetCount; ++i) {
var error = validateStep(i);
if (error == -1)
FormErrors = true;
}
$('#formElem').data('errors', FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step) {
if (step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if (valueLength == '') {
hasError = true;
$this.css('background-color', '#FFEDEF');
} else
$this.css('background-color', '#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if (hasError) {
error = -1;
valclass = 'error';
}
$('<span class="' + valclass + '"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click', function() {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
});
$("#next").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).next("li").length;
if (n == 1){
v.removeClass("selected").next("li").find("a").trigger("click")
}
});
$("#prev").click(function() {
var v = $("#navigation ul li.selected");
var n = $(v).prev("li").length;
if (n == 1){
v.removeClass("selected").prev("li").find("a").trigger("click")
}
});
});
* {
margin: 0px;
padding: 0px;
}
body {
color: #444444;
font-size: 13px;
background: #f2f2f2;
font-family: "Century Gothic", Helvetica, sans-serif;
}
#content {
margin: 15px auto;
text-align: center;
width: 600px;
position: relative;
height: 100%;
}
#wrapper {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #f9f9f9;
width: 600px;
overflow: hidden;
}
#steps {
width: 600px;
/*height:320px;*/
overflow: hidden;
}
.step {
float: left;
width: 600px;
/*height:320px;*/
}
#navigation {
height: 45px;
background-color: #e9e9e9;
border-top: 1px solid #fff;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navigation ul {
list-style: none;
float: left;
margin-left: 22px;
}
#navigation ul li {
float: left;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
position: relative;
margin: 0px 2px;
}
#navigation ul li a {
display: block;
height: 45px;
background-color: #444;
color: #777;
outline: none;
font-weight: bold;
text-decoration: none;
line-height: 45px;
padding: 0px 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: #f0f0f0;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}
#navigation ul li a:hover,
#navigation ul li. ted a {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.checked {
background: transparent url(../img/checked.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
span.error {
background: transparent url(img/error.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
#steps form fieldset {
border: none;
padding-bottom: 20px;
}
#steps form legend {
text-align: left;
background-color: #f0f0f0;
color: #666;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
float: left;
width: 590px;
padding: 5px 0px 5px 10px;
margin: 10px 0px;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
}
#steps form p {
float: left;
clear: both;
margin: 5px 0px;
background-color: #f4f4f4;
border: 1px solid #fff;
width: 400px;
padding: 10px;
margin-left: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
#steps form p label {
width: 160px;
float: left;
text-align: right;
margin-right: 15px;
line-height: 26px;
color: #666;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float: left;
}
#steps form input:focus {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background-color: #FFFEEF;
}
#steps form p.submit {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#steps form button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
margin: 0px auto;
clear: both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
#steps form button:hover {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
ul {
border: 0;
margin: 0;
padding: 0;
}
#pagination-clean li {
border: 0;
margin: 0;
padding: 0;
font-size: 11px;
list-style: none;
}
#pagination-clean li,
#pagination-clean a {
border: solid 1px #DEDEDE margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color: #888888 display:block;
float: left;
font-weight: bold;
padding: 3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight: bold;
border: solid 1px #FFFFFF;
}
#pagination-clean .active {
color: #00000 font-weight:bold;
display: block;
float: left;
padding: 4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color: #0033CC display:block;
float: left;
padding: 3px 6px;
text-decoration: none;
}
#pagination-clean a:hover {
text-decoration: none;
}
p.prev::before {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
p.prev::after {
content: "";
position: absolute;
left: -25px;
top: 0;
/* taille */
height: 0;
width: 0;
/* les bordures */
border-right: 36px solid #AAAAAA;
border-bottom: 18px solid transparent;
border-top: 18px solid transparent;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 40px;
text-shadow: 5px 1px 1px #fff;
padding: 30px;
}
#slider ul,
#slider li {
margin: 0;
padding: 0;
list-style: none;
}
#slider,
#slider li {
width: 500px;
height: 200px;
overflow: hidden;
}
span#prevBtn {}
span#nextBtn {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HPS REGISTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HPS REGISTER " />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript" />
<link rel="stylesheet" href="inc/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<img class="left" src="img/hps.png" width="150" height="100" alt="" title="" style="float: left; margin: 0 180px 0 30px;" />
</body>
<div id="content">
<h1>HPS REGISTER</h1>
<div id="wrapper">
<div id="steps">
<form method="post" action="createbank">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="clientname">Client name<span class="requis">*</span></label>
<input id="clientname" name="clientname" />
</p>
<p>
<label for="email">Email</label> <input id="email" name="email" placeholder="info#hps.net" type="email" AUTOCOMPLETE=off />
</p>
<p>
<label for="password">Password<span class="requis">*</span></label>
<input id="password" name="password" type="password" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label> <input id="name" name="name" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="country">Country</label> <input id="country" name="country" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="phone">Phone</label> <input id="phone" name="phone" placeholder="e.g. +212622222222" type="tel" AUTOCOMPLETE=off />
</p>
<p>
<label for="website">Website</label> <input id="website" name="website" placeholder="e.g. http://www.hps.com
type=" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>client bank information</legend>
<p>
<label for="banktag">Bank tag <span class="requis">*</span></label>
<input id="banktag" name="banktag" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="currency">Currency<span class="requis">*</span></label>
<input id="currency" name="currency" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="datesystem">Date system <span class="requis">*</span></label>
<input id="datesystem" name="datesystem" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="bankname">Bank name<span class="requis">*</span></label>
<input id="bankname" name="bankname" type="text" AUTOCOMPLETE=off />
</p>
<p>
<label for="schemaname">Schema name <span class="requis">*</span>
</label> <input id="schemaname" name="schemaname" type="text" AUTOCOMPLETE=off />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>IF Everything in the form is correctly filled your registration will be made . Otherwise an error message will be generate .In this last step the user can confirm the submission of the form.</p>
<p class="submit">
<button id="registerButton" type="submit">generate</button>
</p>
</fieldset>
</form>
</div>
<div id="result">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<div id="navigation" style="display: none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Bank information</li>
<li>Confirm</li>
</ul>
</div>
</div>
</body>
</html>
I need to do input like this, and word "seconds" should always stay visible and
unchangeable. How can I do that?
No JavaScripting needed here,
.round {
border:1px solid grey;
border-radius: 4px;
padding: 8px;
}
.round input {
border:0px solid black;
width: 40px;
margin-right: 8px;
}
.round label {
color: grey;
}
.container {
width: 200px;
}
<div class="container">
<div class="round">
<label><input type="text">seconds</input></label>
</div>
</div>
HTMLDog's CSS tutorial is a great one to follow.
#test{
width:100px;
border:1px solid #E0E0E0;
display:inline-block;
border-radius: 5px;
border-top:1px solid #BBDEFB;
}
input{
width:25px;
float:left;
border:none;
}
label{
color:#BDBDBD
}
input:focus{
outline: none;
}
<div id="test">
<div>
<input type="text">
</div>
<div>
<label>Seconds</label>
</div>
</div>
I frantically need your help,
The variable "x" can normally be set using the following method (default)
var x = prompt("Please enter your name:","John Smith")
I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript and have little experience in that impossible department.
Expected result:
var x = alertBox('Enter your firstname','prompt','John Smith')
Here is the HTML/CSS and Javascript Markup:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
add a return value to your alertBox() function.
function alertBox(arg1,arg2,arg3)
{
// do your stuff here
var ishallreturn = document.getElementById("ptext").value;
return ishallreturn;
}