I have a control panel with 6 slider bars on it (implemented by bootstrap-slider), but those 6 slider bars seem to align differently with different window size: sometimes 4+2 and sometimes 2+2+2. I have no idea what a good-looking control panel is but I think mine is not elegant. I do not want them to drift "randomly", like this, what shall I do?
HTML:
<div class="container" id="appDiv">
<div class="row">
<div class="col" id="controlPanel">
<div id="sliders">
<!-- Slide bars -->
<div class="row">
<div class="slider col-sm-4">
<label for="mySamples" class="slideLables">Samples \( N=2^q \)</label>
<input id="mySamples" min="2" max="10" value="6" step="1" class="sliderBars">
<span id="samplesSliderVal" class="sliderVal"></span>
</div>
<div class="slider col-sm-4">
<label for="myPhase" class="slideLables">Phase \( \phi \)</label>
<input id="myPhase" data-slider-min="-4.99" data-slider-max="4.99" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
<span id="phaseSliderVal" class="sliderVal"></span>
</div>
<div class="slider col-sm-4">
<label for="b1" class="slideLables">Amplitude \( b_1 \)</label>
<input id="b1" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
<span id="b1SliderVal" class="sliderVal"></span>
</div>
</div>
<div class="row">
<div class="slider col-sm-4">
<label for="b3" class="slideLables">Amplitude \( b_3 \)</label>
<input id="b3" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
<span id="b3SliderVal" class="sliderVal"></span>
</div>
<div class="slider col-sm-4">
<label for="b5" class="slideLables">Amplitude \( b_5 \)</label>
<input id="b5" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
<span id="b5SliderVal" class="sliderVal"></span>
</div>
<div class="slider col-sm-4">
<label for="b7" class="slideLables">Amplitude \( b_7 \)</label>
<input id="b7" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
<span id="b7SliderVal" class="sliderVal"></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#appDiv {
margin-top: 20px;
background-image: linear-gradient(to bottom, rgb(193, 193, 193) 0px, rgb(210, 210, 210) 100%);
text-align: center;
}
.slider {
margin-top: 10px;
margin-left: 15px;
}
.sliderBars {
margin-left: 10px;
}
.sliderVal {
width: 10px;
margin-left: 10px;
}
JS:
var sampleSlider = $('#mySamples').bootstrapSlider({});
var phaseSlider = $('#myPhase').bootstrapSlider({});
var b1Slider = $('#b1').bootstrapSlider();
var b3Slider = $('#b3').bootstrapSlider();
var b5Slider = $('#b5').bootstrapSlider();
var b7Slider = $('#b7').bootstrapSlider();
var nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue'));
var phase = phaseSlider.bootstrapSlider('getValue');
var b1 = b1Slider.bootstrapSlider('getValue');
var b3 = b3Slider.bootstrapSlider('getValue');
var b5 = b5Slider.bootstrapSlider('getValue');
var b7 = b7Slider.bootstrapSlider('getValue');
// Interactive interfaces
sampleSlider.bootstrapSlider({
formatter: function(value) {
return Math.pow(2, value);
}
});
sampleSlider.on('slideStop', function() {
nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue')); // Change "global" value
$('#samplesSliderVal').text(nSample)
});
phaseSlider.on('slideStop', function() {
phase = phaseSlider.bootstrapSlider('getValue'); // Change "global" value
$('#phaseSliderVal').text(phase)
});
b1Slider.on('slideStop', function() {
b1 = b1Slider.bootstrapSlider('getValue'); // Change "global" value
$('#b1SliderVal').text(b1)
});
b3Slider.on('slideStop', function() {
b3 = b3Slider.bootstrapSlider('getValue'); // Change "global" value
$('#b3SliderVal').text(b3)
});
b5Slider.on('slideStop', function() {
b5 = b5Slider.bootstrapSlider('getValue'); // Change "global" value
$('#b5SliderVal').text(b5)
});
b7Slider.on('slideStop', function() {
b7 = b7Slider.bootstrapSlider('getValue'); // Change "global" value
$('#b7SliderVal').text(b7)
});
$('#samplesSliderVal').text(nSample);
$('#phaseSliderVal').text(phase);
$('#b1SliderVal').text(b1);
$('#b3SliderVal').text(b3);
$('#b5SliderVal').text(b5);
$('#b7SliderVal').text(b7);
Edit
After I use komal's method, I still have other problems like this figure shows. I do not know why this cannot be reproduced in the updated jsfiddle, but it is really a problem. Besides, I also want to fix the positions of the texts in class sliderVal, i.e., they appear in the same line where the slider bars appear, rather than shown at another line when the window shrinks, like this.
Just remove class slider from divs and also remove second div class= row. here is the solution http://jsfiddle.net/et7pvqpj/37/
Related
I need some help with this code. I'm trying to get the id="address" value into the input named localizacion, I've tried several thing and still didn't find the correct answer, basically what I need is to get the value that shows <div id="address"> and get it into the input field.
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
<head>
<script>
var a = document.getElementById('address').value;
document.forms['formula'].elements['localizacion'].value = a;
</script>
</head>
<div>
<form>
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br />
<label><b>Seleccione su localizacion: </b></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
<br>
</form>
</div>
Screenshot of the issue:
Try this, use
var a = document.getElementById('address').innerHTML;
to get value of address
document.getElementsByName("localizacion")[0].value = a;
to set value of localization
var a = document.getElementById('address').innerHTML;
document.getElementsByName("localizacion")[0].value = a;
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled>
<div id="address">Sample</div>
You can target your form-control class and set it up to be the value of the innerText of the address.
setInterval(function(){
//Update the localizacion box every 0.5 seconds
var a = document.getElementById('address').value;
document.getElementsByClassName("form-control")[0].value = a;
}, 500);
I got rid of the <i> tags. Use CSS instead for the italics. Also removed the <b> tags for the <strong> tags. Hope this helps. Fiddle
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
var a = document.getElementById('address').innerText;
document.getElementsByClassName("form-control")[0].value = a;
//document.forms['formula'].elements['localizacion'].value = a;
#markerStatus{
font-style: italic;
}
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br>
<label><strong>Seleccione su localizacion: </strong></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<strong>Marker status:</strong>
<div id="markerStatus">Click and drag the marker.</div>
<strong>Current position:</strong>
<div id="info"></div>
<strong>Closest matching address:</strong>
<div id="address">Some Address</div>
</div>
<br>
I have selected user from search in Js function currently input field is readOnly , So once we have value from selectedOwner i want to change input field background color to white because user don't want to see gray color that is coming from readOnly directive ? Is there way to implement this kind of requirement ?
main.html
<div class="form-group col-md-6">
<div class="col-md-6">
<label class="control-label required" for="rcsaOwner">RCSA
Owner :</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="rcsaOwner" required ng-class="{'background1': color.back}"
ng-model="riskAssessmentDTO.rcsaOwnerWorker" name="rcsaOwnerWorker"
ng-click="openRcsaOwner()" ng-model-options="{updateOn: 'blur'}" ng-readOnly="true"/>
<p class="text-danger"
ng-show="addAssessment.rcsaOwnerWorker.$touched && addAssessment.rcsaOwner.$error.required">RCSA
Owner is required</p>
</div>
</div>
mainCtrl.Js
$scope.selectedOwner = function (selectedOwner, workerKey) {
this.$parent.$parent.rcsaOwnerModal.close();
$scope.riskAssessmentDTO.rcsaOwnerWorkerKey = workerKey;
$scope.riskAssessmentDTO.rcsaOwnerWorker = selectedOwner;
$scope.color = { back: true};
};
main.css
.background1 {
background-color: #eeee12;
color: red;
}
Check the first image.
I have set the div just displays in images.
![enter image description here][1]
[1]: http://i.stack.imgur.com/2ZVbu.png
the html is :
<div id="div_pro_qty_condi_168">
<label>Loyalty Cards :</label>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium">
</div>
<div id="div_pro_qty_condi_1">
<label>Premium Business Cards :</label>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium">
</div>
.
.
.
.
<div id="div_pro_qty_condi_135">
<label>Fearless Drawstring Bag :</label>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium">
</div>
How can I set label to maximum size related to other biggest div like if I use table instead of div it auto set the <td> width as label text, but how can I set it with div?
Try this code:
Fiddle
label{
display:inline-block;
width:35%;
}
There maybe better ways but off the top of my head you could do sometime like this.
HTML:
<div>
<div id="div_pro_qty_condi_168">
<div>
<label>Loyalty Cards :</label>
</div>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_1">
<div>
<label>Premium Business Cards :</label>
</div>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_135">
<div>
<label>Fearless Drawstring Bag :</label>
</div>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium" />
</div>
</div>
CSS:
div {
display: table;
}
div div {
display: table-row;
}
div div div {
display: table-cell;
}
DEMO HERE
Try this code:
$(function(){
var _nLen = $('label').length;
var _nMax = $("label:eq(0)").width();
for(var i=0; i<_nLen;i++) {
var _nTemp=0;
_nTemp = $("label:eq("+i+")").width();
if(_nTemp>=_nMax) {
_nMax = _nTemp;
}
}
for(var i=0; i<_nLen;i++) {
$("label:eq("+i+")").css('display','inline-block');
$("label:eq("+i+")").css('width',(_nMax+'px'));
}
});
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.
I'm having the problem with: <div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
The elements inside float just fine... I've been trying everything, but the only way I'm fixing this is to set a width on the floated elements, which is very unpractical, because I don't know their contents...
Any ideas on how to fix this?
echo "<div style='width:960px;height:37px;margin-left:auto;margin-right:auto;'>
<div style='height:37px;background:url(/system/images/navbar/background/1.png);position:absolute;left:0px;right:0px;z-index:-1;'></div>
<div id='navbar_content' style='line-height:0px;width:960px;'>";
// get navbar shortcuts
$links = frontend_getnavbarlinks("sid_".$shop_id,$lang);
foreach($links as &$link){
$navbarlink_id = $link['id'];
$link_section_arr = explode(':',$link['section']);
$sectionlink_type = $link_section_arr[0];
$sectionlink_id = $link_section_arr[1];
if($link_section_arr[0] == 'c'){
$href = "/catalog/".$sectionlink_id."/";
}
echo "
<a href='".$href."' class='toggle_reconstruct'>
<div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_left.png'></div>
<div style='float:left;background:url(/system/images/navbar/background_active/1_middle.png);background-repeat:repeat-x;height:37px;'>
<div style='float:left;color:#E46F7B;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_right.png'></div>
<div style='clear:both;'></div>
</div>
<div class='navbar_item navbar_item_inactive font_colaboratelight nav_btn_".$sectionlink_type.$sectionlink_id."' id='nav_".$navbarlink_id."_inactive' style='float:left;color:#ffffff;'>
<input type='text' value='".$link['does_expand']."' class='nav_expand_indicator' style='display:none;'>
<input type='text' value='".$navbarlink_id."' class='nav_section_id' style='display:none;'>
<input type='text' value='".$sectionlink_id."' class='nav_sectionlink_id' style='display:none;'>
<div style='padding-left:10px;padding-right:10px;height:37px;'>
<div style='float:left;color:#ffffff;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
</div>
</a>
";
}
echo "
<div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'></div>
<div id='navbar_expand1'></div>";
try it by giving float : left to the div navbar_content
Try this code below.
It might be helpful to you..
'display: inline-block'
I figured it out, for some reason opera keeps setting my font-size to 0px, when not declared otherwise, so I had to set font-size:1px; where there was no font-size needed or set explicitly...