We Keep Coding

Appending to section goes outside the section

Okay so basically I have a chat app I made and it appends a paragraph to the chat class which is inside a div which the class chat is a section but when I make enough messages it would put the messages outside the section as in like the background color would only show for a certain amount of messages then just be normal so like the height of it is broken for some reason and I can't figure out how to fix that.
$('.chat').append('<p id="' + Math.random() + '"><strong style=color:' +
data.color + '> ' + data.user + '</strong> <span style=color:"black">' +
data.message + '</span></p>');
* {
box-sizing: border-box;
transition: all .3s ease;
}
html {
background: #eee;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
width: calc(100% - 20px);
max-width: 500px;
margin: 0 auto;
font-family: 'Mukta Malar', Arial;
/*font-family: Helvetica, Arial, Sans, sans-serif;*/
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 32px;
}
.user-count {
font-size: 32px;
}
.chat {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: #ffffff;
opacity: 90%;
padding: 5px 10px;
/*this is for the msgs */
}
.adminTools {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: white;
opacity: 90%;
padding: 0px 20px;
}
.chat p {
margin: 0 0 5px 0;
}
input[type=color],
button {
/*input alonwas here too*/
width: 100%;
font: inherit;
background: #fff;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
button:hover {
cursor: pointer;
background: #ddd;
}
#media all and (min-width: 500px) {
.chat {
height: 300px;
/* height: calc(100vh - 140px);*/
}
input {
width: calc(100% - 160px);
}
button {
float: right;
width: 150px;
}
}
.scroller {
height: 500px;
overflow-y: scroll;
/* scroll-snap-type: y mandatory; */
}
.scroller section {
scroll-snap-align: start;
}
div {
overflow: auto;
}
#colorPicker {
width: 100%;
font: inherit;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
.adminTitle {
font-size: 25px;
}
.noscroll {
overflow: hidden !Important
}
input[type=color] {
width: 70px !important;
height: 70px !important;
border-radius: 100%;
overflow: hidden;
}
input[type=color]::-webkit-color-swatch {
border: solid;
border-radius: 100%;
padding: 50%;
border-color: white;
}
.userDiv {
position: fixed;
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
/*remove this if it breaks*/
body {
height: 100vh;
display: grid;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
border-radius: 3px;
overflow: hidden;
}
.inp .label {
position: absolute;
top: 20px;
left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
transform-origin: 0 0;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
pointer-events: none;
}
.inp .focus-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
}
.inp input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 0;
padding: 16px 12px 0 12px;
height: 56px;
font-size: 16px;
font-weight: 400;
background: rgba(0, 0, 0, 0.02);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
color: #000;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
box-shadow: inset 0 -2px 0 #0077FF;
}
.inp input:focus+.label {
color: #0077FF;
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus+.label+.focus-bg {
transform: scaleX(1);
transition: all 0.1s ease;
}
.btn {
border: none;
border-radius: 5px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
color: #fff;
background-color: #4c6e87;
box-shadow: 0 2px 8px -2px rgba(60, 83, 199, 0.5);
outline: none;
-webkit-tap-highlight-color: transparent;
transform: translateY(0);
}
.btn.ripple {
background-position: center;
transition: background 0.8s;
}
.btn.ripple:hover {
background: #3f5a6e radial-gradient(circle, transparent 1%, #3f5a6e 1%) 50%/16000%;
}
.btn.ripple:active {
background-color: #3f5a6e;
background-size: 100%;
transition: background 0s, transform 0.2s;
transform: translateY(1px);
}
<head>
<title>Msged</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main>
<header>
<center>
<h1 class="user-count">Online: 0</h1>
</center>
</header>
<!-- <article class="scroller"> -->
<div id="maindiv1">
<!-- style="height:400px;"> -->
<section class="chat"></section>
<!-- </article> -->
</div>
<form>
<label for="inp" class="inp">
<input type="text" placeholder="Message #main" />
<!-- <input type="text" style="border-radius: 25px; border: 1px inline black;" placeholder="Say something" /> -->
</label>
<!-- <input type="file" id="myFile" name="filename"> -->
<button class="btn ripple">Send</button>
</form>
</main>
<main>
<header>
<form>
<h1 id="colorPicker">
</h1>
<h1 id="userChecker">
</h1>
<!-- <button id="colorBtn">Change Colour</button> -->
</form>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/cookie_js#1.2.2/cookie.min.js"></script>
<script src="https://unpkg.com/socket.io-client#2/dist/socket.io.slim.js"></script>
</body>

Adding overflow: auto; to .chat in the css-file lets the section scroll and keep its background.

How to reset the jquery-UI slider range value on click of a button

I have a Jquery UI slider, On click of reset button, I need to reset the slider value. Here I can able to reset the value but can't change the background color to initial position.I have used the slider function into script file and css into style.css for styling the slider and the contents.
I have used here jquery UI library but I am not getting the solution.
(function() {
// Helper function
var update_handle_track_pos;
update_handle_track_pos = function(slider, ui_handle_pos) {
var handle_track_xoffset, slider_range_inverse_width;
handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
$(slider).find(".handle-track").css("left", handle_track_xoffset);
slider_range_inverse_width = (100 - ui_handle_pos) + "%";
return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
};
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
});
// Init slider
$("#js-slider").slider({
range: "min",
max: 100,
value: 50,
create: function(event, ui) {
var slider;
slider = $(event.target);
// Append the slider handle with a center dot and it's own track
slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
// Append the slider with an inverse range
slider.prepend('<div class="slider-range-inverse"></div>');
// Set initial dimensions
slider.find(".handle-track").css("width", event.target.clientWidth);
// Set initial position for tracks
return update_handle_track_pos(event.target, $(this).slider("value"));
},
slide: function(event, ui) {
// Update position of tracks
return update_handle_track_pos(event.target, ui.value);
}
});
}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
height: 14px;
border-radius: 10px;
border-width: 0;
}
body {
background: #F0F0F0;
font-family: Helvetica, Arial;
}
h1 {
text-align: center;
color: #444;
margin-top: 50px;
}
#slider-container {
width: 80%;
height: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: 50%;
margin: 0 auto;
text-align: center;
background: #FFF;
border-radius: 5px;
padding: 35px 40px 30px 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.ui-slider {
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
outline: none;
}
.ui-slider .slider-range-inverse {
background: #CCC;
position: absolute;
right: 0;
}
.ui-slider .ui-slider-range {
background: transparent;
}
.ui-slider .ui-slider-handle {
width: 28px;
height: 28px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background: #FFF;
top: -7px;
border-radius: 50%;
border-width: 0;
}
.ui-slider .ui-slider-handle:active {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
background: transparent;
overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
display: block;
height: 18px;
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
position: absolute;
padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
<div id="js-slider"></div>
</div>
<div class="trybtn">
<span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

(function() {
// Helper function
var update_handle_track_pos;
update_handle_track_pos = function(slider, ui_handle_pos) {
var handle_track_xoffset, slider_range_inverse_width;
handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
$(slider).find(".handle-track").css("left", handle_track_xoffset);
slider_range_inverse_width = (100 - ui_handle_pos) + "%";
return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
};
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
$('.slider-range-inverse').css('width', 100-$(this).val() + '%');
});
// Init slider
$("#js-slider").slider({
range: "min",
max: 100,
value: 50,
create: function(event, ui) {
var slider;
slider = $(event.target);
// Append the slider handle with a center dot and it's own track
slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
// Append the slider with an inverse range
slider.prepend('<div class="slider-range-inverse"></div>');
// Set initial dimensions
slider.find(".handle-track").css("width", event.target.clientWidth);
// Set initial position for tracks
return update_handle_track_pos(event.target, $(this).slider("value"));
},
slide: function(event, ui) {
// Update position of tracks
return update_handle_track_pos(event.target, ui.value);
}
});
}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
height: 14px;
border-radius: 10px;
border-width: 0;
}
body {
background: #F0F0F0;
font-family: Helvetica, Arial;
}
h1 {
text-align: center;
color: #444;
margin-top: 50px;
}
#slider-container {
width: 80%;
height: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: 50%;
margin: 0 auto;
text-align: center;
background: #FFF;
border-radius: 5px;
padding: 35px 40px 30px 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.ui-slider {
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
outline: none;
}
.ui-slider .slider-range-inverse {
background: red;
position: absolute;
right: 0;
}
.ui-slider .ui-slider-range {
background: transparent;
}
.ui-slider .ui-slider-handle {
width: 28px;
height: 28px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background: #FFF;
top: -7px;
border-radius: 50%;
border-width: 0;
}
.ui-slider .ui-slider-handle:active {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
background: transparent;
overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
display: block;
height: 18px;
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
position: absolute;
padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
<div id="js-slider"></div>
</div>
<div class="trybtn">
<span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
A bit hacky but update the css width

U need to call your method under trybtn click event.
JS:
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
update_handle_track_pos($("#js-slider"), $(this).val());
});
Working fiddle:
https://jsfiddle.net/psx57Lc6/

