1
Die Zahlen am unteren Ende jeder Spalte geben die Summe der Werte jeder Spalte an.Platzieren der Summe auf den unteren Teil von DIV
Was muss ich ändern, damit alle Werte auf der gleichen Ebene unten auf der Seite angezeigt werden, direkt über dem Schieberegler?
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* The number of event sections/years with events */
var tot=$('.event').length;
$('.eventList li').click(function(e){
showWindow('<div>'+$(this).find('div.content').html()+'</div>');
});
/* Each event section is 320 px wide */
var timelineWidth = 320*tot;
var screenWidth = $(document).width();
$('#timelineScroll').width(timelineWidth);
/* If the timeline is wider than the screen show the slider: */
if(timelineWidth > screenWidth)
{
$('#scroll,#slider').show();
$('#centered,#slider').width(120*tot);
/* Making the scrollbar draggable: */
$('#bar').width((120/320)*screenWidth).draggable({
containment: 'parent',
drag: function(e, ui) {
if(!this.elem)
{
/* This section is executed only the first time the function is run for performance */
this.elem = $('#timelineScroll');
/* The difference between the slider's width and its container: */
this.maxSlide = ui.helper.parent().width()-ui.helper.width();
/* The difference between the timeline's width and its container */
this.cWidth = this.elem.width()-this.elem.parent().width();
this.highlight = $('#highlight');
}
/* Translating each movement of the slider to the timeline: */
this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});
/* Moving the highlight: */
this.highlight.css('left',ui.position.left)
}
});
$('#highlight').width((120/320)*screenWidth-3);
}
});
function showWindow(data)
{
\t /* Each event contains a set of hidden divs that hold
\t additional information about the event: */
\t
\t var producto = $('.producto',data).text();
\t var date = $('.date',data).text();
\t var body = $('.body',data).html();
\t
\t $('<div id="overlay">').css({
\t \t \t \t \t \t \t \t
\t \t width:$(document).width(),
\t \t height:$(document).height(),
\t \t opacity:0.6
\t \t
\t }).appendTo('body').click(function(){
\t \t
\t \t $(this).remove();
\t \t $('#windowBox').remove();
\t \t
\t });
\t
\t $('body').append('<div id="windowBox"><div id="productoDiv">'+producto+'</div>'+body+'<div id="date">'+date+'</div></div>');
\t $('#windowBox').css({
\t \t width:500,
\t \t height:350,
\t \t left: ($(window).width() - 500)/2,
\t \t top: ($(window).height() - 350)/2
\t });
\t
}/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
\t /* Simple page reset */
\t margin:0;
\t padding:0;
}
body{
\t /* Setting default text color, background and a font stack */
\t color:#555555;
\t font-size:0.825em;
\t background: #fcfcfc;
\t font-family:Arial, Helvetica, sans-serif;
}
.event{
\t /* Contains the event header and body list */
\t float:left;
\t padding:4px;
\t text-align:left;
\t width:300px;
\t margin:0 5px 50px;
}
.eventList li{
\t /* The individual events */
\t background:#F4F4F4;
\t border:1px solid #EEEEEE;
\t list-style:none;
\t margin:5px;
\t padding:4px 7px;
\t
\t /* CSS3 rounded corners */
\t -moz-border-radius:4px;
\t -webkit-border-radius:4px;
\t border-radius:4px;
}
.eventList li:hover{
\t /* The hover state: */
\t cursor:pointer;
\t background:#E6F8FF;
\t border:1px solid #D4E6EE;
\t color:#548DA5;
}
li span{
\t /* The event icon */
\t display:block;
\t float:left;
\t height:16px;
\t margin-right:5px;
\t width:16px;
}
/* Individual background images for each type of event: */
li.news span.icon { \t background:url(../img/icons/newspaper.png) no-repeat; }
li.image span.icon { \t background:url(../img/icons/camera.png) no-repeat; }
li.milestone span.icon { \t background:url(../img/icons/chart.png) no-repeat; }
div.content{
\t /* This div contains additional data for the content */
\t display:none;
}
.eventHeading{
\t /* The colorful year headings at the top */
\t font-size:2em;
\t margin:-5px -5px 10px;
\t padding:2px 5px;
\t text-align:center;
}
/* Three color styles for the headings: */
.eventHeading.chreme{
\t background:#FBF7F0;
\t border:1px solid #EEE4D4;
\t color:#A78B5F;
}
.eventHeading.blue{
\t background:#E6F8FF;
\t border:1px solid #D4E6EE;
\t color:#548DA5;
}
.eventHeading.green{
\t background:#E6FFDF none repeat scroll 0 0;
\t border:1px solid #C9E6C1;
\t color:#6EA85F;
}
#timelineLimiter{
\t /* Hides the overflowing timeline */
\t width:100%;
\t overflow:hidden;
\t padding-top:10px;
\t margin:40px 0;
}
#scroll{
\t /* The small timeline below the main one. Hidden here and shown by jQuery if JS is enabled: */
\t display:none;
\t height:30px;
\t background:#F5F5F5;
\t border:1px solid #EEEEEE;
\t color:#999999;
}
.scrollPoints{
\t /* The individual years */
\t float:left;
\t font-size:1.4em;
\t padding:4px 10px;
\t text-align:center;
\t width:100px;
\t
\t position:relative;
\t z-index:10;
}
#centered{
\t /* Centers the years, width is assigned by jQuery */
\t margin:0 auto;
\t position:relative;
}
#slider{
\t /* Holds the scroll bar */
\t margin:10px auto;
\t height:25px;
\t display:none;
}
#bar{
\t /* The scroll bar */
\t background:url(../img/slider_center.png) repeat-x center center;
\t height:25px;
\t cursor:pointer;
z-index:999; /* make it on top of others */
}
#barLeft{
\t background:transparent url(../img/slider.png) no-repeat scroll left center;
\t height:25px;
\t width:20px;
\t left:0;
\t top:0;
\t position:absolute;
}
#barRight{
\t background:transparent url(../img/slider.png) no-repeat scroll right center;
\t height:25px;
\t position:absolute;
\t right:0;
\t top:0;
\t width:20px;
}
#overlay{
\t /* The overlay that darkens the page when an event is clicked */
\t position:absolute;
\t z-index:10;
\t top:0;
\t left:0;
\t background-color:#222222;
}
#windowBox{
\t /* Shows details about the event on click */
\t position:absolute;
\t z-index:20;
\t background-color:#fcfcfc;
\t padding:10px;
\t border:2px solid #666666;
\t overflow:auto;
}
#titleDiv{
\t /* The title of the windowBox */
\t background:#F5F5F5;
\t border:1px solid #EEEEEE;
\t color:#AAAAAA;
\t font-size:1.5em;
\t margin-bottom:10px;
\t padding:5px 10px;
}
#date{
\t /* The date on the bottom of the windowBox */
\t bottom:20px;
\t color:#999999;
\t font-size:0.8em;
\t font-style:italic;
\t position:absolute;
\t right:15px;
\t padding:2px;
\t background:#FCFCFC;
}
#highlight{
\t /* The blue highlight that moves with the scroll bar */
\t height:30px;
\t position:absolute;
\t z-index:0;
\t left:0;
\t top:0;
\t
\t background:#E6F8FF;
\t border:1px solid #D4E6EE;
\t border-width:0 1px;
}
.clear{
\t clear:both;
}
/* The styles below are only necessary for the demo page */
h1{
\t background:#F4F4F4;
\t border-bottom:1px solid #EEEEEE;
\t font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
\t font-size:20px;
\t font-weight:normal;
\t margin-bottom:15px;
\t padding:15px;
\t text-align:center;
}
h2 {
\t font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
\t font-size:12px;
\t font-weight:normal;
\t padding-right:40px;
\t position:relative;
\t right:0;
\t text-align:right;
\t text-transform:uppercase;
\t top:-48px;
}
a, a:visited {
\t color:#0196e3;
\t text-decoration:none;
\t outline:none;
}
a:hover{
\t text-decoration:underline;
}
p.tutInfo{
\t /* The tutorial info on the bottom of the page */
\t padding:10px 0;
\t text-align:center;
\t position:absolute;
\t bottom:0px;
\t background:#F4F4F4;
\t border-top:1px solid #EEEEEE;
\t width:100%;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Feb 18, 2017, 12:11:54 PM
Author : Rodrigo
*/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<div id="main">
\t
\t
<div id="timelineLimiter"> <!-- Hides the overflowing timelineScroll div -->
\t <div id="timelineScroll"> <!-- Contains the timeline and expands to fit -->
\t \t
<div class="event">
<div class="eventHeading green">Nov -0001</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Pala</th>
\t \t \t \t <th style="text-align:right">0</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Pala</div>
\t \t \t \t \t <div class="date">November 30, -0001</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>0</h1></ul></div>
<div class="event">
<div class="eventHeading blue">May 2015</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Enfriadores Azul</th>
\t \t \t \t <th style="text-align:right">1,800,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Enfriadores Azul</div>
\t \t \t \t \t <div class="date">May 14, 2015</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><li class=""><table><tr>
\t \t \t \t <th>Ladrillo</th>
\t \t \t \t <th style="text-align:right">1,592,100</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Ladrillo</div>
\t \t \t \t \t <div class="date">May 30, 2015</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>3,392,100</h1></ul></div>
<div class="event">
<div class="eventHeading chreme">Feb 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Puntilla con Cabeza 2pulg Propack 5kg</th>
\t \t \t \t <th style="text-align:right">5,100,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Puntilla con Cabeza 2pulg Propack 5kg</div>
\t \t \t \t \t <div class="date">February 5, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>5,100,000</h1></ul></div>
<div class="event">
<div class="eventHeading green">Apr 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Varilla 5/8 pulgada x 6 metros cuadrada</th>
\t \t \t \t <th style="text-align:right">6,800,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Varilla 5/8 pulgada x 6 metros cuadrada</div>
\t \t \t \t \t <div class="date">April 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><li class=""><table><tr>
\t \t \t \t <th>Segueta 24 dientes paquete 10 unidades 3906-300...</th>
\t \t \t \t <th style="text-align:right">3,276,430</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Segueta 24 dientes paquete 10 unidades 3906-300...</div>
\t \t \t \t \t <div class="date">April 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><li class=""><table><tr>
\t \t \t \t <th>Vitaperico1 Kg</th>
\t \t \t \t <th style="text-align:right">72</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Vitaperico1 Kg</div>
\t \t \t \t \t <div class="date">April 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><li class=""><table><tr>
\t \t \t \t <th>Llanta 275/55 Rin 20 111S CC LX20</th>
\t \t \t \t <th style="text-align:right">400</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Llanta 275/55 Rin 20 111S CC LX20</div>
\t \t \t \t \t <div class="date">April 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><li class=""><table><tr>
\t \t \t \t <th>Parasol Lateral 3 m Blanco</th>
\t \t \t \t <th style="text-align:right">28</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Parasol Lateral 3 m Blanco</div>
\t \t \t \t \t <div class="date">April 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>10,076,934</h1></ul></div>
<div class="event">
<div class="eventHeading blue">Jul 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Escobilla Limpiafondo</th>
\t \t \t \t <th style="text-align:right">1,240,000,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Escobilla Limpiafondo</div>
\t \t \t \t \t <div class="date">July 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>1,240,000,000</h1></ul></div>
<div class="event">
<div class="eventHeading chreme">Aug 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Espatula Extra Ancha</th>
\t \t \t \t <th style="text-align:right">42</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Espatula Extra Ancha</div>
\t \t \t \t \t <div class="date">August 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>42</h1></ul></div>
<div class="event">
<div class="eventHeading green">Sep 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Guantes Hilaza Neon Puntos PVC 2 Caras</th>
\t \t \t \t <th style="text-align:right">280,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Guantes Hilaza Neon Puntos PVC 2 Caras</div>
\t \t \t \t \t <div class="date">September 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>280,000</h1></ul></div>
<div class="event">
<div class="eventHeading blue">Oct 2017</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Ladrillo hor 3 huecos 9x20x80 9.5k 6.25und/m2</th>
\t \t \t \t <th style="text-align:right">336,002,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Ladrillo hor 3 huecos 9x20x80 9.5k 6.25und/m2</div>
\t \t \t \t \t <div class="date">October 14, 2017</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>336,001,664</h1></ul></div>
<div class="event">
<div class="eventHeading chreme">Feb 2021</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Guante Tipo Examen Nitrilo Tallla S x 100 Und</th>
\t \t \t \t <th style="text-align:right">1,408</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Guante Tipo Examen Nitrilo Tallla S x 100 Und</div>
\t \t \t \t \t <div class="date">February 2, 2021</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>1,408</h1></ul></div>
<div class="event">
<div class="eventHeading green">Sep 2022</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Alambre #8 100 metros amarillo Conectores y Cables</th>
\t \t \t \t <th style="text-align:right">1,750,000,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Alambre #8 100 metros amarillo Conectores y Cables</div>
\t \t \t \t \t <div class="date">September 18, 2022</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>1,750,000,000</h1></ul></div>
<div class="event">
<div class="eventHeading blue">Nov 2022</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Ladrillo</th>
\t \t \t \t <th style="text-align:right">308,025</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Ladrillo</div>
\t \t \t \t \t <div class="date">November 25, 2022</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>308,025</h1></ul></div>
<div class="event">
<div class="eventHeading chreme">Apr 2030</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Asoleadora Curva Chocolate</th>
\t \t \t \t <th style="text-align:right">750,000,000</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Asoleadora Curva Chocolate</div>
\t \t \t \t \t <div class="date">April 16, 2030</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>750,000,000</h1></ul></div>
<div class="event">
<div class="eventHeading green">Nov 2098</div>
<ul class="eventList">
<li class=""><table><tr>
\t \t \t \t <th>Ladrillo refractario 24x12,5x4 1,5 kilos 36u/m2...</th>
\t \t \t \t <th style="text-align:right">54</th>
\t \t \t \t </table></tr>
\t \t \t \t <div class="content">
\t \t \t \t \t <div class="body"></div>
\t \t \t \t \t <div class="producto">Ladrillo refractario 24x12,5x4 1,5 kilos 36u/m2...</div>
\t \t \t \t \t <div class="date">November 25, 2098</div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </li><h1>54</h1></ul></div> \t
<div class="clear"></div>
</div>
<div id="scroll"> <!-- The year time line -->
<div id="centered"> <!-- Sized by jQuery to fit all the years -->
\t <div id="highlight"></div> <!-- The light blue highlight shown behind the years -->
\t <div class="scrollPoints">Nov -0001</div><div class="scrollPoints">May 2015</div><div class="scrollPoints">Feb 2017</div><div class="scrollPoints">Apr 2017</div><div class="scrollPoints">Jul 2017</div><div class="scrollPoints">Aug 2017</div><div class="scrollPoints">Sep 2017</div><div class="scrollPoints">Oct 2017</div><div class="scrollPoints">Feb 2021</div><div class="scrollPoints">Sep 2022</div><div class="scrollPoints">Nov 2022</div><div class="scrollPoints">Apr 2030</div><div class="scrollPoints">Nov 2098</div> <!-- This PHP variable holds the years that have events -->
<div class="clear"></div>
</div>
</div>
<div id="slider"> <!-- The slider container -->
\t <div id="bar"> <!-- The bar that can be dragged -->
\t <div id="barLeft"></div> <!-- Left arrow of the bar -->
<div id="barRight"></div> <!-- Right arrow, both are styled with CSS -->
</div>
</div>
</div>
\t <
</div>
</body>
</html>
Wenn Sie konsequent aussehen wollen, ist es wahrscheinlich besser, eine ''
Antwort
Update-Stil
position: absolute;bottom: 0; width: 268px;in h1-Tagposition: relative;margin-bottom: 15px;in #timelineScrollQuelle
2017-02-28 04:13:30
Die Spalten auf der Unterseite der Spalten zu verwenden, um nicht am Boden allign. – Rocko
alle Zeilenbreite gleich ausrichten? Beispielzeile 'Nov-0001' nach Zeile' Pala 0' und Summe sind Breite gleich Zeile 'Nov-0001' ?? –
Ich möchte die Summen am Ende jeder Spalte zuweisen 0 3.392.000 5.100.000 etc. – Rocko
Verwandte Themen