href is not able to clickable on carousel due to jQuery
Carousel is using jQuery for automated sliding and when I'm placing an element with a href tag it's not working, also as the project is using multiple JavaScript files for fast uploading. I'm not able to identify how to make href clickable on carousel.
How can I overwrite existing jQuery to make only that particular href clickable?
<li class="ds cover-image animated scaleAppear">
<img src="<?php echo $Domain;?>img/slide2.jpg" alt="img">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row text-center" style="text-align:center;">
<div id="arrow-left" class="arrow">
<div class="col-sm-6 ">
<h6 id="firstLineh6"><span style="font-size:50px;">■</span>Farming-as-a-Service</h6>
<h1 id="firstLineh1">Advance,Affordable,<br>Accessible</h1>
<div class="vertical">
<p id="contP">
We are making advanced farm mechanization services affordable to farmers through the
Pay and Use Model
</p>
</div>
<a id="carbtn1" href="https://google.com">Traxi Customer</a>
<a id="carbtn2" href="https://google.com">Traxi Partner</a>
<div class="col-sm-6 fade-in text-center" style="text-align:right;"></div>
</div>
<div class="intro_layers_wrapper">
<div class="intro_layers">
<!-- <div class="intro_layer">
<p class="intro_before_featured_word pTextSize">Looking For Mechanized Crop Cultivation? </p>
<p class="text-capitalize intro_featured_word pTextSize"> We are the "Solution" </p>
<br>
Tell Us Your Farming Need
</div> -->
</div>
</div>
</div>
</div>
</div>
</li>
Hey there as I got that your all links working with above code.
https://imgur.com/a/DeZd2K9
But if you still facing issue with your Code you can try given below code for slider-
.bs-fullscreen {
height: 100%;
}
.bs-fullscreen .carousel,
.bs-fullscreen .item,
.bs-fullscreen .active {
height: 100%;
}
.bs-fullscreen .carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 664px;
}
.banner-text {
position: absolute !important;
top: 215px;
left: 12%;
background: rgba(0, 0, 0, 0.5);
padding: 47px 80px;
}
.banner-text p {
font-size: 16px;
font-family: 'Roboto';
color: #fff;
font-weight: 600;
}
.banner-text h2 {
font-size: 42px;
font-family: 'Poppins';
font-weight: 600;
color: #fff;
line-height: 44px;
}
.banner-text a {
font-size: 16px;
color: #000;
font-weight: 800;
background: #fff;
padding: 10px 20px;
font-family: 'Roboto';
}
.banner-text span {
font-size: 48px !important;
}
#media only screen and (max-width:600px) {
.banner-text span {
font-size: 34px !important;
}
}
#media only screen and (max-width:400px) {
.banner-text {
position: center;
}
}
<!doctype html>
<html>
<body>
<div class="bs-fullscreen">
<div id="carousel-example" class="carousel slide carousel-bg" data-ride="carousel" data-interval="3000">
<!-- Bottom dots {indicators} -->
<div class="carousel-inner" role="listbox">
<div class="item active"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/4-3-1.jpg);">
<div class="banner-text">
<p>Eco Friendly | Feathery Light Perfect Fit</p>
<h2>50 WASH <br><span>UNDERWEARS</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Desktop-View-Home-Page-banner-1280x720px-1.jpg);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner1"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Confidence-INSIDE-MOBILE-SLIDER-1280-%C3%97-720px.png);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</body>
</html>
Hope you like the answer.
Related
i use swiper slider to make a profile slide the javascript is standar like in this github
https://github.com/nolimits4web/Swiper/blob/master/demos/390-autoheight.html
this the picture from my page
i use like this for the header photo
<div class="row">
<div class="col-12 p-0">
<img class="kol1">
</div>
</div>
and this is for the text-box
<!--text-->
<div class="col-12 bg-text-kol">
<div class="swiper-container swiper2" >
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text-left">
</br>
<h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
<?php echo '#'.$this->lang->line('kol_15_ig'); ?>
<p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
<p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
</br>
</div>
</div>
</div>
<!-- Add Pagination-->
<div class="swiper-pagination"></div>
</div>
</div>
The slider text box is running well
my question is how do every time I do a slide photo header change every time I do a slide?
Here is a sample how you could integrate the image in your slider. The .text-left is positioned absolute inside the .testamonial container above all other content inside of it.
HTML Code:
<div class="swiper-slide">
<div class="testamonial">
<div class="banner">
Get your free Engrave
</div>
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/en/8/88/MagooAndDog.jpg"/></div>
<div class="text-left">
<h2 class="h5 mt-3">Mr. Triples</h2>
#mr_triples
<p class="mark-bold">Content User</p>
<p class="mt-3">Not that much here.</p>
</div>
</div>
</div>
CSS Code:
.photo {
width: 300px;
height: 300px;
max-width: 300px;
overflow: hidden;
}
.banner {
background-color: orange;
padding: 5px;
}
.text-left {
text-align: left;
position: absolute;
width: 200px;
border-radius: 10px 10px 0px 0px;
background-color: rgba(255,255,255,0.8);
bottom: 0;
left: 30px;
padding: 10px;
padding-top: 20px;
min-height: 100px;
}
Here is a codepen to show you how your desired effect can be achieved.
I have a ul that contains a set of lis and divs created by a for each loop, The uls and lis are there so that the lis are sortable, i.e drag and drop is enabled, the images are displaying on the next line not close to each other, please what may be the cause
This is my code
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
<ul class="reorder-photos-list">
#foreach ($images_ext as $image)
<div style="width: auto;height: auto">
<li id="{{$image->id}}">
<div class="img-w " id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
</li>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload"
style="margin-left: 10px; color:#333333;"></i><br/> <br/></span>
</div>
#endforeach
</ul>
Div and li are block element, so naturally will display on the next line.. Unless you want to float them or change the display to inline.
try to edit your html and css code as below;
<style>
.img-box{
float: left;
}
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
.clearfix{
clear: both;
}
</style>
#foreach ($images_ext as $image)
<div class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</div>
#endforeach
Then use clearfix to clear the float
To include UL and Li, use the code below;
<ul>
#foreach ($images_ext as $image)
<li class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('gig.png')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</li>
#endforeach
</ul>
I'm trying to make this form:
https://imgur.com/CMzcRjp
I have this now but have a few issues.
The hover needs a border-radius
Need font a fontawesome icon on right top corner
How can i change the color of the icon
The there are three different boxes but only one can be selected. What is the right way to program it.
Also need to add php later but how.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
outline: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
Look this: https://codepen.io/Luis4raujo/pen/JrLRMp
U need hide .icon and with javascript show it.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
border: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
.icon{
border-radius: 15px;
width:30px;
height:30px;
background-color:#76A7E1;
position:relative;
top:40px;
left:235px;
/*display:none;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="icon"></div>
<div class="selection-box">
<i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget akket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
you may try this it may help you No need to use Javascript for this case
<ul id="theme-options1" class="nav nav-pills custom">
<li class="active">
<a data-toggle="tab" id="theme1" data-id="1">
<i class="fa fa-check them-Selected" aria-hidden="true" ></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme2" data-id="2">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme3" data-id="3">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme4" data-id="4">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
</ul>
Here is the Working fiddle
I try to generate pdf from html with css styles ,
I use dompdf for this.
In css there are floats too.
This is my css and html code:
$dompdf = new DOMPDF(); //create object
//load html with css
$dompdf->loadHtml('<html>
<head>
<style>
#first_head,#second_head,#content_invoice{width: 100%;}
.has-65 {
width: 65%;
float:left;
}
#product_invoice_table tr th:last-child, #product_invoice_table tr td:last-child {
text-align: right;
}
.has-35 {
width: 35%;
float:right;
}
.has-55 {
width: 55%;
}
.has-45 {
width: 45%;
}
.clearFix{
float:none;
clear:both;
}
#second_head{
margin-top: 100px;
}
#template_invoice{
padding: 50px 80px 50px 80px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
color: #000!important;
font-family: Arial,serif!important;
}
#content_invoice{
width: 100%;
float: left;
margin-top: 150px;
}
#product_total_info{
float: right;
margin-top: 100px;
}...
</style>
</head>
<body>
<div id="template_invoice">
<div id="first_head">
<div id="logo_invoice" class="has-65">
<img src="logo.PNG" width="280px">
</div>
<div id="main_header_info" class="has-35">
mandelaugengroup gmbh
Schaffhauserstrasse 611
CH - 8052 Zürich
Tel.: +41 79 205 05 05
info#babboe.ch
www.babboe.ch
MWST/UID-Nr. CHE-254.427.754
</div>
</div>
<div class="clearFix"></div>
<div id="second_head">
<div id="lead_address" class="has-65">
<span id="lead_name">ghmgmgm</span><br>
<span id="lead_street">mhgmhm</span><br>
<span id="lead_postcode_city">mbmbmjggjg</span><br>
</div>
<div id="lead_invoice_info" class="has-35">
<div class="span_padding_invoice">
<span class="invoice_main_span">Rechnungs-Nr.</span>
<span id="lead_rechnungs_nr" class="right-clmn-span">jghghjgh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Kunden-Nr.</span>
<span id="lead_kunder_nr" class="right-clmn-span">ghjgvj</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Datum</span>
<span id="invoice_datum" class="right-clmn-span">hhhhhhh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Fallig am</span>
<span id="invoice_falling_am" class="right-clmn-span">bjbbb</span>
<br>
</div>
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span total_bold">Total</span>
<span id="lead_total" class="right-clmn-span">iljkkj</span>
<br>
</div>
</div>
</div>
<div id="content_invoice">
...
<table id="product_invoice_table" width="100%">
....
</table>
</div>
<div class="has-65"></div>
<div id="product_total_info" class="has-35">
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span">Total exkl.MWST</span>
<span class="right-clmn-span">CHF <span id="total_sum"></span></span>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span" id="mwst_num"></span>
<span class="right-clmn-span">CHF <span id="total_percant"></span></span>
<br>
</div>
<div class="span_padding_invoice lead_total_container_bold">
<span class="invoice_main_span">Total</span>
<span class="right-clmn-span">CHF <span id="total_end"></span></span>
<br>
</div>
</div>
<div id="footer_invoice">
...
</div>
</div>
</body>
</html>');
$dompdf->render();
$dompdf->stream("hello.pdf");
But my css doesnt work good. I add css as .
I get this result:
So how can I solve this problem?
Maybe I must set some settings for my css or settinhs for page?
Thanks for any help.
I am pretty sure that float is the cause of the problem
Depending on the dompdf version you can use def("DOMPDF_ENABLE_CSS_FLOAT", true); in dompdf_config.inc.php but this is not a good practice
I would suggest to use display:inline-block or even position:absolute which are fully compatible.
This is my HTML code
<div>
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-md-3 col-sm-3 animate-box">
<div class="team-section-grid" style="background-image: url(assets/img/image-bg.jpg);">
<div class="overlay-section">
<div class="desc">
<i class="icon icon-wallet2"></i> Buy Now
</div>
</div>
</div>
<div class="text-center add-cart">
<a href="" title="">
<i class="icon icon-cart"></i> Add To Cart
</a>
<a href="" title="">
<i class="icon icon-heart" style="margin-left: 10px;"></i> Add To Wishlist
</a>
</div>
</div>
View More..
</div>
What i am trying to achieve through JQUery is whenever click the view more.. or whenever the focus is on that button I want the following div appended to the current div so that I can dynamically load products from the DB and append it.
Can anyone help me with that code? Thanks in advance..
Did you tried: http://api.jquery.com/append/ ?
A very simple example:
jQuery('.wrapper a').on('click', function(e){
e.preventDefault;
jQuery('.wrapper').append('<div class="item"></div>');
});
.wrapper{
position: relative;
background: #e6e6e6;
padding: 10px 10px 50px 10px;
}
.wrapper a{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #aaa;
color: white;
text-align: center;
border-top: 3px solid #fff;
}
.item{
display: block;
width: 100%;
height: 20px;
background: #ccc;
margin: 0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
show more
<div class="item"></div>
</div>
Instead of append('<div class="item"></div>') you can append html-templates, too. It could be more comfortable to use a template engine here ...