dynamic divs not displaying in express js - javascript

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);
}); }
}

Related

html/css gallery div - how to display text in on line

Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
Unfortunately I don't know why but I can't insert all the code.
Here is Currently result:
except result:
Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
here is my code:
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
padding: 2px;
text-align: right;
color: black;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
margin-top:5px;
overflow: hidden;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
</style>
<! Produkt 1 -->
<div class="gallery">
<div class="desc1">#BOX1</div>
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" alt="Cinque Terre" width="800" height="600">
<div class="desc"><div id="clock1">timmer</div><div class="desc3">KARL LAGERFELD</div><div class="desc4">Zestaw 3x Polo</div><div id="pricebox"><s>309,00zł</s> <font color="red">198,00zł</font></div><button class="button button4">Szybki zakup</button></div>
</div>

Adding width:50%; float:left; to each of the first two div elements is one way to solve it. And adding a common class to the second row with width:33%; float:left; puts the second row items together (after moving the button up into the same div as the prior two items).
Also, the font tag and the s element are deprecated. Styling should be done with CSS.
.red { color:red; }
.right { text-align:right; }
.third { display:inline-block; width: 33%; float:left; font-size:1.5em;}
.strike { text-decoration:line-through; }
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
text-align: right;
color: black;
width:50%;
float:right;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
overflow: hidden;
width:50%;
float:left;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
<div class="gallery">
<div class="desc1">#BOX1</div>
<a href="img_5terre.jpg" target="_blank" rel="noopener">
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png"
alt="Cinque Terre" width="800" height="600">
</a>
<div class="desc">
<div id="clock1">timer</div>
<div class="desc3">KARL LAGERFELD</div>
<div class="desc4">Zestaw 3x Polo</div>
<div id="pricebox">
<span class="third strike">309,00zł</span>
<span class="red third">198,00zł</span>
<span class="third right"><button class="button button4">Szybki zakup</button></span>
</div>
</div>
</div>

My HTML div tag won't include the list and also won't show the bottom border

My div tag named 2nd-bar won't show up below navigation bar and also won't show bottom border and due to that also my list elements won't come inside it.
I am new to HTML and CSS so would be glad to get some help, thank you here is my code.
<htmL>
<head>
<title>Lawyer Up</title>
</head>
<link rel="shortcut icon" type="image/png" href="file:
/User/rahul%20saini/Desktop/Testproject1/index.png"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen"
rel="stylesheet">
<style type = "text/css">
body{
/* background-color:#F8B195; */
}
#navibar{
position: relative;
width: 100%;
height: 45px;
/* background-color: #355C7D; */
padding: 0px;
margin: 0px;
}
#logo{
width:45px;
height: 45px;
float: left;
padding-right:4px;
}
.give-border{
border-bottom-color: darkgrey;
border-bottom-style: inset;
border-bottom-width: medium;
width: 1px;
height: 2px;
}
#searchlogo{
float:right;
width: 25px;
height: 25px;
position: absolute;
top: 2px;
left: 160px;
}
.border{
float:right;
position: absolute;
top: 0px;
left: 154px;
border-left-color:darkslategrey;
border-left-style: solid;
height: 30px;
border-left-width: thin;
}
#loginlogo{
float:right;
position: relative;
top:-24px;
left: -10px;
border-left-color: darkslategray;
border-left-style: dotted;
}
.bordertop{
float: left;
border: 1px;
border-left-color: #302929;
border-left-style: solid;
height: 45px;
padding-left: 4px;
}
#thename{
font-size: 2em;
font-weight: bolder;
font-family: 'oxygen',sans-serif;
color: #000033;
padding-left: 3px;
}
#2ndbar{
float: left
margin: 0px;
width: 20px;
height: 20px;
background-color: antiquewhite;
border-bottom-color: dimgrey;
border-bottom-style: double;
border-bottom-width: thin;
}
#navibar a{
float:right;
font-size: 150%;
color:#F67280;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
a:hover{
font-size: 150%;
text-decoration: underline;
color: wheat;
background-color: skyblue;
background-size: contain;
transition-property: background;
transition-duration: 0.8s;
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
font-size: 50px;
font-weight: 100;
font-family: sans-serif;
color: brown;
}
.input{
position:relative;
left: 1100px;
width: 185px;
height: 30px;
top:6px;
}
.input input{
position: relative;
height: 30px;
width: 150px;
top:-45px;
background-color: #E9E9E9;
}
ul{
list-style-type: none;
}
.list{
float:left;
padding-right: 10px;
border-right-style: solid;
border: 1px;
border-right-width: thin;
border-right-color: aqua;
}
</style>
<body>
<div id="fullpage">
<div id="navibar" class="give-border">
<img id="logo" src="logo.png">
<div id="thename" >
<span class="bordertop" >Lawyer Up</span>
</div>
<div class="input">
<form>
<input type="search" placeholder="Search">
</form>
<div class="border">
</div>
<img id="searchlogo" src="search.png">
</div>
<div id="loginlogo">
<a href="login.html">
<img src="login.png">
</a>
</div>
</div>
<div id="2ndbar">
<ul>
<li class ="list">name</li>
<li class="list">another name</li>
<li class="list">one more name</li>
</ul>
</div>
<!-- <h1> Welcome </h1> -->
</div> <! div=fullpage >
</body>
</htmL
the problem is the the 2nd bar which isn't working Idk why, I have made some changes but I still can't get it why, I think it might be due to the positions I gave for divs, but I tried that too so it would be a great help if anyone can help me or tell me what am I doing wrong here.