How to change css dynamically after click? And after again click go back to default?

I have problem little problem... unfortunately big for me yet... I prepared demo for you guys:
$('#rulerSlider').click(function() {
$('#canvas').css({
'margin-left': '0px',
'margin-top': '0px'
});
});
#justdraw {
position: relative;
width: 100%;
height: 200px;
overflow-y: hidden;
margin-left: 20px;
margin-top: 20px
}
#ruler {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
}
#canvas {
position: relative;
width: 100%;
height: 200px;
overflow: scroll;
}
/* slider */
.slider {
bottom: 350px;
left: 300px;
width: 80px;
height: 26px;
background: #333;
/*margin: 20px auto;*/
margin-left: 35px;
position: absolute;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slider:after {
content: 'OFF';
color: #000;
position: absolute;
right: 10px;
bottom: 0px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slider:before {
content: 'ON';
color: #3bb100;
position: absolute;
left: 10px;
top: 1px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slider label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slider input[type=checkbox] {
visibility: hidden;
}
.slider input[type=checkbox]:checked+label {
left: 43px;
}
/* end slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="justdraw">
<div id="ruler">
<div id="canvas">
<canvas id="diagram" width="2100" height="2100">
</canvas>
</div>
</div>
</div>
<div>
<div class="slider">
<input type="checkbox" value="None" id="rulerSlider" name="check" checked />
<label for="rulerSlider"></label>
</div>
</div>
I have problems with the following steps:
0. Slider default state is (ON)
1. Click the slider (OFF)
2. Delete margins 20 from #justdraw
#justdraw {
margin-left: 20px; /* ---> margin-left: 0px; */
margin-top: 20px /* ---> margin-right: 0px; */
}
3. Click the slider again (ON)
4. Add margins 20 to #justdraw
#justdraw {
margin-left: 0px; /* ---> margin-left: 20px; */
margin-top: 0px /* ---> margin-right: 20px; */
}
Can someone help? I am done with this... I tried using javascript a little but without succes.

#Brarod
Try this code to add and remove css, it works properly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#toggle1").toggleClass("intro");
});
});
</script>
<style>
.intro {
font-size: 200%;
background-color:black;
text-shadow:1px 2px 3px yellow;
color: red;
}
</style>
<title>Tenth Demo Page</title>
</head>
<body>
<div>
<h3>Toggle Class</h3>
<p id="toggle1">Hello!! This My Tenth Demo Page....<code>◙♣♣♣♣☼╧#á</code></p>
<button id="btn4">Add Toggle Class</button>
</div>
</body>
</html>
I hope above code will be useful for you.
Thank you.

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>

Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

