I am building a simple website with bootstrap4 and I am trying to set a carousel as the background. Is there any simple way to do it without keyframes?
You can use bootstrap default carousel with some tweaks, namely the z-index and position attributes.
Image 1, 2 and 3 must be replaced by your own images, without them it will not work very well and the size adapted to your needs, you can also add indicators for the image and arrows cycle through images.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#demo{
position: absolute;
z-index: -1;
}
#frontpage{
color: red;
font-size: larger;
background-color: yellow;
opacity: 0.5;
padding: 50px;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Image1.jpg" alt="Image1" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image2.jpg" alt="Image2" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image3.jpg" alt="Image3" width="1920" height="1080">
</div>
</div>
</div>
<div id="frontpage">
My frontpage over the carousel
</div>
</body>
</html>
Related
I am creating a qr-code generator program with PHP, and I am using a library called qr-code. I have gotten to the point where I have successfully gotten the string the user wishes to convert into a qrcode, at the point to generate the qrcode I get the following error :
Uncaught Error: Call to a member function getContentType() on null in index.php:13 Stack trace: #0 {main} thrown in index.php on line 13
I have been at this for a while now, and I am stuck. There is really now in-depth documentation for the library in question, Please help me out. Here is my code :
<?php
require __DIR__ . '/vendor/autoload.php';
use Endroid\QrCode\QrCode;
// Get url from form
if (isset($_GET['submit'])) {
$url = strval($_GET['url']);
echo gettype($url);
$qrcode = new QrCode("$url");
echo "</br>";
header('Contert-Type: application/' . $qrCode->getContentType());
$createCode = $qrCode->writeString();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<title>QR Code Generator</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="./bootstrap.min.css" />
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-danger fixed-top">
<a class="navbar-brand text-center" href="#">QR Code Generator</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<form method="GET" action="<? htmlspecialchars($_SERVER['PHP_SELF']);?>">
<div class="form-group">
<label for="url">URL</label>
<input type="text" class="form-control" id="url" name="url" />
</div>
<button type="submit" name="submit" class="btn btn-danger">Generate</button>
</form>
<div class="d-flex justify-content-center mt-5">
<div
class="starter-template card text-white bg-danger mb-3"
style="max-width: 20rem;"
>
<div class="card-body">
<p class="card-text">
<?php echo $createCode;?>
</p>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
Here is a link to the library
You are trying to use $qrCode which does not exist, look at your code carefully:
$qrcode = new QrCode("$url");
echo "</br>";
header('Contert-Type: application/' . $qrCode->getContentType());
$createCode = $qrCode->writeString();
First you use $qrcode then you use $qrCode (which does not exist).
Change the first line to:
$qrCode = new QrCode("$url");
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Ok so I made my website in html, but theres some sort of white line bars located on the top and im not sure why they are there i think i made an error in my source code, if someone could please help figure out why they are there thatd be great (im new at html, only know the basics)
Heres a picture of it
<font size="4" color="white">
<h1>This Website Was Created By The One And Only SaucyFam
</font>
</div>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://www.silvergames.com/slitherio">
<link rel="alternate" href="http://www.silvergames.com/slitherio" hreflang="en">
<link rel="alternate" href="http://de.silvergames.com/slitherio" hreflang="de">
<link rel="alternate" href="http://ru.silvergames.com/slitherio" hreflang="ru">
<title>Slither.io | Game 2 Play Online</title>
<link href="http://i2.silvergames.com/css/n7.css" rel="stylesheet" type="text/css">
<link href="http://i2.silvergames.com/l-switch/css/polyglot-language-switcher-2.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="New Games" href="/feed/rss.xml" />
<script type="text/javascript" src="http://i1.silvergames.com/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/l-switch/js/jquery/jquery-polyglot.language.switcher.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/advertisement.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/js/vote.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://i3.silvergames.com/js/fullscreen_full.js"></script>
</form>
<div class="clear_both"></div>
</div>
<div class="polyglot-language-switcher" data-grid-columns="1" data-anim-effect="fade" data-open-mode="click">
<ul style="display:none">
<li>
<a href="http://www.silvergames.com/slitherio" title="English" data-lang-id="en">
<img src="http://i1.silvergames.com/l-switch/images/flags/us.png" alt="English">English
</a>
</li>
<li>
<a href="http://de.silvergames.com/slitherio" title="Deutsch" data-lang-id="de">
<img src="http://i2.silvergames.com/l-switch/images/flags/de.png" alt="Deutsch">Deutsch
</a>
</li>
<li>
<a href="http://ru.silvergames.com/slitherio" title="Русский" data-lang-id="ru">
<img src="http://i3.silvergames.com/l-switch/images/flags/ru.png" alt="Русский">Русский
</a>
</li>
</ul>
<div class="clear_both"></div>
</div></div>
<div id="menu_2" style="display:none;">
<div id="items_2"></div> <div class="clear_both">
</div>
</div></div>
<div id="content">
<div id="container" style="width:1260px;">
<div id="game-box" style="">
<div id="game" >
<div id="game_embed" style="width:700px;height:500px;">
<iframe src="http://slither.io/" id="swf" allowfullscreen frameborder="0" scrolling="no" style="background-color:#000000;border:nvone;" width="700" height="500"></iframe>
</div >
</div>
<div id="game-features">
<div id="vote-buttons">
</button>
<span id="voted"></span>
</div>
<div id="zoom-button">
<div style="cursor:pointer;" id="fullscreen">
<img src="http://i1.silvergames.com/i/fullscreen.png" title="Fullscreen" alt="fullscreen">
</div>
</div>
<div id="walkthrough-button">
<div style="" id="walkthrough">
<a href="/slitherio/walkthrough" target="" title="Slither.io Walkthrough">
<img src="http://i1.silvergames.com/i/walkthrough.png" alt="walkthrough">
</a>
</div>
</div>
<div class="clear_both"></div>
</div>
</div>
<div id="game-related-box">
<div class="hot_box">
<div id="dynamic-editorial">
<ul>
<li>
<a href="/goodgame-empire" target="">
<img src="http://agar.io/img/1200x630.png " width="110" height="70" alt=":D"/>
</a>
</li>
<li>
Unblocked Agario
</li>
</ul>
</div>
<div id="dynamic-editorial-2">
<ul>
<li>
</div>
<div style="position: absolute; top: 530px; right: 220px; width: 250px; height: 150px; background-color: ">
<font size="4" color="white">
<h1>
<< Click Here To Go Into FullScreen Mode
</div>
<div style="position: absolute; top: 200px; right: 233px; width: 240px; height: 150px; background-color: ;">
<font size="4" color="white">
<h1>SaucyFams Very Own Server IP Mods, Coming Soon:
<IMG STYLE="position:absolute; TOP:70px; LEFT:10px; WIDTH:300px; HEIGHT:200px" SRC="http://slitheriogameplay.com/wp-content/uploads/2016/04/slither-io-mods-300x167.png">
</p>
</body>
</html>
<html>
<body background="http://slither.io/s/bg45.jpg">
The issue is the 10px padding-bottom.
In file n7.css , line 31, you'll see the following:
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
Change by:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
Let me know how it goes.
The reason of problem here;
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
But I see, "you are not very familiar with css" so this code is in a file of your server (http://i2.silvergames.com/css/n7.css). Please go there, find the code above and change:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
That's all.
* I've solved this. Thanks for the help /*
I am attempting to show some images to different users depending on their user_id / username.
I am trying to do so by using userSession.
I tried by using this code:
<?php
if ($_SESSION['user_id'] == 'Charlie') {
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
}
?>
I also tried "userSession" and "user_email". None worked.
It cannot even load my website when I type in the code above. When I remove it, it loads perfectly.
Here's my home.php class which is the one that loads when a user is logged in. It's the same for everything atm but I am trying to display just certain images to the users depending on who they are. They have no special rank or anything.
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['userSession']))
{
header("Location: index2.php");
}
$query = $MySQLi_CON->query("SELECT * FROM users WHERE user_id=".$_SESSION['userSession']);
$userRow=$query->fetch_array();
$MySQLi_CON->close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<!--<link rel="stylesheet" href="css/prettyPhoto.css" />-->
<!--<link rel="stylesheet" href="css/flexslider.css" />-->
<link rel="stylesheet" href="css/custom-styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!--Fancybox dwuser.com-->
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
</style>
<!--Fancybox end-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test | <?php echo $userRow['user_email']; ?></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container main-container">
<div class="row header"><!-- Begin Header -->
<!-- Logo
================================================== -->
<div class="span5 logo">
<img src="img/%20black.png" alt="" />
</div>
<!-- Main Navigation
================================================== -->
<div class="span7 navigation">
<div class="navbar hidden-phone">
<ul class="nav">
<li>Hjem</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">Galleri <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Galleri</li>
<li>Bryllup</li>
<li>Portræt</li>
<li>Udendørs</li>
<li>Andet</li>
<!--<li></li>-->
</ul>
</li>
<li>Kontakt</li>
</ul>
<!-- Username and logout button .... nav bar only -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> <?php echo $userRow['user_name']; ?></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</div><!-- End Header -->
<div class="row headline"><!-- Begin Headline -->
<!-- Page Content
================================================== -->
<div class="row">
<!-- Gallery Items
================================================== -->
<div class="span12 gallery">
<div class="row clearfix">
<ul class="gallery-post-grid holder">
<h6>Tryk på billederne for at forstørre dem og for at opnå bedre kvalitet</h6>
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" />
</li>
<li class="span4 gallery-item" data-id="id-2">
<img class="fancybox" src="img/IMG_2205-Edit-1_small.jpg" data-big="img/IMG_2205-Edit-1.jpg" />
</li>
</ul>
</div>
</div><!-- End gallery list-->
</div><!-- End container row -->
</div> <!-- End Container -->
<!-- Footer Area
================================================== -->
<div class="row"><!-- Begin Bottom Section -->
</div><!-- End Bottom Section -->
</div> <!-- End Container -->
<!-- Scroll to Top -->
<div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--<script src="js/jquery.easing.1.3.js"></script>-->
<script src="js/bootstrap.js"></script>
<!--<script src="js/jquery.prettyPhoto.js"></script>-->
<!--<script src="js/jquery.quicksand.js"></script>-->
<!--<script src="js/jquery.custom.js"></script>-->
<!--Fancybox script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
</body>
</html>
You never changed the session data in your example code. You should do something like:
$_SESSION['user_id'] = $userRow['user_id']
to set the concerning session var.
try this code instead of yours:
<?php
if ($_SESSION['user_id'] == 'Charlie') { ?>
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
<?php } ?>
EDIT if user ID is unique and not depended on letters casing you can do
if (strtolower($_SESSION['user_id']) === 'charlie')
I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}
I am trying to create a Very simple and basic Image gallery using Twitter Bootstrap responsive design.
The images are rendered dynamically. The first row of images are adjusting good but from second row the alignment varies.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link href="<?=base_url()?>assets/css/bootstrap.css" rel="stylesheet">
<link href="<?=base_url()?>assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class = "span12">
<?php
for($i=0; $i<10 ;$i++)
{
?>
<div class = "span3">
<a href="#" class="thumbnail">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style = "border:solid 2px red;"/>
</a>
</div>
<?php
}
?>
</div>
</div>
</div>
</body>
</html>
How can I align the span's exactly, so that it looks like a perfect gallery like structure.
I don't want to use any plugin here or jQuery.
Use a row instead of row-fluid..
<div class="container">
<div class="row">
<div class="span3">
<a href="#" class="thumbnail">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style="border:solid 2px red;">
</a>
</div>
...
</div>
</div>
Demo: http://bootply.com/69509
Did you try to add a new <div class="row-fluid"> ... </div> every four images ?