I'm trying to create a form from the following code, but not having any success. I want to input hidden fields to capture a value of 1 when I put one of the draggable items into the "Most Like Me" field, a value of 2 when the draggable item is in the "2nd Most Like Me", 3 for "3rd Most Like Me", and 4 for "Least Like Me". Sample can be viewed by clicking here. How would I create this using the following code? I use PHP and MySQL as reference for adding to the database.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* Add some margin to the page and set a default font and colour */
body {margin: 30px;font-family: "Georgia", serif;line-height: 1.8em;color: #333;}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
margin: 80px 70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div {
float: left;
width: 150px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 20px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
// JavaScript will go here
$( init );
function init() {
// Create the pile of shuffled cards
{
$('#cardPile div').draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
{
$('#cardSlots div').droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this);
var cardNumber = ui.draggable;
if ( cardNumber == cardNumber ) {
ui.draggable.addClass ( 'correct' );
ui.draggable.draggable ( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="cardPile">
<div>Controlling</div>
<div>Motivating</div>
<div>Realistic</div>
<div>Organized</div>
</div>
<div id="cardSlots">
<div>Most Like Me</div>
<div>2nd Most Like Me</div>
<div>3rd Most Like Me</div>
<div>Least Like Me</div>
</div>
</div>
</body>
</html>
I modified your function:
function handleCardDrop( event, ui ) {
var slotNumber = $(this);
var cardNumber = ui.draggable;
var choice = cardNumber.html();
var aux = 0;
if (choice == 'Controlling')
{
aux = 1;
}
if (choice == 'Motivating')
{
aux = 2;
}
if (choice == 'Realistic')
{
aux = 3;
}
if (choice == 'Organized')
{
aux = 4;
}
var droped= slotNumber.html();
if(droped == 'Most Like Me')
{
$("#uno").val(aux);
}
if(droped == '2nd Most Like Me')
{
$("#dos").val(aux);
}
if(droped == '3rd Most Like Me')
{
$("#tres").val(aux);
}
if(droped == 'Least Like Me')
{
$("#cuatro").val(aux);
}
if ( cardNumber == cardNumber ) {
ui.draggable.addClass ( 'correct' );
ui.draggable.draggable ( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
}
------------------UPDATE 2.0---------------------------
I just add the ajax part, and modified the fiddle:
$("#saveResult").click(function(){
var uno = $("#uno").val();
var dos = $("#dos").val();
var tres = $("#tres").val();
var cuatro = $("#cuatro").val();
var params = {
"uno" : uno,
"dos" : dos,
"tres" : tres,
"cuatro": cuatro
};
$.ajax( {
type: "POST",
url: 'myphpfile.php',
data: params,
success: function( response ) {
$("#result").html(response);
}
} );
});
In the file myphpfile.php:
<?php
$uno = $_POST['uno'];
$dos = $_POST['dos'];
$tres = $_POST['tres'];
$cuatro = $_POST['cuatro'];
//Here the code to insert in your database
?>
UPDATED working fiddle: http://jsfiddle.net/robertrozas/qLhke/25/
Related
I have an input field I changed it to a checkbox for multiple choices.
The worry here I can't add the checkbox, I mean that my user should click on Ctrl and select on the same time several choices. You can see it in this Image:
This following my code of the form:
$app->get('/Chart/{currency}/{year}/{zone}/{lru}....... , function(Request $request,...... $repsite, $lru, $contract, $forecast) use ($app) {
if ($app['security']->isGranted('ROLE_USER')) {
///start form
$user = $app['security']->getToken()->getUser();
$form = $app['form.factory']->createBuilder('form')->setMethod('GET')
.
.
.
.
->add('lru', 'choice', array(
'choices' => array(
'\'ATSU\'' => 'ATSU',
'\'APCC\'' => 'APCC',
.....
),
'required' => FALSE,
'empty_value' => 'ALL',
'empty_data' => NULL,
'multiple' => TRUE
//'expanded' => TRUE
))
I want do a classic checkbox like this on the right:
I did a research on forums I found that I should use multiple and expanded and to set them to TRUE. When I add expanded=TRUE list became very "ugly", I give you a screensheet:
Can you please tell me how can I change my code to do a checkbox for multiple choicelike in the picture above.
I hope that I find solution. Thank you.
you can do this, this is implemented in this with code.
you will require jquery to do this.
change this code according to your use
https://codepen.io/elmahdim/pen/hlmri
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: https://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
Hope this helps
I am trying to implement an instant search on an html page using Twitter Typeahead, and it doesn't respond when text is typed into the search box, and there are no errors in chrome's javascript console.
All the code being used is totally simplified, so it seems very strange that this would be happening.
Any help would be greatly appreciated.
sql to create database:
CREATE DATABASE `library`;
USE `library`;
CREATE TABLE IF NOT EXISTS `books` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`author` varchar(30) NOT NULL,
`isbn` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1_swedish_ci AUTO_INCREMENT=6;
INSERT INTO `books` (`id`, `title`, `author`, `isbn`) VALUES
(1, 'Learning PHP, MySQL & JavaScript', 'Robin Nixon', 'ISBN-13: 978-1491918661'),
(2, 'PHP and MySQL for Dynamic Web Sites', 'Larry Ullman', 'ISBN-13: 978-0321784070'),
(3, 'PHP Cookbook', 'David Sklar', 'ISBN-13: 978-1449363758'),
(4, 'Programming PHP', 'Kevin Tatroe', 'ISBN-13: 978-1449392772'),
(5, 'Modern PHP: New Features and Good Practices', 'Josh Lockhart', 'ISBN-13: 978-1491905012');
index.html
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
alert("jQuery is loaded");
} else {
alert("jQuery is not loaded");
}
}
</script>
<title>AJAX PHP Search Engine Script for MySQL Database</title>
<style type="text/css">
.se-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 1px solid #999999;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.typeahead, .tt-query, .tt-hint {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
height: 38px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 16px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #999999;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="se-example">
<input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/>
</div>
<script>
$(document).ready(function(){
$('#searchbox').typeahead({
remote: 'search.php?st=%QUERY'
});
console.log("typeahead fired");
});
</script>
</body>
</html>
search.php
<?php
$str = $_GET['st'];
$connection = mysqli_connect("localhost", "username", "password", "library");
$sql = "SELECT title FROM books WHERE title LIKE '%{$str}%'";
$result = mysqli_query($connection, $sql);
$array = array();
while($row = mysqli_fetch_assoc($result)) {
$array[] = $row['title'];
}
echo json_encode($array);
?>
Here is the index.html that works, but it uses the 10.4 version of typeahead (https://plugins.jquery.com/typeahead.js/0.10.4/):
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.min.js"></script>
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
alert("jQuery is loaded");
} else {
alert("jQuery is not loaded");
}
}
</script>
<title>AJAX PHP Search Engine Script for MySQL Database</title>
<style type="text/css">
.se-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 1px solid #999999;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.typeahead, .tt-query, .tt-hint {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
height: 38px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 16px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #999999;
color: #FF0000;
}
</style>
</head>
<body>
<div class="se-example">
<input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/>
</div>
<script>
$(document).ready(function(){
// Instantiate the Bloodhound suggestion engine
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url:'search.php?st=%QUERY',
wildcard: '%QUERY',
filter: function (results) {
// Map the remote source JSON array to a JavaScript object array
return $.map(results, function (result) {
return {
value: result
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
source.initialize();
$('#searchbox').typeahead(null, {
display: 'value',
source: source.ttAdapter(),
limit:5
});
console.log("typeahead fired");
});
</script>
</body>
</html>
i want to put 6 more links on my jQuery slider my site link : http://daplonline.in/
NOTE only for first image not for all images.
i want to make something like this: http://daplonline.in/images/ineed.jpg
But my code is not working. Can anyone give me a solution how to build this?
My CSS code
/*--Main Image Preview--*/
.main_image {
width: 598px; height: 460px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image h2 { display: none; }
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(images/icon_cal.gif) no-repeat 0 center;
font-size: 1em;
display:none;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display:none;
}
.main_image .block{
}
.main_image a.collapse {
background: url(images/btn_coll.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 20px 10px;
background: #f0f0f0 url(../images/nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.4em;
margin: 5px 0; padding: 0;
vertical-align:central;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 180px;
}
.image_thumb ul li p{display: none;}
and my jquery is
<script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions
$(document).ready(function() {
// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
// Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
var imgDesc = $(this).find('.block').html(); // Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block
if ($(this).is(".active")) { // If it's already active, then...
return false; // Don't click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 150 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
$(this).addClass('active'); // add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");
if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}
$(currentImage).removeClass("active");
$(nextImage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextImage).find('img').attr("alt");
var imgTitle = $(nextImage).find('a').attr("href");
var imgDesc = $(nextImage).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};
$('.main_image').on("mouseover",function(){
clearInterval(intervalID);
});
$('.main_image').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
$('.image_thumb ul li').on("mouseover",function(){
clearInterval(intervalID);
});
$('.image_thumb ul li').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
});// Close Function
</script>
One solution. Put all these 4 Links on the image itself & then use MAP like following :-
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
<img src="images/banner1.png" alt="magic rabbit in the hat" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Register" href="register.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
You will have to set the coordinates correctly.
New :-
$(document).ready(function() {
var match_img = $('img[src="images/banner1.png"]');
match_img.attr("usemap", "#planetmap");
// Rest of ur Code
});
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>
I print Javascript functions to open bottom log area by a PHP script. This crashes non-dom scripts like Ajax, Excel generation etc. is there a server side dom function like isDom() in PHP?
Current Script:
if (System::$isDebug == 1 && self::$_registeredJsFunctions == false)
$this->registerJsFunctions();
registerJsFunction:
protected function registerJsFunctions() {
self::$_registeredJsFunctions = true;
echo <<<EOD
<script type="text/javascript">
function printSystemLog(msg) {
if (!document.getElementById('ie-log')) {
$(document.body).append('<style type="text/css">'
+ '#ie-log { z-index:9999 !important; position:fixed; bottom:0; border-top: double 2px #939399; background:none #FDFDF0;width:100%;font-size:11px; font-family: "Courier New", Courier, monospace;overflow:hidden;}'
+ '#ie-log #debug-level { position: absolute; height: 25px; right:0px; top:0; width: auto; background:#ECF1EF; padding: 2px; color:#8B8378; z-index:9999;border: double 2px #939399;border-top: none;}'
+ '#ie-log #larea{ height:180px;padding:3px;overflow-y:scroll !important; overflow-x:hidden !important; }'
+ '#ie-log #lclose{ margin-left: 16px;}'
+ '#ie-log h3 { margin: 8px 5px; }'
+ '#ie-log #lclose a { padding: 3px; padding-left:17px; background:url(theme/standart/images/delete.png) left center no-repeat; color:inherit;}'
+ '#ie-log #lclose a:hover { background-color:#F1EDC2; text-decoration:none; color: #8B6914;}'
+ '#larea div.log-row { position:relative; margin: 3px 10px; border-bottom: solid thin #C4C49C; margin-left:20px; overflow: visible !important; }'
+ '#larea div.log-row span.arrright {position:absolute; height:16px; left: -20px; display:inline-block; width:16px; background: transparent url(theme/standart/images/arrow_right.png) left center no-repeat;} '
+ '</style>');
$(document.body).append('<div id="ie-log"><h3>Sistemin Anlık Log Görüntüsü</h3><div id="debug-level"><span>Seviye: <select onchange="logFilter(this.value)"><option value="">Hepsi</option><option value="EMERG">Emergency</option><option value="ALERT">Alert</option><option value="CRIT">Critical</option><option value="ERR">Error</option><option value="WARN">Warning</option><option value="NOTICE">Notice</option><option value="INFO">İnformation</option><option value="DEBUG">Debug</option></select></span><span id="lclose">Kapat</span></div><div id="larea"></div></div>');
if (getCookie('TASARIMICI_LOG_SEVMEZ') == 1)
$('#ie-log').hide();
}
$('#larea').prepend('<div class="log-row"><span class="arrright"></span>'+msg + '</div>');
}
</script>
EOD;
}