We Keep Coding

Toggle button for collapsible log in form will not stay fixed

So, I'm working with CSS grids and while doing so had the idea to make a collapsible login/registration form, using a jQuery toggle method. I got close to reaching the desired output, minus the fact that the actual "Close / Open" toggle link moves to the center of the parent div when the toggle is open, and slides to the far right once it's closed. How do I prevent this from happening? I am including the published link to my project as well as the code
Here is my jQuery,
and the HTML (in which the jQuery actually lies)
Finally, this is the CSS to match
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
/* CSS3 GRIDS */
body {
margin: 0;
padding: 0;
}
#wrapper {
background-color: grey;
display: grid;
grid-template-columns: 2fr 1fr 1fr; /* set grid to 3 columns */
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-items: stretch; /* start, end, center, stretch(default) */
align-items: stretch;/* start, end, center, stretch(default) */
}
#wrapper > div {
background: white;
padding: 1em;
}
/* #wrapper > div:nth-child(odd){
background: #ddd;
}
*/
#logo {
float: left;
font-family: 'Solway', serif;
font-size: 20pt;
font-weight: bold;
text-shadow: 5px 5px 5px #111111;
}
#nav-links {
list-style-type: none;
}
#nav-links > li {
display: inline-block;
padding: 0px 40px;
}
#nav-links > li > a {
text-decoration: none;
color: black;
}
#nav-links > li > a:hover {
color: green;
text-shadow: 3px 3px 3px #40c249;
font-style: italic;
}
#sign-in {
float:right;
}
#nav {
clear: both;
margin-bottom: 10px;
}
/* sliding panel */
#toggle {
list-style-type: none;
}
.tab {
}
.clearfix {
/* display: none; */
}
.tog {
text-decoration: none;
color: #40c249;
}
#toppanel {
position: relative; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
border-radius: 5px;
}
.header {
/* align-self: start; */
grid-column: 1/4;
grid-row:1/3;
}
.content {
/* align-self: end; */
grid-row: 3/7;
grid-column: 1/3;
}
.aside {
/* justify-self: end; */
grid-column: 3/4;
grid-row: 3/5;
}
.aside2 {
/*grid-column: 1;
grid-row: 2/4; ovlaps box 1 - eliminates margin negative*/
grid-row: 5/7;
grid-column: 3/4;
}
.article {
grid-row: 7;
grid-column: 1/2;
}
.article2 {
grid-row:7;
grid-column:2/4;
}
.footer {
grid-column: 1/4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box header">
<div id="logo">Web D & D</div>
<div id="sign-in">
<script>
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
</script>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li id="toggle">
<a id="open" class="open tog" style="display: none;" href="#?signin">Log In | Register</a>
<a id="close" class="close tog" href="#">Close Panel</a>
</li>
</ul>
</div> <!-- / top --><br><br>
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Sign In</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
</div> <!--panel -->
</div><br><br><br><br><br><br>
<div id="nav">
<ul id="nav-links">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div>
</div>
<div class="box content">Content</div>
<div class="box aside">Aside</div>
<div class="box aside2">Aside2</div>
<div class="box article">Article</div>
<div class="box article2">Article2</div>
<div class="box footer">Footer</div>
</div>
</body>
</html>
http://www.yadahandthehunter.com/grids/grid-5.html
Thanks! Hope someone sees this soon! ;)
-MAJ

CSS can easily fix this:
.open, .close {
position: fixed;
right: 10px;
}

jQuery load modal after an interval only one time per session

