why float left is not working on last element? - javascript

I create a horizontal list using float:left .It is working fine in all element but not working in last element . I have already trying clear:both.but it not working.
Actually I the problem is all element have 101px height . but last item or last li increase it's height to 303px .I am thinking float left not working.
here is my code
https://jsfiddle.net/74scu286/1/
I am using like this
.rh08-slider__slide {
float: left;
position: relative;
}
my only concern was why last element increase it's height as it has same content.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body class="f20 f20v0 ready" style="opacity:1">
<div class="f20w1">
<section class="rh08 rh08v0 rw-neutral-50bg" data-trackas="rh08" data-ocomid="rh08">
<div class="rh08-slider rh08-slider-1 is-draggable rh08-slider_ready" data-custom-id="rh08-slider-1">
<div class="rh08-slider__slides-container">
<div class="rh08-slider__track" style="width: 8454px; transform: translate3d(-1409px, 0px, 0px);">
<div class="rh08-slider__slide" data-crystal-slide="1" style="width: 16.6667%;">
<div class="rh08w1 cpad">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">4 Premier League wählt Oracle Cloud als Grundlage für
neue, fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert
die Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
</div>
<div class="rh08w1 cpad rh08-slider__slide slick-active" data-crystal-slide="2"
style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert die
Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="3" style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">2 Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert die
Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
<!-- <div class="crsl-nav slick-nav "><a class="slick-prev slick-arrow slick-disabled" data-lbl="prev-slide" aria-label="Previous" aria-disabled="true" style="">Previous</a><a class="slick-next slick-arrow o-hf" data-lbl="next-slide" aria-label="Next" style="" aria-disabled="false">Next</a><ul class="slick-dots hide" role="tablist"><li class="slick-active" role="presentation"><button type="button" aria-pressed="true" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="0" aria-selected="true">1</button></li><li role="presentation"><button type="button" aria-pressed="false" role="tab" id="slick-slide-control01" aria-controls="slick-slide03" aria-label="2 of 2" tabindex="-1">2</button></li></ul></div>-->
</div>
<div class="rh08-slider__slide" data-crystal-slide="6" style="width: 16.6667%;">
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="2" style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert
die Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /RH08v0 -->
</div>
</body>
</html>
My issue is related to height .Actually last element increase it's height. it should be same as 101px as other slide
updated link https://jsfiddle.net/74scu286/1/

Your floats are working fine.
However, your final floated div has this extra div within it which the others don't have:
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="2" style="width: 16.6667%;">
This means you are putting the width down by 16.6667% twice so it's narrower, thus taller.

Related

Local Storage and Form in Jquery

