I have many many buttons in page and a input for user to enter color.
Is there a better way than below code?
<button ng-style="myStyles">
<button ng-style="myStyles">
.....
....
<input type="text" ng-modal="myStyles.color">
Can we generate a dynamic class like below?
<style>
button {
color : {{myStyles.color}}
}
</style>
Try the following...
<button ng-class="{color: myStyles.color}">
<input type="text" ng-model="myStyles.color">
You can see a working example here.
Easy and simple solution
<html>
<div id="a1">
<button>button 1</button><br/>
<button>button 2</button><br/>
<button>button 3</button><br/>
<input type="text" onkeyup="Fn1()" id="data" />
</div>
<script type="text/javascript">
function Fn1(){
var z = document.getElementById("data").value;
var x = document.getElementById("a1");
var y = x.getElementsByTagName('button');
for(var i = 0;i<y.length;i++)
{
y[i].style.color=z;
}
}
</script>
</html>
Found the solution, a directive to interpolate inside tag
http://alexbaden.me/interpreting-data-binding-in-style-tags-with-angular/
Related
In my code, im using an onclick function to show an element with display:none. If I set a second element to display:none, how can i code the script to show both hidden elements onclick?
Here's the code I'm using:
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
Instead of IDs, use classes for your elements and show all elements with that class name on click (I am using jQuery):
Click Me
<div class="elem" style="display:none;"></div>
<div class="elem" style="display:none;"></div>
<script type="text/javascript">
$('#click-me').click(function() {
$('.elem').show();
});
</script>
You gotta put the all elements on a div container, and when you set the display to none, all elements will disappear.
Without jQuery
<input type="button" value="test element1" onclick="showStuff('element1')">
<input type="button" value="test element2" onclick="showStuff('element2')">
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
js code :
showStuff = function(id){
document.getElementById(id).style.display = "block";
}
Demo
I use bootstrap-datepicker3 from a gem, his Github of bootstrap datepicker
But I use a black bootstrap theme and I don't know how to isolate or change the background color of the datepicker window... It seems to take the background color of the main bootstrap theme.
<div class="form-group">
<div class="col-lg-10">
<span class="input-group-addon">Dates</span>
<div class="input-group" id="datepicker">
<input class="form-control" type="text" name="date_start" data-behaviour='datepicker'>
<span class="input-group-addon">à</span>
<input class="form-control" type="text" name="date_end" data-behaviour='datepicker'>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
});
</script>
I tried a solution but it's for datetimepicker and it doesn't work..
Thank you !
Try overriding the background-color in your CSS:
.datepicker.dropdown-menu {
background-color:#FFF;
}
Try this
<style type="text/css">
.datepicker.dropdown-menu table {
background-color: #FFFFFF;
}
</style>
it works !
I was able to resolve this issue by following the steps provided in the following thread, with one change. I used the ".datepicker .table-condensed" selector.
Reduce size and change text color of the bootstrap-datepicker field
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.
<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
First time programmer here, writing simple program on HTML5. Can't seem to get image to display when button is clicked. Here is my code:
<p>
<center>
<button onclick="DeadTest()">
<img src="BeginTest.gif"/></button></center></p>
<script language="javascript" type="text/javascript">
function DeadTest()
{
<img style="border-width: 0px;" src="White.jpg" width="768" height="1280" />
}
</script>
Have looked through countless sites and forums but just can't seem to get it to work. Have tried an alert() function and it is working. I think it must be something to do with the code to call on the image.
First time programmer so it might look idiotic. Teach me, oh guru's...
Learn the basics first on how to properly call the javascript function and how to change the properties.
See my sample demo. Hope you will learn from it.
http://jsfiddle.net/NgryM/1/
<script type="text/javascript">
function ButtonClick()
{
alert('Button was clicked');
}
function ImageClick(){
alert('Image was clicked');
}
function ChangeImageSrc(){
var img = document.getElementById('myImage');
img.src = "http://www.ivankristianto.com/wp-content/uploads/2011/05/Javascript.gif";
}
function ChangeSize(){
var img = document.getElementById('myImage');
img.height = "80";
img.width = "40";
}
</script>
<p>
<center>
<input type="button" onclick="ChangeImageSrc()" value="Change Image Src"/>
<input type="button" onclick="ButtonClick()" value="Test Button Click"/>
<input type="button" onclick="ChangeSize()" value="Change Size"/>
<img id="myImage" src="http://www.mmncs.com/wp-content/uploads/javascript_logo.gif" onclick="ImageClick()"/>
</center>
</p>
<p><center><button style="background:url('Login_Button.png');width:86px;height:45px" onclick="DeadTest()"></button></p>
<div><img id="img1" style="visibility:hidden" src="a3.jpg" width="768" height="1280" /></div>
<script>
function DeadTest(){
document.getElementById('img1').style.visibility='visible';
}
</script>