I found a similar question here but I couldn't find a solution.
I'm using twitter-bootstrap 3.3.6 . When I add a bootstrap class to my div elements that contains images, the images are not displaying. But images are visible in code inspector in the browser.
<div class = "tab1 grow col-sm-12">
<a href = "#/tab1" class = "tooltips">
<img ng-src="{{ imageUrlProfile }}">
<span>
<strong>Profile</strong><br />
</span>
</a>
</div>
Images are loading from angularJS.
Controller.js :
application.controller('app', function($rootScope, $scope) {
$rootScope.imageUrlProfile = 'images/profile-icon.png';
$rootScope.imageUrlWork = 'images/exp-icon.png';
$rootScope.imageUrlEdu = 'images/edu-icon.png';
$rootScope.imageUrlContact = 'images/phone-icon.png';
});
Relevant CSS styles are :
.tab1, .tab2, .tab3, .tab4, .tab5
{
margin: 30px 30px 0px 30px;
width: 25px;
height: 25px;
display: inline-block;
}
.tab1 img, .tab2 img, .tab3 img, .tab4 img, .tab5 img
{
width: 100%;
height: 100%;
}
Any help?
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>
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
I'm working on a project for a client that involved using the existing code they have while also transitioning the files into another location. The files being transitioned include images that can't be moved yet, so in an attempt to make the code future proof, I used CSS to define the image src's by embedding them in the "a" tag.
.iconWriting::before { content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
Unfortunately, the images will only display correctly when the CSS style defining their location is in the Head of the document. I need to be able to house these styles in an External CSS file, but when I move the previously working CSS to the External file, it breaks. Instead of images, I just get the alt text, in all browsers. I tried adding ":before" to the class specification, but this didn't work, either.
Here's a Fiddle of the working code: JS Fiddle
Thanks to #Mr Lister for his help with this; the solution is to target the "a" tag when specifying the image src using the "content" property.
/*Weekly Activity Styles*/
.activityWrapper {
width: 96%;
overflow-x: hidden;"
}
/*Upper Right Icons*/
.iconExpand::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/V2/icon/sm_expand.png");
}
.iconAcademic::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/academic_research_policy.png");
}
.iconWriting::before {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png");
}
.iconExpand, .iconAcademic, .iconWriting {
width: 32px;
height: 32px;
margin: 1px;
border: none;
float: right;
}
/*Dropbox & Waypoint Icons*/
.iconDropbox {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Dropbox_small.png");
border: none;
}
.iconWaypoint {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/waypoint_smaller.png");
border: none;
}
.iconWaypointLg {
content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Waypoint_image1.png");
border: none;
}
padding: 15px 20px 5px 15px;
}
}
<div class="activityWrapper">
<div class="subParaDisc">
<a target="_new" href="javascript://;" class="iconLink iconExpand" onclick="this.href=document.location"></a>
<a class="iconAcademic" target="_new" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Academic.htm"></a>
<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>
<h1>
The Icons above only work when the style defining their img content is in the head of the HTML doc.</h1>
</div>
</div>
Reference this Fiddle for the sample: https://jsfiddle.net/1gxmqnjy/21/
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/
I am trying to create a page similar to Google's homepage. It is to have a centrally located input box and a div on top of the page displaying links. I also want the page to resize itself dynamically if I change the size of the browser window. I have achieved partial success using yui2 grid css and a table. Here's a snippet:
<body>
<div id="doc3">
<div id="hd"><a style="float:left" href="link1.com"> link1</div>
<div id="bd" style="display: table; height: 400px;">
<div style="display: display: table-cell; vertical-align: middle">
<input name="searchbox" value="searchinput" size="40" />
<input name="submit" type="submit" value="search />
</div>
</div>
</div>
</body>
The only issue with this html is that the page doesn't dynamically resize upon resizing the browser window. Is there a better way of doing this ?
You can use jQuery to set it to perfectly.
jQuery
$(window).resize(function() {
var wh = (($(window).height()-$('#center').height())/2)+'px';
var ww = (($(window).width()-$('#center').width())/2)+'px';
$('#center').css({
top: wh,
left: ww
});
}).resize();
CSS
#center {
border: 1px solid black;
position: absolute;
width: 50px;
}
If you don't care about perfectly vertically centered, you could do:
#center {
border: 1px solid black;
margin: 0 auto;
position: relative;
width: 50px;
top: 45%; /* or whatever % looks 'right' */
}