My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code
The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.
The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.
Related
I want to get the element to move to another elements when the elements are hovered on.
Those elements are sibling since I want the one to overlay the another.
The following HTML and CSS give me not bad result.
But I don't want to use constant values for "width" and "left" to animate them.
Is there some way to place the moving element on the hovered elements without using constant position values?
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 105px;
left: 0;
background-color: #1abc9c;
}
nav .start-blog,
a:nth-child(2):hover~.animation {
width: 105px;
left: 105px;
background-color: #e74c3c;
}
nav .start-projects,
a:nth-child(3):hover~.animation {
width: 135px;
left: 210px;
background-color: #3498db;
}
nav .start-about,
a:nth-child(4):hover~.animation {
width: 115px;
left: 345px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 130px;
left: 460px;
background-color: #e67e22;
}
nav {
margin: 27px auto 0;
position: relative;
display: table;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
white-space: nowrap;
}
nav a {
line-height: 50px;
padding: 2px 30px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
<nav>
Home
Blog
Projects
About
Contact
<div class="animation start-home"></div>
</nav>
I couldn't find the way to do it with only CSS, so I used JavaScript and modify style of elements.
It was kind of what I did not want to do.
If you know how to do it with only CSS, let me know.
I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)
Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
I want to add some column filters in order to allow to filter a data in some html report,
but i don't have a friendly access to the html generator,
so my easy way is to do it by to add some hack inside the external css of this report.
Any ideas guys?
The HTML report generator:
https://www.npmjs.com/package/protractor-html-screenshot-reporter
The HTML report (actual view):
CSS:
body{
font-family:Arial
}
h1 {
padding-top: 15px;
padding-bottom: 5px;
text-shadow: 3px 3px #D0D0D0;
text-align: center;
font-size: 40px;
}
h2 {
background-color: #C0C0C0;
}
h1:after {
content: " - vCita Production \a";
white-space: pre;
}
div {
padding-bottom: 50px;
font-size: 18px;
}
ul,li{
margin-left:0;
padding-left:0;
width:100%;
font-weight:bold;
padding-top: 5px;
font-size: 18px;
}
table{
width:95%;text-align:left;
border-spacing:0;
border-collapse: separate;
margin-bottom:5px;
}
body > ul {
margin: 0 30px;
}
li{
font-weight:bold;
list-style:none;
width: 1900px;
width:100% !important;
}
ul table li{
font-weight: normal;
}
th {
padding: 10px;
border: 1px solid #FFFFFF;
}
td {
padding: 10px;
border: 1px solid #C0C0C0;
}
td:hover {
background: #F0F0F0;
}
a:hover {
color: gray;
}
td.desc-col{
width:500px;
}
th.desc-col{
width: 500px;
}
td.status-col{
width:75px;
}
th.status-col{
width: 75px;
}
td.browser-col{
width:160px;
}
th.browser-col{
width: 160px;
}
td.os-col{
width:100px;
}
th.os-col{
width: 100px;
}
th.img-col{
width: 50px;
}
td.img-col{
width: 80px;
}
th.msg-col{
width: 200px;
}
td.msg-col{
width: 200px;
word-break: break-all;
display: inline-block !important;
}
table.header{
background-color: gray;
color: #fff;
margin-left:30px;
}
.traceinfo{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right:0;
background: rgba(0,0,0,0.8);
z-index: 99999;opacity:0;
-webkit-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.traceinfo.visible{
opacity:1;
pointer-events: auto;
}
.traceinfo > div{
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
background: #fff;
overflow: auto;
max-height: 75%;
font-size: 14px;
}
.traceinfo .close{
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
}
.traceinfo .close:hover{
background: #00d9ff;
}
img.alt{
src: url(http://idantesting.comuv.com/public_html/reports/);
}
unfortunately you cant do this with css, you'll need a javascript solution.
Whilst it's possible to write it from scratch it a bigger job then you might imagine, but there are several plugins you can use, such as:
list.js - has functionalty to sort tables as well as lists
watable - requires jquery but provides lots of functionality
If you really want to write something from scratch you could look at this SO question on a jquery sorter for rows
As you are using a node package to generate the report, there isnts (to my knowledge) a way to add custom javascriot the same way you can add custom css. One option would be to use grunt to run the report, then use a template/find/replace to insert the javascript code <script src="[some url"> into the html that's been rendered
I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg
Now i want to reduce the size of the button,
So that i changed the code like this,
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 43px;
height: 7px;
margin: 5px auto;
}
.line__first {
margin-top: 9px;
}
index.js:
// function to trigger animation
$('.button').click(function() {
// check if the menu-items are hidden behind the button
if ($('.menu__list').hasClass('hidden')) {
// add class to make the menu-items drop down
$('.item1').addClass('list--animation');
// the following items trigger the animation after a certain delay
$('.item2').addClass('list--animation--delay1');
$('.item3').addClass('list--animation--delay2');
// remove the hidden class from the ul container to show that the items are not hidden anymore
$('.menu__list').removeClass('hidden');
}
else {
// remove class to make the menu-items disappear
$('.item1').removeClass('list--animation');
$('.item2').removeClass('list--animation--delay1');
$('.item3').removeClass('list--animation--delay2');
// add the hidden class to the ul container to show that the items are now hidden again
$('.menu__list').addClass('hidden');
}
});
So the button size reduced, but when i click the button, it shows the lists are not properly.
Can anybody help me, how to solve this one, thanks in advance.
Change your CSS as below.
Workin JSFIDDLE Here
CSS
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 15px;
height: 5px;
margin: 2px auto;
}
.line__first {
margin-top: 15px;
}
.menu {
z-index: 1;
float: left;
width: 100%;
}
.menu__list {
width: 100%;
margin-left:-110px;
margin-top:-10px;
}
/* Animation keyframes for the drop down */
#keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
animation-timing-function: ease-in;
}
to {
top: 70px;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 70px;
-webkit-animation-timing-function: ease-out;
}
}
li {
position: relative;
list-style: none;
padding-bottom: 0px;
top: 0px;
}
li a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 0.7em;
font-family: 'Open Sans', sans-serif;
}
Working Demo Here
Update 1 : See the Updated Link here
Update 2: Working Demo with large font
.button {
margin: auto; //try this.
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
I'm having an issue with a script (my first try at jQuery) I wrote to fade in divs using a nav menu. If a user clicks different buttons on the nav menu quickly, it loads both divs over top of each other.
Here is the code:
$(document).ready(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#friends-button").css({
opacity: 0.3
});
$("#gallery-button").css({
opacity: 0.3
});
$("#container div.button").click(function(){
$clicked = $(this);
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
{
$clicked.animate({
opacity: 1,
}, 600 );
var idToLoad = $clicked.attr("id").split('-');
$("#content").find("div:visible").fadeOut("slow", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
})
}
$clicked.siblings(".button").animate({
opacity: 0.3,
}, 600 );
});
});
Here is the styles for the divs and buttons:
#container{
width: 996px;
height: 1050px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
position: relative;
background-position: center top;
margin: 0px auto 0px auto;
}
#navbar {
width: 150px;
height: 300px;
position: absolute;
top: 250px;
left: 100px;
z-index: 2;
visibility: visible;
}
#about {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
overflow: auto;
}
#footer {
top: 950px;
height: 80px;
position: absolute;
color: #ffffff;
padding: 10px;
width: 988px;
text-align: right;
}
#contact {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#friends {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none
}
#gallery {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#home {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:block;
overflow: auto;
padding-right: 10px;
}
#home-button {
opacity: 1.0;
}
#about-button {
opacity: 0.5;
}
#contact-button {
opacity: 0.5;
}
#friends-button {
opacity: 0.5;
}
#gallery-button {
opacity: 0.5;
}
.button{
cursor: pointer;
}
#header{
top: 150px;
position: absolute;
left: 115px;
visibility: visible;
height: 100px;
The HTML markup should be correct, there are no child divs inside any of the content areas, and I have no other conflicts that I can find.
Is there a way I can disable clicks on the menu until the div is :visible? If someone has an answer for that or another fix, i'd really like to see it! this is the only bug that has been found so far with the site.
Thanks!
Without seeing the full picture, I can see a syntax error for the selector in the following line:
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
The selector for "not animated" should be include the ":" as follows:
if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))
It sounds like the first act of your click function should be to unbind the click event from all the divs, and its last act should be to reinstate the listener.
The way to do this is to put most of your code into its own function (which you put outside the $(document).ready(){} )
Something like this
$(document).ready(function(){
$("#container div.button").click(makeVisible);
});
function makeVisible() {
$("#container div.button").unbind(click);
///your code to make the div visible
$("#container div.button").click(makeVisible);
}
Since animations get queued, the best approach would be to use the stop() method to cause all other animated divs other than the currently targeted one to stop animating. See the documentation at http://docs.jquery.com/Effects/stop#clearQueuegotoEnd for more info.