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 found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
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 to create an alert using materialize css. I don't know how. Please help. I just want to create a simple html that will display an alert error without using javascript. Thanks.
since this has no answer yet, I made something that may help you. Here is the repo
And here is a preview.
html {
line-height: 1.5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
position: relative;
min-width: 150px;
padding: 15px;
margin-bottom: 20px;
margin-top: 15px;
border: 1px solid transparent;
border-radius: 4px;
transition: all 0.1s linear;
webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.materialert .material-icons{
margin-right: 10px;
}
.materialert .close-alert{
-webkit-appearance: none;
border: 0;
cursor: pointer;
color: inherit;
background: 0 0;
font-size: 22px;
line-height: 1;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
filter: alpha(opacity=40);
margin-bottom: -5px;
position: absolute;
top: 16px;
right: 5px;
}
.materialert.info{
background-color: #039be5;
color: #fff;
}
.materialert.success{
background-color: #43a047;
color: #fff;
}
.materialert.error{
background-color: #c62828;
color: #fff;
}
.materialert.danger{
background-color: #c62828;
color: #fff;
}
.materialert.warning{
background-color: #fbc02d;
color: #fff;
}
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<link href="css/materialert.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="materialert">
<i class="material-icons">check_circle</i> <span>Bienvenido, Linebeck</span>
<button type="button" class="close-alert">×</button>
</div>
<div class="materialert info">
<div class="material-icons">info_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert error">
<div class="material-icons">error_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert success">
<div class="material-icons">check</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert warning">
<div class="material-icons">warning</div>
Oh! What a beautiful alert :)
</div>
</body>
</html>
Hope it helps!
Materializecss alert box
Codepen link
<div class="row" id="alert_box">
<div class="col s12 m12">
<div class="card red darken-1">
<div class="row">
<div class="col s12 m10">
<div class="card-content white-text">
<p>1. Username cant be empty</p>
<p>2. Password cant be empty</p>
<p>3. Address cant be empty</p>
<p>4. Name cant be empty</p>
</div>
</div>
<div class="col s12 m2">
<i class="fa fa-times icon_style" id="alert_close" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
.icon_style{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: white;
cursor:pointer;
}
$('#alert_close').click(function(){
$( "#alert_box" ).fadeOut( "slow", function() {
});
});
Unfortunately materialize doesn't provide alerts as bootstrap does.
You can use card-panel class instead:
http://materializecss.com/color.html
But you won't have close button to hide it.
This is a pretty late answer but you can use the modal class for these kind of things.
Example:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Alert</h4>
<p>You can use this as a alert!</p>
</div>
<div class="modal-footer">
OK
</div>
</div>
Reference: http://materializecss.com/modals.html#!
$(document).ready(function(){
Materialize.toast('I am Alert', 4000)
});
See DEMO here: http://codepen.io/ihemant360/pen/pbPyJb
You can use Matdialog.js to create different types of dialogboxes.
check it out at - MatDialog.js website
Install Toastr
bower install toastr
Require files
/bower_components/toastr.css
/bower_components/toastr.js
initialize toastr
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-left",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Use
Success: toastr.success('success');
Error: toastr.error('fail');
Info: toastr.info('info');
Credit
Documentation: https://github.com/CodeSeven/toastr
Demo: http://codeseven.github.io/toastr/demo.html
I resolved this issue by using chips (https://materializecss.com/chips.html) and formating css style to fit the purpose.
https://codepen.io/krazer_spa/pen/VRmxzy
<div class="container">
<div class="flash_message">
<div class="chip chip_message_info">
This is an info message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_warning">
This is a warning message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_alert">
This is an alert message
<i class="close material-icons">close</i>
</div>
</div>
</div>
<style>
.flash_message {
position: fixed;
top: 70px;
z-index: 99999;
min-width: 80%;
}
.chip_message_info,
.chip_message_warning,
.chip_message_alert {
text-align: center;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 20px !important;
min-width: 80%;
min-height: 50px;
}
.chip_message_info {
background-color: #bbdefb !important;
}
.chip_message_warning {
background-color: #ffcc80 !important;
}
.chip_message_alert {
background-color: #ef9a9a !important;
}
</style>
ReactJS + Materialize
Alert.js
import React, { useState } from "react";
const Alert = ({ type, children }) => {
const [isVisible, setIsVisible] = useState(true);
// set alert color based on type
let color;
switch (type) {
case "danger":
color = "red lighten-2";
break;
case "success":
color = "green lighten-2";
break;
case "info":
color = "blue lighten-2";
break;
case "warning":
color = "yellow lighten-2";
break;
default:
color = "white lighten-2";
break;
}
return (
<>
{isVisible && (
<div className="row mv--small" id="alert-box">
<div className="col s12 m12">
<div className={`card m--none z-depth-0 ${color}`}>
<div className="card-content black-text">{children}</div>
<i
className="material-icons icon_style"
id="alert_close"
aria-hidden="true"
onClick={() => setIsVisible(false)}
>
close
</i>
</div>
</div>
</div>
)}
</>
);
};
export default Alert;
You can then use it like this:
<Alert type="info">
test
</Alert>
And it looks like this:
I'm using iScroll 5 to scroll + zoom an iframe within an asp.net page.
Here is a Demo
In FireFox it seems to be freezing on mouse wheel. In all other browsers its working great. Any idea why this behavior in FF only?
Thanks in advance,
Jake
Edit: Here is the code for the page in question.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Schematic Diagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<base target="_parent" href="PartSchematics3.aspx?id=<%= schematicID.ToString()%>" />
<script type="text/javascript" src="Common/iscroll-zoom.js"></script>
<script type="text/javascript">
var scroll;
function loaded() {
scroll = new IScroll('#wrapper', {
scrollbars: true,
interactiveScrollbars: true,
freeScroll: true,
scrollX: true,
scrollY: true,
zoomMin: 0.37,
zoomMax: 4,
momentum: false,
onBeforeScrollStart: null,
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
});
scroll.zoom(0.37, 0, 0, 1000);
}
//disables browser mouse scrolling
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
function wheel(event) {
event.preventDefault();
event.returnValue = false;
}
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
padding:0px;
border-spacing:0px;
background-image: none;
margin: 0px;
border: 0;
text-align: left;
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body onload="loaded()">
<form id="form1" runat="server">
<div id="wrapper">
<div id="scroller">
<asp:Literal ID="litSchematicImageMap" runat="server"></asp:Literal>
</div>
</div>
</form>
</body>
</html>
Seems like an copy&paste error in iScroll-zoom.js in the _wheelZoom function:
wheelDeltaY = -e.detail / Math.abs(e.wheelDelta);
should be
wheelDeltaY = -e.detail / Math.abs(e.detail);