Develop Reference

Live search - Ajax, PHP

I have a little problem with the live search form. Below is what I want:
This is what I want. What I have is:
And Screenshot of my problem.
The general problem of Screenshot 3 when I type something in Keyword? field, when I get the result that the field gets bigger and that is what I don't need. The result field is good, exactly what I need. So problem is, I don't need to get a bigger field Keyword? after some user enters some text into that field. Keyword? field the same size, result div size wider.
Bellow, I will paste my code.
HTML:
<div class="header-search-input-item">
<input type="text" name="search" id="search" autocomplete="off" placeholder="Keywords?" value=""/>
<div class="resultDiv"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear:both; }
.sp { clear:both; display:block; margin-bottom:30px; }
.sp a { font-weight:bold; color:#0099FF; }
label { margin-top:20px; margin-bottom:3px; font-weight:bold;}
.searchDiv {
width:130px;
}
.resultDiv {
display:none;
width:auto;
margin-top:40px;
max-height:200px;
overflow:auto;
border:1px solid #0099FF;
padding:5px;
z-index:999;
background-color:#fff;
}
.search {
width: 100%;
float: left;
margin:0;
padding:0;
}
.search .pret {
list-style:none;
clear:both;
width:100%;
height: 60px;
padding:5px 0;
border-bottom: 1px solid #fff;
}
.search .pret:hover, .search .pret:hover > a {
background-color:#0099FF;
color:#fff;
cursor:pointer;
}
.search img {
float:left;
margin:0 5px;
padding:3px;
border:1px solid #ccc;
border-radius:5px;
}
.search a {
text-decoration:none;
color:#666;
display:inline;
}
JS:
$(document).ready(function() {
$("#search").keyup(function() {
var keywords = $(this).val();
if(keywords != "") {
$.ajax({
url: "get_search_result.php",
data: {keywords : keywords},
type: "POST",
success: function(resp) {
if(resp != "") {
$(".resultDiv").html(resp).show();
} else {
$(".resultDiv").html("").hide();
}
}
});
} else {
$(".resultDiv").html("").hide();
}
});
$(document).click(function() {
$("#search").val("");
$(".resultDiv").html("").hide();
});
});
And PHP File:
<?php include("db.php");?>
<?php
if(isset($_POST['keywords'])) {
$keywords_arr = explode(",", mysqli_real_escape_string($con, $_POST['keywords']));
$like = "";
foreach($keywords_arr as $key) {
$key = trim($key);
if($key != "") $like .= " `VehiclesTitle` like '%".$key."%' or";
}
$like = substr($like, 0, -3);
$sql = "select distinct * from `tblvehicles` where ".$like." limit 20";
$res = mysqli_query($con, $sql);
echo "<ul class='search'>";
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
if(file_exists("admin/img/vehicleimages/".$row->Vimage1."")) $img = "admin/img/vehicleimages/".$row->Vimage1."";
else $img = "images/post_images/default.jpg";
echo "<li class='pret'><a href=''><img src='".$img."' width='50' height='50' />".$row->VehiclesTitle."</a></li>";
}
} else {
echo "<li class='pret'>No match found!</li>";
}
echo "</ul>";
echo "<div class='clearfix'></div>";
}
?>

Uploading dragged images in javascript?

