while setting cookies getting error of undefined index - php

<script>
$(document).ready(function(){
setTimeout(function(){
if(!mag_cookie_val)
$("#myNav").show();
}, 12000);
$("#close_magnet").click(function(){
$("#myNav").hide();
});
$("#magnet_email").keyup(function(){
$("#magnet_email").css("border-color","#67AEE9");
});
$("#magnet_continue").click(function(){
var MagEmail = $("#magnet_email").val();
atpos = MagEmail.indexOf("#");
dotpos = MagEmail.lastIndexOf(".");
if(atpos < 1 || ( dotpos - atpos < 2 ))
{
$("#magnet_email").css("border-color","red");
}else{
/*
$.ajax({
url: "leadmagnet_res.php",
method: 'POST',
data:{magemail:MagEmail}
}).done(function(data) {
//alert(data)
if(data !=0){
$("#myNav").css("height","0%");
}
});
*/
$.ajax({
url: 'leadmagnet_res.php',
type: 'post',
data: {magemail:MagEmail},
//processData: false,
success: function( res ){
//alert(res);
},
error: function(){
alert( "error occured" );
},
complete: function(){
$("#myNav").hide();
}
});
}
});
//Lead magnet close code End
$(document).ready(function() {
//setTimeout(function(){ $("#myNav").show(); }, 12000);
$("#magnet_email").css("border-color","#67AEE9");
//Lead magnet close code start
$("#close_magnet").click(function(){
$("#myNav").css("height","0%");
});
$("#magnet_email").keyup(function(){
$("#magnet_email").css("border-color","#67AEE9");
});
$("#magnet_continue").click(function(){
var MagEmail = $("#magnet_email").val();
atpos = MagEmail.indexOf("#");
dotpos = MagEmail.lastIndexOf(".");
if(atpos < 1 || ( dotpos - atpos < 2 ))
{
//alert(1);
$("#magnet_email").css("border-color","red");
}else
{
//alert(2);
$.ajax({
url: siturl_mag+"leadmagnet_res.php",
method: 'POST',
data:{magemail:MagEmail}
}).done(function(data) {
//alert(data)
if(data !=0){
$("#myNav").css("height","0%");
}
});
}
});
//Lead magnet close code End
</script>
<style>
.overlay_magnet {
height: 0% !important;
width: 100% !important;
position: fixed !important;
z-index: 94 !important;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.3);
transition: 0.5s;
}
.overlay_magnet-content {
margin-left: 27%;
margin-top: 30px;
position: relative;
text-align: center;
top: 0;
width: 45%;
}
.overlay_magnet a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay_magnet a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay_magnet .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay_magnet {}
.overlay_magnet a {font-size: 20px}
.overlay_magnet .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.circle_magnet {
width: 100%;
padding: 10%;
background: white;
border-radius: 50px;
border-style: solid;
border-color: #FE0000;
border-width:4px;
}
.circle_magnet-wrapper {
margin: 0 5%;
position: relative;
}
.circle_magnet .list-inline {
font-size: 0px;
margin: 0;
}
.circle_magnet .list-inline li {
font-size: 20px;
display: block;
}
.circle_magnet p {
padding-top: 10%;
margin: 0;
}
#media (min-width:460px) {
.circle_magnet .list-inline li {
font-size: 50px;
display: inline-block;
}
.circle_magnet-wrapper {
width: 100%;
position: relative;
margin:0 auto;
}
.circle_magnet {
height: 0px;
padding: 50%;
border-radius: 50%;
}
.circle_magnet > div {
position: absolute;
text-align: center;
left: 10%;
right: 10%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top:20%\9; /* ie8 hack test this out it's a guess */
}
}
.circle_text_magnet{
cursor:pointer;
}
.circle_text_magnet:hover {
text-decoration: underline;
}
.arrow{
height:25px;
width:25px;
}
</style>
<div id="myNav" class="overlay_magnet hidden-xs hidden-sm" <?php if ($magstatus !=0){?>style="height:0% !important;display:none;" <?php }else{ ?>style="height:100% !important;display:none;" <?php } ?> >
<div class="overlay_magnet-content" >
<div class="circle_magnet-wrapper">
<div class="circle_magnet text-center">
<div class="row" style="margin-top:-40%;">
<div class="col-md-12">
<center>
<label style="font-family: Roboto;color: green;text-shadow: rgb(46, 46, 46) 0px 4px 5px;font-size: 42px;font-weight: bold !important;margin: 0 !important;">Sign Up!</label>
</center>
</div>
</div>
<div class="row" style="margin-top:-24%;">
<div class="col-md-12">
<center>
<label style="font-family: Roboto;color: #00006A;font-size: 20px;font-weight: normal !important;margin: 0 !important;">Join our Travel Community.</label>
<label style="font-family: Roboto;color: #00006A;font-size: 20px;font-weight: normal !important;margin: 0 !important;">Get Free Exclusive Travel Tips and<br> Links to our New Travel Videos.</label>
</center>
</div>
</div>
<div class="row" style="margin-top:-12%;">
<div class="col-md-12">
<center>
<label style="font-family: Roboto;color: #fe0000;font-size: 20px;font-weight: normal !important;margin: 0 !important;">Enter your email below</label>
</center>
</div>
</div>
<div class="row" >
<div class="col-md-12" style="border: 1px solid #00006A;border-radius: 7px;padding: 18px;box-shadow: inset 0px 0px 50px 0px #ABABAB, 0px 2px 9px 1px #242424;">
<div class="col-md-9">
<input id="magnet_email" class="form-control" placeholder="Enter your email address " type="text" >
</div>
<div class="col-md-3" >
<button class="btn btn-primary pull-left " id="magnet_continue">Continue</button>
</div>
</div>
</div>
<div class="row" style="margin-top:20%;">
<div class="col-md-12">
<span style="font-family: Roboto;color: #00006A;font-size: 12px;font-weight: normal !important; ">By clicking Continue, I agree to the </span>
<span> Terms of Service</span>
</div>
</div>
<div class="row" style="margin-top:35%;">
<div class="col-md-12">
<center><h2 id="close_magnet" class="circle_text_magnet" style="font-family: Roboto;color: #00006A;font-weight: normal !important; margin-left:10px; ">No Thanks</h2></center>
</div>
</div>
</div>
</div>
</div>
this is a code of cookies which i m setting for a form to be displayed
but always getting a error of Undefined
index: MagnetStatus in line 3
which is
$magstatus = $_COOKIE[$cookie_name];
code:
$magstatus = $_COOKIE[$cookie_name];
if(!$magstatus) {
$cookie_value = 0;
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
}
?>
so can u help me out or any idea regarding this

you can either use isset() or empty() to prevent such warnings if the cookie with the specified name doesnt exist
$magstatus = (isset($_COOKIE[$cookie_name])) ? $_COOKIE[$cookie_name] : 'default_value_here';

You have to use following code to check whether cookie is set or not:
if(!isset($_COOKIE[$cookie_name])) {
$cookie_value = 0;
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
}
Remove $magstatus = $_COOKIE[$cookie_name]; line only check cookie with isset method

Related

jQuery cover image reposition after upload

Folowing this tutorial i try to implement on my app based on ZendFramework 2.
I create all what author say and when i test image is successfull uploaded and alias is saved in database. But problem is ajax not show reposition after uploading and not show image. I must refresh browser to see new image.
My code:
<script>
$(document).ready(function()
{
/* Uploading Profile BackGround Image */
$('body').on('change','#bgphotoimg', function()
{
$("#bgimageform").ajaxForm({target: '#timelineBackground',
beforeSubmit:function(){},
success:function(){
$("#timelineShade").hide();
$("#bgimageform").hide();
},
error:function(){
} }).submit();
});
/* Banner position drag */
$("body").on('mouseover','.headerimage',function ()
{
var y1 = $('#timelineBackground').height();
var y2 = $('.headerimage').height();
$(this).draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui)
{
}
});
});
/* Bannert Position Save*/
$("body").on('click','.bgSave',function ()
{
var id = $(this).attr("id");
var p = $("#timelineBGload").attr("style");
var Y =p.split("top:");
var Z=Y[1].split(";");
var dataString ='position='+Z[0];
$.ajax({
type: "POST",
url: "image_saveBG_ajax_bg.php",
data: dataString,
cache: false,
beforeSend: function(){ },
success: function(html)
{
if(html)
{
$(".bgImage").fadeOut('slow');
$(".bgSave").fadeOut('slow');
$("#timelineShade").fadeIn("slow");
$("#timelineBGload").removeClass("headerimage");
$("#timelineBGload").css({'margin-top':html});
return false;
}
}
});
return false;
});
});
</script>
#timelineBackground {
height: 315px;
position: relative;
margin-top: -20px;
overflow: hidden;
background-color:#ccc;
}
#timelineProfilePic {
width: 170px;
height: 170px;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
}
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
}
#timelineNav {
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;
}
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
}
.uploadFile {
background: url('../images/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
}
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
}
.custom-file-input {
height: 25px;
cursor: pointer;
}
.bgImage,#timelineBGload
{
width:100%;
}
.headerimage {
cursor: s-resize;
position: absolute;
}
.wallbutton:hover {
text-decoration: none;
}
.blackButton {
background-color: #666666;
border-color: #333333;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
<div class="image">
<div class="cover-img">
<div id="timelineBackground">
<?php if($cover = getCoverPicture($profile->account_id)): ?>
<?php $cover_image_path = upload_userdata_url() .'/'. $cover->account_id .'/'.'photos/'.$cover->photo_guid .'/'. $cover->photo_name;?>
<img style="margin-top: <?= $cover->photo_bg_position; ?>" class="bgImage" src="<?= $cover_image_path; ?>">
<?php endif; ?>
</div>
<div id="timelineShade" style="">
<form action="photo/uploadCoverPicture" enctype="multipart/form-data" method="post" id="bgimageform">
<div class="uploadFile timelineUploadBG">
<input type="file" original-title="Change Cover Picture" class=" custom-file-input" id="bgphotoimg" name="userfile">
</div>
</form>
</div>
</div>
</div>

CSS popup doesn't carry PHP variable

I'm building a website with a CSS popup inside a loop that increments by 1, but the variable $i does not carry on the popup.
CSS
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#score {
height: 380px;
min-width: 280px;
max-width: 380px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
}
#score:target,
#score:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
.popup {
position: fixed;
left: 50%;
top: 20%;
}
.popup .wrapper {
position: relative;
left: -50%;
}
PHP
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" >
</div>
</div>
</div>
The popup number $i never changes. It freezes on 1. I'm not sure what's the problem. I don't see any, but I can't make the popup number change.
In your codes you have repeated the score div with same id. it need to have different ids for different divs
(This will only create proper html. for popup effect it needs to use some java script/JQuery codes)
Try this
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score<?php echo $i;?>" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" > </div>
</div>
</div>
<?php $i++;}?>

