I was successful in customizing the file input using jQuery and CSS3.
However, there is one thing I was not able to do. I want to show the text of the file selected after the user selected the image or file at the very bottom of the text like this:
So far here's my codes. Here's the HTML:
<div class="container-avatar">
<div class="avatar-upload">
<div class="avatar-edit">
<input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'> <label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
</div>
</div>
Here's the CSS:
.container-avatar {
max-width: 115px;
margin: 0px auto;
}
.avatar-upload {
position: relative;
max-width: 200px;
margin: 10px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit input {
display: none;
}
.avatar-upload .avatar-edit input+label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input+label:hover {
background: #fff;
border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input+label:after {
content: "\f040";
font-family: 'FontAwesome';
color: #007BFF;
position: absolute;
top: 6px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.avatar-upload .avatar-preview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
And here's my jQuery:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
All of my codes are hosted on JSFIDDLE: https://jsfiddle.net/wtvrzj91/1/
Its pretty easy and actually you already are reading the file data here:
To get the name you need to access to the name property: input.files[0].name and to populate it just create a div, and with javascript insert the string to that div, example:
HTML:
<div class="imageFilename"></div>
Javascript(inside readURL function):
document.querySelector(".imageFilename").innerHTML = input.files[0].name;
From this below snippet to set file name text on bottom side of selected image area.
I have little bit changes into your css code because you can not set display:none (input[type="file"]) due to Safari browser instructions so we can use opacity:0 and I set edit icon middle+center in circle div and set input[type="file"] inside label element so now you can drag and drop image file on edit icon area.
Also tested drag-n-drop its working.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide().fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
$('.imageFilename').html(input.files[0].name).attr('title', input.files[0].name);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
.container-avatar {
max-width: 115px;
margin: 0px auto;
}
.avatar-upload {
position: relative;
max-width: 200px;
margin: 10px auto;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit label{
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input{
position: absolute;
opacity: 0;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.avatar-upload .avatar-edit label:hover {
background: #fff;
border-color: #d6d6d6;
}
.avatar-upload .avatar-edit label:after{
content: "\f040";
font-family: 'FontAwesome';
color: #007BFF;
}
.avatar-upload .avatar-preview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.imageFilename{
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br><br>
<div class="container-avatar">
<div class="avatar-upload">
<div class="avatar-edit">
<label title="Upload Image"><input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
</div>
</div>
<div class="imageFilename"></div>
</div>
Related
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.
I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>
Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
I'm trying to get the cards ('.card', '.card p' and '.card p:hover' classes) to darken their shadow after hovering over them with the cursor, sadly nothing is happening. The navigation bar's hover function works fine though. The javascript code is used to make the navigation bar follow you down as you scroll.If anyone has enough free time to help me fix this problem, then thanks.
Also there is another problem: If you run the code in chrome and maximise the window, you can't scroll to the very bottom (using windows 10). If you can fix this problem too, then thanks.
$(function() {
// Stick the #nav to the top of the window
var navigation = $('.navigation');
var navigationHomeY = navigation.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navigationHomeY;
if (shouldBeFixed && !isFixed) {
navigation.css({
position: 'fixed',
top: 0,
left: 0,
marginright: 0
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
navigation.css({
position: 'relative',
left: 0,
marginright: 0
});
isFixed = false;
}
});
});
{
-webkit-font-smoothing: antialiased;
}
body {
margin: 0%;
font-family: Helvetica;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: #cccccc;
color: white;
z-index: 1;
}
.card {
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
z-index: -2;
}
.card p {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card:hover p {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
color: blue;
}
.navigation {
list-style-type: none;
position: relative;
left: 0px;
margin-right: 0px;
width: 100%;
top: 7.2%;
background-color: #cccccc;
box-shadow: 0px 3px 25px grey;
z-index: 0;
}
.wrap {
margin: 10px auto;
background: #cccccc;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.navWrap {
height: 30px;
width: 100%;
z-index: 0;
}
.li a {
float: left;
display: block;
text-align: center;
padding: 1%;
color: white;
text-decoration: none;
transition: 0.5s;
}
.li a:hover:not(.active) {
background-color: #e6e6e6;
}
.active {
background-color: #3399ff;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
br.clearLeft {
clear: left;
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>
<div class="navwrap">
<div class="navigation" ;>
<div class="li a" ;>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<br class="clearLeft" />
</div>
</div>
</div>
<div class="card" ;>
<div class="card p" ;>
<p>
Example text
</p>
<p>
Example text 2
</p>
<p>
Example text 3
</p>
<p>
Example text 4
</p>
</div>
</div>
Your :hover is not working because you are applying z-index:-2 on .card...so better to remove it...
Also I has changed some of your css and html part to clean the code...
Stack Snippet
//<![CDATA[
$(function() {
// Stick the #nav to the top of the window
var navigation = $('.navigation');
var navigationHomeY = navigation.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navigationHomeY;
if (shouldBeFixed && !isFixed) {
navigation.css({
position: 'fixed',
top: 0,
left: 0,
marginright: 0
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
navigation.css({
position: 'relative',
left: 0,
marginright: 0
});
isFixed = false;
}
});
});
{
-webkit-font-smoothing: antialiased;
}
body {
margin: 0%;
font-family: Helvetica;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: #cccccc;
color: white;
z-index: 1;
}
.card {
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.card p {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card p:hover {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
color: blue;
}
.navigation {
list-style-type: none;
position: relative;
left: 0px;
margin-right: 0px;
width: 100%;
top: 7.2%;
background-color: #cccccc;
box-shadow: 0px 3px 25px grey;
z-index: 0;
}
.wrap {
margin: 10px auto;
background: #cccccc;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.navWrap {
height: 30px;
width: 100%;
z-index: 0;
}
.li a {
float: left;
display: block;
text-align: center;
padding: 1%;
color: white;
text-decoration: none;
transition: 0.5s;
}
.li a:hover:not(.active) {
background-color: #e6e6e6;
}
.active {
background-color: #3399ff;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
br.clearLeft {
clear: left;
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>
<div class="navwrap">
<div class="navigation">
<div class="li a">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<br class="clearLeft" />
</div>
</div>
</div>
<div class="card">
<p>
Example text
</p>
<p>
Example text 2
</p>
<p>
Example text 3
</p>
<p>
Example text 4
</p>
</div>
Here's the JSFiddle http://jsfiddle.net/7mzH2/ It's an easy version of what I have right now.
I have two problems which I can't seem to figure out.
The first problem: I want the dot to stay filled when it's on the active page.
Second problem: I want a label to appear on the right of the menu when you hover the dots.
I've tried several ways and in other designs I never had this problem, so I don't understand what I should do.
Hope someone can help me out.
This is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav> Home
De mogelijkheden
Restauratie
Het Proces
Werkplaats
Ambacht en Handwerk
Mogelijkheden
Contact
</nav>
</div>
<ul class="content">
<li class="first" id="first">
<div id="pagina01"></div>
<li class="second" id="second">
<div id="pagina02"></div>
</li>
<li class="third" id="third">
<div id="pagina03"></div>
</li>
<li class="fourth" id="fourth">
<div id="wrapper04">
<div id="first04"></div>
<div id="second04"></div>
</div>
</li>
<li class="fifth" id="fifth">
<div id="pagina05"></div>
</li>
<li class="six" id="six">
<div id="pagina06"></div>
</li>
<li class="seven" id="seven">
<div id="pagina07"></div>
</li>
<li class="eight" id="eight">
<div id="pagina08"></div>
</li>
</ul>
This is the CSS
body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}
Sorry for the long code's but I though maybe this will make it easier to help.
For the labels you can use CSS3 pseudo-elements to create a custom tooltip, and HTML5's data- tag to get the content (text) of the tooltip.
Pseudo-elements are :after and :before
To create a label or tooltip, try to add this to your CSS code:
nav a:hover:before {
pointer-events: none;
content: attr(data-name);
position: absolute;
display: block;
width: 30px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
background: #000;
top: -4px;
right: -40px;
}
..and in your HTML add this to your links: data-name="your text here".
(You can call the data attribute whatever you want. It just has to start with data-).
To make the dots stay filled, you can use jQuery.
When you click on the nav a it adds an .active-class to the <a> which make the dot stay filled. But first we have to make sure that all the other dots gets inactive. Else we suddenly would have every dots active. To do that we first remove the .active-class on all dots. Then we add an .active-class, on that <a> we have clicked on:
$(document).ready(function() {
$('nav a').click(function() {
$('nav a').removeClass('active');
$(this).addClass('active');
});
});
Then we change the .cbp-fbscroller > nav a:hover in your css to .cbp-fbscroller > nav a:hover, nav a.active. Now the active dot, has the same style like when we hover it.
You can test it all, in this Fiddle:
http://jsfiddle.net/7mzH2/3/
P.S:
I think it's better to move the tooltip/label to the left instead of to the right. Right now, you can't add much text, because of the space.
Hope this helped.
I hate to clutter up Stack Overflow, but I can't seem to update my original question here - Issue with div floating on top of carousel. The JSFiddle was incorrect.
I'm having some trouble with this:
http://jsfiddle.net/myoozik/U6bV8/
If you take a look at above the carousel, there is a giant gap. This comes as a result of adding the black overlay div on top of the carousel.
Any idea on how to get rid of that gap aka how is it being generated?
HTML
<div class="carousel-wrapper">
<div id="overlay-div">
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="/_shared/img/img1.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img2.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img3.jpg" width="850" height="500" alt="">
</li>
</ul>
</div> ‹›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#overlay-div {
background-color: #000;
width: 200px;
height: 200px;
position: relative;
left: 100px;
top: 300px;
z-index: 999;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
overflow: hidden;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
/*border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;*/
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
The black color box is appearing due to #overlay-div Div that is present which has some height, width and background color. if you set display:none to it the space and black box will disappear.
below is the CSS
#overlay-div {
background-color: #000000;
display: none;
height: 200px;
left: 100px;
position: relative;
top: 300px;
width: 200px;
z-index: 999;
}
Fiddle here here.
Is this what you are looking at?