How to cycle through divs using left/right - javascript

JSFiddle: https://jsfiddle.net/d34pksmn/1/
HTML:
<div style="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;">
<div class="dvSli" style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;">
</div>
<div style="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;">
<span id="arrow-left"></span>
</div>
<div style="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;">
<span id="arrow-right"></span>
</div>
<div style="overflow: hidden; height: 40px; width: 100%; text-align: center;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
<!-- Generate a letter for each occurance in `dCon` class DIV -->
</div>
<div class="dCon" style="overflow: auto; width: 6000000%; height: 125px;">
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
ONE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TWO
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
THREE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FOUR
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FIVE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SIX
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SEVEN
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
EIGHT
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
NINE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TEN
</div>
</div>
</div>
How can I modify my HTML/CSS/JQuery so:
Clicking on left/right arrow will slide each DIV inside the dCon
class parent div, left if left is clicked and right if right is
clicked.
I wanted to achieve the image carousel without the use of any plugins.

I'm not 100% certain what you're asking for in part 2, can you be a bit more specific?
For the first part, here's an easy solution:
$(function() {
$("#arrow-left").click(function() {
$(".dCon div:first-child").appendTo(".dCon");
$(".dCon").remove(".dCon div:first-child");
});
$("#arrow-right").click(function() {
$(".dCon div:last-child").prependTo(".dCon");
$(".dCon").remove(".dCon div:last-child");
});
});
and the updated fiddle: https://jsfiddle.net/JSnoobDC16/d34pksmn/6/

Related

How to achieve div overlapped to another div?

How can I achieve a <div> overlap so that the div #inner-block us in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>
Hope this helps!
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>

How do I change the position of my tooltip?

I want to change the position of my tooltip to cover the textfield to the left of the question mark.
In my code I have four question marks. To the left of the question marks there are four textfields. once the user hovers over a question mark, a tooltip should be placed over the text field.
How do I do this?
My code for the form >>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
If you are looking for something like this, this would help. The tooltip you asked is positioned to the top of the text field. The tooltip color might be not good, but Hope it helps you.
#Name {background-color: grey;}
#Address {background-color: grey;}
* {box-sizing: border-box}
#save-btnOne{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
.asterisk::after{
content: '*';
color: #EF5F5F;
float: right;
}
#save-btnTwo{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
/* Set height of body and the document to 100% */
#container {
width: 400px;
height: 420px;
margin: 0;
font-family: Arial;
display: none;
position:absolute;
top:20px;
left: 400px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Style tab links */
.tablink {
background-color: white;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 200px;
}
.tablink:hover {
background-color: white;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
.nameHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotOne .nameHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotOne .nameHelp::after {
position: absolute;
}
.dotOne:hover .nameHelp {
visibility: visible;
}
.addressHelp{
position: relative;
display: inline-block;
left: -200px;
top:-80px;
}
.dotTwo .addressHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotTwo .addressHelp::after {
position: absolute;
}
.dotTwo:hover .addressHelp {
visibility: visible;
}
.emailHelp{
position: relative;
display: inline-block;
border: 1px black;
left: -200px;
top:-80px;
}
.dotThree .emailHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotThree .emailHelp::after {
position: absolute;
}
.dotThree:hover .emailHelp {
visibility: visible;
}
.numberHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: absolute;
display: inline-block;
}
.dotFour .numberHelp::after {
position: absolute;
}
.dotFour:hover .numberHelp {
visibility: visible;
}
.tooltip:after{
content:"";
width:10px;
height:10px;
position:absolute;
background-color:red;
left:50%;
transform:rotate(45deg);
top:60px;
}
.tooltip{
position:absolute;
width:150px;
color:white;
background-color:red;
border-radius:10px;
top:0px;
z-index:2;
}
.btn{
background-color: red;
color: white;
font-weight: bold;
height: 25px;
cursor: pointer;
}
#name{
width: 200px;
position: absolute;
left: 120px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#address{
width: 200px;
position: absolute;
left: 120px;
}
#email{
width: 200px;
position: absolute;
left: 120px;
}
#number{
width: 200px;
position: absolute;
left: 120px;
}
#TitleTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#AddressTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#EmailTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NumberTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineOneTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineTwoTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#SuburbTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#StateTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#CountryTransfer{
width: 200px;
position: absolute;
left: 150px;
}
.name{
width: 200px;
position: absolute;
left: 150px;
}
.address{
width: 200px;
position: absolute;
left: 150px;
}
.LineOne{
width: 200px;
position: absolute;
left: 150px;
}
.email{
width: 200px;
position: absolute;
left: 150px;
}
.number{
width: 200px;
position: absolute;
left: 150px;
}
.LineDiv
{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDivOne{
padding-top: 5px;
padding-bottom: 5px;
}
.addressDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.emailDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.numberDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.dotOne {
border-bottom: 1px dotted black;
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotTwo{
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotThree {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotFour {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="tooltip nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="tooltip addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="tooltip emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="tooltip numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
</body>
</html>
I have tried the below CSS changes.
The right: 105%; helps to align the tooltip to the left.
And the width: 250px; in the .numberHelp can be changed to fit over the textbox with a background-color recommended.
.numberHelp {
position: relative;
display: inline-block;
border: 1px black;
width: 250px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
transition: opacity 0.3s;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
The full code is here - JS Fiddle
Similar changes can be made to other CSS attributes for other divs as well.
What you're asking is a bit difficult, since you want the tooltip to be exactly positioned over a text field. Either can vary in size depending on content, and position depending on the sizes of the screen or window. Not to mention styling choices and their effects.
I would suggest you instead use the placeholder attribute for the input tag:
<input type="textbox" name="firstname" title="name" id="name"
placeholder="User's name in correct format"
required>
Also, consider changing the content of the tooltip as it is a little large. A better tooltip is one that explains what the correct format for the name is, for example.

Resizing of a Absolute Positioned Element

The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>

divs not filling white-space in display: table;

I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?
.thing {
height: 120px;
width: 250px;
z-index: 10;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 11;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
display: table-cell;
padding-top: 5px;
width: 250px;
border-radius: 10px;
border: 2px solid black;
overflow: hidden;
position: relative;
height: 385px;
}
.container {
position: relative;
width: 750px;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
<div class="report">
<div id="imgGallary" class="container">
<img src="images/companies.png" alt="" width="750" height="400" />
<img src="gallery" alt="" width="750" height="400" />
</div>
<aside class="aside">
<div id="c1"></div>
<div class="thing" style="background-color: blue;">
<h1>Find Us!</h1>
</div>
<div class="thing" style="background-color: orange;"></div>
<div class="thing" style="background-color: pink"></div>
</aside>
</div>
Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.
Working codepen:
http://codepen.io/staypuftman/pen/vKoPmw
.thing {
height: 120px;
width: 250px;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
padding-top: 5px;
width: 18%;
border-radius: 10px;
border: 1% solid black;
overflow: hidden;
float: left;
position: relative;
height: 385px;
}
.container {
float: left;
width: 80%;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}

How can i make a fixed box inside a div with scroll?

How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/
Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}
Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.
You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}

Categories

Resources