I have the following razor, but if I go directly to the url, it throws an null reference. I looked at Request.Url.Host and none of those parts are null, what could be the problem:
#{
Layout = "NoNavigationMaster.cshtml";
var brand = Common.GetProductBrand(Request.Url.Host);
if (brand == BrandType.SCT)
{
<style type="text/css">
div.products-filter-overlay-body div.bg-image {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: url(overlay-bg#2x.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
}
else if(brand == BrandType.BullyDog)
{
<style type="text/css">
div.products-filter-overlay-body div.bg-image {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: url(bd-products-filter-overlay-bg#2x.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
}
}
Not knowing the body of Common.GetProductBrand method it is difficult to tell. May be the razor #2x is null. Put a break point on them and inspect their values
Related
AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
Does someone know how to work around this problem?
I found the same problem here, but it doesn't work on mine.
Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>
Picture of positioned div's using css
based on the css that i wrote using absolute position, I thought the boxes would meet evenly on the ends but the blue box is not flush with the yellow box. Is there a rule that i'm misunderstanding?
Add top: 0; and left: 0; to class blue. By default they are being set to top: 8px & left: 8px causing the overlap.
.blue {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.yellow {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
}
.red {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
Add this to your blue class
top: 0;
left: 0;
This may help more as well: How to place div in top right hand corner of page
I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.
You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
I want to avoid using duplicated code if it is possible. What I am doing right now essentially is to use similar code for #menu-icon and #close-menu were the only difference being the value of percentage I use in height: property. Is there any effective way of using SCSS to avoid using duplications of code?
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon {
position: absolute;
height: 8%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#close-menu {
position: absolute;
height: 15%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
You can use Mixin for avoiding duplication of code.
#mixin menu_prop($menu_height){
height: $menu_height;
position: absolute;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon {
#include menu_prop(8%);
}
#close-menu {
#include menu_prop(10%);
}
}
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon, #close-menu {
position: absolute;
height: 8%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#close-menu {
height: 15%;
}
}
or just
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon, #close-menu {
position: absolute;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#menu-icon{
height: 8%;
}
#close-menu {
height: 15%;
}
}
I have checked possibilities and issues with frameworks. Bootstrap has additional code and some code need to be modified.
I enclose my code CSS and I kindly ask you to check and inform me if this is correct, specially position elements.
.carousel {
height: 250px;
margin-bottom: 20px;
margin-top: 10px;
}
.carousel-caption {
z-index: 20;
}
.carousel-caption {
left: 10%;
padding-bottom: 30px;
right: 10%;
}
.carousel .item {
height: 250px;
}
.carousel-inner > .item > img {
height: 250px;
left: 0;
min-width: 100%;
position: relative;
top: 0;
}
.carousel-control {
width: 5%;
}
.carousel-control.left, .carousel-control.right {
display: block;
float: left;
height: 250px;
width: 5%;
}
.carousel-control.left {
background: url("../images/left1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-control.right {
background: url("../images/right1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-indicators {
bottom: 10px;
left: 40%;
list-style: none outside none;
margin-left: -20%;
padding-left: 0;
position: absolute;
text-align: center;
width: 50%;
z-index: 15;
}