I would like to show a modal after 5 seconds, but only once per session (website visit).
This is what I have so far:
$(document).ready(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
This is the codepen for it:
https://codepen.io/uxfed/pen/BmyeEr
I would like this modal to only show one time per website session.

You can put your fading code into body of if statement. I did it via localStorage tool. This code works for me:
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
Code in Snippet doesn't works here, but in your project it would.
function hideDialog(){
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
function question_body(){
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e){
HideDialog();
e.preventDefault();
});
}
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
.instructions {
text-align:center;
font-size:20px;
margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////
// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #40c348;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #40c348;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #5D9E62;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #40c348;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
<p>Sign up for our Deal Alerts and save
$25 Off of your first order of $50 or more!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>

CSS prevent div from moving down

I've got this html code in my Web Application which shows different texts for different conditions above some input fields.
My Problem is, that the Input fields are moved down by the text, but i want them to have it always at the same position no regardless of whether the #if($numberBookings > 0) is true or not (or even if i decide to place some completely different text there)
.bookbox{
padding-top: 10px !important;
padding-bottom: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #FFFFFF;
margin: 16px !important;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
flex-wrap: wrap;
}
.bookcard{
margin-top: 120px !important;
margin-bottom: 120px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #FFFFFF;
clear: both;
width: 100%;
}
.float-left {
float: left !important;
}
.m-1 {
margin: 0.25rem !important;
}
<div class="bookbox">
<h3 class="" align="center">
Hallo {{$user->firstName.' '.$user->lastName}},<br>
#if($numberBookings > 0)
<font color="red">Du hast Buchungen die bereits abgelaufen sind!<br> Bitte gib die Fahrzeuge frei, wenn du sie nicht mehr benötigst</font>
#else
Benötigst du ein Fahrzeug?
#endif
</h3>
<div class="bookcard flex-column">
<form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar">
<div class="float-left m-1">
<input type="text" name="Standort" list="Standorte" class="w3-input w3-border {{ $errors->has('Standort') ? 'border-danger' : '' }}" placeholder="Standort">
<datalist id="Standorte">
#foreach($cities as $city)
<option value="{!! $city->name !!}"></option>
#endforeach
</datalist>
</div>
<div class="float-left m-1">
<input type="text" name="Startdatum" class="date w3-input w3-border {{ $errors->has('Startdatum') ? 'border-danger' : '' }}" id="f0date" placeholder="Startdatum">
</div>
<div class="float-left m-1">
<input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors->has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum">
</div>
<div class="float-left m-1">
<button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0">Fahrzeug finden</button>
</div>
</form>
</div>
</div>

you should use position: absolute on an element to prevent it from changing the flow of elements:
.container {
/* I'll be the reference element for aboslutely positioned children */
position: relative;
/* only for the purpose of this example */
margin: 5px;
width: 200px;
display: inline-block;
}
.pos_absolute {
position: absolute;
/* colors only for the purpose of this example */
white-space: nowrap;
background: antiquewhite;
}
.top-left {
top: 0;
left: 0;
/* Nicely centered (optionnal) */
transform: translate(0%, -50%);
}
.top-center {
top: 0;
left: 50%;
/* Nicely centered (optionnal) */
transform: translate(-50%, -50%);
}
.content {
background: coral;
/* Add some padding or margin to make room to display to text above (prevent overlapping) */
padding-top: .5rem;
}
<div class="container">
<span class="pos_absolute top-left">I'm at top left</span>
<div class="content">I'm the block</div>
</div>
<div class="container">
<span class="pos_absolute top-center">I'm at top center </span>
<div class="content">I'm an inline-block</div>
</div>

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>

You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.

You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.

You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.

first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

How to toggle a div from right to left in jquery

I have this fiddle where I am trying to create a floating div which should toggle from right to left .
I am very new to UI so my code is bit messy
here is my code and FIddle
$(".widget-toggle-btn").click(function() {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.widget').toggle(effect, 'right', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
So if you click on that toggle button I am getting error that n.easing[this.easing] is not a function
Can any one help me fix this thanks

you can use float values in jquery.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').css('float','left');
$('.widget-toggle-btn').css('float','right');
});
Here is your update code. https://jsfiddle.net/KFmLv/6753/

You can do it like this also. refer the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.mydiv{
width: 0px;
height: 100px;
position: absolute;
left: 70px;
top: 20px;
background-color: orange;
overflow: hidden;
text-align: center;
color: white;
}
#mybutton{
width: 70px;
height: 100px;
color: white;
position: absolute;
top:20px;
left:0px;
background-color: black;
color: orange;
}
</style>
<body>
<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>
<script type="text/javascript">
var theNum = 0;
$("#mybutton").click(function(){
theNum = theNum +1;
if(theNum%2 != 0)
{
$("div.mydiv").animate({width:500},1000);
}
else
{
$("div.mydiv").animate({width:0},1000);
}
});
</script>
</body>
</html>
NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.holder{
width: 400px;
height: 600px;
position: absolute;
right: 0;
}
div.holder div.formholder{
width: 0px;
height: 600px;
background-color: orange;
position: absolute;
right: 0;
}
#mybutton{
width: 50px;
height: auto;
position: absolute;
right: 0px;
}
</style>
<body>
<div class="holder">
<div class="formholder"></div>
<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>
<script type="text/javascript">
var my_val = 0;
$("#mybutton").click(function(){
my_val = my_val+1;
if (my_val%2 != 0)
{
$("div.formholder").animate({width:300},1000);
$("#mybutton").animate({right:300},1000);
}
else
{
$("div.formholder").animate({width:0},1000);
$("#mybutton").animate({right:0},1000);
}
});
</script>
</body>
</html>

You need to download the jquery ui plugin. all the effects are binding in a single file.
Link for Jquery UI Effects

Sorry I can't add a comment, but the button is fixed because it does not have class .widget

you missed the jQuery ui library.
And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').toggle(effect,'left', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
Updated
$(".widget-toggle-btn").click(function() {
var effect = 'slide';
var options = { direction: 'right' };
var duration = 500;
$('.widget').toggle(effect, options, duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
display: none;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
#popup-x{
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>

You don't need jQuery for this effect. Doing it with css transforms is more performant.
const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
box.classList.toggle('show')
})
body {
background-color: mediumseagreen;
}
button {
border: 1px solid #fff;
border-radius: 3px;
background: none;
padding: 5px;
margin: 5px;
}
.box {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: seagreen;
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease-in-out;
}
.show {
transform: scaleX(1);
}
<button>Toggle</button>
<div class="box">
I'm just a simple box!
</div>

You have an error in this row:
$('.widget').toggle(effect,'left', duration);
effect and duration are the property names.. you can't just copy it and hope that it's gonna work.
if you want to fix it, change it to:
$('.widget').toggle('left');
but if you want to study, read some jQuery tutorial
this one for example: http://www.w3schools.com/jquery/