I have a div (form) that appears when you click a button,
I need to be able with jquery stored the information of the form.
For technical reasons, I can not use PHP so I turned to localStorage which seems simple, but does not work very well with my code:
$(document).ready(function(){
var i = 5;
$('.addbox').click(function(){
$('.formdiv').removeClass('formdiv');
$('#formulaire').addClass('formdivdisplay');
});
$('#submit').click(function(){
var titre = $('#titleform').val();
var chemin = $('#chemin').val();
var name = $('#name').val();
var statue = $('#statue').val();
var side = $('#select').val();
localStorage.setItem('titre', titre);
localStorage.setItem('chemin', chemin);
localStorage.setItem('name', name);
localStorage.setItem('statue', statue);
localStorage.setItem('side', side);
i = i + 1;
});
function drawBox(){
var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';
localStorage.setItem('block', block);
$('.container').append(localStorage.getItem('block'));
}
});
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Bienvenue sur SAKADO</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/nouvelleoutils.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Space+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
<!--design-->
<div id="left"></div>
<div id="right"></div>
<div id="top">
<h1 class="h1 animated fadeInRight">SAKADO</h1>
<div class="divheader">
<a class="a1 active" href="home.html">Accueil</a>
<a class="a2" href="demande.html">Demandes</a>
<a class="a3" href="utilisation.html">Utilisation</a>
</div>
</div>
<div id="bottom">
<div class="addbox"><i class="fi-xwsuxl-plus-solid"></i></div>
</div>
<!--design-->
<div id="page">
<p class="tlegend">Les textes en <span class="Svert">Vert</span> sont les chemins d'accès, en <span class="Sorange">Orange</span> des informations importantes.</p>
<!--Box glossaire-->
<div class="container">
<div class="box">
<h1 class="boxtitle animated fadeInUp delay-500ms">Glossaire du CSG</h1>
<p class="Sbleu statue">Public</p>
<p class="Svert links "><a class="Svert">V:\Operations\GLOSSAIRE ver07-00 du 071212.pdf</a></p>
<a class="boxbtn" href="docs/GLOSSAIRE ver07-00 du 071212.pdf" target="_blank">Obtenir</a>
</div>
<!--Box Site Survey DDO-->
<div class="boxindex2">
<h1 class="boxtitle animated fadeInUp delay-500ms">Site Survey DDO</h1>
<p class="Srouge statue">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_Site Survey\site survey DDO presentation générale.pptx</a></p>
<a class="boxbtn" href="docs/site survey DDO presentation générale.pptx" target="_blank">Obtenir</a>
</div>
<!--OLC modele Galileo-->
<div class="boxindex3">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle OLC Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_OLC modèle\OLC - VA244 GALILEO FOC-M8 1-3.docx</a></p>
<a class="boxbtn" href="docs/OLC - VA244 GALILEO FOC-M8 1-3.docx" target="_blank">Obtenir</a>
</div>
<!--Modele DM Galileo-->
<div class="boxindex4">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle DM Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx</a></p>
<a class="boxbtn" href="docs/VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx" target="_blank">Obtenir</a>
</div>
<!--Modele M8 Galileo-->
<div class="boxindex5">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle M8 Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244-GALILEO FOC M8 -- DM One.docx</a></p>
<a class="boxbtn" href="docs/VA244-GALILEO FOC M8 -- DM One.docx" target="_blank">Obtenir</a>
</div>
<!--Box "A INSERER"
<div class="boxindex6">
<h1 class="boxtitle animated fadeInUp delay-500ms">"À INSÉRER"</h1>
<p class="statue ">Privée / Public</p>
<p class="Svert links "><a class="Svert">\\</a></p>
<p class="Sorange impt "></p>
<a class="boxbtn" href="docs/" target="_blank">Obtenir</a>
</div>-->
</div>
</div>
<!--Formulaire-->
<div class="formdiv" id="formulaire">
<form>
<h1 id="h1form">Ajouts d'Outils</h1>
<label for="title">Titre de l'outil</label>:<input type="text" id="titleform" name="title"><br /><br />
<label for="title">Entrez le chemin du nouvelle Outil</label>:<input type="text" id="chemin" name="chemin"><br /><br />
<label for="title">Entrez le nom.lextension du fichier</label>:<input type="text" id="name" name="name"><br /><br />
<label for="title">Entrez le Statue de votre Outil</label>:<input type="text" id="statue" name="statue"><br /><br />
<label for="title">Affichage de l'Outil</label>:<select id="select" name="side" form="side">
<option value="droite">Droite</option>
<option value="gauche">Gauche</option>
</select><br /><br />
<input id="submit" type="submit" value="envoyer">
</form>
</div>
</body>
</html>
I wish that when the user clicks on validate local storage stock all this information and then bring up code html and css (later) with the data he just entered and that the html code obviously remains on the page indefinitely .
Thank you.

divs slider with custom pagination

i need to develop a slider / carousel like this exactly you can see the example in the site
i pasted the code and tried to study it but i got lost with scripts and the divs background not loaded!
simply i need to sliding three or more divs with custom pagination float on and every div is stretched to the browser page with background image cover like the example i mentioned before. Thank you
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" >
<div class="slider-item__wrap" data-item-count="" >
<div class="slide current" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
DYNAMISM
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>CREATED TO MASTER THE ROAD</p>
</div>
<div class="content__descr">
<p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure. </p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
Alfa D.N.A.
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>DYNAMIC CONTROL</p>
</div>
<div class="content__descr">
<p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic, for performance, Natural for optimum fuel economy and All-Weather for tackling bad weather and low grip conditions.</p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide">
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
<div class="model-item__row">
<div class=" model__content pos--right">
<h2 class="content__title">
SUSPENSION
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>FEEL THE ROAD</p>
</div>
<div class="content__descr">
<p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- END contenitore elemento con scroll orizzontale -->
<!-- START Menu per scroll orrizzontale -->
<div class="slider-menu">
<ul class="slider-menu__items">
<li class="active" data-adobe="content::dynamism">
DYNAMISM
</li>
<li data-adobe="content::alfadna">
Alfa D.N.A.
</li>
<li data-adobe="content::suspension">
SUSPENSION
</li>
</ul>
</div>
<!-- END Menu per scroll orrizzontale -->
<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>
please check this link : https://jsfiddle.net/IA7medd/osdLso66/
HTML :
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
</div>
</div>
</div>
</div>
</div>
The style of each item in the slider which you can change its height :
.item{
height:350px;
background-position: center center;
background-size: cover;
}
This is the necessary plugins for the slider :
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css
and finally the slider script :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
});
});

align div's on one horizontal line

