I'm currently studying web development and I'm hoping one of you guys may help.
I'm currently coding the mandatory weather app that everyone and his dog has made lol.
My problem is that on the homepage I have 3 cards displaying with 3 different cities.
I want to display the current date underneath each city by using class="date".
But to do it in 3 instances on the same I've had to use date,date2 and date3. Which I'm thinking a for loop or something similar could easily fix rather than defining it 3 times.
Any help appreciated!
Thanks!
HTML
<section class="row">
<h2> Cities</h2>
<section class="row">
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
London
</h3>
<div class="card-body">
<p>
<span id="date" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Birmingham
</h3>
<div class="card-body">
<p>
<span id="date2" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Wolverhampton
</h3>
<div class="card-body">
<p>
<span id="date3" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<div class="col-xs-12 col-lg-3">
<h2>Search</h2>
<input class="Search col-12 border-radius pb-1" placeholder="Enter City" id="search">
<ul class="list-group mb-2 pb-2">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9">
<h2 class="subtitle">Results:</h2>
<!--search results class="results-item"-->
</div>
</section>
JavaScript/JQuery
let nowDate = now.format('D / M / YY')
let date = $('#date')
let date2 = $('#date2')
let date3 = $('#date3')
date.text(nowDate);
date2.text(nowDate);
date3.text(nowDate);
Related
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
I have a page having a carousel implemented using slick-carousel and jquery but I'm building this page in vue. Everything else works while migrating this carousel from jquery to vue except for the image itself which doesn't show up. I've been hacking at this for about three hours with no luck.
Heres the code for the carousel:
Jquery:
<div class=" petmark-slick-slider home-slider" data-slick-setting='{
"autoplay": true,
"autoplaySpeed": 8000,
"slidesToShow": 1,
"dots": true
}'>
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</div>
Vue:
In template
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</VueSlickCarousel>
In script
import VueSlickCarousel from 'vue-slick-carousel'
export default {
name: 'Home',
components: { VueSlickCarousel }
}
Any idea what I did wrong?
I found another question that solved this. Basically just change the code as follows:
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I'd like to represent two lists of included /excluded products from a content
script is:
<script>
var app = new Vue({
el: '#app',
data: {
filter_in: "",
filter_out: "",
products: {!! $content->products!!},
products_free: {!! $content->available_products()!!}
}
});
<script>
html is:
<div class="row" id="app">
<div class="col-md-6 col-sm-6">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Added products</h3>
<label for="filter_in">Filter: </label> <input type="text" v-model="filter_in" name="filter_in" />
</div>
<div class="box-body">
<ol>
<li v-for="p1 in products">
#{{ p1.name }}
</li>
</ol>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Available products</h3>
<label for="filter_out">Filter: </label> <input type="text" v-model="filter_out" name="filter_out" />
</div>
<div class="box-body">
<ol>
<li v-for="p2 in products_free" >
#{{ p2.name }}
</li>
</ol>
</div>
</div>
</div>
</div>
Can I v-if someway matching against v-model to display only li elements that have p1.name matching against the string in the input field?
How to do it in vue.js?
something like this .... is it possible?
<li v-for="p2 in products_free" v-if="p2 regexp filter_out">
#{{ p2.name }}
</li>
I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.
try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>