i used jquery fancy box for previewing data from mysql .
I used the http://www.picssel.com/playground/jquery/postPreview_15jan13.html example .
I want to pass the "id=1" to the grid.php
When i pass outside the ,im able to see the preview ,since preview is inside the
form the value 1 is not able to pass to grid.php page.
How can i be able to achieve this?
Below is the code :
!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>POST preview</title>
<link rel="stylesheet" type="text/css" href="fancybox2.1.4/jquery.fancybox.css" />
<style type="text/css">
a {outline: 0 none; text-decoration: none;}
a img {border: 0 none;}
#wrap { width: 800px; margin: 20px auto; font-family: arial, sans-serif; font-size: 14px;}
.preview2 {width: 80px; padding: 5px; background: #ededed; display: block; line-height: 16px; text-decoration: none; text-align: center; border: solid 1px #ccc;}
label {display: block}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="fancybox2.1.4/jquery.fancybox.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href, // preview.php
data: $("#postp").serializeArray(),
success: function (data) {
// on success, post (preview) returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
/* ]]> */
</script>
</head>
<form id="postp" method="post" action="">
<p>
<label for="login_name">data:
</label>
<input type="text" id="login_name" name="login_name" size="30" /><a class="preview2" href="grid.php" id="preview2">Preview</a>
</p>
<p>
<input type="submit" value="submit" />
</p>
</form>
The form id was missing .Got the value
Related
I have this php page that rungs its script.
From the index page the user clicks a button and this page, after 10 seconds or so, shows the final result.
I would like to show a progress bar while the user waits.
This is the actual page:
<!DOCTYPE html>
<html>
<head>
<title>METAR LIRN</title>
<style>
h1 {
text-align: center;
}
.table {
display: table;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #808080;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="table">
<div>
<h1>METAR LIRN<h1>
</div>
<div>
<?php
$output = shell_exec('sh /var/www/html/weather.sh');
echo "<pre>$output</pre>";
?>
</div>
</body>
</html>
I had a look to other similar posts with no luck...
Thanks in advance!
Sure, here's a quick example:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Just some styles for the bar */
.loading-bar {
background: blue;
width: 300px;
height: 20px;
display: none;
}
.loading-bar.active {
display: block;
}
</style>
</head>
<body>
<button class="myBtn">Execute code!</button>
<div class="response"></div>
<div class="loading-bar"></div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
// Handle button click
$('.myBtn').on('click', function(){
$('input').val( "" );
// Inmediatly show your bar
var $loadingBar = $('.loading-bar');
$loadingBar.addClass('active');
// Then execute Ajax
$.ajax({
url: "test.php",
method: 'GET'
})
.done(function(data) {
// Display response data
$('div.response').html(data);
})
.fail(function(error) {
// Display error if fails
$('div.response').html(error);
})
.always(function() {
// Always hide loading bar when finish
$loadingBar.removeClass('active');
});
});
</script>
</body>
</html>
test.php:
<?php
sleep(2);
echo 'OK';
Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
I am trying to make a image sticker html 5 app. In which user uploads a photo and then places stickers on top of it. I am able to do it through HTML 5 canvas and Jquery library free transform to rotate and scale stickers on top of image but when i convert this into jpeg the css transaction is lost and only image with stickers on top is generated. Code is written below. Is there any other way to do it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css"/>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.core.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.resizable.css" />
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1" />
<style>
#draggable-zone {
background: #000 url(images/space.jpg) 0 0 no-repeat;
border: 3px solid #000;
height: 500px;
margin: 2em auto;
overflow: hidden;
width: 600px;
}
.ui-wrapper {
overflow: visible !important;}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
z-index: 2;}
.ui-rotatable-handle {
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;}
.ui-rotatable-handle.clone {
visibility: hidden;}
</style>
</head>
<body>
<div id="imagediv" style="width:400px;" >
<div style="width:400px;border:1px solid #000;position:relative" >
<img src="lordmeowington.png" width="400px">
<div id="draggable-wrapper" style="position:absolute;top:0">
<div id="resizable-wrapper">
<img src="funny_glasses.png" width="150" height="150" alt=" " id="elem-wrapper" />
</div>
</div>
</div>
</div>
<input type="button" value="saveimage" onclick="demoFromHTML()" />
<input type="button" value="remove" onclick=" Demo()" />
<input type="file" accept="image/*" capture="camera" />
<input type="text" value="" id="innerimage" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.rotatable.js"></script>
<script>
$(document).ready(function() {
var drWr = $('#draggable-wrapper'),
rsWr = $('#resizable-wrapper'),
elem = $('#elem-wrapper');
elem.resizable({
aspectRatio: true,
handles: 'ne, nw, se, sw'
});
drWr.draggable();
elem.parent().rotatable();
});
function Demo()
{
$('.ui-rotatable-handle').css('border','0px');
$('.ui-resizable-handle').css('background','none');
$('.ui-resizable-handle').css('border','none');
$('.ui-rotatable-handle').css('background','none');
html2canvas($("#imagediv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg');
imgData.width=400;
console.log(imgData);
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(imgData);
//window.open(imgData);
}
});
}
</script>
</body>
</html>
Php Code is below
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag
http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/
<html>
<head>
<style type="text/css">
p.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(plusminus.jpg) no-repeat;
height: 15px;
font-size: 14px;
font-weight: bold;
float:left;
}
p.trigger a {
color: #474747;
text-decoration: none;
display: block;
cursor:pointer;
}
p.trigger a:hover {
color: #ff4b43;
}
p.active {
background-position: left bottom;
}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
clear: both;
}
.toggle_container .block {
padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.toggle_container').hide();
jQuery('p.trigger').hover(function(){
jQuery(this).toggleClass('active').next().toggle('slow');
});
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
<div class="block">
<input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
<label class='choice' for='element_1_1'>Somewhere in the middle</label>
</div>
</div>
</body>
</html>
The easiest answer would be, if you could afford it, put both <input type="radio"/>s under a <div/> and control hovering behavior on that <div/>. This is commonly done with menus for the very same purpose.
Plus if you target new browsers, you can leave jQuery out of this - it can be done with any browser that understands the :hover pseudo-class on non-<a/>s.
Here's a sample page demonstrating both options.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#radios').hover(
function() { $('#radios').addClass('hover'); },
function() { $('#radios').removeClass('hover'); }
);
});
</script>
<style type="text/css">
/* option 1 - jquery + css, for older browsers */
#div-radio2 {
display: none;
}
.hover #div-radio2 {
display: block;
}
/* option 2 - no jquery, plain css, if you target only new browsers */
#radios:hover #div-radio2 {
display: block;
}
</style>
</head>
<body>
<div id="radios">
<div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
<div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
</div>
</body>
</html>
Are you looking for something like this
http://jsfiddle.net/HezZa/