CSS or JS conflict?

I'm a novice so this may seem like a rather basic problem.
A html page has 4 html embedded audio players which looked as styled and worked fine.
I then added a slide player called Fancy Box. The CSS and JS files are linked to separate folders than the CSS and JS files of the audio player.
The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.
Is there a CSS or JS conflict of some sort?
Any advice is much appreciated in solving my dilemma.
(Sorry for all my incompetence.)
Here is the HTML and Both CSS.
/** audio player styles **/
.audio-player,
.audio-player div,
.audio-player h2,
.audio-player a,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.audio-player {
position: relative;
width: 300px;
height: 70px;
margin: 0 auto;
}
.audio-player h2 {
position: absolute;
top: 7px;
left: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* play/pause control */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 34px;
height: 34px;
top: 32px;
left: 7px;
background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -35px;
}
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 23px;
right: 85px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 85px;
height: 11px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 9px;
top: 1px;
left: 1px;
background: #c82530;
background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);
background: linear-gradient(top, #c82530 0%, #c82530 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
width: 160px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 160px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #565860;
width: 160px !important;
/* fixes display bug using jQuery 1.8+ */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #7b7d82;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #00873d;
background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: linear-gradient(top, #00873d 0%, #83bb63 100%);
}
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 20px;
height: 22px;
top: -6px;
background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -1px;
background: url('handle-sm.png') no-repeat;
}
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
z-index: 9999;
background: url('time-box.png');
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666;
text-align: center;
z-index: 9999;
}
/** clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Paul Minotto: Music</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
a:link {
color: #00873d;
text-decoration: none;
}
a:visited {
color: #cc3333;
text-decoration: none;
}
a {
font-size: 14px;
}
a:hover {
color: #cc3333;
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 36px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.green {color: #11772E;
}
.red {color: #cc3333;
}
#rcorners { border-radius: 45%;
border: 5px solid #000000;
padding: 0px;
width: 700px;
height: 130px;
}
.color {
color: #FFF;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
<title>slideShow</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>
<link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
</head>
CSS for slide show player.
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #FFF;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 0px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}