I would need some advice/assistance here. I'm trying to upload image but wampserver keeping showing me this error (Warning: POST Content-Length of 80237 bytes exceeds the limit of 750 bytes in Unknown on line 0 File not uploaded!) however i try to change php.ini setting but it still same, would appreciate if anyone can assist here. Thanks
here is my code
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Ajax Image Upload with jQuery - w3bees.com</title>
<!-- scripts -->
<script type="text/javascript" src="js/jquery.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
a, h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 170%;
color: #645348;
font-style: italic;
text-decoration: none;
font-weight: 100;
padding: 10px;
}
body{
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
text-transform: inherit;
color: #582A00;
background: #E7EDEE;
width: 100%;
margin: 0;
padding: 0;
}
.wrap{
width: 700px;
margin: 10px auto;
padding: 10px 15px;
background: white;
border: 2px solid #DBDBDB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
#preview {
color: red;
}
#preview img{
margin-top: 30px;
max-width: 100%;
border: 0;
border-radius: 3px;
-webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
overflow: hidden;
}
input[type="submit"]{
border-radius: 10px;
background-color: #61B3DE;
border: 0;
color: white;
font-weight: bold;
font-style: italic;
padding: 6px 15px 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Ajax Image Upload with jQuery</h1>
<p>Valid formats: jpeg, gif, png, Max upload: 200kb</p>
<!-- loader.gif -->
<img style="display:none" id="loader" src="loader.gif" alt="Loading...." title="Loading...." />
<!-- simple file uploading form -->
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="submit" value="Upload">
</form>
<!-- preview action or error msgs -->
<div id="preview" style="display:none"></div>
<p>© W3bees.com 2013</p>
</div><!--wrap-->
</body>
</html>
Ajax upload code:
<?php
$valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$max_size = 2000000 * 1024; // max file size
$path = 'uploads/'; // upload directory
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if( ! empty($_FILES['image']) ) {
// get uploaded file extension
$ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
// looking for format and size validity
if (in_array($ext, $valid_exts) AND $_FILES['image']['size'] < $max_size) {
$path = $path . uniqid(). '.' .$ext;
// move uploaded file from temp to uploads directory
if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) {
echo "<img src='$path' />";
}
} else {
echo 'Invalid file!';
}
} else {
echo 'File not uploaded!';
}
} else {
echo 'Bad request!';
}
?>
wampserver version 2.4
php.ini 5.4.12
max_execution_time = 600000
max_input_time = 600000
memory_limit = 1000M
post_max_size = 750MB;
upload_max_filesize = 750M;
check your phpinfo()
see this part :
Loaded Configuration File
in my case its
/etc/php5/apache2/php.ini
and see if your editing the right php.ini file
after editing restart apache to reload php.ini file
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
I have an issue with Dompdf not positioning images correct.
The output in browser is ok, but the images are to close to the title in the PDF.
They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.
HTML and expected output:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
PDF renders as follows:
Screenshot
PHP Code:
$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);
$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).
With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.
Try the following:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
z-index: 99;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
top: 40px;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
Follow your issue for updates
I am working on developing a custom theme for a website project on which I am currently working. I have been able to put the zip file together, upload it, and successfully install the template in Joomla. The theme with content shows up beautiful. However, I am not able to click on any buttons in any of the components or modules or even the edit button in the component. In the past, I have created and used a couple themes, and I have never had this issue, so I am not certain as to why I am having this problem now. I am including my index.php and custom.css files for reference. Any suggestions would be greatly appreciated from any Joomla gurus! Thank you much.
index.php
<?php
/**
* #package Joomla.Site
* #subpackage Templates.shamrocktours
*
* #copyright Copyright (C) 2016 Paradimensional Technology. All rights reserved.
*/
// Check if template is being installed in Joomla
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap CSS
JHtml::_('bootstrap.loadCss', true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shamrock Tours Web Site">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+French+Canon" rel="stylesheet" type="text/css">
<link href="templates/shamrocktours/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner" class="row-fluid">
<div class="span8">
<img src="templates/shamrocktours/images/site_logo.png" alt="Shamrock Tours, click for home." id="headerimage">
</div>
<div class="span4">
<jdoc:include type="modules" name="usermenu" style="none" />
</div>
</header>
<nav role="navigation" class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</nav>
<div role="main" id="innerbody">
<div class="row-fluid">
<aside class="span3">
<jdoc:include type="modules" name="side" style="none" />
</aside>
<article class="span9">
<jdoc:include type="message" />
<jdoc:include type="component" />
</article>
</div>
</div>
</body>
</html>
custom.css
#charset "utf-8";
/* Main Styles for Shamrock Tours Website */
/* CSS Reset */
a,
article,
aside,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
margin: 0;
padding: 0;
}
/* General Element Styling */
html {
background: #0D8330;
}
body {
border: 5px double #000;
border-radius: 10px;
box-sizing:border-box;
font-family: "IM Fell French Canon";
background: transparent;
font-size: 1em;
}
h1,
h2,
h3 {
font-weight: bold;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.125em;
}
/* Header */
header {
margin: 25px 25px 0;
}
#headerimage {
float: left;
width: 41%;
margin-left: 10px;
line-height: 2;
}
header h1 {
position: relative;
top: -10px;
left: 150px;
width: 500px;
text-shadow: 1px -1px #fff;
text-align: center;
}
/* Navigation */
nav {
position: relative;
top: -65px;
left: 397px;
width: 75% !important;
height: 75px;
border-radius: 10px;
box-shadow: 0 4px #666;
background: rgba(8,138,43,0.9);
line-height: 2;
}
/* Content */
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
z-index: -1;
}
article {
float: right;
width: 70%;
}
article h2 {
margin: 1.05em 0;
text-shadow: 1px 1px #666;
}
article h3 {
line-height: 1.2;
}
aside {
text-align: center;
}
/* Footer */
#footercontainer {
position: relative;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.875em;
}
Just remove the z-index: -1 from the #innerbody:
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
/*z-index: -1;*/
}
I have written a HTA for some task to be done. I have used CSS within it. The issue is that the page is a bit distorted (layout is not proper, buttons are misplaced), and requires a refresh/reload to have it in proper format. Hence I wanted a workaround to have the HTA to reload just ONCE after opening.
I tried writing various codes in Window_onLoad to reload the window, but it causes the window to reload infinitely (since after every reload Window_onLoad gets fired). Hence required something which could reload just once and automatically, that too as soon as window is loaded, since I don't want to keep the users waiting to have a proper view of application.
Below is the code :
body
{
margin: 0;
padding: 0;
background-color: #000;
font-family: 'lucida grande', arial, tahoma, sans-serif;
}
#container
{
margin: 0 auto;
padding-top:0;
width: 100%;
position: static;
background-color: #222;
}
#header
{
margin: 0 auto;
width: 100%;
height: 800px;
background: transparent url('p1.jpg');
background-size: 50% 50%;
}
.headtitle
{
position: relative;
font-family: Times;
font-size: 40px;
color: #FFF;
top: 20px;
left: 18px;
}
form {
padding: 20px 0;
position: relative;
top: 80px;
margin: 0 auto 10px 300px;
}
form input {
outline: 0;
border: 0px
background-color: rgba(255, 255, 255, 0.2);
width: 200px;
border-radius: 15px;
padding: 1px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: black;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
behavior: url(PIE.htc);
font-size: 90%;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="Simple HTA"
BORDER="NONE"
MaximizeButton="no"
Scroll="NO"
SYSMENU="YES">
<title>PrOtOtYpE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="VBScript">
SUB RunFile
SET WshShell = CreateObject("WScript.Shell")
WshShell.Run "Z:/SSH/SshClient.exe"
End SUB
SUB CloseWindow
self.close
End SUB
SUB Window_onLoad
window.resizeTo 800,700
End SUB
</script>
</head>
<body>
<div id="container">
<div id="header">
<div class="headtitle">PrOtOtYpE</div>
<form class="form" name="form">
<input type="button" name="button" value="App Web Server 505" onclick="RunFile"/>
<input type="button" name="but" value="App Web Server 506" onclick="RunFile"/>
<input type="button" name="but" value="DB Server 178" onclick="RunFile"/>
<input type="button" name="but" value="DB Server 177" onclick="RunFile"/>
<input type="button" name="but" value="Close" onclick="CloseWindow"/>
</form>
</div>
</div>
</body>
</html>
In onload set a flag.
'Making a public variable
Dim FirstRunFlag
SUB Window_onLoad
window.resizeTo 800,700
If FirstRunFlag=0 then
window.refresh
FirstRunFlag=1
End If
End SUB
or make this the first script run in the head before the style sheets.
<html>
<head>
<script language=vbscript>
window.resizeTo 800,700
</script>
<style>
etc etcetc
</style>
</head>
<body>ra, ra, ra.</body>
</html>
Would appreciate any help with adding a second layer to my torque map in cartodb using createlayer. Sorry I'm obviously just learning and know just enough to be dangerous the following is a bootstrap page I'm messing with. Zombie Outbreak ;) Thanks in advance....
<!DOCTYPE html>
<html>
<head>
<title>OUTBREAK</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="img/tecKEY.ico">
<link href='http://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Map takes up full browser window -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<style type="cartocss/text" id="cartocss">
/** torque visualization */
Map {
-torque-frame-count:303;
-torque-animation-duration:30;
-torque-time-attribute:"permit_dat";
-torque-aggregation-function:"count(tot_assess)";
-torque-resolution:3;
-torque-data-aggregation:cumulative;
}
#sfr_master2{
comp-op: lighter;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #ff5c00;
[value < 12] { /* if 6 <= value < 12, color the marker red */
marker-fill: #FF5C00;
}
[value < 6 ] { /* if 3 <= value < 6, color the marker purple */
marker-fill: #FF5C00;
}
[value < 3 ] { /* if value < 3, color the marker blue */
marker-fill: #FF5C00;
}
}
#sfr_master2[frame-offset=1] {
marker-width:8;
marker-fill-opacity:0.45;
}
#sfr_master2[frame-offset=2] {
marker-width:10;
marker-fill-opacity:0.225;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
</head>
<body>
<!-- Navigation -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style="max-width:100px; padding-right: 10px; margin-top: -7px;" src="img/teckey_logosmall.png">
<a class="navbar-brand topnav" href="#">Map of Infection</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<!-- place your code below -->
<script>
function main() {
// Instantiate new map object, place it in 'map' element
var map = new L.Map('map', {
center: [37.976029, -87.587514], // Western Egypt
zoom: 13,
scrollWheelZoom: true
});
// setup layer
var layerSource = {
type: 'torque',
options: {
user_name: 'rkey', // replace with your user name
table_name: 'sfr_master2',
cartocss: $("#cartocss").html()
}
}
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
});
map.addLayer(layer);
// put torque layer on top of basemap
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
// do stuff
})
.error(function(err) {
console.log("Error: " + err);
});
}
window.onload = main;
</script>
<div class="container-fluid">
<div id="dumbo" class="jumbotron">
<h1>Zombie Outbreak 2015</h1>
<h2>Confirmed Infection Locations</h2>
<p>Use scroll wheele or the + - buttons top left to zoom in or out, click on a location point to view info window</p>
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
CSS
html, body {
font-family: 'Share Tech Mono', ;
height: 100%;
padding: 70;
margin: 0;
overflow:hidden;
background-color: black
}
div.cartodb-timeslider {
position: absolute;
display: inline-block;
height: 40px;
width: auto!important;
margin-bottom: 30px;
padding: 0;
-webkit-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
-moz-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
background: rgba(153, 153, 153, 0.19)!important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 1px solid #9f3700!important;
text-align: left;
z-index: 105;
}
div.cartodb-timeslider .ui-slider .ui-slider-range {
position: absolute;
z-index: 100;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
background-color: #9f3700!important;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
div.cartodb-timeslider .slider-wrapper {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 275px!important;
height: 4px;
padding: 18px 15px;
}
div.cartodb-timeslider p {
width: 120px;
height: 40px;
margin: 0;
padding: 0 5px 0 0;
line-height: 40px;
font-size: 13px;
font-weight: 700;
font-family: Helvetica,Arial;
text-align: center;
color: rgb(159, 55, 0)!important;
}
.navbar-inverse {
border-bottom: 1px solid rgb(159, 55, 0);
font-size: 24px;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #9f3700;
background-color: transparent;
}
.navbar-inverse .navbar-brand {
color: #9d9d9d;
font-size: 24px;
}
.navbar-inverse .navbar-brand:hover {
color: rgb(159, 55, 0);
}
#map {
border: 1px solid rgb(159, 55, 0);
height: 460px;
width: 100%;
margin: 60px 0px 1px 0px;
}
#dumbo {
display: table;
width: 100%;
padding: 0 0;
text-align: center;
color: rgb(159, 55, 0);
position: relative;
background: url(img/dark%20grunge.jpg) no-repeat center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
z-index: 16;
}
#dumbo:after {
content: "";
background: url(img/Overlays/14.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 1.0;
z-index: -1;
}
.btn-danger {
color: #070707;
background-color: rgb(82, 82, 82);
border-color: black;
}
.btn-danger:hover {
color: #ffffff;
background-color: rgb(159, 55, 0);
border-color: black;
}
You are missing one important bit of specification. You always need to specify the height and width of the div that will play the role of the container for your map otherwise it will get zero height.
Since a significant part of your screen will be used by the bootstrap nav and jumbotron, you will need to specify height less than 100%.
Add the following lines to your page at the bottom of the head block.
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:60%; background: black;}
</style>
Also consider moving the map below the jumbotron to avoid the map controls being overflown by the top navigation.
Finally there is one little problem brought to you by bootstrap CSS. Bootstrap uses a box sizing model that is different from the default (see box-sizing in CSS TR). This breaks the computation of the cartodb timeslider width. You can quickly fix this by adding an extra CSS clause:
<style>
div.cartodb-timeslider .slider-wrapper {box-sizing: content-box;}
</style>
Update: With the CSS provided by the OP that already has all the necessary clauses and tweaks the page has a street network from CartoDB standard basemap, a set of blots from the custom layer, a jumbotron and a menu from bootstrap.