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.
Related
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 creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/
i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.
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>
I want to go to a specific section of my website when I click on the link in the menu bar for that section of the website, so you do not have to scroll through all the content, but to have links to the different sections. I've read that you can do this with jQuery and make an animation for it so that the page can smoothly go to that section of the website.
Here's the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
</script>
</head>
<body>
<header>
<div id="title">
<h1 class="headertext">My Test Website</h1>
</div>
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
</div>
</header>
<div class="hide">
</div>
<div id="container">
<div id="leftmenu">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
<div id="triangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1></br>
Picture slideshow
</br>
</br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div class="borderbottom"></div>
</div><!--content div-->
</div>
</body>
</html>
And here is the CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #f4f4f4;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -15px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#leftmenu{
position: fixed;
margin-top: 123px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 350px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#triangle{
margin-top: 12px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
text-align: left;
margin-left: 100px;
width: 1000px;
padding-top: 150px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
.borderbottom{
border: 6px solid rgba(0,0,0,0.8);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 1000px;
position: fixed;
margin-top: 20px;
}
If you have jQuery loaded you could try like this, no plugin required just jquery will do...
HTML:
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
........all the menu items-------
</ul>
JS:
$('#menubar ul li a').on('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
event.preventDefault();
});
This is the working fiddle
The standard way is to use named anchors:
section
This link will navigate to index.html and the browser will scroll to the element with ID or NAME section if it exists, f.ex:
<section id="section"></section>
It also works for the name attribute, but it’s rarely used these days:
<section name="section"></section>
If you want jQuery to animate this behaviour, it’s a good idea to start with the standard implementation above, then add some enhanced functionality, f.ex:
$('#menubar').on('click', 'a', function(e) {
e.preventDefault(); // prevents default scrolling
var y = $(this.hash).offset().top; // grabs the #id element offset location
$('html,body').animate({scrollTop: y}); // animate the scroll
});
To scroll to a particular element on the page, the element must have an ID :
<a class="scroll" href="#myElement">Link</a>
<div id="myElement"></div>
This anchor will make the document scroll to the top of the element #myElement.
Then animate it with JS :
$('a.scroll').click(function(){
var href = $(this).attr('href');
var dest = $(href).offset().top;
$('html, body').animate({
scrollTop: dest;
}, 1000);
return false;
});
check out the scrolTo in jquery
take a look at this : http://demos.flesler.com/jquery/scrollTo/
Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!
I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.
From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?
Any help would be greatly appreciated. an example of what I want to do is here at
http://www.andersenwindows.com/
and here is what I have so far:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >About</a></li>
<li><a href="#" >Home</a>
<ul>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width: 970px;
height:40px;
background: #f1f2f3;
color: #fff;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
Thanks,
C
I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/
Here's the JS... it's pretty generic but you should be able to edit to suit.
$(document).ready(function () {
$('a').on('click', function(event){
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(this).closest('li').find('ul').slideToggle();
});
});
});
Are you looking for something like:
$('#div1').click(function() {
if( /* check if already visible */)
$('div1').toggle(); //also do-able with $('div1').slideToggle();
$('div2').hide();
}
but first you would hide all your divs first and check the current div