In HTML you cannot begin an id with a number. Try changing the id from 2ndbar to bar2 and your styles should affect it from that point.

This seems not to be a valid function. Why?

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.

iterating through a div component without having the .mouseover() function repeated

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.

Minimize on click in javascript

I have a notification block at the lower right end of my webpage which is fixed. I have designed it using HTML and CSS. Here is the link.. http://jsfiddle.net/wp5Lfjwq/
Now if the user click's on 'X', I want the notification to get resized (say for example, height: 50px and width: 50px) and only show the 'Some Title' and do not want the whole notification box to disappear.
By using toggle in java-script I can make it disappear but how do I resize it?
Here is the HTML:
<div class="notification">
<span class="notificationtitle">
<strong>Some Title</strong>
<span style="float: right">X</span>
</span>
</div>
Here is the CSS:
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
Any help would be appreciated...

Your Answer is ...
$(document).ready(function() {
$(".show span").click(function() {
$(".show").css( 'display' , 'none' );
$(".hide").css( 'display' , 'block' );
});
$(".hide strong").click(function() {
$(".hide").css( 'display' , 'none' );
$(".show").css( 'display' , 'block' );
});
});
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.show{
display:block;
}
.hide{
display:none;
width:150px;
height:30px;
cursor:pointer;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.notificationtitle span{
float:right;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification show">
<span class="notificationtitle"><strong>Some Title</strong><span>X</span></span>
</div>
<div class="notification hide">
<span class="notificationtitle"><strong>Some Title</strong></span>
</div>

Use animate()
$('.notificationtitle').on('click',function(){
$('.notification').animate({width:'50px',height:'46px'});
})
Updated Demo

Try this :
$('.notificationtitle span').click(function(){
$(this).closest('.notification').css({width:'50px',height:'50px'});
});
DEMO

demo - http://jsfiddle.net/wp5Lfjwq/11/
toggle a class with width and height
$('.notificationtitle').on('click', function () {
$('.notification').toggleClass('hide');
})
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
transition: all .5s linear;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font:"HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.hide {
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification"> <span class="notificationtitle"><strong>Some Title</strong><span style="float: right">X</span></span>
</div>

Categories

Resources