How can I display my slider correctly - javascript

everyone i'm new to html/css..I want to display my slider in the center. Can anyone check what wrong in my code & why my Info div come right there where I want display my Slider....Thanks in advance.
Here is HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <img src="GRProvider/Facebook.jpg">
</li>
<li> <img src="GRProvider/LinkedIn.jpg">
</li>
<li> <img src="GRProvider/Google.jpg">
</li>
<li> <img src="GRProvider/Twitter.jpg">
</li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg" />
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg" />
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg" />
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> HOME
</li>
<li> ABOUT US
</li>
<li> CAREER
</li>
<li> CONTACT US
</li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum.............</p>
</div>
<div class="button">
<button type="button">READ MORE</button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
</div>
<div class="footer">
<h3> Copyright by Bitsprovider.com </h3>
</div>
</div>
</body>
</html>
Here is stylesheet attached.
* {
margin: 0% auto;
padding: 0;
width: 90%;
}
body {
background-color: #1e93a5;
width: 100%;
}
.header {
margin: 2%;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.socialmedia > img {
}
ul {
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.images {
float: left;
width: 20%;
}
.pics img {
width: 100%;
}
.diagram {
float: right;
width: 20%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
width: 60%;
}
.navigation {
width: 100%;
}
.navigation > ul {
width: 100%;
}
.navigation > ul li {
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
width: 100%;
}
.slider_img {
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float:left;
width: 100%;
}
p {
width: 100%;
color: #FFF;
background-color: #1e93a5;
text-align:justify;
}
.button {
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
border: 1px solid #18204e;
width: 93%;
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
.text > p {
background-color: #d3d3d3;
color: #fff;
width: 93%;
}
.footer {
float: left;
padding: 2%;
width: 100%;
}
h3 {
color: #fff;
text-align: center;
}

This will center your slider, because it's within the main_content class.
.main_content {
margin: 0 auto;
width: 100%;
clear: both;
}
Once you put the images in the slider, you will have to set that group to be centered as well, but that's controlled through whatever javascript you use for the slider. If it's just one image use .myImageClass{text-align: center}.
edit: jsfiddle

Related

Parallax effect - force text block to behave like background-attachment: fixed

I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.
In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

How to make all my div's same height based on breathing content

I'm troubled by a reoccurring problem when trying to make grid styled websites, how do I make all the divs on a row the same height depending on the tallest div in that row. One of the divs will contain a set of divs that will need to stretch based on that height and auto fill so everything moves together.
Setting the Divs to the same height has to be based on what content is inside the div itself. For example as the text box resizes the picture should also keep the same height and then all the 'icons' should stretch and keep the same height too.
Here is what I currently have:
<div class="container">
<div class="half">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
</div>
<div class="quater">
<img src="http://i68.tinypic.com/6yo87o.jpg"></img>
</div>
<div class="quater social">
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
</div>
</div>
The css:
.half {
width: 50%;
background: yellow;
float: left;
}
.quater {
width: 25%;
background: red;
float: left;
}
.third {
width: 33.33333333%;
background: blue;
float: left;
color: white;
}
img {width: 100%;}
https://jsfiddle.net/atp1agmk/4/
And here is my desired outcome:
I don't mind if it has to be done via JavaScript either
.container{
display: flex;
}
.half {
width: 50%;
background: yellow;
float: left;
}
.quater {
width: 25%;
background: red;
float: left;
display: flex;
align-items: center;
}
.third {
width: 33.33333333%;
background: blue;
float: left;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.social {
flex-wrap: wrap;
align-items: stretch;
}
img {width: 100%;height:auto;}
<div class="container">
<div class="half">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
</div>
<div class="quater">
<img src="http://i68.tinypic.com/6yo87o.jpg" />
</div>
<div class="quater social">
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
</div>
</div>
https://jsfiddle.net/atp1agmk/20/
You can use flex css property to achive your requirement.
Here is the Example . You can comment if you need other way.
you can do that with flex like this
.half {
width: 50%;
background: yellow;
float: left;
}
.quater {
width: 25%;
background: red;
float: left;
}
.third {
width: calc(100% / 3);
height: calc(100% / 2);
background: blue;
float: left;
color: white;
}
img {width: 100%; height: 100%;}
.container {
display: flex;
}
Check which div height is greater and apply that to all divs.
Try this out
https://jsfiddle.net/nikhila/jv2jfuwL/

Underline expanding on mouseover

I am trying to implement a magic line with jquery and CSS. But instead of it following and only inheriting the width, I want it to extend to the next index item.
Scenario:
1: Element one hover
ELEMENT ONE ELEMENT TWO ELEMENT THREE
___________
2: Element two hover
ELEMENT ONE ELEMENT TWO ELEMENT THREE
__________________________
3: Element three hover
ELEMENT ONE ELEMENT TWO ELEMENT THREE
__________________________________________
This is what I have got so far but unfortunately I cant seem to get the elements to expand in accordance with the width of the entire list.
$('.carousel-image ul').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.carousel-info ul',
adaptiveHeight: true,
mobileFirst: true,
});
$('.carousel-info ul').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.carousel-image ul',
dots: true,
// centerMode: true,
focusOnSelect: true
});
var $el, leftPos, newWidth,
$mainNav = $(".carousel-info ul");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".carousel-info ul li.slick-current").width())
.css("left", $(".carousel-info ul li.slick-current").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$('.carousel-info ul').on('mouseenter', '.slick-slide', function(e) {
var $currTarget = $(e.currentTarget);
var index = $currTarget.data('slick-index');
var slickObj = $('.carousel-image ul').slick('getSlick');
slickObj.slickGoTo(index);
var $el = $(".carousel-info ul li.slick-current");
leftPos = $el.position().left;
newWidth = $el.width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
});
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.carousel {
position: relative;
overflow: hidden;
max-height: 42em;
}
.carousel .carousel-info {
position: absolute;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 9;
padding: 30px 0;
opacity: .9;
color: #fff;
background-color: #37474f;
}
.carousel .carousel-info .container {
border-width: 15px;
border-top: 4px solid black;
}
.carousel .carousel-info ul {
position: relative;
max-width: 930px;
margin-right: auto;
margin-left: auto;
}
.carousel .carousel-info ul:after {
display: block;
clear: both;
content: ' ';
}
.carousel .carousel-info li {
float: left;
width: 31.56342%;
margin-right: 2.65487%;
}
.carousel .carousel-info li:last-child {
float: right;
width: 31.56342%;
margin-right: 0;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel-image">
<div class="container-big">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+1&w=400&h=300" />
</li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+2&w=400&h=300" />
</li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+3&w=400&h=300" />
</li>
</ul>
</div>
</div>
<div class="carousel-info">
<div class="container">
<ul>
<li class="slick-current">
<div class="c-header">About Us</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
<li>
<div class="c-header">Others</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
<li>
<div class="c-header">Main</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
</ul>
</div>
</div>
</div>
You need to recalculate just width of a magicline, not its left position - it's always = 0;
$magicLine.stop().animate({
left: 0,
width: leftPos+newWidth
});
demo
You can do this by CSS and some JavaScript :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="carousel">
<div class="carousel-info">
<div class="container">
<div style="display:inline-block; position:relative;">
<ul>
<li class="slick-current" onmouseover="$('#line').css('width','34%');">
<div class="c-header">About Us</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
<li onmouseover="$('#line').css('width','68%');">
<div class="c-header">Others</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
<li onmouseover="$('#line').css('width','100%');">
<div class="c-header">Main</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
</li>
</ul>
<div id="line" style="position:absolute; bottom:0; left:0; width:34%; height:2px; background:red; transition:all 0.2s;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I've created an absolute div with transition, when mouse over on one of your elements the width will increase, that's it!

Arrange Text Properly in testimonial part

I need an arrangement shown in the figure, since I cant post images please click on this link.
for the same I have coded as follows
HTML
<div class="container">
<div class="test-item">
<span class="test-head">
<img src="images/testimonial_item.png" class="img-responsive" />
</span>
<p class="test-quote">
Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus erat porttitor.
<span class="test-author" >
Lorem Ipsum
</span>
<br />
<span class="test-author-org">
lorem
</span>
</p>
</div>
</div>
CSS
.testimonial
{
background: #fff;
padding:60px 0px !important;
position:relative;
}
.test-head {
float: left;
width: 10% !important;
}
.test-head img
{
height:80px;
width:auto;
}
.test-author-org,.test-author
{
float:right;
padding:0;
margin:0;
color:#626262;
}
.testimonial p
{
padding-right:70px !important;
}
.test-item
{
background:#e6e6e6;
border-radius:70px;
min-height:81px;
}
.testimonial .test-quote
{
display: block;
font-family: Arial;
font-size: 14px;
color: #0a3980;
text-align: left;
padding:10px 0 0 0 ;
margin-bottom:0px!important;
clear:right;
}
fiddled here
how can i make it exact to the image ?
please help anyone
Starting from scratch, the below will produce what you are looking for.
Note that if your quote will be less than 650px, you may need to tweak the margins, padding, and/or widths so the content doesn't overflow the container.
See a working jsFiddle here
.my-head{
width:61px;
float:left;
}
.my-body{
padding-top:15px;
width:auto;
max-width:90%;
float:left;
}
.my-quote-container {
font-family: Arial;
font-size: 14px;
color: #0a3980;
text-align: left;
margin-bottom: 0px!important;
background: #e6e6e6;
border-radius: 70px;
min-height: 81px;
clear:both;
}
.my-head-img{
float:left;
transform: rotate(270deg);
margin: 8px 8px 8px 15px;
margin-right:25px;
}
.my-quote{
text-align: left;
display:table;
padding-right:35px;
padding-left:35px;
float:left;
}
.my-body span{
clear: right; float: right;
padding-right:42px;
color:#666666;
}
}
.my-author{
text-transform: uppercase;
margin-top:5px;
}
<div class="my-quote-container">
<div class="my-item">
<div class="my-head"> <img src="http://s6.postimg.org/qara2aba5/testimonial_item.png" class="img-responsive my-head-img" /> </div>
<div class="my-body">
<div class="my-quote">Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus erat porttitor.</div>
<br>
<span class="my-author cap">Lorem Ipsum</span> <br />
<span class="my-author">lorem</span> </div>
</div>
</div>

How to link href to a TAB?

I'm using this example CODE.
I have a page with links using href.
And I intend to add links to another page. When clicked on these links, automatically opening the TAB on the secound page, is it possible?
First page with Links:
TAB1
TAB2
Secound page with TABS
Licenciaturas
<ul class="navi">
<li><a class="menu2" href="#tab1">Eng Inf</a></li>
<li><a class="menu3" href="#tab2">Eng Quimic</a></li>
<li><a class="menu4" href="#tab3">Eng Civil</a></li>
</ul>
<br><br>
Mestrados
<ul class="navi">
<li><a class="menu2" href="#tab10">Mestrado 1</a></li>
<li><a class="menu3" href="#tab11">Mestrado 2</a></li>
<li><a class="menu4" href="#tab12">Mestrado 3</a></li>
<li><a class="menu5" href="#tab13">Mestrado 4</a></li>
<li><a class="menu6" href="#tab14">Mestrado 5</a></li>
</ul>
<div id='tab1'>
TEXTO LICENCIATURA 1
</div>
<div id='tab2'>
TEXTO LICENCIATURA 2
</div>
<div id='tab10'>
TEXTO Mestrado 1
</div>
<div id='tab11'>
TEXTO Mestrado 2
</div>
$('ul.prov').on('click', 'a', function (e) {
//Change content displayed
$($("ul.prov a.active")[0].hash).hide();
$(this.hash).show();
//Change active item
$("ul.prov a.active").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
//Hide all content divs except first one
$("ul.prov a").each(function(index){
if(index != 0)
$(this.hash).hide();
else
$(this).addClass("active");
});
$('a').click(function(){
$("#tabs").tabs("option", "active", parseInt(this.id));
});
Please find the link below
http://jsfiddle.net/priyank_s/5x3yp6Lb/
you just need to use html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 tabs</title>
<link rel="stylesheet" type="text/css" media="all" href="tabs.css" />
</head>
<style>body
{
font-family: "Segoe UI", arial, helvetica, freesans, sans-serif;
font-size: 90%;
color: #333;
background-color: #e5eaff;
margin: 10px;
z-index: 0;
}
h1
{
font-size: 1.5em;
font-weight: normal;
margin: 0;
}
h2
{
font-size: 1.3em;
font-weight: normal;
margin: 2em 0 0 0;
}
p
{
margin: 0.6em 0;
}
p.tabnav
{
font-size: 1.1em;
text-transform: uppercase;
text-align: right;
}
p.tabnav a
{
text-decoration: none;
color: #999;
}
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}</style>
<body>
<article class="tabs">
<section id="tab1">
<h2>Tab 1</h2>
<p>This content appears on tab 1.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>This content appears on tab 2.</p>
<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p>
<p class="tabnav">next ➧</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>This content appears on tab 3.</p>
<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p>
<p class="tabnav">next ➧</p>
</section>
</article>
</body>
</html>

Categories