So, I was making a uploading system in php, Before you can choose an image. Now you can either choose an image or just drag the image on the uploading system. The problem that I'm having, If I choose and image and then upload it, It works fine and the name of the images are shown before uploading but when I drag an image the names are shown but I can't seem to upload it. Is there anyway to fix this problem I'm having, I have no idea how to fix it.
HTML:
<div class="container">
<div class="add-form">
<h1 class="text-center"><font face="fantasy" size = "10"><center>Please Insert new image</center></font></h1>
<form method="post" enctype="multipart/form-data" id="FormID" onsubmit="uploadFiles(event)">
<label for = "name" id = "LabelName"><font face = fantasy size = "5">
<img src = "https://image.flaticon.com/icons/png/512/1233/1233986.png" width = "50">
<br>
UserName</font></label>
<input class = "UsernameUpload" id = "name" type="text" name="user_name" class="form-control">
<label for = "image" id = "fileLabel"
ondragover = "overrideDefault(event);fileHover();"
ondragenter = "overrideDefault(event);fileHover();"
ondragleave = "overrideDefault(event);fileHoverEnd();"
ondrop = "overrideDefault(event);fileHoverEnd();addFiles(event);">
<font face = "fantasy" size = "5">
<img src = "https://image.flaticon.com/icons/png/512/1180/premium/1180674.png" width = "50">
<br>
<span id = "fileLabelText">Select image to upload Or Drag N Drop</font></span>
<br>
</label>
<input multiple onchange = "addFiles(event)" id = "image" type="file" onchange ="unlock()" name="profile" class="form-control2" accept="*/image">
<button class = "uploadButton" type="submit" value = "submit" name="btn-add" onClick = "return validate()" action = "index.php"><font face = "calibri" size = "4">upload</font></button>
<div id = "error"><font face = "fantasy">Please fill up the username and select and image</font></div>
</form>
</div>
<hr style="border-bottom: 5px blue solid;">
</div>
Css code:
<style type = "text/css">
body{
background-color: lightblue;
}
#FormID {
margin: 16px;
text-align: center;
border-radius: 8px;
overflow: hidden;
transition: 0.5s;
}
#FormID #fileLabel {
background-color: rgba(0, 255, 0, 0.5);
display: block;
padding: 16px;
position: relative;
cursor: pointer;
}
#FormID #image {
display: none;
}
#FormID #fileLabel:after,
#FormID #fileLabel:before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: -2;
border-radius: 8px 8px 0 0;
}
#FormID #fileLabel:before {
z-index: -1;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 5%,
black 5%,
black 10%
);
opacity: 0;
transition: 0.5s;
}
#FormID.fileHover #fileLabel:before {
opacity: 0.25;
}
#FormID .uploadButton {
border: 0;
outline: 0;
width: 100%;
padding: 8px;
background-color: limeGreen;
color: #fff;
cursor: pointer;
}
#FormID.fileHover {
box-shadow: 0 0 16px limeGreen;
}
Javascript code:
<script>
function validate()
{
var username = document.getElementById("name");
var img = document.getElementById("image");
if(username.value.trim()=="") {
var myDiv = document.getElementById("error");
username.style.border = "solid 3px red";
myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">username not entered</font>';
return false;
}
else if (username.value.length<8){
var myDiv = document.getElementById("error");
username.style.border = "solid 3px red";
myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">username need to be atleast 8 characters long</font>';
return false;
}
else if (img.value.trim()=="") {
var myDiv = document.getElementById("error");
img.style.border = "solid 3px red";
myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Select an image</font>';
return false;
}
}
var FormID = document.getElementById("FormID");
var fileLabelText = document.getElementById("fileLabelText");
var uploadStatus = document.getElementById("uploadStatus");
var image = document.getElementById("image");
var droppedFiles;
function overrideDefault(event) {
event.preventDefault();
event.stopPropagation();
}
function fileHover() {
FormID.classList.add("fileHover");
}
function fileHoverEnd() {
FormID.classList.remove("fileHover");
}
function addFiles(event) {
droppedFiles = event.target.files || event.dataTransfer.files;
showFiles(droppedFiles);
}
function showFiles(files) {
if (files.length > 1) {
fileLabelText.innerText = files.length + " files selected";
} else {
fileLabelText.innerText = files[0].name;
}
}
</script>
EDIT: This is PHP code also:
<?php
include("config.php");
if(isset($_GET['delete_id']))
{
$stmt_select=$db_conn->prepare('SELECT * FROM tbl_user WHERE id=:uid');
$stmt_select->execute(array(':uid'=>$_GET['delete_id']));
$imgRow=$stmt_select->fetch(PDO::FETCH_ASSOC);
unlink("uploads/".$imgRow['picprofile']);
$stmt_delete=$db_conn->prepare('DELETE FROM tbl_user WHERE id =:uid');
$stmt_delete->bindParam(':uid', $_GET['delete_id']);
if($stmt_delete->execute())
{
?>
<script>
window.location.href=('index.php');
</script>
<?php
}else
?>
<script>
window.location.href=('index.php');
</script>
<?php
}
?>
<?php
if(isset($_POST['btn-add']))
{
$name=$_POST['user_name'];
$images=$_FILES['profile']['name'];
$path = "uploads/";
$rand=rand(1000, 1000000);
$filename = "$rand.jpg";
$filepath = "$path$filename";
function correctImageOrientation($filename) {
if (function_exists('exif_read_data')) {
$exif = exif_read_data($filename);
if($exif && isset($exif['Orientation'])) {
$orientation = $exif['Orientation'];
if($orientation != 1){
$img = imagecreatefromjpeg($filename);
$deg = 0;
switch ($orientation) {
case 3:
$deg = 180;
break;
case 6:
$deg = 270;
break;
case 8:
$deg = 90;
break;
}
if ($deg) {
$img = imagerotate($img, $deg, 0);
}
// then rewrite the rotated image back to the disk as $filename
imagejpeg($img, $filename, 95);
} // if there is some rotation necessary
} // if have the exif orientation info
} // if function exists
}
$imgExt=strtolower(pathinfo($images,PATHINFO_EXTENSION));
if (move_uploaded_file($_FILES["profile"]["tmp_name"], $filepath)){
$images = imagecreatefromjpeg($filepath);
}
correctImageOrientation($filepath);
if ($imgExt == "jpeg" || $imgExt == "jpg") {
$im = imagecreatefromjpeg($filepath);
}else if($imgExt == "png"){
$im = imagecreatefrompng($filepath);
}else if($imgExt == "gif"){
$im = imagecreatefromgif($filepath);
}
$size = getimagesize($filepath);
$width = imagesx($im);
$height = imagesy($im);
$newwidth= 800;
$newheight= 800;
if(($width/$newwidth) < ($height/$newheight)){
$y = 0;
$x = $width - (($height * $newwidth) / $newheight);
}else{
$x = 0;
$y = $height - (($width * $newheight) / $newwidth);
}
$virtual_image = imagecreatetruecolor(850, 850);
imagealphablending($virtual_image, true);
imagesavealpha($virtual_image, true);
imagecopyresampled($virtual_image,$im,0,0, $x/2, $y/2, $newwidth, $newheight, $width-$x, $height-$y);
$bgcolor = imagecolorallocatealpha($virtual_image,255,255,255,127);
imagefill($virtual_image,0,0,$bgcolor);
imagecolortransparent($virtual_image, $bgcolor);
imagejpeg($virtual_image,$filepath,100);
$stmt=$db_conn->prepare('INSERT INTO tbl_user(username, picprofile) VALUES (:uname, :upic)');
$stmt->bindParam(':uname', $name);
$stmt->bindParam(':upic', $filename);
if($stmt->execute())
{
echo "Uploaded";
header("Location:index.php");
}else
{
?>
<script>
alert("Error");
window.location.href=('index.php');
</script>
<?php
}
}
?>

