Container is getting unnecessary margin

Container is getting unnecessary margin - javascript

My html is:-
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
rel="stylesheet"
type="text/css"
href="css/index.css"
>
<title>Best company in the USA</title>
</head>
<body>
<div class="menu">
<h2>MENU</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<nav role="navigation">
<div class="navWrap">
<h2 class="navClose"></h2>
<ul>
<li>Home</li>
<li></li>
<li>About us</li>
<li></li>
<li><a href="somelink.com">
Services</a></li>
<li></li>
<li>Locations</li>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</nav>
<div class="content">
<section class="first"></section>
</div>
</body>
</html>
My css is:-
#CHARSET "US-ASCII";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: none repeat scroll 0% 0% #D8262E;
}
::selection {
background: none repeat scroll 0% 0% #D8262E;
}
ul {
list-style: none outside;
clear: both;
}
.menu {
position: absolute;
float: right;
cursor: pointer;
float: right;
z-index: 1000;
top: 25px;
right: 20px;
}
.menu h2 {
display: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}
#media only screen and (min-width:768px) {
.menu {
top: 32px;
right: 40px;
}
.menu h2 {
display: inline-block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Karla", Arial, sans-serif;
font-size: 20px;
margin: 0px 5px 0px 0px;
text-transform: uppercase;
vertical-align: top;
}
}
.menu ul {
display: inline-block;
height: 30px;
margin: 0;
padding: 0;
vertical-align: top;
width: 25px;
margin: 0;
}
.menu ul li {
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
height: 3px;
margin: 3px 0;
width: 100%;
}
html,nav,section,div {
display: block;
vertical-align: baseline;
margin: 0px;
padding: 0px;
border: 0px none;
}
nav[role="navigation"] {
background: #00e000;
overflow: hidden;
padding: 0 40px;
position: absolute;
top: 0;
right: 0;
text-align: left;
width: 13em;
z-index: 10;
}
.menu,.content,.first {
-webkit-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97);
-webkit-transition-delay: 0s;
-moz-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
-o-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s
}
.first {
background-color: #d8262e;
/* background: no-repeat scroll center transparent; */
width: 100%;
/* height: 600px; */
top: 0;
z-index: 30;
}
.first:before {
height: 100%;
content: "";
display: inline-block;
vertical-align: middle;
background-color: #38262e;
}
.first:after {
background-color: #38262e;
}
.content {
/* margin-top: -8px;
margin-left: -7px;
margin-right:-7px; */
/* padding-top:-10px; */
}
content:before,content:after {
content: "";
display: table;
line-height: 0;
}
content:after {
clear: both;
}
Jquery is:-
$(document) .ready(function () {
windowHeight = 0.9 * $(window) .innerHeight();
$('.first').height(windowHeight);
$(window) .resize(function () {
windowHeight = 0.9 * $(window) .innerHeight();
console.log("height: " + windowHeight);
});
});
So, there is a peculiar problem I'm facing now. Somehow, I'm getting 8-10px or margin from each side in the content class. I have a solution for this. If I comment out the css in .content, it works for me.
But, it would be great to know if my naive solution can get better. Or if somebody would help me point out the root cause for the extra margin, it would be great.
Here is a jsfiddle for this: http://jsfiddle.net/kSdHU/
Thanks.

You should reset your elements.
Just add:
* { margin: 0; padding: 0; }
Demo

To make sure you never run into weird styling issues like this I suggest using a css reset. It will basically reset your browsers default styles so you aren't getting unwanted styling of elements. I normally use Eric Meyers Reset but there are many out there.

Related

css toggle nailboard effect

The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>

I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.

Submenu Closing Function Semi-working, Javascript

Im having an issue dealing with this function bug. What im trying to do is when a user clicks anywhere outside of the box, the box should close. Its working just for a few clicks, then it stops. At first the console has no errors, but when I do my first click, it reads cannot read property style of null. My confusion is that it works for a few clicks, then it stops. Any tips please!
window.addEventListener("mouseup", function (event) {
let box = document.querySelector(".sub-menu.open");
if (event.target != box && event.target.parentNode != box) {
box.style.display = "none";
}
});
<ul class="nav__links">
<div class="desktop__nav">
<li class="parent">
Product
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="parent">
Company
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="parent">
Connect
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</div>
.sub-menu {
display: none;
}
.sub-menu.open {
#include mobile {
display: flex;
flex-direction: column;
background-color: $footer-text;
width: 60vw;
margin: 0 auto;
color: $darkblue-headingtext;
border-radius: 5px;
position: relative;
left: 5px;
text-align: center;
}
position: absolute;
width: 10vw;
background-color: white;
color: black;
text-align: left;
display: flex;
flex-direction: column;
margin: 6px auto;
padding-left: 0.3rem;
border-radius: 5px;
}
The code works but then it stops after a few clicks