Web - while resizing/zooming everything moves

I am trying to make my new web using material design technology via polymer and i made fixed header, which contains button, H1, picture and text. When you resize page or zoom, everything screws and all stuff on that header just moves. I have a "hidden" sidebar also, which transit from left side when you click on the button. When i zoom it comes on web on its own. Help please:X
HTML&PHP code:
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>RostaCZE</title>
<link rel="stylesheet" type="text/css" href="css.php">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<script src="jquery-2.1.3.js">
</script>
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<script>
$(document).ready(function(){
var width=$('.sidebar').width();
$('.sidebar').css('left',-width);
var rig=$('.sidebar').position().left;
$(".button").click(function() {
var rig=$('.sidebar').position().left;
if(rig == 0 )
{
$('.sidebar').animate({left:-width}, 400);
}
else
{
$('.sidebar').animate({left:'0px'}, 400);
}
});
});
</script>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
<?php
$_SESSION['dark_blue'] = '#1E88E5';
$_SESSION['light_blue'] = '#E3F2FD';
$_SESSION['grey'] = '#BDBDBD';
?>
</head>
<body>
<header>
<paper-ripple id="header_ripple"></paper-ripple>
<div class="button raised">
<div class="center" fit>MENU</div>
<paper-ripple fit></paper-ripple>
</div>
<div class="time">
<?php
$today = date("Y-m-d H:i:s");
echo "$today";
?>
</div>
<div class="name">
<img src="face.png" alt="me"/>
<h1>Rostislav Danko</h1>
</div>
</header>
<div class="sidebar">
</div>
<div id="main">
</div>
<footer>
</footer>
</body>
</html>
<style>
</style>
CSS code ( some css colors are not filled, i have it made via PHP variables )
<?php
session_start();
?>
<?php header("Content-type: text/css; charset: UTF-8"); ?>
html, body {
position: relative;
margin: 0px;
height: 100%;
}
header {
position: fixed;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;
height: 10%;
width: 100%;
-webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
z-index: 20;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 10;
}
.name {
position: relative;
margin-left: 4%;
margin-top: -5%;
}
.name img {
position: relative;
height: 150%;
width: 7%;
margin-top: -3.8%;
margin-left: 30%;
}
.time {
position: relative;
margin-left: 90%;
margin-top: 1.5%;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
font-size: 20px;
}
h1 {
position: relative;
margin-top: -5%;
text-align: center;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
}
#main {
float: left;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
width: 100%;
height: 110%;
z-index: 10;
}
.sidebar {
position: fixed;
height: 100%;
width: 20%;
margin-top: 7.1%;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;;
z-index: 30;
border-top: solid 1px <?php echo $_SESSION["light_blue"]; ?>;
}
#header_ripple {
position: absolute;
color: #E3F2FD;
width: 100%;
height: 100%;
z-index: 10;
}
.button {
display: inline-block;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
z-index: 100;
position: absolute;
margin-left: 5%;
margin-top: 2%;
text-align: center;
cursor: pointer;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
font-color: <?php echo $_SESSION["grey"]; ?>;
}
.button > paper-ripple {
color: <?php echo $_SESSION["dark_blue"]; ?>;
border-radius: 2px;
overflow: hidden;
}
.button.narrow {
width: 60px;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}