Onclick javascript function doesn't work on first click

I've wrote a code to hide/show a div by clicking on a "p" element, but at first click nothing happens.
Only from 2nd click the code works as expected.
I've read some similar questions and I've understood that it's probably a style problem.
So I've tried to change style (without really knowing what I was doing) but I wasn't lucky.
I've also another problem: the "p" element sometimes covers an input and I've not understood how to have it on the bottom right of the div but below every other element.
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.Fields {
clear: both;
border: 1px solid #CCC;
display: inline-block;
margin:3px;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
foreach ($AskToShow as $I_Name=>$Id){
echo '
<label>'.$I_Name.'</label>
<input type="text" id="'.$Id.'" class="Fields"/>';
}
echo '
<p id="Btn_Opt'.$Name.'" class="Class2" >Mostra campi opzionali</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
if (SubSH.style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>

The thing is that when you do SubSH.style.display you are checking only inline style so something which is inn <your-tag style='...'/> but you have it in your stylesheet so it is not accessible by this method. try to change your function a bit - for example
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
var style = window.getComputedStyle(SubSH);
if (style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
by using window.getComputedStyle(SubSH); you are checking style which is aware of all your classes and csses

Please find the working code below
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:relative;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
display: inline-block;
float:right;
}
.Fields {
clear: both;
border: 1px solid #CCC;
display: inline-block;
margin:3px;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs = array(
'Div1' => 'Class1',
'Div2' => 'Class1',
'Div3' => 'Class1',
'Div4' => 'Class1',
'Div5' => 'Class1'
);
$AskToShow = array(
"Field1" => "1.1.1",
"Field2" => "1.2.1",
"Field3" => "1.3.1"
);
foreach ($Divs as $Name => $Class) {
echo '
<div class="' . $Class . '">';
echo $Name . '<br/>';
foreach ($AskToShow as $I_Name => $Id) {
echo '
<label>' . $I_Name . '</label>
<input type="text" id="' . $Id . '" class="Fields"/>';
}
echo '
<div id=Opt' . $Name . ' name="Opt' . $Name . '" class="Opt" >';
foreach ($AskToShow as $H_Name => $Id) {
echo '
<p id="H_' . $Id . '" class="H_p">' . $H_Name . '</p>';
}
echo '
</div>';
echo '
<div style="clear:both;"></div>';
echo '
<p id="Btn_Opt' . $Name . '" class="Class2" >Mostra campi opzionali</p>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
if (window.getComputedStyle(SubSH, null).display == 'none'){
SubSH.style.display = 'inline-block';
} else {
SubSH.style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>

can css attribute matching be caseinsensitive ? with SASS?

I'm formatting links depending on the kind of file they link to.
a[href$=".doc"] { background: url(icon-doc.png) left; padding-left: 30px; }
My problem is, attribute-matching seems to be case sensitive. Is it possible to have CSS match any case combinations?
Or is it possible to have compass/sass generating all the differing case variations? like
a[href$=".doc"], a[href$=".Doc"], a[href$=".dOc"] { ... }
Or do I need to make some js to lowercase all attributes?

It was harder than i thought but i'm too stubborn to quit :P
$ext-s : ("gif", "jpg", "jpeg", "png", "project");
#function to-upper-case-at($s, $n) {
#if $n < 1 {
#return $s;
}
#if str-length($s) == 1 {
#return to-upper-case($s);
}
$before : "";
$after : "";
$char: "";
#if $n > 1 {
$before : str-slice($s, 1, $n - 1);
}
#if $n < str-length($s) {
$after : str-slice($s, $n + 1);
}
$char: to-upper-case(str-slice($s, $n, $n));
#return $before + $char + $after;
}
#function power ($x, $n) {
$ret: 1;
#if $n >= 0 {
#for $i from 1 through $n {
$ret: $ret * $x;
}
} #else {
#for $i from $n to 0 {
$ret: $ret / $x;
}
}
#return $ret;
}
#function bin-mask-list($dec-int) {
$r : $dec-int;
$res : ();
$dig : 0;
$last : false;
#while $last == false {
$m : $r % 2;
#if $m != 0 {
$dig : 1;
}
#else {
$dig : 0;
}
$res : join($dig, $res);
#if ($r == 1) or ($r == 0) {
$last : true;
}
$r : floor($r / 2);
}
#return $res;
}
#function all-cases($string) {
$case-list: ($string);
$length : str-length($string);
#for $i from 1 to power(2, $length) {
$mask : bin-mask-list($i);
$res-string : $string;
#while $length > length($mask) {
$mask : join(0, $mask);
}
#for $j from 1 through $length {
$digit : nth($mask, $j);
#if $digit == 1{
$res-string : to-upper-case-at($res-string, $j);
}
}
$case-list : append($case-list, $res-string);
}
#return $case-list;
}
#each $ext in $ext-s {
$all-c : all-cases($ext);
#each $c in $all-c {
a[href$=".#{$c}"] { background: url(icon-doc.#{$c}) left; padding-left: 30px; }
}
}
It will output around 2k lines of css like this one:
/* line 85, ../scss/test.scss */
a[href$=".gif"] {
background: url(icon-doc.gif) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".giF"] {
background: url(icon-doc.giF) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".gIf"] {
background: url(icon-doc.gIf) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".gIF"] {
background: url(icon-doc.gIF) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".Gif"] {
background: url(icon-doc.Gif) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".GiF"] {
background: url(icon-doc.GiF) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".GIf"] {
background: url(icon-doc.GIf) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".GIF"] {
background: url(icon-doc.GIF) left;
padding-left: 30px;
}
/* line 85, ../scss/test.scss */
a[href$=".jpg"] {
background: url(icon-doc.jpg) left;
padding-left: 30px;
}

