I used ngfor for dynamic slider images, but the slides display one by one below the code of home.component.html.
<div class="item-slick1 bg-overlay1" * ngFor="let slide of sliders" [style.backgroundImage]="'url('+slide.slider+')'"
data - thumb="assets/images/thumb-02.jpg" data - caption="Women’s Wear">
<div class="container h-full">
<div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
<div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
<span class="ltext-202 txt-center cl0 respon2">
{{ slide.text }}
</span>
</div>
<div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
<a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
Shop Now
</a>
</div>
</div>
</div>
</div>
How can I get a proper dynamic slider?
Related
I have implemented a carousel using PrimeNG which looks like this
Notice the style of the carousel indicators and navigators. I want to have the default style of indicators/navigators for the carousel like this
I have added the imports for CarouselModule and ButtonModule in my module.ts file but it does not work. Is this possible using CSS or any other way?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
app.component.html
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="3000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{
plan?.currency
}}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-btn">
<button
type="button"
class="remediator-blue-btn change-btn"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Daily search limit -
{{ plan.dailySearchLimit }}</span
>
</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Maximum searches - {{ plan.maxSearches }}</span
>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>```
Please check that you have the primeng theme in angular.json file
can you upload the styles array from your angular.json file ?
add the theme to the styles array in angular.json
"node_modules/primeng/resources/themes/saga-blue/theme.css"
to edit the navigators icons with css you can use this:
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
}
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I'm setting up a User Interface using a simple database and angular, where users can post a message, either with only a message, or with a picture attached to the message.
By doing some research, I found out about the built in ngIf conditions, where you can display variables if the variable doesn't hold a null value.
Here is my code and the output:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
I want to see if m.post_url contains a value. When null, I want to skip adding this variable to my website.
For example, last post, without a picture, I want it to look like this:
Sorry for my bad english, english is not my first language.
first of all, you are mixing angularJs syntax with new angular.
if you are using angularjs use ng-if in your image tag. it works properly.
as I can see you are using ng-repeat and ng-bind you are using angularjs and not angular.
so in your image tag use
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.
I am designing a blog by modifying an existing Jekyll theme where the header containing the title is one colour and the rest of the page another. I would like to insert a number of round icons (social networks etc.) in a line that are indented into the header. I feel it is easier to explain this with a picture:
where the blue dots are round icons or buttons. How can I achieve this in HTML/CSS?
EDIT:
AwokeKnowing gave me some tools to do what I want but they move when I resize my window.
This is what my page looks like on my 13" laptop screen:
but when I resize it on my 23" monitor I get:
I want it to look like my first image. This is my code:
HTML
<div>
<div class="s d"> <a href="mailto:?Subject=Mindfield-{{ page.title }}&Body={{ page.url }}">
<img src="/assets/images/mail-icon.svg" alt="Email" width=40px/>
</a></div>
<div class="s e"><a href="https://www.facebook.com/sharer/sharer.php?u={{site.domain_name}}{{page.url}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<img src="/assets/images/Facebook-icon.svg" alt="Facebook" width=40px/></div>
<div class="s f"><a href="http://twitter.com/share?text={{page.title}}&url={{site.domain_name}}{{ page.url }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<img src="/assets/images/Twitter-icon.svg" alt="Twitter" width=40px/></div>
</div>
CSS
.s{position:absolute;top:216px;border-radius:50%;background:white;width:45px;height:45px;text-align:center;color:white}
.d{left:1200px}
.e{left:1255px}
.f{left:1310px}
here's something to get you started
.t{padding:20px;background:teal}
.con{position:relative;background:beige}
.c1{padding:20px}
.sc{position:relative;float:right;width:250px;}
.s{position:absolute;top:-10px;left:10px;border-radius:50%;background:blue;width:20px;height:20px;text-align:center;color:white}
.a{left:10px}
.b{left:40px}
.c{left:70px}
.d{left:100px}
.e{left:130px}
.f{left:160px}
<div class="t">Title</div>
<div class="con">
<div class="sc">
<div class="s a">S</div>
<div class="s b">O</div>
<div class="s c">C</div>
<div class="s d">I</div>
<div class="s e">A</div>
<div class="s f">L</div>
</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
</div>