Develop Reference

How to Create a Form Slider displaying different output fields in Javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I want to Create a Slider Form that displays different output fields on sliding using Javascript.
Somewhat of this kind.
Can anyone suggest to me how can I make it or give some links about a similar thing, I could not find googling.

I've made one of these in a recent project, I'll show you the code here. Essentially we create two forms and a topper. The topper is always shown, and we use flexbox to split it in half. With a JS onclick() event we can change which of the two forms are shown depending on if the user clicks on the signup header or the login header. Please make sure to try to code this on your own once you understand how the code works - it helps with learning front-end rather than copy-pasting the code and never writing it on your own! : )
function formSelector(selector) {
let signupElement = document.getElementById("signup")
let loginElement = document.getElementById("login")
let signupForm = document.getElementById("signupForm")
let loginForm = document.getElementById("loginForm")
if (selector == "signup") {
signup.classList.add("selectedHeader")
login.classList.remove("selectedHeader")
signupForm.classList.add("showForm")
loginForm.classList.remove("showForm")
}
else if (selector == "login") {
signup.classList.remove("selectedHeader")
login.classList.add("selectedHeader")
signupForm.classList.remove("showForm")
loginForm.classList.add("showForm")
}
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap");
body {
margin: 0;
padding: 0;
font-family: "poppins", "sans-serif";
overflow-x: hidden;
overflow-y: scroll;
--primary: rgb(4, 214, 4);
--primaryShade: rgb(15, 15, 15);
--secondaryShade: rgb(238, 240, 243);
scroll-behavior: smooth;
scroll-padding: 300px;
}
.formContainer {
background: var(--secondaryShade);
min-height: 100vh;
display: flex;
align-items: center;
transition: all 0.3s;
}
.form {
width: 500px;
margin: auto;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.04) 0 12px 60px 0;
background: rgb(255, 255, 255);
padding: 10px;
transition: all 0.3s;
}
.formContent {
padding: 15px 20px;
flex-wrap: wrap;
justify-content: center;
display: none;
animation: floatUp 0.6s;
position: relative;
}
.formInput {
border: 1.5px solid rgb(165, 165, 165);
padding: 10px;
outline: none;
transition: all 0.3s;
margin: 18px;
border-radius: 6px;
font-family: "poppins", sans-serif;
font-size: 18px;
}
.formInput:hover {
border-color: var(--primary);
}
.formInput:focus {
border-color: var(--primary);
box-shadow: rgba(0, 0, 0, 0.1) 0 3px 36px 0;
}
.formButton {
display: block;
width: 60%;
border: none;
outline: none;
cursor: pointer;
padding: 10px 0;
font-size: 17px;
border-radius: 6px;
transition: all 0.3s;
margin: 20px 0;
box-shadow: rgba(0, 0, 0, 0.22) 0 12px 24px 0;
background: var(--primary);
color: white;
font-family: "poppins";
font-weight: bold;
}
.formButton:hover {
box-shadow: rgba(0, 0, 0, 0.14) 0 6px 24px 0,
inset rgba(255, 255, 255, 0.247) 0 0 0 10000px;
}
.formButton:focus {
box-shadow: rgba(0, 0, 0, 0.26) 0 12px 36px 0,
inset rgba(255, 255, 255, 0.247) 0 0 0 10000px;
background: var(--primary);
color: white;
}
.formTopper {
background: rgb(236, 236, 236);
display: flex;
justify-content: space-around;
border-radius: 6px;
}
.formHeader {
width: 50%;
text-align: center;
margin: 4px;
padding: 4px;
border-radius: 6px;
font-weight: normal;
cursor: pointer;
transition: all 0.3s;
font-size: 28px;
}
.formHeader:hover {
background: rgb(219, 219, 219);
}
.selectedHeader {
background: white;
box-shadow: rgba(0, 0, 0, 0.13) 0 6px 45px 0;
}
.selectedHeader:hover {
background: white;
}
.showForm {
display: flex;
}
<div class="form">
<div class="formTopper">
<h1 class="formHeader selectedHeader" id="signup" onclick="formSelector('signup')">Signup</h1>
<h1 class="formHeader" id="login" onclick="formSelector('login')">Login</h1>
</div>
<div class="formContent showForm" id="signupForm">
<input class="formInput" placeholder="Username" />
<input class="formInput" placeholder="Email" />
<input class="formInput" placeholder="Passcode" />
<button class="formButton">Signup</button>
</div>
<div class="formContent" id="loginForm">
<input class="formInput" placeholder="Username" />
<input class="formInput" placeholder="Passcode" />
<button class="formButton">Login</button>
</div>
</div>

How to save the event in javascript cookies?

This pop-up window. After the client visited the site in 30 seconds, a window will automatically appear. After closing the window disappears. But when the client goes to another page, the script starts to work ( after refreshing the page). How to remember closing the modal window at the time of visiting the client's site?
<div id="parent_popup">
<div id="popup">
message message message message message message message
<a class="close"title="close" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div>
#parent_popup{
padding: 20px;
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup{
background: #fff;
max-width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.close{
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover{
background-color: rgba(0, 122, 200, 0.8);
}
<script type="text/javascript">
var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>

in JavaScript write a function to store a cookie if it doesn't exist then set the cookie that lasts for 30 mins. ** Writen not tested
// get cookie
var cookie_email = Cookies.get('example');
if(!cookie_email){
// show popup
var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// set cookie to expire after 30 mins
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie("example", "foo", { expires: date });
}

Styling JQuery UI Autocomplete

Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???

Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/

Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}

Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}

