Is there a way to change color off a parent when an input gets focus
Check out the demo. I want the div to be red instead of blue when input has focus.
Demo
Here's a bit of a cheaty way of doing it using CSS only...
DEMO: http://jsfiddle.net/gvee/6fRUd/
HTML
<div>
<input type="text" />
</div>
CSS
div {
overflow: hidden;
background-color: blue;
}
div * {
position: relative;
z-index: 10;
}
div input[type=text]:focus {
background-color: red;
box-shadow: 0 0 10000px 10000px lime;
z-index: 5;
}
I think you can't do that in pure CSS, but you can use Javascript:
http://jsbin.com/uvon/1/edit?html,js,output
var input = document.getElementById('input');
var div = document.getElementById('div');
input.onfocus = function(){
input.style.backgroundColor = "red";
div.style.backgroundColor = "red";
}
input.onblur = function(){
input.style.backgroundColor = "white";
div.style.backgroundColor = "blue";
}
A jQuery approach would be using .parent()
<script>$("p").parent(".selected").css("background", "yellow");</script>
http://api.jquery.com/parent/
CSS Only Approach
Fiddle
http://jsfiddle.net/GT5sT/
CSS
input {
position: relative;
z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
position: relative;
background-color: blue;
}
div.background-hack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
HTML
<div>
<input />
<div class="background-hack"></div>
</div>
You will have to use javascript.
Here is a short script using jquery.
$('#input').focus(function(){
$('#box').css('background-color','red');
});
This is assuming your input has an id of input and blue box has an id of box.
javascript also works here look at the code below,it is more flexible than just using css
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById('box').style.background="red";
}
</script>
<title>JS Bin</title>
</head>
<body>
<div id="box" style="background-color:blue">
<input onfocus="myFunction()" />
</div>
</body>
</html>
Related
Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
You can use ng-style to dynamically change a CSS class property using AngularJS.
Hope this ng-style example will help you to understand the concept at least.
More information for ngStyle
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Edit-1
You can change the background-image: URL by following way.
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
You can use ng-class : documation.
If you want to do it in your directive check directive - attr : attr.
You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
For example:
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.
enter the size in textbox you can see box changes height and width
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" >
<input ng-model="myCol" type="textbox">
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>
</div>
</body>
</html>
My checkbox input toggles my myDiv using ng-show. I would like this to look fancy. Thus, I'm using a transition effect, using angular-animate.js.
<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>
var app=angular.module('ang_app', ['ngAnimate']);
app.controller('ang_control01_main', function($scope) {
});
</script>
<style>
div {
transition: .5s;
height: 100px;
background-color:lightblue;
}
.ng-hide { /* using .ng-show here doesn't work btw */
height: 0;
}
</style>
<body ng-app="ang_app" ng-controller="ang_control01_main">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck"></div>
</body>
(http://jsfiddle.net/gfwrknpr/)
Works fine.
However, if I change the selector from div to #myDiv, the animation is gone. Why?
change your css to:
#myDiv{
transition: .5s;
height: 100px;
background-color:lightblue;
}
#myDiv.ng-hide { /* using .ng-show here doesn't work btw */
height: 0;
}
and it will work
Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.
Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.
I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.
The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.
div.hov:hover >.thumbnail {
position:fixed;
top:100px;
left:50px;
width:800px;
height:auto;
display:block;
z-index:999;
}
div.hov{
width:101px;
height:101px;
float:left;
overflow:visible;
margin: 10px;
}
<p>
<div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
<div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>
Is there any way to achieve this? The hosted version is here.
one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery
heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/
don't mind the code, I put it together very quickly for you, but you can clean it up a bit.
html
<div class='image'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>
<div id='modal'></div>
css
.image {
display: inline-block;
width: 100px;
height: auto;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
#modal {
display: none;
position: absolute;
top: 0;
left: 0;
}
jquery
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if($('#modal').css('display') != 'none') {
$('#modal').css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
}
});
$('.image').on('mouseover', function() {
var image = $(this).find('img');
var modal = $('#modal');
$(modal).html(image.clone());
$(modal).css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
$(modal).show();
});
$('.image').on('mouseleave', function() {
$(modal).hide();
});
});
Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it.
use absolute positions, display:block and display:none and check if the z-index is right.
But is this really necessary?
The hovering does not seem convenient to me....
You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).
HTML
<div class="box">
<div class="thumbnail">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
<div class="overlay"></div>
</div>
<div class="large-image">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
</div>
</div>
Javascript (jQuery)
$('.overlay').hover(
function () {
$(this).closest('.box').addClass('show-large-image');
},
function () {
$(this).closest('.box').removeClass('show-large-image');
});
CSS
.box {
padding: 200px;
}
.thumbnail {
position: relative;
display: inline-block;
border: 1px solid #888;
}
.overlay {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 500px;
}
.large-image img {
width: 100%;
}
.box.show-large-image .large-image {
display: block;
}
Example: http://jsfiddle.net/dx0d1ceh/
I'm using wow.js, and it works only on page load and one time when scroll,
I would like it to trigger each time when I scroll to the div position and not only once when page is load.
<div class="wow rotateIn animated" data-wow-delay="0.3s" data-wow-duration="0.5s"></div>
Try this
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
.box {
display: block;
width: 200px;
background: rgba(255, 255, 255, 0.7);
color: #eb3980;
font-family: "Comic Sans MS", "Comic Sans";
border: 3px dashed pink;
margin: 30px auto;
text-align: center;
}
.doge {
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}
body {
background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<div class="box">
<h1 class="wow slideInLeft">Hello</h1>
<h1 class="wow slideInRight">World</h1>
<h2>🤗 🌎 </h2>
</div>
<div class="doge wow bounceIn"></div>
<!-- First load wow.js and other libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy -->
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<!-- Modify after -->
<script>
</script>
WowJs not provide functionality every time scroll animation is apply. In WowJs Animation apply once's when first time you scroll page. if you want to apply that type of functionality instead of WowJs you can used ScrollRevealJs library. ScrollRevealJs have reset option that provide every time you scroll page animation is apply.
Refer this link :- http://scrollrevealjs.org/
try this
window.addEventListener('scroll', function(e) {
if( $(window).scrollTop() <= 50) {
$('.wow').removeClass('animated');
$('.wow').removeAttr('style');
new WOW().init();
}
});
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.