The following code works fine in Chrome, but when viewed in Internet Explorer 11, the background color does not show up:
span.fa.fa-icon-only(style='background-color: #{{vehicle.visual_color}};', rr-tt='{{vehicle.color_name}}')
The visual_color variable is a hex color code, and for some reason it's not being recognized on IE. Does anyone know a way around this?
IE has issues with dynamically changing a style tag as shown in this example http://plnkr.co/edit/lLvvDz?p=preview. Try using ng-style instead. e.g.:
span.fa.fa-icon-only(ng-style="{'background-color': '#' + vehicle.visual_color}", rr-tt='{{vehicle.color_name}}')
Related
I have a number of Div's on a layout, each of them draggable, so there's the possibility of the user dragging them into positions where they will overlap.
I want to set the most recently made visible div to have a z-index value that's +1 from the last, and for this I'm using a $scope.nextIndex variable that's incremented each time one of the div's is made visible.
Each div has its own variable to track its own z-index value: $scope.one_zIndex, $scope.two_zIndex, $scope.three_zIndex, and each correctly gets assigned an incrementally larger value as each div is shown, hidden and shown again.
Each div has its own class: one_z, two_z, three_z
What I can't make work is assigning the variable to the z-index style on the divs themselves via the controller.
var myVar = document.getElementsByClassName("one_z");
If I log this to the console, I get what I expect - an array with one element [0]
[]
0 : div#one_z
length : 1
one_z : div#one_z
__proto__ : HTMLCollection
I would assume that I could set the z-index simply like this:
myVar[0].style.zIndex = $scope.one_zIndex;
However this throws an error:
Uncaught TypeError: Cannot set property 'zIndex' of undefined
What am I missing? Or is there a better way to accomplish this?
Here is a working plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview
You can set zindex via ng-style:
<div ng-style="{'z-index': $lastIndex;}">...</div>
This example completely useless in your case, but there is an example of ng-style usage. In your case I'd set index as property of you div element data source.
What wound up working was this:
First, I switched to IDs instead of classes, which likely didn't impact the solution but as each div was only ever going to exist once, IDs was the more correct way of identifying them.
Then, in the function that displays the div, I used this:
_.defer(function(){
jQuery('#one_z').css('z-index', $scope.one_zIndex);
});
There appeared to be an issue where I was showing the div and trying to set its z-index before the DOM had updated to include the div, so _.defer (I'm using Underscore.js) prevented the accessing of the z-index until everything had updated once, and it works.
As I mentioned in another comment - using ng-style wasn't working for me, and I had tried the _.defer with that approach as well initially without success.
For the record - I've used jQuery() instead of $() so it's clear in the code that this is a jQuery and not an Angular solution, and while I'd ideally have liked a purely Angular solution to this problem, this is clean enough for me, and doesn't do any DOM manipulation outside of Angular's purview that impacts the rest of the application in any way, it's purely display candy.
I am trying to show 'ticks' with HTML range sliders. Like this:
While the HTML range directive allows for ticks with "step" and "datalist", Safari does not honor it while Chrome does. I am building an ionic/Angular app, so this means it does not work for iOS devices.
There are some 3rd party sliders like angular-awesome-slider that do support a form of ticks, but they have other issues which make them less usable for my need.
So my requirement is this: Given an HTML range slider, how do I go about adding an overlay on top that displays "|" marks at specific places on top of the slider?
(Note that the positioning of the "|" needs to take into account the display width of the slider)
I've set up a codepen here:
http://codepen.io/pliablepixels/pen/EjdpVB?editors=101
(SO insists if I insert a codepen link, I need to also insert code, so here is the code for the input)
<input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals">
<datalist id="vals">
<option>2</option>
<option>6</option>
<option>8</option>
</data-list>
with an input range. As you see it shows ticks on Chrome but not on Safari. Can someone be so kind as to help me get started with my objective?
This is way late :-) But are you sure (I don't have an installed Safari to check) that it wouldn't help if your <datalist id="vals"> tag matched your </data-list> tag?
I'm frankly surprised that it works for Chrome! Though it definitely breaks if you change the opening tag to <data-list>
Is it possible to add alternate text to images dynamically in angularjs.
I tried this.
alt={{dynamicText}}.
Simply setting like this doesnt seem to work.
You just have to use "" just like in normal html. So:
alt="{{dynamicText}}"
It was the problem of Chrome browser. As explained here, putting it like this solves the issue.
title="{{dynamicText}}"
Use []: [alt]="dynamicText"
I am trying to make the Bootstrap dropdown keyboard accessible in my page. But I don't know why keydown/up doesn't work. Please see the my jsfiddle demo
And I also have some questions on Bootstrap accessibility. Please help to review it.
According the Issue 931. It seems the keyboard accessibility wasn't added until v3.0.0-rc1. Right?
Why missing href in the anchor element would disable keyup/down accessibility for dropdown?
The problem lies in the following source code of bootstrap's dropdown.js that is using to find index of focused element:
var index = $items.index($items.filter(':focus'))
the problem is that the $items.filter(':focus') don't returns correct element and in this case index will be -1 each time.
I don't know how jQuery's :focus exactly works but this problem can be solved with the following code: var index = $items.index($(document.activeElement)). But anywhere it's not good thing to change something in source code of 3rd-party library.
This is an unanswered question in some blogs... `
<< Please Click Here To This Unanswered Question In Other Blogs..>>
will greatfull if can..
am trying to retrive Combobox selected item into a TextBox..here is my code..
using AjaxControlToolKit.dll version - 4.5.7.1002 for ComboBox.
i need to run this code on IE11 for sure.
Please help me in getting solution.
~ Udai
For the difference in html mentioned in reference,you need to access your control using clientId, on of the ways is:-
var TextBoxXXXID = <%=textBoxXXXID .ClientID%>
var control= document.getElementById(TextBoxXXXID);
About the issue this can be because of browser compatibility issue, you would like to add meta tag and add app_brower folder specified in the link .
IN IE 11, use this code to find user input in the textbox in the AjaxComboBox.
It is working in Chrome as well.
ASPX -
<ajaxToolkit:ComboBox ID="cboMetric" runat="server"></ajaxToolkit:ComboBox>
Code behind -
TextBox textBox = cboMetric.FindControl("cboMetric_TextBox") as TextBox;
strMetric = textBox.Text;