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.
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 am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
I have written below code to insert a banner on top of page and then on click on the banner, it should close the div. But I would like to display Close option on top right of the banner. Can someone help here?
<script>
function banner_load() {
jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4); display: block; font-size: 10pt; font-weight: bold; margin: 0 0 5px; padding: 5px 5px 5px 5px; position: relative; vertical-align: middle; color: white;"><span id="close" style="background: rgba(255,255,255,0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer; font-size: 18px; font-weight: normal; height: 22px; line-height: 24px; position: absolute; right: 11px; text-align: center; top: 9px; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
setTimeout(function(){
if(typeof triggerResizeEvent === 'function'){ triggerResizeEvent(); }
},300);
setTimeout(function() {
document.getElementById('banner').style.display='none';
if(typeof triggerResizeEvent === 'function'){
triggerResizeEvent()
}
}, 40000);
};
window.onload = function(){banner_load();};
// for no space jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4); display: block; font-size: 10pt; font-weight: bold; margin: 0 0 0px; padding: 0px 0px 0px 0px; position: relative; vertical-align: middle; color: white;"><span id="close" style="background: rgba(255,255,255,0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer; font-size: 18px; font-weight: normal; height: 22px; line-height: 24px; position: absolute; right: 11px; text-align: center; top: 9px; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
//
</script>
use parent id instead as
$('#banner').click(function(){
$(this).remove();
});
First thing first, please remove the code from line
jQuery('<span id="banner" style="height: auto;display: block;" class="banner"><span class="banner-wrap"><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
This is not recommended, better to have this piece of code in html file and manipulate it by using jquery hide() show() functions
Yes, you can add the close button somewhere
<span id="banner" style="height: auto;display: block;" class="banner">
<span class="banner-wrap">
//close button code goes here and please manipulate this DOM using jquery
<img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto">
</span>
</span>
You can show or hide a div using jQuery show() and hide() functions. Refer the code below:
$(document).ready(function(){
$(".banner-wrap").click(function(){
$("#banner").hide();
});
});
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;
}
I have created a onepage portfolio website. Now its have 2 main stylesheet.One is default(green) and another one is red. Now i want to make two button where people can switch stylesheet each other without page loading.
You can check demo site here. I want same thing in my website.
I have used below code.It design perfectly but when i click on icon its not expand same as demo site.Here is my code:
HTML(markup):
<div class="theme-settings">
<i class="fa fa-cog fa-spin"></i>
<div class="theme-settings-content">
<ul class="theme-list clearfix">
<li class="active"></li>
<li></li>
</ul>
</div>
</div>
CSS(code for button):
.theme-settings .theme-collapse-btn {
position: absolute;
right: -50px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
color: #000;
background: #fff;
background: rgba(255, 255, 255, .9);
border-radius: 0 4px 4px 0;
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4)
}
.theme-settings {
position: fixed;
left: -180px;
top: 200px;
z-index: 1020;
box-shadow: 0 0 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
width: 180px;
-webkit-transition: left .2s linear;
transition: left .2s linear
}
.theme-settings .theme-settings-content {
padding: 10px 5px;
background: #fff;
position: relative;
z-index: 1020
}
.theme-settings .theme-list {
list-style-type: none;
margin: 0;
padding: 0
}
.theme-settings .theme-list > li {
float: left
}
.theme-settings .theme-list > li + li {
margin-left: 5px
}
.theme-settings .theme-list > li > a {
width: 30px;
height: 30px;
border-radius: 3px;
display: block;
-webkit-transition: all .2s linear;
transition: all .2s linear;
position: relative
}
.theme-settings .theme-list > li.active > a:before {
content: '\f00c';
font-family: FontAwesome;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 14px;
color: #fff;
opacity: .4;
filter: alpha(opacity=40);
line-height: 30px;
text-align: center
}
.theme-settings.active {
left: 0
}
.bg-red {
background: #d93240!important
}
.bg-green {
background: #5bb12f!important
}
How can i solve this problem? Or can any one tell me any free plugin for this work. Thanks in advance.
You could, for example, use jQuery and switch between the stylesheets on button click.
<link rel="stylesheet" type="text/css" href="default.css" data-theme-switchable>
And in your JavaScript:
$.when($.ready).then(function() {
$('[data-theme]').on('click', function () {
var $stylesheetName = $(this).data('theme');
$('link[data-theme-switchable]').attr('href', $stylesheetName + '.css');
});
});
But it would in fact be the better approach to just switch the class, i. e. of the body and format accordingly.
$.when($.ready).then(function() {
$('[data-theme]').on('click', function () {
$('body').attr('class', $(this).data('theme'));
});
// maybe set the class to the first found theme on load
$('[data-theme]:first').trigger('click');
});
And then…
body.default { ... }
body.red { ... }