Splitting echo row results into 3 separate columns (divs)

I have made this gallery listview page here and I want it so that all 3 columns are equally filled with items from my database, right now it creates a new column every time and displays the same sql item thrice.
Img here: http://i.stack.imgur.com/LMw1L.png
As you can see it just creates a whole bunch of columns which is not what I want.
How do I alter my php so that it neatly distributes the database items in my 3 columns (.column, .column-2, .column-3)?
home.php
<?php
ob_start();
require_once("connect.php");
if(isset($_POST['name'])){
$_SESSION["user"] = $_POST["name"];
$name = $_SESSION["user"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dotbar.css">
<link rel="stylesheet" href="css/loginoverlay.css">
<!--jQuery library voor de menubar -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<!-- Show login screen, when cookie is not placed -->
<?php
if (empty($_COOKIE['first_time'])) {
?><div id="black-overlay">
<div id="grey-box">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<form action="home.php" method="POST">
<br>
<br>
<label for="name"> Naam: </label>
<br>
<input type="text" name="name" id="name">
<label for="password"> Wachtwoord: </label>
<br>
<input type="password" name="password" id="password">
<input type="submit" value="submit" name="submit">
</form>
</div>
</div><?php;
setcookie("first_time", 1, time()+157680000); /* expire in 5 years */}
?>
<!--page content -->
<div class="container">
<div class="container2">
<nav id='nav_bar'>
<ul class='nav_links'>
<li>
<?php
//If there is a user SESSION echo in NAV bar
if(isset($_SESSION['user'])) {
//echo admin link when admin is logged in
if ($_SESSION['user'] == 'admin') {
echo "<a href='admin.php'>Admin</a>";
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}
//echo user which is not the admin when logged in
else {echo $_SESSION["user"];
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}}
//echo the login button when user is not logged in
else { echo "<a href='login.php'>Login</a>";}
?>
<br><br><br>→<br><br><br>
</li>
<li>
<a href="?pages=home">
Home<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news">
Blog<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news2">
Gallery <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news3">
About <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news4">
Contact<br><br><br>→<br><br><br>
</a>
</li>
</ul>
</nav>
<div class="content">
<h1>
GRAKA!
</h1>
<div id="bar2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="circle8"></div>
<div id="circle9"></div>
<div id="circle10"></div>
<div id="circle11"></div>
</div>
<?php
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$pagename = $pages. '.php';
include_once($pagename);
}?>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h2>
Designed and produced by
</h2>
<h3>
All rights reserved.<br>
</h3>
</div>
</footer>
<!--Menubar script -->
<script src="menubar.js"></script>
</body>
</html>
<?php
ob_flush();
?>
news2.php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php}?>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php } ?>
css:
body {
margin: 0px;
padding: 0px;
background-color: black;
background-attachment: fixed;
background-image: url(img/2560x2560bubbles.png);
background-size: cover;
font-family: "Segoe UI", 'Helvetica Neue';
}
.container {
margin-top: 520px;
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
background-image: -moz-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
}
.container2 {
width: 1280px;
padding-bottom: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
nav {
margin-left: 7.5%;
margin-top: 100px;
width: 10%;
float: left;
}
#nav_bar {}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
margin-left: 5.3%;
}
ul {
list-style-type: none;
}
li {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: bold;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
clear: none;
min-height: 0px;
}
a {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: grey;
}
a:focus {
text-decoration: none;
color: yellowgreen;
}
a:active {
text-decoration: none;
color: greenyellow
}
.content {
width: 70%;
margin-right: 7.5%;
margin-top: 100px;
float: right;
}
article {
width: 45.4%;
padding: 2.3%;
float: left;
}
img {
width: 100%;
}
h1 {
text-align: right;
margin: 0px;
font-size: 6.0em;
margin-bottom: 10px;
}
h2 {
margin: 0px;
text-align: center;
}
h3 {
margin: 0px;
text-align: center;
}
p {}
p1 {
float: right;
}
footer {
margin-top: 320px;
background-color: rgb(28, 28, 28);
height: 260px;
padding: 120px;
}
.footer-content {
color: white;
}
/*--Bloglist.css --*/
#blog {
width: 100%;
padding: 2.3%;
margin-top: 2.3%;
overflow: hidden;
}
article3 {
width: 100%;
padding: 2.3%;
overflow: hidden;
}
#blogfoto {
width: 257px;
height: 257px;
float: left;
overflow: hidden;
background-color: black;
}
p1#blog {
margin-top: 0px;
width: 62.07%;
float: left;
}
h4 {
margin-left: 2.3%;
float: left;
width: 56.66%;
margin-bottom: 0px;
}
/*-- Thumbnails --*/
.wrapper {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
}
/*-- Gallerylist -- */
.column {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: blue;
}
.column2 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: green;
}
.column3 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: red;
}
I'm assuming that you want each column to show a different row from your database. If so, just include a counter variable say $count = 0; before you enter your loop.
When $count % 3 == 0 use the class '.column', when $count % 3 == 1 use the '.column-2' and $count % 3 == 2 use '.column-3'.
Don't forget to increment the loop counter at the end of each iteration.
Edit:
<?php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
<?php }
else if($count % 3 == 1){
?>
</div>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php }
else{
?>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php
}
$count++;
}
?>
This is not the neatest code, but this should get the job done.

Search results "floating" over rest of the page?

I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>

Categories