You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}

CSS & JQuery: Better Usability

I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>​
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});​
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}​
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.

jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample

Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/

demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }

This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});​
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.

Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/

small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});

JavaScript calling show hide methods

I'm a complete newbie to JavaScript trying to understand simple things....
Please look at complete code below. It's simple, show and hide.
I'm doing something wrong due to which it's not working.
http://jsbin.com/esokic/edit#javascript,html,live
Would appreciate any help..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Close</title>
<SCRIPT type="text/javascript" src="jquery.all.min.js"></SCRIPT>
<style type="text/css">
.header-nav-outer {
float: left;
}
.get-daily-alerts-outer {
background: rgb(161, 8, 8); border-width: 0px 2px 2px; border-style: solid; border-color: rgb(0, 0, 0); padding: 2px 10px 20px 20px; border-radius: 0px 0px 8px 8px; width: 477px; height: 88px; display: none; position: absolute; z-index: 1000; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
}
span.close {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -674px -748px; padding: 1px 0px 1px 16px; color: rgb(255, 255, 255); font-size: 10px; cursor: pointer;
}
.get-daily-alerts-head {
color: rgb(224, 220, 220); padding-bottom: 10px; font-size: 19px; font-weight: bold;
}
.get-daily-alerts-head span {
font-size: 13px; font-weight: normal;
}
.header-top-nav {
background: url("/img/snapdeal/sprite/snapdeal-x.png?v=1") repeat-x left -73px; margin: 0px 0px 3px 170px; width: 592px; height: 32px; overflow: hidden;
}
.get-deal-alerts {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -565px -803px rgb(161, 8, 8); padding: 3px 5px; width: 115px; color: rgb(255, 255, 255); font-size: 11px; float: left; cursor: pointer; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
}
.csupport-drop-outer {
float: right;
}
.csupport-drop {
width: 120px !important; display: block;
text-align: left;
color: #C7C5C5;
font-size: 11px;
font-weight: normal;
cursor: pointer;
}
span.selected-city {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat right 3px; padding-right: 20px;
}
.cust-support-outer {
margin: 0px; width: 121px; height: auto;
background: rgb(255, 255, 255); border-width: 0px 2px 7px; border-style: solid; border-color: rgb(0, 0, 0); margin: 0px; padding: 5px 2px; position: absolute; z-index: 1000 !important; border-radius: 0px 0px 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px;
}
ul.cust-support {
background: rgb(255, 255, 255); list-style: none; margin: 0px; padding: 0px; color: rgb(94, 94, 94); font-size: 12px;
}
ul.cust-support li {
margin-top: 1px;
margin-right: 5px;
border-bottom-color: #888484;
border-bottom-width: 1px;
border-bottom-style: dotted;
}
ul.cust-support li a {
list-style: none;
margin: 0px 0px 1px;
padding: 3px;
color: #5E5E5E;
font-size: 12px;
display: block;
cursor: pointer;
_cursor: hand;
}
.active-drop-tab {
background: rgb(255, 255, 255); border-width: 2px 2px 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(51, 176, 212); cursor: default; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
}
</style>
<script type="text/javascript">
this.init=function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
return false
});
};
</script>
</head>
<body>
<DIV class="header-nav-outer">
<DIV class="get-daily-alerts-outer">
<DIV align="right"><SPAN class="close">Close</SPAN></DIV>
<DIV class="get-daily-alerts-head">Get The Best Deals <SPAN>Everyday in your
mailbox</SPAN></DIV>
</DIV>
<DIV class="header-top-nav">
<DIV class="get-deal-alerts">Get daily deal alerts</DIV>
<DIV class="csupport-drop-outer">
<DIV class="csupport-drop"><SPAN class="selected-city">Customer
Support</SPAN></DIV>
<DIV class="cust-support-outer" style="display:none;">
<UL class="cust-support">
<LI><A><SPAN id="orderStatus">Order Status</SPAN></A></LI>
<LI><A><SPAN id="voucherResend">Resend Voucher</SPAN></A></LI>
<LI><A href="http://www.snapdeal.com/info/contactus" target="_blank">Contact
Us</A></LI></UL></DIV>
</DIV>
</DIV>
</body>
</html>

You never actually call init() so your click handlers are never being applied.
$(function() { init(); });

Try:
$(document).ready(function() {
$(".csupport-drop").click(function() {
$(this).addClass("active-drop-tab");
$(".cust-support-outer").show();
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
});
});

The problem is on this line:
this.init=function(){
What you want there instead of defining an init function is a document.ready handler, so
$(document).ready(function(){
and then at the end of the code block where you've got:
};
you need to close off the call to ready( that was opened above, so:
});
Or just leave your existing code as is and add a separate document.ready handler that calls your init function:
$(document).ready(init);
// OR, if you need to do other things in your document ready:
$(document).ready(function() {
// other stuff here
init();
// other stuff here
}
Updated demo: http://jsbin.com/esokic/6/edit