I have a li item, that has multiple things inside it. It will be a thumbnail and a short description, and an a tag inside the li that makes everything a link (thumbnail, white space and description) and inside the thumbnail will be a Facebook share icon that needs to click through to a share link.
But because it's all wrapped in an a tag, the a tag around the Facebook share icon kills the outer one...
Here's the html:
<li><a href="">
<div class="image-thumbail>
<div class="share-icons-thumb">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br>
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</a>
</li>
I've also mocked up a quick example in an image:
So I want the red circle to take you to the FB share link, and everything else to take you to the outer a tag link..........
Is this possible?
Any ideas/help would be great, thanks!
There is a bunch of odd nesting in your example that will give you problems. I wasn't able to even get the main a element working. I would recommend adding an action button instead of having the entire "card" clickable. However, you could use JavaScript to handle the card click. This might help.
HTML:
<div class="card">
<div class="image-thumbnail">
<div class="share-icons-thumb">
<a class="link-fb" href="http://example.com"><i class="fa fa-facebook">f</i></a>
<a class="link-twitter" href="http://example.com"><i class="fa fa-twitter">t</i></a>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br />
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</div>
CSS:
.image-thumbnail {
background: aqua;
width: 120px;
height: 80px;
position: relative;
}
.card {
font-size: smaller;
width: 200px;
cursor: pointer;
}
.share-icons-thumb {
position: absolute;
bottom: 5px;
right: 5px;
z-index: 2;
}
.share-icons-thumb a {
color: white;
background: blue;
padding: 1px 5px;
margin: 0 2px;
}
JS:
$(function() {
$('.card').on('click', function() {
window.location = 'http://google.com';
});
});
http://jsfiddle.net/a0fncyvs/
The script in the fiddle doesn't allow window.location calls, and I added click handlers for the FB and Twitter links just for show and so you wouldn't actually be redirected here.
I hope that helps.
The solution that I have used in the past is to bring the inner <a> element forward in the stack order using a higher z-index than the outer <a> tag, eg. z-index: 2 This will make the inner tag selectable. For example add the following to your CSS and your original HTML will work as you expect.
.share-icons-thumb a {
z-index: 2;
}
<li><a href="">
<div class="image-thumbail">
<div class="share-icons-thumb">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="events-text">
<h1>Event Name</h1>
<h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
<p>Lorem ipsum dolor sit amet, elit, sed diam
nonummy nibh euismod tincidunt ut...</p>
<br>
<h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
</div>
</a>
</li>
Related
I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need?
$('.click').on('click',function(e){
$('.dialog').toggle()
$(document).on('click',function(e){
if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
$('.dialog').css('display','inline-block');
}
})
})
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.
Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.
const dialog = $('.dialog');
$('.click').on('click', function(e) {
if (!e.target.closest('.dialog')) {
dialog.toggle();
}
e.stopPropagation();
});
$(document).on('click', function(e) {
dialog.hide();
});
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.
I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I found a pretty sweet codepen regarding buttons/aesthestics and re-purposed it to fit what our team is trying to build. Basically we want buttons going down vertically on the left hand side with a large div on the right hand side. When a certain button is clicked on the left, the div on the right will change to show the appropriate content. After doing some reading, it looks like jQuery is the answer to this functionality. I've never actually coded jQuery and couldn't get anything to work correctly yet. There are two things we need:
When the button is clicked on the left, we need the div on the right to change content.
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
Can someone provide some guidance? Thanks!
#wrapper {
text-align: center;
}
.bt_wrap {
display: flex;
flex-direction: column;
width: auto;
height: auto;
background: gray;
width: 100px;
height: 100px;
cursor: pointer;
perspective: 200px;
transition: background 0.2s ease-out;
}
.box {
position: absolute;
perspective-origin: 50px 50px;
transform-origin: 50px 50px;
transition: transform 0.2s ease-out;
transform-style: preserve-3d;
}
.icon,
.icon2 {
position: absolute;
top: 0;
left: 20px;
margin-top: 20px;
background: black;
color: #fff;
width: 60px;
height: 60px;
font-size: 2em;
line-height: 60px;
transition: background 0.2s ease-out;
transform: translate3d(0px, 0px, 30px) rotateY(0deg);
}
.icon2 {
background: black;
transform: translate3d(29px, 0px, 0px) rotateY(90deg);
transition: background 0.2s ease-out;
}
.bt_wrap:hover {
background: blue;
}
.bt_wrap:hover .icon {
background: black;
}
.bt_wrap:hover .icon2 {
background: black;
color: blue;
}
.bt_wrap:hover .box {
transform: rotateY(-90deg);
}
.started {
font-size: 0.75em;
position: absolute;
bottom: 4px;
right: 4px;
color: green;
background: white;
border-radius: 50%;
width: 1em;
}
.main {
display: flex;
}
.content {
width: 100%;
padding-left: 1em;
text-align: center;
display: flex;
align-items: center;
}
.form-title {
margin-top: 0;
margin-bottom: 30px;
padding-bottom: 15px;
position: relative;
}
.form-title::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 80px;
height: 4px;
background: orange;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-otransform: translateX(-50%);
transform: translateX(-50%);
}
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div class="form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>
Here's my take:
http://jsfiddle.net/bxmaqtd3/
When the button is clicked on the left, we need the div on the right to change content.
My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, #slide2, #slide3, etc) and use the css display: none on all slides except the first (or default) slide.
This solution uses a custom data attribute to store the ID of the slide div which you want the given button to show. For example:
<div class="bt_wrap" name="1" data-slide="slide1">
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
To achieve this I duplicate the :hover styles into a new class called active when you click on one of the button divs it removes the class from all buttons and then adds the class to the button you have just clicked.
JS:
$('.bt_wrap').click(function(){
$('.bt_wrap').removeClass('active'); //remove active class on all buttons
$(this).addClass('active'); //add active class to the one that you clicked
var slideId = $(this).attr('data-slide'); //find the value of the associated slide id
$('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show
$("#" + slideId).show(); //show the one you want to show
});
CSS:
#slide1 {
display: block;
}
#slide2 {
display: none;
}
.active .box {
transform: rotateY(-90deg);
}
.active {
background: blue;
}
HTML:
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1" data-slide="slide1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2" data-slide="slide2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div id="slide1" class="slide form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
<div id="slide2" class="slide form-container">
<h2 class="form-title">Some other title</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>
Working on a blog site, Here's the effect I want :
I use a forEach to loop through every post and create the same style for each post. This is my code :
<% blog.forEach(function(blog,index) { %> //loops through every post
<div class="col-md-6 col-sm-6">
<div class="thumbnail">
<img src="<%= blog.image %>"> //adds image
</div>
<div class="caption">
<h2><%= blog.title %></h2> //adds title
</div>
<span><%= blog.created.toDateString(); %></span> //adds date
<div class="relative">
<p><%- blog.body.substring(0,250); %></p> //adds body
<div class="absolute"></div>
</div>
</div>
<% }}) %>
It results in :
I have my blog post image in
<% blog.image %>
How can I use this image as background with title on it(just like the one in the 1st image)? Is it possible to pass this image as background with ejs template?
This should get you started:
.wrapper {
position: relative;
}
.overlay {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(50, 50, 50, 0.5);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-6 col-sm-6">
<a href="/blog/<%= blog._id %>">
<div class="wrapper">
<img class="img-responsive" src="http://pipsum.com/800x300.jpg">
<div class="overlay">
<h2> blog.title </h2>
<span>blog.created.toDateString();</span>
</div>
</div>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie commodo quam, in dapibus odio laoreet sed. Duis id mauris in ligula lacinia bibendum non nec urna. Praesent at est varius, rutrum massa sed, elementum velit.
</p>
</div>
I stripped out the EJS to focus on the HTML markup and CSS.
A brief overview of how this works:
The image and overlay is wrapped in .wrapper, which is set to position: relative;.
The .overlay is set to position: absolute; which takes the div out of normal content flow and absolutely positions it inside .wrapper.
bottom: 0; ensures it is at the bottom, and width: 100% expands it to fill .wrapper.
I added background: rgba(50, 50, 50, 0.5); to make the text a bit more readable (values need tweaked). rgba stands for Red, Green, Blue, Alpha. The Alpha digit allows you to adjust transparency. 1 is fully opaque, 0 is fully transparent.
I am using owl carousel 2 to create a simple sliding carousel. At the minute I am just using images however I would like to be able to use html files instead of . These html files have multiple divs in which images can be loaded into and instead of the whole image sliding away only the would change. Any suggestions as to how I could go about doing this?
Current HTML file:
<div id="carousel" class="owl-carousel">
<div class="item"><img src="Images/1.jpg" alt="img1" /></div>
<div class="item"><img src="Images/2.jpg" alt="img2" /></div>
<div class="item"><img src="Images/3.jpg" alt="img3" /></div>
<div class="item"><img src="Images/4.jpg" alt="img4" /></div>
</div>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/owl.carousel.js"></script>
<script src="Scripts/app.js"></script>
If you are Saying about HTML Elements . Then I have a solution for you.
So Let me tell u how to Create a Client Testimonials area with Owl Carousel and Bootstrap.
Make sure you have connected owl.carousel.css, owl.theme.default.min.css and owlcarousel.js.
HTML Code
<section id="clients-reviews" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="owl-client-reviews" class="owl-carousel owl-theme">
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
</div>
</div>
</div>
</div>
</section>
CSS goes like This
#clients-reviews .review p{
font-family: 'PT Serif Caption', serif;
color: #ffffff;
font-size: 18px;
}
#clients-reviews .review span.name{
color:#fed136;
}
#clients-reviews .review span.post{
font-family: 'PT Serif Caption', serif;
font-weight: 300;
font-size: 14px;
color: #fed136;
text-transform: none;
}
#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
background: transparent;
color: #ffffff;
bborder: 2px solid #fed136;
font-size: 14px;
padding: 0 10px;
line-height: 14px;
}
Your JS file will be
$("#owl-client-reviews").owlCarousel({
items:1,
loop:true,
autoplay:true,
autoHeight: false,
autoHeightClass: 'owl-height',
dots:false,
nav:true,
navText:[
"<i class='fa fa-angle-left fa-2x'></i>",
"<i class='fa fa-angle-right fa-2x'></i>"
]
});
Note*
I have used Fontawesome Icons for next and pre.
If you want increase the items then use the items property.
Thankss :)