I used the following code for showing suggestions wile typing. It's working well, but my other elements overlap the my search suggestion. How can I resolve this?
Code in <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
</script>
<script>
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("search.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#country').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
</script>
search.php:
<?php
include('inc/config.php');
include('inc/func.php');
$queryString=$_POST['queryString'];
if(isset($_POST['queryString'])) {
if(strlen($queryString) >0) {
$query = mysql_query("SELECT person_id,name,type,photo FROM person WHERE name LIKE '$queryString%' or person_id like '$queryString%' LIMIT 5");
if($query) {
echo '<ul>';
while ($result = mysql_fetch_array($query)) {
?>
<li>
<a href="view">
<table>
<tr>
<td>
<img src="<?php if($result['photo']=="0"){ echo "data/img/default.png";}else{ echo $result['photo'];}?>" width="60px" height="60px">
</td>
<td width="20px">
</td>
<td valign="top">
<h2><?php echo $result['name'];?></h2>
<h4><?php if($result['type']=='1'){echo "Staff";}elseif($result['type']=='2'){echo "Parent";}else{echo "Student";}?></h4>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td valign="top">
<h4>
<?php
if($result['type']=='3')
{
echo "Roll No: ".get_data('student','rollno',$result['person_id']);
}
?>
</h4>
<h4>
<?php
if($result['type']=='3')
{
$section_id=get_data('student','section_id',$result['person_id']);
$section_name=get_data('section','name',$section_id);
$class_id=get_data('section','class_id',$section_id);
$class_name=get_data('class','name',$class_id);
echo "Class: ".ucfirst($class_name)."(".$section_name.")";
}
?>
</h4>
</td>
</tr>
</table>
</a>
</li>
<?php
}
echo '</ul>';
} else {
echo 'sorry';
}
} else {
echo 'sorry';
}
} else {
echo 'There should be no direct access to this script!';
}
?>
CSS code:
#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:17px;
}
.suggestionsBox {
position: absolute;
left: 440px;
top:35px;
margin: 0px 0px 0px 0px;
width: 570px;
padding:0px;
background-color: #71a4e3;
border-top: 0px solid #000;
color: #ffffff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:3px solid #000;
cursor: pointer;
min-height:50px;
}
.suggestionList ul li:hover {
background-color: #ffffff;
color:#000;
}
.suggestionList a
{
background-color: #ffffff;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fffff;
padding:0;
margin:0;
}
.load{
background-image:url(../img/ajaxLoader/loader01.gif);
background-position:right;
background-repeat:no-repeat;
}
#suggest {
position:relative;
}
Give your main content container a position:relative and a z-index:1...then, give your suggestion box a z-index:100 or higher. That should put your suggestions above other content on the page...if I'm understanding your need correctly.
Related
I've been working on a Library Management Sys in PHP.
It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.
Along with all the records, I'm also echoing a button to activate a modal on getting click.
The code is as below -
do{?>
<?php
$br_id = $row['Member_id'];
?>
<tr>
<td style="outline:1px dotted #000000" height="auto" width="80px" align="center"><?php echo $row['Member_id']?></td>
<?php
$mem_id = $row['Member_id'];
?>
<td style="outline:1px dotted #000000" height="auto" width="340px" align="justify"> <?php echo $row["Member_name"]?></td>
<td style="outline:1px dotted #000000" height="auto" width="130px" align="center"><?php echo $row['Class']?></td>
<td style="outline:1px dotted #000000" height="auto" width="150px" align="center"><?php echo $row['Contact']?></td>
<td style="outline:1px dotted #000000" height="auto" width="120px" align="center"><?php
$count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
$cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
$num_results = $cnt["total_things"];
echo $num_results;
?></td>
<td style="outline:1px dotted #000000" height="auto" width="80" align="center"><?php echo $row['Fine_Amt']?></td>
<td style="outline:1px dotted #000000" width="120px" align="center">
<?php
date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d H:i:s');
if($row['Fine_Amt']>0)
{
echo '<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>';
echo '<p><h1>NTHS eLibrary</h1></br>
<h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
<div align="center">';
?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<?php }while($row=mysqli_fetch_array($Result));?>
The above code works perfectly fine but only for the top row :(
What could possibly the reasons for this. Please help
In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.
I have the below Table with HTML when i click the button(update) in the table row , the particular row values i.e the button belongs to which row the respected row values only insert or update in a table.
<script type = "text/javascript" >
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
<script type = "text/javascript" >
history.pushState(null, null, 'new2.html');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'new2.html');
});
</script>
<style>
<script>
$(function() {
var pickers = {};
$('table tr').editable({
dropdowns: {
Aex: ['Automation', 'Manual']
},
edit: function(values) {
$(".edit i", this)
.removeClass('fa-pencil')
.addClass('fa-save')
.attr('title', 'Save');
pickers[this] = new Pikaday({
field: $("td[data-field=birthday] input", this)[0],
format: 'MMM D, YYYY'
});
},
save: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
},
cancel: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
}
});
});
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
body {
margin-bottom: 100px;
}
.row {
margin-bottom: 20px;
}
pre {
margin-top: 0;
}
.button.button-small {
height: 30px;
line-height: 30px;
padding: 0px 10px;
}
td input[type=text], td select {
width: 100%;
height: 30px;
margin: 0;
padding: 2px 8px;
}
th:last-child {
text-align: right;
}
td:last-child {
text-align: right;
}
td:last-child .button {
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
background-color: #FFF;
}
td:last-child .button .fa {
line-height: 30px;
width: 30px;
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
color: #fff;
padding: 100px 55px;
font-family: Montserrat, sans-serif;
height:500px;
background-image: url(header.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #0099ff;
font-size: 50px;
}
.logo-small1 {
color: #0099ff;
font-size: 20px;
}
.logo {
color: #0099ff;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
#section {
width:350px;
padding:10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #39ac73;
}
.carousel-indicators li {
border-color: #39ac73;
}
.carousel-indicators li.active {
background-color: #39ac73;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #39ac73;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #39ac73;
background-color: #fff !important;
color: #39ac73;
}
.panel-heading {
color: #fff !important;
background-color: #39ac73 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #39ac73;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
min-height: 70px;
}
.navbar li a, .navbar .navbar-brand {
color: #39ac73 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #39ac73 !important;
background-color: #e5fff7 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #39ac73;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
#media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Windows</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="http://code.jquery.com/jquery-1.11.3.min.js" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="css/pikaday.css" >
<link rel="stylesheet" href="css/pikaday-skeleton.css" >
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="container-fluid text-center">
<h1>Windows Data</h1>
<table id="tab_logic" class="table">
<thead >
<tr class="info">
<th>S.No</th>
<th>Machine Name</th>
<th>IP</th>
<th>Host name</th>
<th>Tester Name</th>
<th>Installation Plan</th>
<th>OS Version</th>
<th>MI Version</th>
<th>AUT/MAT</th>
<th>Reimage</th>
<th>Edit</th>
<th>Update</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="1">
<td id="sn" data-field="S.No">1</td>
<td data-field="Machine Name">sxsxsdsd</td>
<td data-field="IP">sssss</td>
<td data-field="Host name">zxzxzx</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td><a class="button button-small edit" title="Edit"><i class="fa fa-pencil"></i></a></td>
<td><button type="submit" onclick="one()" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td ><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="2">
<td data-field="S.No">2</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsdsd</td>
<td data-field="Host name">sdsdsdsdsd</td>
<td data-field="Tester Name">dsdsdsdsd</td>
<td data-field="Installation Plan">[ For OLS ] MI PC offline</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="3">
<td data-field="S.No">3</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsd</td>
<td data-field="Host name">sdsdsdsd</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="Pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
</body>
</html>
Use for loop to display html table, and use index in the button.
For example, if you want to delete a meeting from the table by clicking delete button next to it, then you can do something like this:
Example format
meeting1 DELETE(button)
meeting2 DELETE(button)
meeting3 DELETE(button)
The delete button will be same only the url will be changing.
echo "<tr>
<th>Status</th>
<th>Title</th>
<th>Scheduled By</th>
<th>Scheduled Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Actions</th>
</tr>";
for ($n = 0; $n < count($meeting_array); $n++) {
$meetingname = $meeting_array[$n]; //contains meeting names.
echo "<td style= \"color : darkgoldenrod; text : strong;\" >" . $status . "</td>";
echo "<td>" . $meetingname2 . "</td>";
echo "<td>" . $extractedname . "</td>";
echo "<td>" . $mydate . "</td>";
echo "<td>" . $mystarttime . "</td>";
echo "<td>" . $myendtime . "</td>";
echo"<td>";
// pass meeting name in url.
echo"<a href=\"View_Meeting.php?id={$meetingname}\" <img src=\"../img/read1.png\" alt=\"Read\" /> ";
echo "</td>";
}
echo "</tr>";
want to know how to combine threads to sections. When I write a new topic Published on the home and the selected partition how add to Section [ID], e.g.
www.site.com/[Section[id]/[post[ID]
Add_post.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add New Post</title>
<style type="text/css">body{background-color: grey}
.border{
border: 5px solid blue;
border-width:30px ;
}</style>
</head>
<?php
require_once("../clude/conn.php"); //Calls in the previous file we created
// form not yet submitted
// display initial form
if (!$submit)
{
?>
<center>
<div class="border" style=" direction:rtl;margin-right:10px;">
<h1 style="color: red;">Add New Post</h1>
<br>
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id" value="id">
<h4 style="color: aqua">Title</h4>
<input style="border-radius: 5px;color: red;" size="50" maxlength="60" type="text" name="title"><br />
<h4 style="color: aqua">Content</h4>
<textarea style="width: 60%; height: 400px" name="content" cols="38" rows="10"></textarea> <br />
<h4 style="color: aqua">Author</h4>
<input style="border-radius: 5px;color: red;" size="50" maxlength="250" type="text" name="author"> <br />
<br /> <input style="border: 2px dashed deepskyblue" type="Submit" name="submit" value="Add">
</form>
</div>
</center>
<?
} else {
//set up error array
$err = array();
$count = 0;
//validate the user text input fields
if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }
if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }
if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }
// if no error found...
if (sizeof($err) == 0) {
// generate and execute query to insert the post
$query = "INSERT INTO exploit(id,title, content, author, date) VALUES(0,'$title', '$content', '$author', NOW())";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
// print result
echo "<center><h1 style='color: aqua'>Post Added</h1><br /><h1 style='color: red'><a href='index.php'>Go To Home</a></h1></center>.";
} else {
// errors found
// print as list
echo "<center><h1 style='font-size:100px;color: aqua; text-shadow: 4px 1px 15px red;'>Error in Form</h1></center>";
echo "<ul>";
for ($x=0; $x<sizeof($errorList); $x++) {
echo "<li>$errorList[$x]";
}
echo "</ul></font>";
}
}
?>
Index.php
<html>
<head>
<meta charset="UTF-8">
<title>Exploit | Database</title>
<meta name='keywords' content='exploit,local,remote,arab,lfi,sql injection,buffer overflow,dos,ddos, priv8 exploit, 0day exploit, 2.6.18 kernel exploit 0day, localroot, priv8 exploit, how to deface, hack, how to hack, exploits, 0day exploits , x00x_team , '>
<meta name='description' content='Exploit Database Vulnerability reports, 0days, remote exploits, local exploits, security articles, tutorials and more.'>
<link rel="stylesheet" type="text/css" href="themes/default/style/style9.css" media="all">
<link rel='stylesheet' href='themes/system.css'>
<script src="jquery.min.js"> </script>
<style type="text/css">
body{ background:url(img/bg.png) !important; }
#code {
padding:5px;
border:1px dashed;
background-color:#353535;
direction: ltr;
text-align: left;
height:250px;
overflow-y:scroll;
}
textarea{
background-color:#353535;
color: red;
border-shadow: 4px 1px 18px white;
height:100%;
width:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="typed.js" type="text/javascript"></script>
<script>
$(function(){
$("#typed").typed({
strings: ["welcome in <strong>Database</strong> Exploit.", "we <em>have</em> Big Database Exploit.", "And How Close It", "Enjoy in Site!"],
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ /* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
<link href="main.css" rel="stylesheet"/>
<style>
/* code for animated blinking cursor */
.typed-cursor{
opacity: 1;
font-weight: 100;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
<link rel="icon" href="Radiation.ico" type="image/ico" sizes="16x16">
</head>
<body><style>
#wg-rosebar {
width:100%;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#7f103c;
overflow:none;
width:100%;
height:40px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}
#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}
#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}
.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}
.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<div id="wg-rosebarbtm" >
<style>
.wg-ribmenu span {
background:#7f103c;
display:inline-block;
color:#FFFFFF;
line-height:40px;
padding:0 1em;
margin-top:0.0em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
-moz-transition: background-color 0.2s, margin-top 0.2s;
-ms-transition: background-color 0.2s, margin-top 0.2s;
-o-transition: background-color 0.2s, margin-top 0.2s;
transition: background-color 0.2s, margin-top 0.2s;
}
.wg-ribmenu a:hover span {
background:#FFD204;
margin-top:0;
}
.wg-ribmenu span:before {
content: "";
position:absolute;
top:40px;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #7f103c;
}
.wg-ribmenu span:after {
content: "";
position:absolute;
top:40px;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #7f103c;
}
.wg-ribmenu a:link, .wg-ribmenu a:visited {
color:#000;
text-decoration:none;
float:right;
height:40px;
overflow:hidden;
}
</style>
<div class='wg-ribmenu'>
<a href='/index.html'><span><img class="fa-fa-home"/></span></a>
<a href='admin/index.php'><span>Add Post</span></a>
</div>
</div></div>
<div class="wrap">
<h1 class="h1" style="color: #ff0000">Welcome in Database</h1>
<div class="type-wrap">
<span id="typed" style="white-space:pre;"></span>
</div>
<div class='body'><h1 class='title'><a class='teko' href='index.php' title='Exploit Big Database'>Posts</a></h1><table border='1' align='center' width='98%'>
<tr class='trhead'>
<td width='10%'>Date</td>
<td class='left'>Title</td>
<td width='12%'>Author</td>
</tr>
<?php
include_once 'clude/conn.php';
$sql = "SELECT * FROM exploit";
$q = mysql_query($sql);
$num_row = mysql_num_rows($q);
while($articles = mysql_fetch_array($q)) {
?>
<tr class="exploit">
<td><?php echo $articles['date'];?></td>
<td><?php echo $articles['title']; ?></td>
<td><?php echo $articles['author'];?></td>
</tr>
<?php
}
mysql_close();
?>
</table> </div> </div>
</body>
</html>
I believe what you're looking for is Mod Rewrite, which involves editing the .htaccess file.
See https://www.addedbytes.com/articles/for-beginners/url-rewriting-for-beginners/
Also http://www.workingwith.me.uk/articles/scripting/mod_rewrite
solve is :
<?php
include_once 'clude/conn.php';
$sql = "SELECT * FROM posts";
$q = mysql_query($sql);
$num_row = mysql_num_rows($q);
while($articles = mysql_fetch_array($q)) {
?>
<div class="row"><div class="col-md-12"><div class="boxed">
<h1><?php echo $articles['title']; ?></h1>
<p><?php echo $articles['description']; ?></p>
<hr>
<?php
include_once 'clude/conn.php';
$sql = "SELECT * FROM store";
$w = mysql_query($sql);
$num_row = mysql_num_rows($w);
while($imagee = mysql_fetch_array($w)) {
?>
<img src="<?php echo $imagee['image']; ?>">
<?php
}
?>
<hr>
</div></div></div>
<?php
}
mysql_close();
?>
show_cat.php / example
<tr class="exploit">
<td><?php echo $ar['date']; ?></td>
<td><?php echo $ar['title']; ?></td>
<td><?php echo $ar['author']; ?></td>
</tr>
<?php
}
mysql_close();
?>
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.
I am doing a college project. I need to change the scrolling position from Horizontal to Vertical, But that's not working. Here I'm using PHP and HTML, CSS. Can any one fix my code please? I am new to css.
This is my current output:
My code:
<style>
div.boxx
{
background-color:#9C0;
width:150px;
height:150px;
margin-left:20px;
text-align:center;
float:left;
}
div.boxx:hover
{
background:#333;
}
div.inside1
{
width:100px;
height:100px;
margin-left:auto;
margin-right:auto;
position:relative;
margin-top:10px;
bottom:0px;
border:solid #666;
border-width:thin;
}
div.inside2
{
width:auto;
height:40px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
text-align:center;
}
div.button1
{
width:15px;
height:25px;
left:85px;
float:right;
position:absolute;
top:0px;
}
table.main_table
{
margin-left:auto;
margin-right:auto;
width:auto;
}
tr.toptr
{
background:url(images/available_gallary_top.png) no-repeat;
height:38px;
}
tr.boatamtr
{
background:url(images/available_gallary_bottam.png) no-repeat;
height:7px;
}
tr.fulltr
{
background:url(images/available_gallary_bg.png) repeat-y;
}
div.gal_cantiner
{
background-color:#09C;
width:869px;
margin-left:2px;
height:152px;
overflow:auto;
}
input.delet_gal_bt
{
width:13px;
height:13px;
background:url(images/delet_gal_bt.png) no-repeat;
border:none;
}
input.delet_gal_bt:hover
{
background:url(images/delet_gal_bt_h.png) no-repeat;
}
input.remove_gal_bt
{
width:13px;
height:13px;
background:url(images/remove_gal_bt.png) no-repeat;
border:none;
}
input.remove_gal_bt:hover
{
background:url(images/remove_gal_bt_h.png) no-repeat;
}
span.gallary_date_text
{
color:#666;
font-size:9px;
line-height:15px;
}
</style>
<?php
session_start();
include "config.php";
error_reporting(0);
echo "<br>";
$crt=0;
$sql= mysql_query("SELECT * FROM new_gallary",$con);
echo "<table class='main_table' border='0' align='center'><tr class='toptr'><td> </td></tr><tr class='fulltr'><td><div class='gal_cantiner' id='gal_cantiner'>";
while($row = mysql_fetch_array($sql))
{
echo "<div class='boxx' id='boxx".$crt."'><div class='inside1'><img src='".$galimg."' width='100' height='100'><div class='button1'><input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/><input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/></div></div><div class='inside2'>".$row['gallary_name']."<br><span class='gallary_date_text'>".$row['gallary_date']."</span></div></div>";
$crt++;
}
echo "</div></td></tr><tr class='boatamtr'><td></td></tr></table>";
?>
I finally found the answer. I add a new style line into the tr that will inside of the loop like this:
$l=$l+100;
echo"
<div class='boxx' id='boxx".$crt."' style="margin-left:".$l."px;margin-top:-160px;">
<div class='inside1'>
<img src='".$galimg."' width='100' height='100'>
<div class='button1'>
<input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/>
<input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/>
</div>
</div>
<div class='inside2'>".$row['gallary_name'].">
<br>
<span class='gallary_date_text'>".$row['gallary_date']."</span>
</div>
</div>
";
style="margin-left:".$l."px; margin-top:-160px;
THe Final Output:Image
Try this.
overflow: auto;
overflow-x: hidden;
And please cut short the code : sscce
#user1126301 your code doesn't seems to have any scroll bars. It just uses the existing images.
You should add this in your css:
overflow-y: scroll; overflow-x: hidden; padding-right: 5px;
visibility: visible; border: thin solid white; background-color:#336699;
scrollbar-face-color: #336699; scrollbar-3dlight-color: #336699;
scrollbar-base-color: #336699; scrollbar-track-color: #336699;
scrollbar-darkshadow-color: #000; scrollbar-arrow-color: #000;
scrollbar-shadow-color: #fff; scrollbar-highlight-color: #fff;