I have 5 horizontal divs.
Each div contains three child divs:
Header div
line div
text div
How can I achieve that all the line div's (I mean the div that creates a line between header text and content text) will be aligned horizontally?
I need all the horizontal line divs (class="h_line") on one horizontal line.
The horizontal lines are highlighted with red arrows.
See the fiddle.
Please note that I use bigtext.
That library centers the text in its div.
Html
<div class="ThirdSectionTextArea">
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
<span class="bigtext">
<div class="header_allroundservice leftalign">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell4">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME CONTENT
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell5">
</div>
I assume any title text can vary in length and span over more than 1 line when some are in just 1 line, is that correct?
In such case you need rows, like below sample, if you want it to be dynamically adjusting. If not, you need to have fixed heights on the title.
table, body {
background-color: #ccc;
}
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 33%;
padding-left: 2%;
padding-right: 2%;
}
.cell:nth-child(1) {
background-color: orange;
border-right: 5px solid #ccc;
}
.cell:nth-child(2) {
background-color: yellow;
border-left: 5px solid #ccc;
border-right: 5px solid #ccc;
}
.cell:nth-child(3) {
background-color: lime;
border-left: 5px solid #ccc;
}
.inner {
max-height: 100px;
overflow: auto;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second<br>
2 lines
</div>
<div class="cell">
Third
</div>
</div>
<div class="row">
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
</div>
<div class="row">
<div class="cell">
<div class="inner">
First
</div>
</div>
<div class="cell">
<div class="inner">
Second<br>
2 lines
</div>
</div>
<div class="cell">
<div class="inner">
Third<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
</div>
</div>
</div>
</div>
Use display-inline
.parent {
display: flex;
}
.block {
margin: 0px;
background-color: #84c300;
display: inline-block;
width: 20%;
}
.block .title {
padding: 5px;
}
.block .text {
padding: 5px;
}
<div class="parent">
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
</div>
Please try my JS fiddle code. I hope this will solve your problem.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box-1 {
width:25%;
float:left;
text-align:center;
}
.box-1:first-child {
background: red;
}
.box-1:nth-child(2) {
background: green;
}
.box-1:nth-child(3) {
background: brown;
}
.box-1:nth-child(4) {
background: orange;
}
.heading {
min-height:40px;
border-bottom: 1px solid #fff;
}
.heading h1 {
color:#fff;
font-size:11px;
}
.text p{
color:#fff;
font-size:10px;
}
</style>
</head>
<body>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
</body>
</html>
Float divs with same heading height(https://jsfiddle.net/ua7hmwsn/)

jQuery Accordion with overlay

I work on a accordion to show old blog posts. If you use a tab the part below goes down or jumps around, but I want that the tab lays over the rows below.
I tried some solutions to work with z-index and fixed positions, but nothing will work.
Here is a Snippet of my Code:
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
.accordion-section-content {
background-color: #faf5f2;
}
.termin-header {
position: absolute;
left: 15px;
right: 15px;
bottom: 45px;
text-align: center;
background: rgba(99,98,96,0.7);
}
.termin-header > h2 {
color: white;
}
#firstimage{
position:relative;
background: no-repeat 50% / 100%;
border-bottom: 2px solid #000;
}
.firstimage > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
.firstimage > div{
position: absolute;
top: 0;
width:100%;
height:100%;
}
.firstimage p{
padding:30px;
}
.aktuelles-title {
color: white;
font-size: 30px;
font-family: 'AracneCondensedRegular';
text-align: center;
margin: 0px;
height: 100px;
}
.aktuelles-wrapper {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-122" class="post-122 post type-post status-publish format-image has-post-thumbnail hentry category-aktuelles post_format-post-format-image">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/Unbenannt-1_08.gif');">
<div>
<a class="accordion-section-title" href="#accordion-122"><h2 class="aktuelles-title entry-title ">And the Winner is….</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-122" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Hier ist das Gewinneroutfit von Stil-Frage Teil 3. Felix hat sich für Outfit Nr. 3 entschieden! Wir freuen uns mit YVONNE MARCATH. Sie ist die Gewinnerin des 50€ Einkaufsgutscheins.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-93" class="post-93 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/outfit.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-93"><h2 class="aktuelles-title entry-title ">Ein Typ….Drei Outfits.</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-93" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p><strong>Für welches Outfit entscheidet sich Felix aus Ramsdorf?</strong></p>
<p>Felix war einverstanden bei uns drei verschiedene Outfits anzuprobieren. Am Ende kann er sich aber nur für eins entscheiden – welches wird das sein? Jetzt auf der Facebook – Seite vom Modehaus Cohausz abstimmen und mit etwas Glück einen Modegutschein gewinnen. Das Video vom Casting findet Ihr <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">hier</a> und auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">BorioTv.</a></p>
<div class="align-center">
<p>Die Auflösung gibt es am kommenden Mittwoch.</p>
</div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/08/verkaufsoffen.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-1"><h2 class="aktuelles-title entry-title ">Borken lädt ein…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-1" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>zum 07. Borkener Ostermarkt am Sonntag, den 22. März 2015 ab 11.00 Uhr. Die Geschäfte in der Innenstadt sind von 13.00 Uhr bis 18.00 Uhr geöffnet.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-329" class="post-329 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/catwalk.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-329"><h2 class="aktuelles-title entry-title ">Vielen Dank für Ihr Interesse an unserer Fashion Show…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-329" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Wir bedanken uns bei unseren kleinen und großen Modells und dem zahlreich erschienenen Publikum für den gelungenen stimmungsvollen Abend.<br>
Weitere Bilder der Show auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borken-live.de/" target="_blank">Borken-Live.de</a></p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-332" class="post-332 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-332"><h2 class="aktuelles-title entry-title ">Modegutschein zu gewinnen…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-332" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Genießen Sie einen modischen Vorgeschmack auf das Frühjahr bei unserer Modenschau am 19. März 2015. Wir laden Sie, gern auch Ihre Freundin, auf ein Gläschen Prosecco ein. Mit ein wenig Glück haben Sie die Möglichkeit einen Modegutschein zu gewinnen.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-335" class="post-335 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung2.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-335"><h2 class="aktuelles-title entry-title ">Noch auf der Suche nach dem perfekten Frühjahrslook?</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-335" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<div class="news-list-item">
<p>Welche Farben sind in dieser Saison angesagt? Wie kombiniert man die neusten Trends?</p>
<div class="align-center">
<p>Wir zeigen Ihnen den Frühling auf unserer exclusiven Fashionshow</p>
<p>am Donnerstag, dem 12. März 2015 um 19.03 Uhr.</p>
<p>Wir bitten um Anmeldung unter 02861/92190 oder</p>
<p>info#mode-cohausz.de</p>
</div>
</div>
<div class="news-list-item"></div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
</div>
I did somthing simular a while ago.
I know that the z-index did it for me after playing around with it for a while.
You coul'd also set the article hidden in your css, after you placed it on the right position and then toggle it in jquery.
EDIT:
$(document).ready(function(){
$("image").click(function(){
$("#articleText").toggle();
});
});
#image{
background-color: green;
width: 80px;
height: 80px;
}
#articleText{
visibility: ;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="image">this represents a image</div><!-- image or somthing else, you have images what show a artivle on click -->
<div id="articleText">
This is a article
</div> <!-- your article -->
</body>
</html>
something like this should work, I'wrong with the z-index.
I found a link on google what might would help you with that, I'd watch to the part where the position is absolute:
https://css-tricks.com/almanac/properties/z/z-index/

Individual detail buttons and global detail button

i'm trying to hide and show details in an infographic by clicking on a button directly in the info-graphic. Theres 3 buttons that i want to individualy show there content. But at the same time i have another detail button that should show and hide all of the details.
Here's my code so far.
<div class="item" style="background: #eeeeef;">
<div class="it-con alltag-con">
<div class="einlagen-con-neu">
<div class="ein-con-rel">
<img class="einlage-neu" src="<?php bloginfo('stylesheet_directory'); ?>/img/einlagen-ip/alltag-ip-min.png" />
<div class="detail-1-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Pelotte</h5>
<span class="line-karo"></span>
<p>stimuliert die Muskulatur
<br> und entlastet gleichzeitig
<br> die Achillessehne</p>
<span class="caro-einlage"></span>
</div>
</div>
<div class="detail-2-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Detorsionskern</h5>
<span class="line-karo"></span>
<p>stärkt den Mittelfußbereich
<br> und bietet statische
<br> Korrektur
</p>
<span class="caro-einlage"></span>
</div>
</div>
<div class="detail-3-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Fersenschale</h5>
<span class="line-karo"></span>
<p>umfasst die Ferse sanft
<br> und führt den Fuß optimal
</p>
<span class="caro-einlage"></span>
</div>
</div>
</div>
</div>
<div class="mess-text">
<span class="x-btn">✕<br></span>
<span class="ei-btn"><span class="karo"></span>INFO
</span>
<h4><?php the_field('ueberschrift_einlagen', 102); ?></h4>
<br>
<p>
<?php the_field( 'texte_einlagen', 102); ?>
</p>
<span class="ei-btn-s"><span class="karo"></span> INFOS</span>
</div>
<div class="toggle">
<div class="det-btn"><span class="karo"></span> Detail</div>
<div class="inf-btn">Info</div>
</div>
</div>
</div>
my jquery
$(".caro-einlage").click(function(e) {
//e.preventDefault();
$(this).parent(".detail-inf-con").toggleClass("hide-ein");
//$(this).prev(".state-1").toggleClass("hide");
});
$(".alltag-con .det-btn").click(function(e) {
//e.preventDefault();
$(".alltag-con .detail-inf-con").toggleClass("hide-ein");
//$(this).prev(".state-1").toggleClass("hide");
});
Here's also a jsfiddler. https://jsfiddle.net/JayKray/sxk5e5a4/1/
Help is really apreciated.
: )

Categories