I am using dashing widgets. I want to flip a widget on mouseover and show summary details after flip in a new widget. Any help would be much appreciated.
Thanks in advance.
Edited: Sorry for my vague question. I am a newbie to forums.
I was trying to achieve flipping widget exactly same like http://jsfiddle.net/mgechev/GpK25/16/
However after making some changes in above jsfiddle code, summary widget shows next to BGP widget but not in same area as expected.
Here is my bgp.erb code
<style>
.gridster .panel {
margin: 0px auto;
}
.gridster .card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 0px;
left: 0px;
}
.gridster .front {
z-index: 2;
}
.gridster .back {
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.gridster .panel:hover .front {
z-index: 1;
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.gridster .panel:hover .back {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<% content_for :title do %>BGP<% end %>
<div class="gridster panel">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div class="front card" data-id="bgp" data-view="HotState" data-title="BGP"></div>
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div class="front card" data-id="bgpsummary" data-view="Text" data-title="BGP Summary" data-text="Details goes here..."></div>
</li>
</ul>
</div>
Related
I was wondering how to incorporate the Animate.css library into the Slideshow example over at W3 Schools.
For example, rather than the abrupt image change of Display: none
Could i instead have one of the Animate.css animations play instead?
For example: To zoom out the image, then have the next image zoom in? Or fade? Slide? etc
How could i accomplish this?
Thanks
The W3 Example:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
i've been tinkering with HTML Applications and VBScript and im wanting to create a multi level dropdown menu in app.
Am i missing something? Doesnt CSS work correctly in HTA
Tried the example at this link: https://htmldog.com/examples/dropdowns3/
which is exactly what im trying to get it to look like
<title>Example Dropdown</title>
<HTA:APPLICATION
APPLICATIONNAME="Example Dropdown"
ID="shortageEmail"
ICON="magnify.exe"
VERSION="1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
<!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
<article>
<h1>Tetrapods</h1>
<nav id="main_nav">
<ul>
<li>
Birds
<ul>
<li>Ratites</li>
<li>Fowl</li>
<li>Neoaves</li>
</ul>
</li>
<li>
Mammals
<ul>
<li>
Monotremes
<ul>
<li>Echidnas</li>
<li>Platypus</li>
</ul>
</li>
<li>
Marsupials
<ul>
<li>Opossums</li>
<li>Numbats, etc.</li>
<li>Bandicoots, etc.</li>
<li>Kangaroos, koalas, wombats, etc.</li>
</ul>
</li>
<li>
Placentals
<ul>
<li>Primates, ungulates, etc.</li>
<li>Anteaters, sloths, etc.</li>
<li>Elephants, etc.</li>
</ul>
</li>
</ul>
</li>
<li>
Reptiles
<ul>
<li>Lizards and snakes</li>
<li>Tortoises and turtles</li>
<li>Crocodilians</li>
<li>Tuatara</li>
</ul>
</li>
<li>
Amphibians
<ul>
<li>Frogs and toads</li>
<li>Salamanders and newts</li>
<li>Caecilians</li>
</ul>
</li>
</ul>
</nav>
<section id="main_content">
<p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog Dropdowns tecnhique article for more information.</p>
<p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
</section>
<!-- Link back to HTML Dog: -->
<p id="dog_link"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></p>
</article>
</body>
Expected: https://puu.sh/DJmWR/6da6b5b5dd.png
Actual: https://puu.sh/DJmX7/cc10b87c70.png
This looks like an I.E. standards mode issue. Add a line in your HEAD section to force I.E. 11 mode:
<meta http-equiv="x-ua-compatible" content="IE=11">
You can experiment with lower version numbers until it breaks again.
Oops, just spotted your Edit, too late.
I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
This is what I have so far: http://codepen.io/Pabi/pen/bdmgjm
Here is my CSS:
/*---------------------------------------------------
3.1 Topbar
---------------------------------------------------*/
#section-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
/* border-bottom: 2px solid;
border-color: rgb(232,235,237);*/
}
/*Makes it so when you hover over the icon stays white*/
#section-topbar a {
color: #fff;
}
#section-topbar ul#nav > li {
display: block;
padding: 0;
}
#section-topbar ul#nav a {
display: block;
font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 18px 20px 18px 20px;
}
#section-topbar ul#nav .menu-item-left a:hover {
background: #222;
text-decoration: none;
}
#section-topbar ul#nav .active a {
background: #44bbaa;
}
#section-topbar ul#nav .active a:hover {
background: #44bbaa;
}
#section-topbar i {
font-size: 25px;
}
/*Center Brand on NavBar*/
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
How can I change the height of the navbar to something that is thinner and possible make the dropdown text with a dropdown icon next to it instead of a button.
Thank you very much.
One simple way would be to use the Sass or Less source and change the default value for $navbar-height
The nice thing about this, is that all the other calculations for top and bottom margins or padding of navbar elements will automatically adjust based on the new value. It's a far more maintainable and clean solution than trying to override the compiled styles.
With regard to making the dropdown text instead of a button, see the example from the bootstrap docs of the dropdown in a navbar, http://getbootstrap.com/components/#default-navbar:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
You should be able to do something very similar inside of your <ul class="nav navbar-nav navbar-right"> element.
You can reduce the height of the topbar with smaller padding around the icons :
#section-topbar ul#nav a {
...
padding: 10px 20px;
}
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>