I have created a small call back popup on the footer
http://bit.ly/1MThJ5w
The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.
It should only close and open when I click- CALL BACK
And also the close and open arrows are not showing as well
My code snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000);
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000);
}
});
});
CSS CODE:
/*Contact Styles
------------------------------------*/
.contact{
width:28%;
float:left;
padding-left:20px;
background:#001832;
color:#FFFFFF;
padding-top:15px;
padding-bottom:12px;
}
.contact h2{
font-size:27px;
font-family:impact;
font-weight:500;
color:#fff;
}
.contact form{
margin-top:6px;
}
.contact label{
font-size:10px;
}
.contact input{
width:210px;
color:#666;
}
.contact a{
text-decoration:none;
text-align: center;
background: none repeat scroll 0% 0% #0060A3;
color: #FFF;
display: inline-block;
padding: 12px 37px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
}
.contact .btn{
text-decoration:none;
text-align: center;
background: #0060A3;
color: #FFF;
display: inline-block;
padding: 10px 20px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
font-size:20px;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*Slider footer*/
.foot {
position:fixed;
width: 300px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -185px;
}
.slide-up
{
bottom: -445px !important;
}
.slide-down
{
bottom: -185px !important;
}
.call_back{
background:#405E51;
padding:10px;
margin-bottom:10px !important;
color:#fff;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
Your click event is bound to the wrong element. Change it to the "call_back" class instead.
Change this:
$('.foot').click(function() {
// your code
});
To this:
$('.call_back').click(function() {
// your code
});
Related
Both Brackets and Firefox call this a non-valid function. I'm a beginner. Can somebody tell my why? It's just about the js.
I want that if you hover over "timer" and click "jaar", the button that says "timer" now says "1 jaar".
function maand() {
HTMLDocument.getElementById("timer").innerHTML = "Hello JavaScript!";
}
html {
padding: 0;
margin: 0;
font-family: 'tahoma';
font-size: 14px;
}
body {
padding: 0;
margin: 0;
background-color: #f3f3ed;
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float:left;
border-radius:2px;
position:absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px
text-align: center;
}
.green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float:right;
position:relative;
margin-right: -54px;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position:absolute;
width:100px;
height:100px;
float:left
}
#timer {
color:black;
background:#eee;
border:none;
padding-left: 10px;
font-size:12px;
border-radius: 2px;
float:left;
padding: 12px 12px;
cursor:pointer;
list-style-type: none;
position:Relative;
margin-left:414px;
margin-top: -14px;
width:60px
}
#timer:hover {
color:white;
background:#027fed;
}
li {
background-color:#eee;
font-size:inherit;
width:150px;
position:relative;
float:left;
bottom:31px;
left:0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom:1px;
margin-left:431px;
}
li:hover{
cursor:pointer;
background-color:#027fed;
color:white
}
.list {
display:none;
list-style-type: none;
position:absolute !important;
}
.keuze:hover .list {
display:block
}
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list"><li>jaar</li>
<li id="jaar" id="maand" onclick="maand()">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
<li id="uur">uur</li></div>
</ul>
</div>
Use document instead of HTMLDocument.
document.getElementById("timer").innerHTML = "Hello JavaScript!";
Better yet, if you're only inserting text, use textContent, it's more reliable and more appropriate:
document.getElementById("timer").textContent = "Hello JavaScript!";
I solved the problem by using a script tag I found at W3schools.com:
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dom
thanks to all of the people who tried solving it.
Goodday all,
Please i need help.....
I have this html(ejs) view and i am dynamically rendering it with data i get...
it is working ok as a single div. when i have more than one data and iterate through it,the other part of the component works as expected by creating the number of divs it needs to display data. Now the div supposed to show on mouseover()popups on every div when i just touch the first div.
I can't seem to find the logic error...
(I am using express and node js)
please help
thank you in advance
below is my code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="/jquery/dist/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="bodydiv" > <div id="leftdiv" >
<% for (let a=0; a < 2; a++){%>
<ul class="innerdiv" >
<li class="arrowdiv">
<img src='images/orangearrow.png' alt="" id='imgdiv' class='imgdiv' data-
src='images/orangearrow.png' data-hover='images/whitearrow.png'/>
<ul class="popup" id="popup">
<li class="col1">1
</li><li class="col2">2
</li><li class="col3"> 3
</li><li class="col4">
<img src="images/blackarrow.png" alt="" class="col4"/>
</li>
</ul>
</li><li class="artdiv">
<ul>
<li class="contentdiv"><%= [a] %></li>
<li class="rcontentdiv">image</li>
<li class="ccontentdiv"><%= [a]%></li>
</ul></li>
</ul>
<%} %>
</div>
</div>
</form>
</body>
</html>
the jquery function for mouseover
<script>
$(".imgdiv").mouseover(function () {
$(this).attr('src', $(this).data("hover"));
$( ".popup" ).toggle('slow');
}).mouseout(function () {
$(this).attr('src', $(this).data("src"));
$( ".popup" ).hide();
});
</script>
the cSS
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
.comp1
{
margin-left: 20px;
}
.comp2
{
margin-left: 30px;
}
.comp3
{
margin-left: 25px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
.comp
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:100px;
margin-top: 10px;
}
.comp5
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:20px;
margin-top: 10px;
}
.comp6
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:10px;
margin-top: 10px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/* #font-face kit by Fonts2u (http://www.fonts2u.com) */
#font-face {font-family:"Intro-Inline";src:url("mywebfonts/Intro_Inline.eot?")
format("eot"),url("mywebfonts/Intro_Inline.woff") format("woff"),
url("mywebfonts/Intro_Inline.ttf")
format("truetype"),url("mywebfonts/Intro_Inline.svg#Intro-Inline") format("svg");
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*wrapper for navigation divs and <a>*/
.wrapper1{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align: left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight: lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align: left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left;
/* padding:0px;
margin:0px;
line-height: 0px;
font-size: 0px;
margin-left:0px;*/
white-space: nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv{
float:right;
padding-right: 50px;
margin-left: 30px;}
/*searchboxdiv*/
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items: center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
/* float:left;*/
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
/* background-color: rgba ();*/
background-color: black;
text-align: right;
vertical-align: middle;
color:white;
/* padding:5px 0px 20px 0px;*/
z-index: 99;
}
nav a
{
color: white;
/*font-weight: bold;*/
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
/* padding:0px 10px 0px 10px;*/
}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
/* margin-left: 5vh;*/
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
/* padding:0vh 100vh 0vh 0vh;*/
vertical-align: middle;
}
/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:80vh;
height:75vh;
float:left;
margin-bottom: 2vh;
/* border-width: 4px;
border-style: solid;
border-color: yellow;*/
}
#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
/* border-width: 4px;
border-style: solid;
border-color: yellow;*/
}
.topdiv
{
width:35vh;
height:35vh;
text-align: center;
vertical-align: middle;
background-color: gray;
/* border-width: 4px;
border-style: solid;
border-color: red;*/
color:black;
word-wrap: true;
font-size: 26;
float: right;
min-width: 25%;
}
.innertopdiv
{
width:35vh;
height:25vh;
text-align: center;
vertical-align: middle;
margin-top: 5vh;
background-color: rgb(58, 14, 14);
/* border-width: 4px;
border-style: solid;
border-color: red;*/
color:white;
word-wrap: true;
font-size: 26;
float: right;
min-width: 25%;
}
.bottomdiv
{
line-height: 100px;
text-align: center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color: black;
/* border-width: 4px;
border-style: solid;
border-color: orange;*/
float: right;
min-width: 25%;
}
/*div to multiply
tr{
}*/
.innerdiv
{
width:80vh;
height:20vh;
padding:0px;
list-style-type: none;
margin:0px;
float:left;
position:relative;
background-color: gray;
border-width: 1px;
border-style: solid;
display:inline-block;
border-color: black;
text-decoration: none;
list-style-type: none;
}
.artdiv
{
width:71vh;
height:19.5vh;
padding:0px;
top:2px;
list-style-type: none;
text-decoration: none;
margin:0px;
right: 5px;
float:right;
position:relative;
background-color: gray;
display:table-cell;
/* border-width: 1px;
border-style: solid;
border-color: black;
text-decoration: none;
list-style-type: none;*/
}
.artdiv:hover
{
width:71vh;
height:19.5vh;
padding:0px;
top:2px;
list-style-type: none;
text-decoration: none;
margin:0px;
right: 5px;
float:right;
position:relative;
background-color: #909090;
display:table-cell;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:23.3vh;
height:15vh;
list-style: none;
vertical-align: middle;
top:20px;
right: 30px;
/*margin-top:2vh;*/
text-decoration: none;
display:table-cell;
margin-right:5vh;
background-color: orange;
text-align: center;
text-decoration: none;
}
.arrowdiv
{
width:8vh;
height:19.9vh;
line-height: 1vh;
margin-right:1vh;
vertical-align: middle;
background-color: black;
display:inline-block;
text-decoration: none;
}
.arrowdiv:hover
{
width:8vh;
height:19.9vh;
line-height: 1vh;
margin-right:1vh;
vertical-align: middle;
background-color: #282828 ;
display:inline-block;
text-decoration: none;
}
.ccontentdiv
{
width:23.3vh;
height:15vh;
vertical-align: middle;
list-style: none;
top:20px;
/* right: 10px;*/
right:10px;
/*margin-top:2px;*/
margin-left: 1vh;
margin-right:8vh;
text-decoration: none;
/* background-color: red;*/
display:table-cell;
background-color: rgb(245, 239, 220);
text-align:center;
}
.rcontentdiv
{
width:23.3vh;
height:15vh;
list-style: none;
vertical-align: middle;
top:20px;
right: 20px;
/* margin-top:1vh;*/
margin-left: 1vh;
margin-right: 2vh;
background-color: beige;
text-align: center;
display:table-cell;
text-decoration: none;
}
.arrowtab
{
width:10vh;
height:20vh;
background-color: aqua;
float:left;
}
.normtab
{
width:70vh;
height:20vh;
background-color:olive;
float:right;
}
.newRow
{
width:79.5vh;
background-color: gray;
border-bottom: 1px;
border-bottom-color: black;
border-bottom-style: solid;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color: beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;
}
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
.popup
{
width:150px;
height:40px;
float: right;
font-size: 12px;
text-align: center;
position: relative;
margin:0px;
padding:0px;
/*background-color: yellow;*/
display: none;
vertical-align: middle;
margin-right:30px;
/*line-height: 10%;*/
/* border-width: 2px;
border-style: solid;
border-color: green; */
text-decoration: none;
list-style-type: none;
}
.popup:hover
{
width:150px;
height:40px;
float: right;
font-size: 12px;
text-align: center;
position: relative;
/*background-color: yellow;*/
display: table-cell;
vertical-align: middle;
margin-right: 30px;
margin:0px;
bottom: 150px;
/*line-height: 10%;*/
text-decoration: none;
list-style-type: none;
padding:0px;
}
ul>li>a{
text-decoration: none;
color:white;
}
.imgdiv
{
margin-top: 50px;
margin-left: 13px;
width:20px;
height:20px;
}
.imgcol
{
width:20px;
height:20px;
}
.col1
{
width:35px;
height:39.5px;
text-align: center;
line-height: 50%;
font-size: 12px;
vertical-align: middle;
display: table-cell;
background-color: black;
color:white;
border-right:1px solid white;
}
.col2
{
width:35px;
height:39.5px;
text-align: center;
display: table-cell;
line-height: 50%;
font-size: 12px;
vertical-align: middle;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:39.5px;
text-align: center;
display: table-cell;
font-size: 12px;
vertical-align: middle;
background-color: black;
color:white;
border-left: 1px solid white;
margin-bottom: 50px;
}
.col4
{
width:20px;
height:20px;
margin-bottom: 3px;
margin-top: 8px;
text-align: center;
display: table-cell;
}
The problem with your code is you are using
$( ".popup" ).toggle('slow');
this will target all .popup so all of them will show/hide
Given your current code, you could do
$(this).next().toggle('slow') and $(this).next().hide()
Simplified example here https://jsfiddle.net/L85ksjr6/1/ I am using .show() because it is easier to show it. As for the image it is obviously missing due to the path, I put alt text in there, in Firefox I can see the alt text and hover to see the effects, in case you are having trouble with it
You are using an element class as the selector for the mouseover. you need to use an element id.
A different jquery function must therfor be made for each div. this can be done systematiclly or manually. I recommend you start with manually.
Goodday all,
Please i am still getting a hang of node and express js.
I created dynamic div in html using javascript (in my public folder) and it works fine. i try to change the location of the javascript to make it more accessible by placing it in a route folder when i want to retrieve data from mongodb.
I render it and the dynamic divs don't show anymore.
I am guessing it has to do with the placement but i don't know where to start.
please can somebody help me with this logic
where the issue is, is with the javascript function multidivs(); which works fine outside express.
Thank you
i placed multidivs() this way below
<form action="/routes/top100" method="POST" >
<div id="bodydiv">
<div id="leftdiv" >
<script type="text/javascript"> ***multidivs();*** </script>
</div>
</div>
</form>
for some reason it works well with netbeans IDE
below are the codes
HTML
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="/routes/top100.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<div id="wrapper">
<div id="container">
<nav>
<div class="logodiv">logo </div>
charts
news
music
<a href=""><img height="20" src='/images/fblogo.png' alt="" class=''
width="20"/></a>
<a href=""><img height="20" src='/images/Instagram.png'
alt="" class='' width="20"/></a>
<a href=""><img height="20" src='/images/twitter.png'
alt="" class='' width="20"/></a>
<a href=""><img src='/images/search.png' alt=""
class='searchicon'/></a><!--
-->
<div class="menudiv"> <a href=""> <img
src='/images/menu.png' alt="" class='icons'/> </a>
</div>
</nav>
<form action="/routes/top100" method="POST" >
<div id="bodydiv"> <div id="leftdiv" > <script
type="text/javascript" >multidivs();</script></div>
<!--<script type="text/javascript" > multidivs();
</script>-->
<div id="rightdiv">
<div class="topdiv"><div class="innertop"> Top100
news</div> </div>
<div class="bottomdiv"><div class="innerbottom">
Highlights</div> </div>
</div></div>
</form>
</div>
</div>
</body>
</html>
the css
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*wrapper for navigation divs and <a>*/
.wrapper1
{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align: left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight: lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align: left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left;
white-space: nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv
{
float:right;
padding-right: 50px;
margin-left: 30px;
}
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items: center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
background-color: black;
text-align: right;
vertical-align: middle;
color:white;
z-index: 99;
}
nav a
{
color: white;
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
vertical-align: middle;
}
/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:60vh;
height:75vh;
float:left;
}
#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
}
.topdiv
{
width:35vh;
height:35vh;
text-align: center;
vertical-align: middle;
background-color: gray;
float: right;
min-width: 25%;
}
.bottomdiv
{
line-height: 100px;
text-align: center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color: black;
float: right;
min-width: 25%;
}
/*div to multiply*/
.innerdiv
{
align-content: center;
align-self: center;
width:80vh;
height:20vh;
background-color: gray;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:20vh;
height:15vh;
margin-top:2vh;
display:inline-block;
float:left;
margin-left:1vh;
}
.arrowdiv
{
width:8vh;
height:19.8vh;
margin:0vh;
line-height: 2vh;
background-color:#131212;
display:inline-block;
float:left;
}
.ccontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
display:inline-block;
float:left;
}
.rcontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: beige;
text-align: center;
float:right;
display:inline-block;
float:left;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color: beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;
}
.imgdiv
{
margin-top: 50px;
margin-left: 10px;
width:20px;
height:20px;
}
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
#popup
{
}
.popup
{
width:135px;
height:40px;
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
.col1
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-right:1px solid white;
}
.col2
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-left: 1px solid white;
}
.img
{
max-width:180px;
}
the javascript code
/*define function for multidivs*/
var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
//attach arrow image
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);
domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);
columndiv.appendChild(popup);
}); }
function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
}); }
}
I am making a simple website, and now I'm working on the login page. It looks like this (run in full page, otherwise some parts miss):
html, body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #2196F3;
height:100%;
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid {
-webkit-box-shadow: 0 0 0 30px #2196F3 inset;
-webkit-text-fill-color: white !important;
}
.msg {
font-size: 15px;
display: inline-block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
background-color: #ffc107;
border-radius: 2px;
color: white;
margin-bottom: 3em;
}
.spacer {
font-size: 15px;
display: block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
border-radius: 2px;
color: white;
margin-top: 2em;
margin-bottom: 3em;
}
form {
display: block;
position: absolute;
width: 100%;
height: 80%;
left: 0;
margin-top: -100px;
text-align: center;
animation: swipein 0.5s forwards;
}
#keyframes swipein {
from{top:30%;opacity: .8}
to{top:20%;opacity: 1}
}
input, button {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
outline: 0;
color: white;
}
.group {
display: inline-block;
position:relative;
margin-bottom: 20px;
}
.group:nth-of-type(1){
margin-top: 15%;
}
input {
font-size:21px;
padding:10px 10px 10px 5px;
display:block;
width:250px;
border:none;
border-bottom:1px solid white;
border-radius: 0;
background-color: transparent;
color: white;
}
input:focus { outline:none; }
label {
color: white;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color: white ;
}
.bar { position:relative; display:block; width:265px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:white;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
li {
list-style-type: none;
padding: 10px;
}
a {
color: white;
padding: 10px;
}
button {
-webkit-appearance: none;
padding: 12px 65px 12px 65px;
background-color: white;
color: #2196F3;
border: none;
border-radius: 2px;
font-size: 18px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
button:hover {
cursor: pointer;
}
#media screen and (min-width: 800px){
logo {
top: 15%;
}
.logo span {
font-size: 2em;
}
.logo h2 {
font-size: 2.7em;
}
.group:nth-of-type(1){
margin-top: 25%;
}
form {
width: 750px;
top: 20%;
left: calc(50% - 375px);
}
input{
width:350px;
}
.bar {
width:365px;
}
}
<title>connerdassen.ddns.net</title>
<script>
function test() {
var button = document.getElementById('button');
button.click();
alert('Click event simulated!');
}
</script>
<body id='body'>
<form id="form" method="POST" action="http://connerdassen.ddns.net/login.php">
<p>
</p><div class="group">
<input id='input' type="text" name="uid" required="">
<span class="bar"></span>
<label>Username</label>
</div><p>
</p><div class="group">
<input id='input' type="password" name="pwd" required="">
<span class="bar"></span>
<label>Password</label>
<li><a href='/signup'>Sign up</a></li>
<button>Log In</button>
</div><br>
</form>
<script>
if((window.location.href).indexOf('?') != -1) {
var afterURL = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var msg = (afterURL.split('msg='))[1];
msg = decodeURIComponent(msg);
}
if(typeof msg !== "undefined" && msg !== "undefined" && msg !== ""){
var form = document.getElementById("form");
var oldForm = form.innerHTML;
form.innerHTML = '<div class="spacer"></div><div class="msg"><span>' + msg + '</span></div>' + oldForm;
}
</script>
</body>
As you see the labels 'Username' and 'Password' are animated up when selecting the input. But when google chrome auto-fills them, the username is automatically animated upwards, but the password label stays, as you can see here. After clicking any key on the keyboard/ mouse, the label is animated up immediately. I want the password to go up immediately. How would I do this?
I am working on an angular js app that consists of a swipeable carousel populated with data taken from a json array (which is held in a js var). However, I have run into an issue; a large amount of white space appears at the bottom of the page. I cannot seem to determine the cause of this extra white space. I have padding and margins set to 0 in the css. When I inspect the element the white space appears to be outside of the html so it seems almost as if its not even being added by a property of one of my elements.
heres my css but there is a full plunk linked at the bottom as well
html, body, #carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
#link{
position: absolute;
bottom:20px;
right:20px;
}
#carousel {
background: white;
width: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform-style: preserve-3d;
}
#carousel ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel ul {
-webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel ul {
position: relative;
}
#carousel li {
float: left;
width:100%; -webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
}
#carousel li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
#carousel li.pane1 {
background: #fff;
}
#carousel li.pane2 {
background: #fff;
}
#carousel li.pane3 {
background: #fff;
}
#carousel li.pane4 {
background: #fff;
}
.january {
background-color:#ffe0b0;
height:8.33%;
}
.february {
background-color:#b0f7ff;
height:8.33%;
}
.march {
background-color:#e0b0ff;
height:8.33%;
}
.april {
background-color:#ffb9b0;
height:8.33%;
}
.may {
background-color:#b0cfff;
height:8.33%;
}
.june {
background-color:#b0ffe0;
height:8.33%;
}
.july {
background-color:#ffb0f7;
height:8.33%;
}
.august {
background-color:#ceffb0;
height:8.33%;
}
.september {
background-color: #ffb0cf;
height:8.33%;
}
.october {
background-color:#bab0ff;
height:8.33%;
}
.november {
background-color:#f6ffb0;
height:8.33%;
}
.december {
background-color: #b0f6ff;
height:8.33%;
}
.day {
font-family: 'Playfair Display Regular', serif;
color:#000;
text-align: center;
}
.titletext {
font-family: 'Playfair Display Bold', serif;
margin-left:20px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
display:inline-block;
}
.title {
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-top: 0px;
text-align: initial;
}
.quote {
font-family: 'Playfair Display Italic', serif;
font-style: italic;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.attribution {
font-family: 'Playfair Display Regular', serif;
font-size:10px;
margin-left:25px;
margin-right: 20px;
line-height:1.2em;
}
.textt {
font-family: 'Playfair Display Regular', serif;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.date {
font-family: 'Playfair Display Regular', serif;
margin-left:15px;
padding-top: 10px;
}
#circleJan {
border-radius: 50%;
border: 3px solid #ffe0b0;
background-color:#ffe0b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleFeb {
border-radius: 50%;
border: 3px solid #b0f7ff;
background-color:#b0f7ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMarch {
border-radius: 50%;
border: 3px solid #e0b0ff;
background-color:#e0b0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleApril {
border-radius: 50%;
border: 3px solid #ffb9b0;
background-color:#ffb9b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMay {
border-radius: 50%;
border: 3px solid #b0cfff;
background-color:#b0cfff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJune {
border-radius: 50%;
border: 3px solid #b0ffe0;
background-color:#b0ffe0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJuly {
border-radius: 50%;
border: 3px solid #ffb0f7;
background-color:#ffb0f7;
width: 20px;
height:20px;
margin-left:15px;
}
#circleAug {
border-radius: 50%;
border: 3px solid #ceffb0;
background-color:#ceffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleSept {
border-radius: 50%;
border: 3px solid #ffb0cf;
background-color:#ffb0cf;
width: 20px;
height:20px;
margin-left:15px;
}
#circleOct {
border-radius: 50%;
border: 3px solid #bab0ff;
background-color:#bab0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleNov {
border-radius: 50%;
border: 3px solid #f6ffb0;
background-color:#f6ffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleDec {
border-radius: 50%;
border: 3px solid #b0f6ff;
background-color:#b0f6ff;
width: 20px;
height:20px;
margin-left:15px;
}
.bg{}
.main{height:100%}
.heading{
font-family: 'Playfair Display Bold', serif;
text-align:center;
margin-top: 10px;
font-size:18px;
}
.stepOne{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwo{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepThree{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFour{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFive{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSix{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSeven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEight{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepNine{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTen{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEleven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwelve{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
plunker
Your #carousel li is currently being set at a height: 100% which is causing the extra space in your first pane.
I would also strongly advise refactoring your CSS to more concise organization since I noticed a lot of repetitive code. The simplest example of this is .stepOne through .stepTwelve which all contain the same styles. Collapse that into one class and apply it across all the elements needed.
If you're referring to the white space after the pane1 element, you can get rid of of it by setting its height and min-height to initial:
#carousel li.pane1 {
height: initial;
min-height: initial;
background: #fff;
}
Plunker
I should mention, in a lot of instances you're using classes when you should be using IDs. If there's only one .january element for example, set it as an ID rather than a class, as classes are meant for grouping multiple elements. The same goes for your pane[x] classes. You should also merge your identical styles, e.g.
#pane2, #pane3, #pane4 {
background: #fff;
}
Or if you simply give them all the same class:
.pane {
background: #fff;
}