Answer
No JS required! Get that pesky language out of here and replace it with CSS, where we can use tabindex="0" on the dropdown parent element to allow us to use CSS :focus! With that, we can easily and reliably change styling based off the downtown parent focussed state, either
opacity: 0; pointer-events: none;
or
opacity: 1; pointer-events: all;
I hope this is what you were looking for and helped! Please comment if you'd like further explanation or need this in JS.
body {
font-family: sans-serif;
}
.dropdownbutton {
padding: 20px;
background: whitesmoke;
box-shadow: lightgray 0 12px 40px 0;
transition: all 0.3s;
}
.dropdownbutton:hover {
opacity: 1 !important;
background: lightgray;
}
.dropdownbutton span {
transition: 0.4s;
}
.dropdownparent:hover button span {
transform: rotate(180deg);
}
.dropdownparent {
position: relative;
width: fit-content;
transition: all 0.2s;
text-decoration: none;
user-select: none;
cursor: pointer;
border-radius: 4px;
z-index: 1000;
margin: 20px auto;
}
.dropdowncontentparent {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 1;
right: -13px;
top: 20px;
background: transparent;
padding: 12px;
transition: all 0.3s;
}
.dropdowncontentchild {
box-shadow: rgba(0, 0, 0, 0.15) 0 12px 22px 2px,
rgba(0, 0, 0, 0.055) 0 12px 12px;
border-radius: 4px;
overflow: hidden;
min-width: 200px;
width: max-content;
transition: all 0.3s;
background: var(--nav);
display: flex;
flex-direction: column;
}
.dropdowncontentchild:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0 12px 22px 2px,
rgba(0, 0, 0, 0.075) 0 12px 12px;
}
.dropdowncontentchild a {
text-decoration: none;
padding: 8px;
transition: all 0.3s;
color: black;
}
.dropdowncontentchild a:hover {
background: whitesmoke;
}
.dropdownparent:focus .dropdowncontentparent {
opacity: 1;
pointer-events: all;
top: 30px;
}
.dropdownparent:focus .dropdownbutton {
opacity: 0.6;
background: darkgray;
}
<div class="dropdownparent" tabindex="0">
<a class="dropdownbutton">Dropdown Button</a>
<div class="dropdowncontentparent">
<div class="dropdowncontentchild">
Link 1
Link 2
Link 3
</div>
</div>
</div>

Window resize function not working for header navigation

I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links.
There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.
Here is the codepen link i tried
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
#media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
Profile
Logout
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
Logo
</div>
<nav class="main-nav">
<ul>
<li>Label 1</li>
<li>Label 2</li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
Logo
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>

The problem is probably because this line only happens once:
var domWidth = $(window).width();
You need to place that line of code within your moveElements function, so that it continually checks the width of the window.
Additionally, I'd suggest not using 'appendTo' to move something. It is tricky to move pieces of the DOM around like this and you can get in a mess easily. Better to use CSS to move the display of something. Or, if you can't achieve it with CSS alone - maybe have two instances, and show/hide them as needed.

change $(window).width(); to $(document).width();
i tried and it worked

Modal Window with scroll bar

So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/

having trouble position my arrows with unslider jQuery plugin

I was following the documentation of unslider to develop a slidershow with dots and arrows.
The dots I already have working like I want, but the arrows I´m having some issues.
I´m not having sucess align the left arrow to the left of my slider and the right arrow to the right of my slide. I already did many tests but nothing is working.
Do you know how we can do this with unslider plugin?
What I´m trying:
http://jsfiddle.net/jcak/RJqw8/
My html:
<section id="banner-container">
<div class="banner">
<ul>
<li style="background-color:red; height:500px;">This is another slide.</li>
<li style="background-color:green; height:500px;">This is another slide.</li>
<li style="background-color:blue; height:500px;">This is another slide.</li>
</ul>
</div>
</section>
My CSS:
#banner-container
{
width:100%;
float:left;
}
.banner
{ position: relative;
overflow: auto;
width: 100%;
}
.banner li
{
list-style:none;
background-repeat:no-repeat;
background-size:cover;
}
.banner ul li
{
float: left;
}
.banner ul li img
{ width:100%;
height:220px;
}
.banner .dots
{ margin-left:50%;
bottom: 10px;
left: 0;
position: absolute;
right: 0;
display:none;
}
.banner:hover .dots
{
display:block;
}
.banner .dots li
{
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
display: inline-block;
height: 10px;
margin: 0 4px;
opacity: .4;
text-indent: -999em;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s; width: 10px;
}
.banner .dots li.active
{
background: #fff;
opacity: 1;
}
.arrows .prev {
position: relative;
top: -136px;
}
.arrows .next {
position: absolute;
right: 0;
top: 109px;
}
My jQuery:
$(function() {
$('.banner').unslider({
speed: 2000,
delay: 2000,
fluid: true,
dots: true,
arrows: true,
pause: true
});
});

The problem your facing is that your CSS code is not adressing the < a >s because they have a different className. Two options:
#1 - Switch the classNames in your CSS file:
.unslider-arrow.prev {...}
.unslider-arrow.next {...}
#2 - Switch the classes in the < a >s to the ones you're using in your CSS file:
However, when using the second option, you have to change the relations in your CSS to:
.arrow.prev {}
.arrow.next {}

Please check my unslider.com example html file:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Container is getting unnecessary margin - javascript

You should reset your elements. Just add: * { margin: 0; padding: 0; } Demo

To make sure you never run into weird styling issues like this I suggest using a css reset. It will basically reset your browsers default styles so you aren't getting unwanted styling of elements. I normally use Eric Meyers Reset but there are many out there.

Related

css toggle nailboard effect

Submenu Closing Function Semi-working, Javascript

Window resize function not working for header navigation

Modal Window with scroll bar

having trouble position my arrows with unslider jQuery plugin

Categories

Resources