URLs are all case sensitive, so yes, you need to make your links consistent.
CSS file name case sensitivity & Css file caching

position:absolute is floating over the element

just would like to know how i can stop the position:absolute element to stop floting over the wapper div
html
<?php
echo "<div class='pinWrapper'>";
echo "<h2>New Arrivals</h2>";
echo "<br />";
$all_products = get_all_products();
while ($product = mysql_fetch_array($all_products))
{
echo "<div class='block'>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>";
$Id = $product['Id'];
$limit = 1;
$img_set= get_images_by_id($Id, $limit);
while ($img = mysql_fetch_array($img_set))
{
echo "<img src='sto/" . $img["image_name"] ."'>";
}
echo "</a>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>" . $product['item_name'] . "</a>";
echo "<div class='hpDis'>" . $product['sm_description'] . "</div>";
echo "</div>";
echo "<div class='clear'></div>";
}
echo "</div>";
?>
CSS
.pinWrapper {
position: relative;
margin: 0 auto;
width:720px;
}
.block{
position: absolute;
background: #eee;
padding: 1px;
width: 210px;
border: 1px solid #ddd;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.block img {
width: 200px;
height: auto;
}
Javascript
var colCount = 0;
var colWidth = 0;
var margin = 20;
var windowWidth = 800;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
//windowWidth = $(window).width();
colWidth = $('.block').outerWidth();
blocks = [];
console.log(blocks);
colCount = Math.floor(windowWidth/(colWidth+margin*2));
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
Live example here
Any help is greatly appreciated.

If you want the wrapper div to enclose the ".block" elements, you must remove
position: absolute;
and add instead:
display: inline-block;
margin: 32px;
You might as well remove the ".clear" elements.

add z-index:-999; and that will stop it from being above anything else