I'm currently trying to set the background of my div according to if the user has a chosen background or not, and I can successfully do that to an extend.
However, what I cannot do is set the background of the div via CSS because I cannot concatenate strings in CSS, which means I can for example do:
background: url("/uploads/Example.png") !important;
But I cannot do.
background: url("/uploads/#Model.Banner")
or
background: url("/uploads/" + #Model.Banner)
My current code looks like this.
<head>
#if ("/uploads/" + #Model.Banner != "/uploads/")
{
<style>
:root {
--url: url("/uploads/#Model.Banner");
}
.profile-header {
height: 200px;
background: var(--url) !important;
background-size: 100%;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}
</style>
}
</head>
<div id="main">
<label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
<hr />
<div class="container profile-header"></div>
.profile-header exists in another .css file with a default banner, meaning that the CSS in the code is what would be used for changing it dynamically if a banner exists.
What I kindly ask is for guidance in how I can have set the background of the div to the path + the banner name, the current code does not work as it sets no background to the div when it enters the IF statement.
Thank you!
I assume you will know if the user has a value for Banner in the Controller action if you are adding it to the model for the corresponding View. For example:
public IActionResult Index()
{
YourModel model = new YourModel();
...
// you could supply a default image or just leave as "url(/uploads/)"
model.BannerUrl = string.IsNullOrEmpty(model.Banner) ? "url(/uploads/Default.png)" : $"url(/uploads/{model.Banner})";
return View(model);
}
Then in the View:
<head>
#if (!#Model.Banner.Contains("Default.png"))
{
<style>
:root {
--url: #Model.BannerUrl;
}
.profile-header {
height: 200px;
background: var(--url) !important;
background-size: 100%;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}
</style>
}
</head>
<div id="main">
<label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
<hr />
<div class="profile-header"></div>
Or you could add it all inline (just used a couple of styles so you get idea):
<div style="background:#Model.BannerUrl !important; height: 200px; background-size: 100%"></div>
EDIT:
Forgot to say could work in the view as below, but wanted to give alternative option.
#{
var url = $"/uploads/" + #Model.Banner;
}
<div style="background: url(#url) !important"></div>
Related
i have implemented a button which should change the background color, into blue from black.
But i didnt find a easy way, how I can do that.
This is my HTML file
<div style="background-color: #161624; width: 100%; height: 20%; "></div <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>
<button id="changecolor">Change Color</button>
</div>
I want that the button changecolor, change the background color, where the height is 20% at both.
enter image description here
The blueblack color should change
I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.
simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<body>
currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to
Just let me know if you have any questions
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>
In the screenshot that I hvae shared you can spot a form, at it is clearly visible that the form is shown with a scrollbar(i.e. the form has a lot of content to be displayed). What I,m trying to achieve is simply display the whole of the form on the parent webapage. I have shared the html as well as css of the main page visible , so that you can look and suggest the edits needed to be made in order to do so.
This page's code is
<!DOCTYPE html>
<html>
<head>
<title>Control Panel
</title>
<script src="http://localhost:1211/js/main.js">
</script>
<link rel="stylesheet" type="text/css" href="http://localhost:1211/css/main.css">
</head>
<body>
<header>
<?php echo "USERNAME"?>
<span>
<a id = "log" href="">Logout</a>
<span>
</header>
<hr>
<nav>
<button>Add Record</button><br><br>
<button>Update</button><br><br>
<button>Perform Query</button>
</nav>
<section id="workarea">
</section>
</body>
and its corresponding css is
header
{
padding-left: 30px;
display:inline;
}
hr
{
margin-top: 10px;
}
#log
{
float: right;
margin-right: 20px;
}
nav
{
float: left;
padding-top: 100px;
width: 20%;
height: 500px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-width: 2px;
}
section
{
float: right;
margin-top: 100px;
width: 78%;
height: 500px;
}
Please suggest me the changes I need to make in order to display the form in the whole 'nav' tag area. Your help is really appreciated
I finally figured it out , for some reason the new object that was being created inside 'nav' has some problem in it , made the following changes in my css
section > object
{
width : 70%;
height: 950px;
}
and it worked like a marvel :)
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
The Problem
I am trying to place images within a responsive circle (div), which is itself the child of another responsive circle.
I feel I have the divs nailed, but as soon as I include an image the proportions get distorted and I can't figure out the correct CSS code.
The two divs are for a future border effect I am planning.
What I currently have...
CodePen
HTML
<section class="col-4">
<div class="wrapper">
<div class="outta-circle">
<div class="circle">
<!-- <img src="#"> -->
</div>
</div>
</div>
<div class="wrapper">
<div class="outta-circle">
<div class="circle">
<!-- <img src="#"> -->
</div>
</div>
</div>
</section>
CSS
.col-4 {
width: 1068px;
}
.wrapper {
width: 48.68%;
max-height: 520px;
background-color: white;
}
.outta-circle {
width: 100%;
height: auto;
margin: 80px auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.circle {
width: 96.15%;
height: auto;
padding-bottom: 96.15%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: blue;
overflow: hidden;
}
The solution to my issue is to use the CSS Background property for the class .circle (see comments, cheers for the help there!!).
I have a number of news stories each with their own image placed in a PHP array - I plan to use a database but for the time being an array will suffice - therefore the img src will change depending on which news story is loaded.
I was going to use:
<img src="<?php echo $article["img"]; ?>" alt="<?php echo $article["title"]; ?>">
Now I have to use the CSS Background property, how would I parse the PHP into the HTML/CSS??
I'm new to this, apologies if I haven't been clear...
First of all you can make your images a basic circle I said by following this tutorial
.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
But for your use, make a foreach loop in your PHP like this to be able to apply CSS directly to it (given the images in the array are stored like <img src="www.mysrc.com/kittens.jpg" />. If they are just the URL you have to change the echo line in the foreach loop a little)
<?php
$cont=0;
echo '<ul>';
foreach($array as $arrval){
echo '<li class="circular">'.$arrval.'</li>';
$cont++;
}
echo "</ul>";
?>
And then you can apply the CSS with
li.circular{
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Edit based on my chat with you. Set up the PHP this way first (has to be outside of <script> tags)
<?php
$array1 = array('img' => "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg",
'title' => 'article',
'content' => 'This is the content coming from PHP',
'date' => "6/27/2013");
?>
And call it by converting it to json and putting it in <script> tags to be applied to the element.
Javascript fix (no PHP) jsFiddle
var articleArray = [{img: "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", title: "Article Name", content: "This is the content coming from PHP", date: "6/27/2013"},
{}
];
So if you're trying to achieve a sort of 3d effect on a rounded image you can definitely get it with just the image tag only so the code will be very clean and it will be easy to place the image through PHP.
Simply assign a 100% border-radius and a proper box-shadow to the image, something along these lines:
img {
border-radius: 100%;
box-shadow: 9px 0 red;
}
Take a look at this http://codepen.io/nobitagit/pen/trEuJ
As the code is this simple it will be very easy to make it responsive-friendly as to your needs.
#Zeaklous I have tried your method, but I believe in this instance I have to use CSS Background-Image: url();
Therefore I need a method of dynamically changing the Background-Image: url(); and after a little searching it seems following this technique using background-image:url('<?php echo $url ?>'); would work?!?
It's a stab in the dark though, my 1st time with code of this nature.