Arrange Text Properly in testimonial part - javascript

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>

Related

Tooltip partially obscured by outer div

I would like to display a tooltip with item name when user hover over the image item. The items are shown inside a grid with scrollbar (class="itemGrid" and item itself is class="itemOnGrid").
I've tried many solutions over the internet, however I'm learning about CSS now and I could not solve my problem.
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
The items are added by JS, I wrote down 3 examples hard-coded.
Image of tooltip being cutted off:
Thanks in advance!

I am afraid, that in your situation you can not solve it with css alone.
Since overflow:hidden cuts off everything outside of it.
You could probably remove position:relative from itemOnGrid class, but all your tooltips would end up in the same place - I really doubt you want to manually position all of them.
My solution is to use javascript for tooltip location(and also change its text).
I did change the placement of your elements a little, also edited the css accordingly for the new view.
The copies of the elements are just for demonstration purposes.
Now the solution is basically this function prepare where I assign eventListeners to every itemOnGrid. In this eventListener I read the position of the element that has been hovered and move (and change text of) the tooltip. I didn't really care about perfect location of the tooltip here, so you might want to play with it a little.
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>

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>

Save data from form using javascript

I have a chat box made in codeigniter that is working fine with static data, but i would like to connect it to database and make it dynamic
My requirement are:
1) when a user enters their name and email address under chatbox__credentials it needs to get saved in database
2) Using the email id, needs to display data in chatbox__body which is related to that email id
3) the entered email id also needs to be linked with the chatbox__message so that what ever message that user sends gets saved under their email id
Code on view page (index.php):
<div class="chatbox chatbox--tray chatbox--empty">
<div class="chatbox__title">
<h5>Customer Service</h5>
<button class="chatbox__title__tray">
<span></span>
</button>
<button class="chatbox__title__close">
<span>
<svg viewBox="0 0 12 12" width="12px" height="12px">
<line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line>
<line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line>
</svg>
</span>
</button>
</div>
<div class="chatbox__body">
<div class="chatbox__body__message chatbox__body__message--left">
<img src="#" alt="Picture">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--left">
<img src="#" alt="Picture">
<p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p>
</div>
</div>
<form class="chatbox__credentials">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" required>
</div>
<button type="submit" class="btn btn-success btn-block">Enter Chat</button>
</form>
<textarea class="chatbox__message" placeholder="Write something interesting"></textarea>
</div>
(function($) {
$(document).ready(function() {
var $chatbox = $('.chatbox'),
$chatboxTitle = $('.chatbox__title'),
$chatboxTitleClose = $('.chatbox__title__close'),
$chatboxCredentials = $('.chatbox__credentials');
$chatboxTitle.on('click', function() {
$chatbox.toggleClass('chatbox--tray');
});
$chatboxTitleClose.on('click', function(e) {
e.stopPropagation();
$chatbox.addClass('chatbox--closed');
});
$chatbox.on('transitionend', function() {
if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove();
});
$chatboxCredentials.on('submit', function(e) {
e.preventDefault();
$chatbox.removeClass('chatbox--empty');
});
});
})(jQuery);
my chat box :
(function($) {
$(document).ready(function() {
var $chatbox = $('.chatbox'),
$chatboxTitle = $('.chatbox__title'),
$chatboxTitleClose = $('.chatbox__title__close'),
$chatboxCredentials = $('.chatbox__credentials');
$chatboxTitle.on('click', function() {
$chatbox.toggleClass('chatbox--tray');
});
$chatboxTitleClose.on('click', function(e) {
e.stopPropagation();
$chatbox.addClass('chatbox--closed');
});
$chatbox.on('transitionend', function() {
if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove();
});
$chatboxCredentials.on('submit', function(e) {
e.preventDefault();
$chatbox.removeClass('chatbox--empty');
});
});
})(jQuery);
.chatbox {
position: fixed;
bottom: 0;
right: 30px;
width: 300px;
height: 400px;
background-color: #fff;
font-family: 'Lato', sans-serif;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.chatbox--tray {
bottom: -350px;
}
.chatbox--closed {
bottom: -400px;
}
.chatbox .form-control:focus {
border-color: #1f2836;
}
.chatbox__title,
.chatbox__body {
border-bottom: none;
}
.chatbox__title {
min-height: 50px;
padding-right: 10px;
background-color: #1f2836;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.chatbox__title h5 {
height: 50px;
margin: 0 0 0 15px;
line-height: 50px;
position: relative;
padding-left: 20px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.chatbox__title h5 a {
color: #fff;
max-width: 195px;
display: inline-block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chatbox__title h5:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
background: #4CAF50;
border-radius: 6px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.chatbox__title__tray,
.chatbox__title__close {
width: 24px;
height: 24px;
outline: 0;
border: none;
background-color: transparent;
opacity: 0.5;
cursor: pointer;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
.chatbox__title__tray:hover,
.chatbox__title__close:hover {
opacity: 1;
}
.chatbox__title__tray span {
width: 12px;
height: 12px;
display: inline-block;
border-bottom: 2px solid #fff
}
.chatbox__title__close svg {
vertical-align: middle;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.2px;
}
.chatbox__body,
.chatbox__credentials {
padding: 15px;
border-top: 0;
background-color: #f5f5f5;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.chatbox__credentials {
display: none;
}
.chatbox__credentials .form-control {
-webkit-box-shadow: none;
box-shadow: none;
}
.chatbox__body {
overflow-y: auto;
}
.chatbox__body__message {
position: relative;
}
.chatbox__body__message p {
padding: 15px;
border-radius: 4px;
font-size: 14px;
background-color: #fff;
-webkit-box-shadow: 1px 1px rgba(100, 100, 100, 0.1);
box-shadow: 1px 1px rgba(100, 100, 100, 0.1);
}
.chatbox__body__message img {
width: 40px;
height: 40px;
border-radius: 4px;
border: 2px solid #fcfcfc;
position: absolute;
top: 15px;
}
.chatbox__body__message--left p {
margin-left: 15px;
padding-left: 30px;
text-align: left;
}
.chatbox__body__message--left img {
left: -5px;
}
.chatbox__body__message--right p {
margin-right: 15px;
padding-right: 30px;
text-align: right;
}
.chatbox__body__message--right img {
right: -5px;
}
.chatbox__message {
padding: 15px;
min-height: 50px;
outline: 0;
resize: none;
border: none;
font-size: 12px;
border: 1px solid #ddd;
border-bottom: none;
background-color: #fefefe;
}
.chatbox--empty {
height: 262px;
}
.chatbox--empty.chatbox--tray {
bottom: -212px;
}
.chatbox--empty.chatbox--closed {
bottom: -262px;
}
.chatbox--empty .chatbox__body,
.chatbox--empty .chatbox__message {
display: none;
}
.chatbox--empty .chatbox__credentials {
display: block;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="chatbox chatbox--tray chatbox--empty">
<div class="chatbox__title">
<h5>Customer Service</h5>
<button class="chatbox__title__tray">
<span></span>
</button>
<button class="chatbox__title__close">
<span>
<svg viewBox="0 0 12 12" width="12px" height="12px">
<line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line>
<line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line>
</svg>
</span>
</button>
</div>
<div class="chatbox__body">
<div class="chatbox__body__message chatbox__body__message--left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture">
<p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p>
</div>
</div>
<form class="chatbox__credentials">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" required>
</div>
<button type="submit" class="btn btn-success btn-block">Enter Chat</button>
</form>
<textarea class="chatbox__message" placeholder="Write something interesting"></textarea>
</div>

How can I place text on a resizing image that also resizes?

I want to make the
.overlay div float on top of the "img/5.jpg". But I want the image to
still resize and to stay at the top. As well as the banner at the top
staying the same. Thank you! An example of this idea can be found at http://thedreamcatchers.co.uk. I'd rather use just text with no background, I placed the text inside a div (.overlay) because it seemed like that would be easier to work with.
EDIT: I don't think I was being clear enough I want to effectively float .overlay on top of the image inside #maincontent1
#charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#wrapper{
height: auto;
width: 100%%;
}
.overlay {
width:53%;
padding:2% 2% 3%;
background-color: green;
background-repeat:repeat;
text-align:left;
z-index:1;
}
#maincontent1 h1{
z-index:100;
position:static;
color:white;
}
#maincontent1 img{
width: 100%;
position:static;
top: 0;
left: 0;
z-index:-1;
}
#maincontent2 {
clear: both;
}
#maincontent3 {
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 20%;
margin-right: 20%;
clear: both;
}
#maincontent4 {
width:100%;
clear: both;
}
#maincontent5 {
clear:both;
background-image: url(../img/3.jpeg);
padding-top: 10%;
padding-bottom: 10%;
}
.maincontent5_text{
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 12%;
margin-right: 12%;
background-color:#FFF;
clear: both;
border-color:#FFF;
border-style: solid; border-width: 10px;
}
.maincontent5_text h1{
display:inline;
font-family: 'Raleway', sans-serif; font-size: 30px;
text-align: right;
color: #F39C9C;
font-weight: 400;
padding-left: 5px;
}
#topbar {
margin-bottom: 0;
padding: 3px 0 3px 0;
background: #F39C9C;
width: 100%;
text-align: right;
color:white;
}
#topbar ul {
list-style: none;
margin: 0;
padding: 0;
}
#topbar ul li {
margin: 0;
padding: 0;
display: inline;
}
<html lang="en">
<div id="wrapper">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="topbar">
<ul>
<li>LOGO</li>
<li>Email</li>
<li>Telephone</li>
</ul>
</div>
<div id="maincontent1">
<img src="http://placehold.it/1920x1080"/>
<div class="overlay">
<h1>Some Text Here</h1>
</div>
</div>
<style>
.menu1 p {
text-align: center;
font-family: 'Comfortaa', cursive;
font-size: 20px;
}
</style>
<div id="maincontent2">
<table width="100%" height="10%" border="0" class="menu1">
<tr>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Home</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>About</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Portfolio</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Contact</a></p></td>
</tr>
</table><hr width="100%" color="#F39C9C">
</div>
<div id="maincontent3">
<h1 style="font-family: 'Raleway', sans-serif; font-size: 36px; text-align:center; color:#F39C9C; font-weight:400;"> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p>
</div>
<div id="maincontent4">
<iframe src="http://youtube.com/embed/2YBtspm8j8M?controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&rel=0&showinfo=0" width="100%" height="500px" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="maincontent5" >
<div class="maincontent5_text">
<img src="http://placehold.it/200x200" style="display:inline; float: left;">
<h1 style=""> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p></div>
</div>
</div>

You can set a font-size on your text with a value in viewport units.
Here's a demo (Resize the window to see text resizing)
<img src="http://lorempixel.com/g/400/200" alt="" />
<div class="text">Some text</div>
CSS
img {
width: 50%;
height: 50%;
}
.text {
font-size: 4vw; /* 4% of the viewport width */
}

Use media query and percentage for font-size
Fiddle(resize the window to take effect)
http://jsfiddle.net/vntjqnf8/2/
CSS
body{
font-family: 'Raleway', sans-serif;
font-size: 36px;
font-weight:400;
height:100%;
width:100%;
margin:0 auto;
}
.resize{
text-align:center;
color:#F39C9C;
font-size:100%;
width:100%;
}
#media screen and (max-width: 680px){
.resize{
font-size: 50%;
}
}
HTML
<h2 class="resize" >
"They were extremely good at responding to feedback and worked incredibly hard."
</h2>

You set #maincontent1 to position: relative; and set .overlay to position: absolute; Then you can position the overlay with top or bottom, right or left values.

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