I have very little experience with html and styling. I'm using jsplumb to build an interactive server-application diagram. There would some applications and they would be connected to same/different servers. The servers can also be connected to each other.
What I want to do is highlight all the server connected to the application (directly and indirectly) on hovering on the application div.
It looks something like this
I can't use css to do this as the same servers can be connected to multiple application.
I tried using some javascript and jquery (before end html tag)but can't get it to work. I would appreciate any suggestions on this as I'm new to this.
.demo {
/* for IE10+ touch devices */
touch-action:none;
}
.flowchart-demo .window {
border: 1px solid green;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
width: 80px;
height: 80px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica, sans-serif;
padding: 0.5em;
font-size: 0.9em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.application {
border: 2px solid brown;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
width: 120px;
height: 120px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica, sans-serif;
padding: 0.5em;
font-size: 0.9em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.flowchart-demo .window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity: 0.6;
}
.flowchart-demo .active {
border: 1px dotted green;
}
.flowchart-demo .hover {
border: 1px dotted red;
}
#flowchartWindow1 {
top: 34em;
left: 5em;
}
#pfc {
top: 2em;
left: 2em;
}
#anser {
top: 2em;
right: 22em;
}
#flowchartWindow2 {
top: 11em;
left: 36em;
}
#flowchartWindow3 {
top: 37em;
left: 48em;
}
#flowchartWindow4 {
top: 23em;
left: 22em;
}
#flowchartWindow5 {
top: 30em;
right: 16em;
}
#flowchartWindow6 {
top: 37em;
right: 40em;
}
#flowchartWindow7 {
top: 32em;
right: 1em;
}
.flowchart-demo .jtk-connector {
z-index: 4;
}
.flowchart-demo .jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
z-index: 21;
cursor: pointer;
}
.flowchart-demo .aLabel {
background-color: white;
padding: 0.4em;
font: 12px sans-serif;
color: #444;
z-index: 21;
border: 1px dotted gray;
opacity: 0.8;
cursor: pointer;
}
.flowchart-demo .aLabel.jtk-hover {
background-color: #5C96BC;
color: white;
border: 1px solid white;
}
.window.jtk-connected {
border: 1px solid green;
}
.jtk-drag {
outline: 4px solid pink !important;
}
path, .jtk-endpoint {
cursor: pointer;
}
.jtk-overlay {
background-color:transparent;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<title>jsPlumb 2.3.0 demo - flowchart</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
<link rel="stylesheet" href="flow.css">
</head>
<body data-demo-id="flowchart">
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="window jtk-node" id="flowchartWindow1"><strong>Server1</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow2"><strong>Server2</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow3"><strong>Server3</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow4"><strong>Server4</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow5"><strong>Server5</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow6"><strong>Server6</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow7"><strong>Server7</strong><br/><br/></div>
<div class="application" id="app1"><strong>App1</strong><br/><br/></div>
<div class="application" id="app2"><strong>App2</strong><br/><br/></div>
</div>
</body>
<script>
var elm = document.getElementById("flowchartWindow6");
function changeColor(color) {
elm.style.backgroundColor = color;
}
var elms = document.getElementById("app2");
elms.onmouseover = function() {
changeColor("yellow");
};
}
</script>
<script>
$(document).ready(function(){
$('#app2').hover(
function() {
$('#flowchartWindow7').hide()
},
);
})
</script>
<script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="flow.js"></script>
</html>
Check out sibling selectors in CSS.
https://css-tricks.com/almanac/selectors/g/general-sibling/
https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
So if you have divs
Then the CSS would look something like.
#maindiv:hover ~ #otherdiv{
color:red;
}
Related
The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>
I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.
I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
in the jsfiddle you will find a header
with a search icon which when pressed, will make a search bar appear under the header. but the problem is that it appears instantly. I want the header to smoothly expand and the search bar to fade in. I tried but couldn't get it to work.
jsfiddle: https://jsfiddle.net/HussamAlhassan/zwg0drne/15/
here's the code:html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
</head>
<div style="position: fixed; width: 100%; box-shadow: 0px 1px grey; transition: .4s ease-in-out;" id="headershell">
<div id="header">
<div id="searchicondiv">
<i class="fas fa-search searchicon"></i>
</div>
<div id="namediv">
<h1 id="name">Header</h1>
</div>
<div id="logindiv">
<a href="#">
<h2 id="login">Login</h2>
</a>
</div>
</div>
<div id="hiddensearch" class="Hidden" style=" background-color: black;">
<div style="width: 100%;">
<input id="search" placeholder="Search..">
</div>
</div>
</div>
css:
div#header {
width: 100%;
background-color: rgba(0, 0, 0, 1);
display: flex;
z-index: 1000000;
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
div#header #name {
color: white;
font-family: orbitron;
text-align: center;
font-size: 1.5em;
margin-left: 5%;
}
div#header #login {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-align: center;
font-size: 1em;
transition: .2s ease-in-out;
padding: 0px;
}
div#headershell .searchicon {
color: white;
margin: auto;
margin-left: 50%;
transition: .2s ease-in-out;
}
div#headershell .searchicon:hover,
#login:hover {
cursor: pointer;
opacity: 0.5;
}
div#namediv {
float: left;
width: 33.4%;
}
div#searchicondiv {
width: 33.3%;
margin: auto;
transition: .2s ease-in-out;
}
div#logindiv {
width: 33.3%;
float: left;
margin: auto;
}
div#hiddensearch {
z-index: 100;
transition: 0.4s ease-in-out;
padding-bottom: 1em;
height: inherit;
background-color: rgba(0, 0, 0, 1);
transition: .3s ease-in-out;
}
div#hiddensearch #search {
padding: .4em;
width: 80%;
margin-left: 10%;
margin-right: 10%;
border-radius: 5px;
margin-top: -5%;
color: white;
background-color: rgba(0, 0, 0, 1);
border: 2px white solid;
transition: 0.3s ease-in-out;
}
div#hiddensearch #search:focus {
text-decoration: none;
color: black;
background-color: white;
border: 2px black solid;
outline-width: 0px;
}
.headernotHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
.notHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
opacity: 1;
display: flex;
}
.Hidden {
display: none;
transition: .3s ease-in-out;
}
js:
$(document).ready(function() {
// jQuery methods go here...
$(".searchicon").click(function hidesearch() {
if ($("#hiddensearch").hasClass("Hidden")) {
$("#hiddensearch").removeClass("Hidden");
$("#hiddensearch").addClass("notHidden");
$(".searchicon").removeClass("fa-search");
$(".searchicon").addClass("fa-times");
$("#headershell").addClass("headershellHidden");
} else {
$("#hiddensearch").removeClass("notHidden");
$("#hiddensearch").addClass("Hidden");
$(".searchicon").removeClass("fa-times");
$(".searchicon").addClass("fa-search");
$("#headershell").removeClass("headershellHidden");
}
})
});
edit: solutions that consist of setting the opacity to 0 wont work because you can still click on the input which isnt what i want
Instead of display: none, use opacity: 0; on the CSS for .Hidden
https://jsfiddle.net/k1yg95gk/2/
I can see you are using jQuery.
Instead of using display: none; you can use the jQuery .hide() and .show().
You can use it this way :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
or even simpler, with the .toggle(), like this :
$(selector).toggle(speed, callback);
All documentations are here :
For hide();
For show();
For toggle();
You'll just have to handle the speed as you wish.
EDIT
Edited JSFiddle :
https://jsfiddle.net/zwg0drne/30/
If the animation is not okay for you, you can use toggleClass(); with the animation you want in this CSS class (on the display, the height, the width.. whatever you want, with a transition speed).
Documentation here :
toggleClass() documentation
You can use any of the jQuery methods for animation listed below.
.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
.slideToggle()
Here you go. I have used slideToggle() method in following fiddle.
https://jsfiddle.net/zwg0drne/27/
You were over-engineering and writing too many lines to achieve a simple thing. Please note that I have also made changes in CSS.
Edit: updated fiddle link to toggle search icon with close icon as well.
help me out here. I want to have my navigation menu go to a fixed position at the top after i scroll down 500 pixels. If anyone can give me the java-script I need, I will be very grateful. Thanks in advance :)
Here is the code if it would help
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
body {
margin: 0;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
padding: 0;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
}
h1 {
}
h2 {
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* ==============================Header================= */
.cover {
background: url(http://oi62.tinypic.com/a2ac8n.jpg) top center no-repeat;
background-size: cover;
width: 100%;
height: 500px;
margin-bottom: -400px;
position:fixed;
}
.menu,
.menu ul,
.menu li,
.menu a {
padding: 0;
border: none;
outline: none;
}
.menu {
text-shadow:0px 0px 10px #fff;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
margin: 400px 0px 0px 0px;
position: absolute;
width: 100%;
height: 100px;
-webkit-box-shadow: 0px 0px 20px 1px #666;
-moz-box-shadow: 0px 0px 20px 1px #666;
box-shadow: 0px 0px 20px 1px #666;
background: #FFF;
}
.menuWrap {
width: 1000px;
margin: auto;
}
.menu li {
list-style:none;
float: left;
width: 25%;
text-align: center;
}
.menu li a {
display: block;
font-weight: bold;
color: #000;
font-size: 20px;
line-height: 100px;
}
.menu li:hover > a,
.menu .active {
background-color:#09D5D5;
color: #FFF;
-webkit-transition: ease-in .2s;
-moz-transition: ease-in .2s;
-o-transition: ease-in .2s;
-ms-transition: ease-in .2s;
transition: ease-in .2s;
}
/* ========================Content======================== */
.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;
}
.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;
}
.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;
}
</style>
<body class="body">
<div class="cover"></div>
<header class="mainHeader">
<nav>
<ul class="menu"><div class="menuWrap">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</div></ul>
</nav>
</header>
<div class="mainContent">
<div class="contentWrapper">
<article class="content">
</article>
<article class="content">
</article>
<article class="content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
<div>
</html>
Use an additional class:
.menu.fixed {
position:fixed;
top: 0;
margin: 0;
z-index: 3;
}
and the following jQuery code to detect the scroll:
$(document).scroll(function()
{
if($(document).scrollTop()>=500)
$('.menu').addClass('fixed');
else
$('.menu').removeClass('fixed');
});
See working JSFiddle Demo
I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).