I would like to know how to add a tooltip/hover that will show an image whenever you hover your mouse over individual skill bars. I am currently just trying to figure out the mechanics. Here is what I have so far.
I know how to add tooltips to individual skill bars but I would like to show an image instead of text https://codepen.io/nerd1992/pen/oWRyeq
I want to make something similar to this WoW progress widget on this website (ember.enjin.com) left side column. I like how when you hover over the individual skill/progress bar it shows what bosses were killed
Update: Figured out how to show a photo in tooltip, but how do I customize each tool tip with a different image for each skill bar? For example: I want the HTML bar to show the current picture. I want the CSS bar to show a farm. And the Jquery bar to show a cow.
Html
<html>
<body>
<h1>jQuery & CSS3 Skills Bar</h1>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
// Tooltip only Text
$('.tool-tip').hover(function(){
// on Hover
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>
<div class="contentContainer">
<div class="tool-tip" title="just to see how this works ">
<div class="skillbar clearfix " data-percent="45%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">45%</div>
</div> <!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #2980b9;"> <span>CSS3</span></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">65%</div>
</div> <!-- End Skill Bar -->
</div>
<div class="skillbar clearfix " data-percent="50%">
<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->
</div>
</body>
</html>
CSS
body {
font-family: 'Ubuntu', sans-serif;
width:960px;
}
p{
color:#525252;
font-size:12px;
}
.tooltip {
display:none;
position:absolute;
border:1px solid #111;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#e7e7e7;
}
#a {
display: block;
}
#a:hover + #b {
display:block;
}
#b {
display:none;
}
.contentContainer {
background: #a21f4d;
padding: 30px;
max-width: 800px;
min-width: inherit;
margin: auto;
border-radius: 10px;
Border: solid 5px #8ad000;
}
.skillbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
left:0;
width:110px;
font-weight:bold;
font-size:13px;
color:#ffffff;
background:#6adcfa;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.skill-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:11px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
You just need to change .text() function to .html() function. The argument inside html supports full html tag. For example:
$('<p class="tooltip"></p>')
.html('<img src='....')
.appendTo('body')
.fadeIn('slow');
You can test the result here:
jQuery(document).ready(function() {
jQuery('.skillbar').each(function() {
jQuery(this).find('.skillbar-bar').animate({
width: jQuery(this).attr('data-percent')
}, 6000);
});
// Tooltip only Text
$('.tool-tip').hover(function() {
// on Hover
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
var img = $(this).find('.skillbar').attr('data-img');
$('<p class="tooltip"></p>')
.html('<img src="'+img+'" >')
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({
top: mousey,
left: mousex
})
});
});
body {
font-family: 'Ubuntu', sans-serif;
width: 960px;
}
p {
color: #525252;
font-size: 12px;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #111;
background-color: #161616;
border-radius: 5px;
padding: 10px;
color: #e7e7e7;
}
#a {
display: block;
}
#a:hover+#b {
display: block;
}
#b {
display: none;
}
.contentContainer {
background: #a21f4d;
padding: 30px;
max-width: 800px;
min-width: inherit;
margin: auto;
border-radius: 10px;
Border: solid 5px #8ad000;
}
.skillbar {
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
background: #eee;
height: 35px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-ms-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
}
.skillbar-title {
position: absolute;
top: 0;
left: 0;
width: 110px;
font-weight: bold;
font-size: 13px;
color: #ffffff;
background: #6adcfa;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-title span {
display: block;
background: rgba(0, 0, 0, 0.1);
padding: 0 20px;
height: 35px;
line-height: 35px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-bar {
height: 35px;
width: 0px;
background: #6adcfa;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 35px;
line-height: 35px;
color: #ffffff;
color: rgba(0, 0, 0, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contentContainer">
<div class="tool-tip" title="just to see how this works ">
<div class="skillbar clearfix " data-percent="45%" data-img='http://c1.staticflickr.com/3/2930/34086850331_898dc05710.jpg'>
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">45%</div>
</div>
<!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="65%" data-img='http://c1.staticflickr.com/4/3867/15146361238_02195dae48.jpg'>
<div class="skillbar-title" style="background: #2980b9;"> <span>CSS3</span></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="50%" data-img='http://c1.staticflickr.com/3/2807/34365995715_47e1a30af9.jpg'>
<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">50%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="40%" data-img='http://c1.staticflickr.com/3/2217/2541032116_27e5abbf4b.jpg'>
<div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
<div class="skillbar-bar" style="background: #5a68a5;"></div>
<div class="skill-bar-percent">40%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="75%" data-img='http://c1.staticflickr.com/3/2643/3984053325_8063a8ab88.jpg'>
<div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
<div class="skillbar-bar" style="background: #525252;"></div>
<div class="skill-bar-percent">75%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="100%" data-img='http://c1.staticflickr.com/4/3933/15638877405_2d19888d42.jpg'>
<div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
<div class="skillbar-bar" style="background: #2ecc71;"></div>
<div class="skill-bar-percent">100%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="70%" data-img='http://c1.staticflickr.com/1/297/19176156656_5520b9b4a7.jpg'>
<div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
<div class="skillbar-bar" style="background: #4288d0;"></div>
<div class="skill-bar-percent">70%</div>
</div>
</div>
<!-- End Skill Bar -->
</div>
Related
i have a button that expands a section with background image to show hidden text, but how do i make it so that i can just press the button once instead of haviing to hover it or hold down? and then press it again to return to its default state
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>TITLE</title>
</head>
<body>
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
</body>
</html>
#charset "utf-8";
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content:active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content:active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
........................................................................
I have never found a CSS-only solution regarding something like this, so using a splash of Javascript will help to toggle a different state using a class on your hidden-content container. Then, using the presence of the new class, you can edit the appearance of your HTML elements.
In other words, adding and removing a class can allow you to update it's appearance.
var trigger = document.querySelector('.bottom-arrow');
trigger.addEventListener('click', function(){
document.getElementById('hidden-content').classList.toggle('active');
});
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content.active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content.active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
Technically speaking you don't have a button. HTML standard includes a button element which is what people think of when speaking of buttons in web pages / web apps.
You want to toggle the hidden attribute based on the click event of an element.
var label = document.querySelector("label");
label.addEventListener("click", function () {
document.getElementById("list").toggleAttribute("hidden");
});
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger">CLICK ME</label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
Using a checkbox with the label allows you to use its state.
body {
background-color: white;
}
.mainPic {
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding: 0;
margin: 0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section {
position: relative;
}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#trigger {
display: none;
}
#trigger:checked + label + #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#trigger:checked + label.bottom-arrow {
position: absolute;
bottom: -25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<input type="checkbox" id="trigger">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>
I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>
It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.
I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).
Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});
How can i add selected radio text to add in other div after clicked button using jquery.
I have created this Codepen DEMO
<div class="container">
<div class="checkedWrap"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
Firstly attach a click event to your button, then get the selected input radio using :checked selector and finally get the text from the parent using parent().text(), check the example bellow.
Hope this helps.
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
})
});
.container {
width:400px;
height:auto;
box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
margin:0px auto;
margin-top:10px;
}
.checkedWrap {
width:100%;
float:left;
padding:15px;
background-color:#b71c1c;
box-sizing:border-box;
}
.checkList {
width:100%;
padding:10px;
box-sizing:border-box;
float:left;
}
.lbl {
float:left;
position: relative;
display: block;
height: 20px;
width: 44px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 26px;
height: 26px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after { transform: scale(1.15, 0.85); }
.cbx:checked ~ label { background: #6fbeb5; }
.cbx:checked ~ label:after {
left: 20px;
background: #179588;
}
.cbx:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.cbx:disabled ~ label:after { background: #bcbdbc; }
.container {
position: absolute;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.demo {
margin-bottom: 40px;
width:100%;
overflow:hidden;
padding:5px;
box-sizing:border-box;
text-indent:10px;
}
.hidden { display: none; }
.Click {
float:left;
margin-top: 30px;
color: #fff;
height:30px;
background-color:#0288d1;
color:#ffffff;
width:100%;
box-sizing:border-box;
text-align:center;
line-height:30px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
This piece of code selects the text of the label you have currently selected and inserts it to the top red box:
$(document).ready(function() {
$("body").on( "click",".Click",function(){
var text = $("input[name=checkit]:checked").parent().find("span").text();
$(".checkedWrap").text(text);
});
});
Also wrap the plain text into a <span>, it makes the code clearer and easier to select from.
Here's a working example.
Here is script.
$(document).ready(function() {
$('input[type=radio][name=checkit]').change(function () {
jQuery('.checkedWrap').text($('input[name=checkit]:checked').parent().text());
});
});