I'm trying to transform a pic on some event.. say click. It's working fine in chrome in linux and even XP, but chrome in windows 7 or 8 is not displaying it properly.
If u open the link below in firefox and chrome in windows 7 or 8, u will know what my problem is.
http://blacksheepinc.in/temp.php
Example Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function rtt() {
$('#logo').css('-webkit-transition', 'all 2s ease-in')
$('#logo').css('-moz-transition', 'all 2s ease-in')
$('#logo').css('-webkit-transform','rotate(270deg)');
$('#logo').css('-moz-transform','rotate(270deg)');
}
</script>
</head>
<body>
<pre>
Click on the pic
</pre>
<img id='logo' src='logo.png' onclick='rtt()' style='position:absolute;'/>
</body>
</html>
Anyone else faced it?
Thank you for your time!!!
Have you tried making this more CSS and less JS? I trust CSS with my animations more than jQuery. Like this:
<style type="text/css">
.logo {
-webkit-transition:all 2s ease-in;
-moz-transition: all 2s ease-in;
}
.logo.end {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}
</style>
<script type='text/javascript'>
$('#logo').click(function() {
$(this).addClass('end');
});
</script>
Related
What do I need to target to change the opacity for Bootstrap 4? I found that I need to target this to affect its background, but when I add opacity:1 to tooltip-inner or tooltip, it does nothing:
.tooltip .tooltip-inner {
background-color: #014379;
}
.tooltip .arrow:before {
border-top-color: #014379;
}
What do I need to do to change it?
Thanks!
You can change the opacity of tooltip like this
.tooltip.show {
opacity: 0.5;
}
If you've tried tried this code
.tooltip.show /* The CSS classes that the tooltip has */ {
opacity: 0.5; /* or whatever */
}
Then try to add !important, so that you can be sure that your style will be applied
opacity: 0.5 !important;
If it still doesn't work, feel free to tell me.
Opacity has a value between 0 and 1. 1 being nothing changed at all and 0 being invicible.
.tooltip .tooltip-inner {
background-color: #014379;
opacity: 0.5;
}
.tooltip .arrow:before {
border-top-color: #014379;
}
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
If you want to change the background color opacity, you could use rgba()
though it will not work with HEX colors unless you use SCSS
that means if you want this solution you will need to find a color that looks like #014379 but with rgb()
RGBA Example:
/*Instead of
background-color: #014379;
*/
background-color:rgba(XXX,XXX,XXX,0.5)
SCSS Example:
SCSS Variable:
$color-tertiary: #607D8B;
Change Opacity:
background-color: rgba($color-tertiary, 0.5);
I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
So I've recently started learning angularJS and wanted to understand how you do animations. I do have experience with jQuery and know how easy it is to implement animation with it however with angular...not so much.
Anyways the code looks like this:
html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="js/controllers/indexCtrl.js"></script>
<link href="css/stylesheet.css" rel="stylesheet"/>
<link rel="css/animate.css" type="text/css" href="">
<title>Test</title>
</head>
<body ng-app="myApp" ng-controller="indexCtrl">
<div ng-repeat="i in vec">
<div class="test1"><h1>{{i}}</h1></div>
</div>
</body>
</html>
css:
html,body{
height: 100vh;
width: 100vw;
}
.test1{
width: 100vw;
height:10vh;
text-align:center;
background:red;
margin-bottom:1vh;
}
.test1.ng-enter{
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
So what I want to learn is how to fadeIn the repeated elements.
Peace.
Is there anyway that I can get my CSS only to go through the hover cycle once?
I need to keep the CSS intact and ADD a solution rather than completely changing it.
This maybe impossible, but I thought I'd ask.
CSS:
html .sensitive10, .sensitive5, .sensitive75, .sensitive15, .dp{
opacity: 1.0;
-webkit-transition: 5s all ease-in-out;
-webkit-transition-delay: 60s;
}
html:hover .dp{
opacity: 0.0;
-webkit-transition: all 5s ease-in-out;
-webkit-transition-delay: 16s;
}
#box{
height: 60px;
width: 60px;
background: #0DF;
}
HTML:
<html>
<body>
<div id="box" class="dp"></div>
<body>
</html>
Thanks
You can do this with jQuery .one() function, here is the reference:
http://api.jquery.com/one/
And the relevant example:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="count">0</div>
<div class="target">Hover me</div>
<script>
var n = 0;
$(".target").one("mouseenter", function() {
$(".count").html(++n);
});
</script>
</body>
</html>
What you need is an onmouseout with a javascript function that would change your element's className to a css class that would not have a hover defined.
CSS
.element_with_hover{(...)}
.element_with_hover:hover{(...)}
.element_without_hover{(...)}
HTML
<div class="element_with_hover" id="hoverMe" onmouseout="javascript:removeHover('hoverMe');"></div>
JAVASCRIPT
function removeHover(elementId){
document.getElementById(elementId).className = "element_without_hover";
}
EDIT :
I really need it to work, if you are going to answer or reply, please read comment on question before, your point might have been covered already.
I'm trying to override the base variables of sencha to create a theme for my app
Here is my app.scss
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
$base-color: #8bc531;
This one too did not work, has replied in comments. No need to link a non working answer and downvote again. Plus, good to know, the .scss file does compile correctly without errors.
$base-color: #8bc531;
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
Actually the file is longer and everything else works properly.
I'm only having problem with $base-color has it does not change color at all of anything and it is suppose to affect most of the app's componenent at once...
Can someone explain me why it does not work has it should and has it is showed on the sencha websites...?
Beware of creating your project with trial version of ST.
The index file is not the same has when you buy it, in the trial one, it overides theming with their color, (uneditable) while in the paid version, this line is removed -_-'
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>