Expert Help

Developer
Albert Miller
Size
4,064 Kb
Views
38,456
  1. Expert Help Previews
  2. Expert Help HTML Codes
  3. Expert Help CSS Codes
  4. Expert Help JS Codes

How do I make an expert help?

Material Design Concept of an expert help button and the close button that animates in afterwards in addition to form fields showing and hiding.. What is a expert help? How do you make a expert help? This script and codes were developed by Albert Miller on 23 August 2022, Tuesday.

Expert Help Previews
IQ Test

Expert Help - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expert Help</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bigbox"> <div class="circle"></div> <h2 class="header">Cheeseburgers</h2> <div class="animationBox"> <div class="form"> <label>Type of Cheese</label> <input type="text" /> <label>Type of Bun</label> <input type="text" /> </div> <div class="expertHelp"> <h3>Expert Help</h3> <p> Try-hard typewriter chambray, Vice ennui cold-pressed hashtag +1 bitters Portland Thundercats Kickstarter tilde mustache. Bushwick jean shorts plaid, brunch listicle Helvetica sustainable XOXO Neutra pour-over quinoa gastropub chillwave. Bespoke trust fund hella Banksy, Tumblr twee selfies. Gastropub selvage paleo swag kitsch Neutra. Lo-fi viral butcher, selfies skateboard Brooklyn keytar kitsch cold-pressed street art Tumblr stumptown Helvetica synth. Fap Pinterest hella letterpress, farm-to-table small batch taxidermy bitters stumptown retro scenester food truck sriracha organic salvia. Chia actually XOXO food truck, Wes Anderson keffiyeh tousled Banksy slow-carb bespoke typewriter direct trade squid fanny pack scenester. </p> </div> </div>
</div>
<!--<i class="fa fa-spin fa-circle-o-notch"></i>--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Expert Help - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.bigbox { position: relative; display: block; width: 48em; background-color: #727272; font-family: 'Roboto'; color: #FFF; padding: 2em 3em; overflow: hidden; box-sizing: border-box; margin: 0 auto; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.header { margin-top: 0;
}
input { width: 100%; margin-bottom: 2em; border: 2px solid #212121; border-width: 0 0 2px 0; background-color: transparent; box-sizing: border-box; outline: 0; color: #FFF; font-size: 1em; font-family: 'Roboto';
}
input:focus { border-bottom: 2px solid #03A9F4;
}
.circle { position: absolute; top: 2em; right: 3em; padding: 4px 4px; background-color: #448AFF; display: table-cell; color: #FFF; border-radius: 40px; font-family: 'Roboto'; transform: none; transition: transform 0.4s, background-color 0.4s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); height: 1.3em; width: 1.3em; text-align: center;
}
.circle:before { content: '?'; transition: content 0.4s;
}
.circle.close { transform: rotate3d(0, 0, 1, 180deg); background-color: #D32F2F;
}
.circle.close:before { content: 'X';
}
.circle.load:before { font-family: 'FontAwesome'; content: '\f1ce'; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation: fa-spin 1s infinite linear; animation: fa-spin 1s infinite linear;
}
.animationBox { position: relative;
}
.expertHelp { overflow: overlay; transition: left 0.4s; left: 50em; position: absolute;
}
.expertHelp.open { left: 0;
}
.expertHelp p { overflow-y: scroll;
}
.expertHelp h3 { margin-top: 0;
}
.form { right: 0; transition: right 0.4s; position: absolute;
}
.form.close { right: 50em;
}
.form, .expertHelp { width: 42em;
}

Expert Help - Script Codes JS Codes

var state = 0;
$('.circle').on('click', function(){ if(state === 0){ $('.circle').addClass('close'); $('.form').addClass('close'); $('.expertHelp').addClass('open'); state++; } else{ $('.circle').removeClass('close'); $('.form').removeClass('close'); $('.expertHelp').removeClass('open'); state = 0; }
});
$(document).ready(function(){ var formHeight = $('.form').height(); $('.animationBox').css('height', formHeight); $('.expertHelp').css('height', formHeight);
});
Expert Help - Script Codes
Expert Help - Script Codes
Home Page Home
Developer Albert Miller
Username SinceSidSlid
Uploaded August 23, 2022
Rating 3
Size 4,064 Kb
Views 38,456
Do you need developer help for Expert Help?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Albert Miller (SinceSidSlid) Script Codes
Name
Scroll Lock
Work Day Clock
Chart Loading Animation
A Pen by Albert Miller
Material Toggle Box Thing
Bad Instagram Photos
Dynamic Image Cover
Material Floating Action Button
Material Tabs
Material Calendar
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!