I'm a beginner in web-programming and I've got this problem with a search bar. The thing is how do I finish it so it'd give out a drop bar with prospective results to choose from and to select other div to give out the search results themselves? Should be something similar as the tag search bar down this page.
The code is below and thanks in advance! WHERE "TODO"!!!
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var delay = (function(){ // to set timer
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
var $search = $("#search");
$search.keyup(function() {
delay(function () {
var $string = $("#search").val();
if ( $string == "" || /\s+$/.test($string)) return;
var $tag = $string.match(/\S+$/)[0]
$.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
console.log($data);
/* TODO */
});
}, 500);
});
}); </script> </head>
<style>
.search_bar{
bottom: 5px;
right: 100px;
/* margin-right: 10px; */
float: right;
} </style>
<header> <style type="text/css"> .form {
float: right;
margin-top: 0px;
margin-right: 10px; } </style>
<div id="wrapper">
<div id = "header" style="display: table; width: 1150px;">
<div id="logo" style="display: table-cell;">
<a href="/">
{% load staticfiles %}
<!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
</a>
</div>
<div style="display: table-cell;">
<nav id="navig" style="margin:0px;">
<ul>
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</nav>
</div>
<div class="search_bar">
<input type="text" id="search" placeholder="tag..."/><br/>
<div id="search_results"></div>
</div>
</div>
</div> </header>
Related
My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?
I am using wicket components here. My view is as below.
I need to regenerate the report and reload the report frame with the button click (GO). But this div is not reloading even I replaced old element with a new report element. Can anyone help me with this?
form.add(new AjaxLink<Void>("goLink") {
#Override
public void onClick(final AjaxRequestTarget target) {
System.out.println(reportType+"go button clicked");
final IResourceStream stream = renderItems();
//generate report and create a new component using that.
Component component = new AIAIframe("reportFrame", stream);
component.setOutputMarkupId(true);
this.addOrReplace(component);
System.out.println("new framwe added reportframe");
}
});
add(form);
Please find the markup.html below
<wicket:extend>
<div style="margin-left:3%;">
<form wicket:id="form">
<span>
<h4>Report Erscheinung Auswahl</h4>
<select wicket:id="chooseType" style="margin-left:5%;">
<option>Kostenvoranschlag</option>
<option>Aufträge</option>
<option>Rechnungen</option>
</select>
</span>
<span>
GO
</span>
</form>
</div>
<br>
<style>
a.downloadLink {
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 6px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.aia-center {
margin:0 auto;
padding: 6px;
}
</style>
<div class="aia-center">
<span>Download as: </span>
<select wicket:id="formatSelect">
</select>
Download
</div>
<span style="height: 100%; width: 100%" wicket:id="reportFrame"></span>
You need to call target.add(component) if you want this component to be re-rendered with the Ajax response.
Since you re-create the component with wicket:id="reportFrame" you need to make sure that the initially rendered one (before the Ajax request) also had .setOutputMarkupId(true) so that the Ajax logic can find it in the browser DOM and replace it with the new one.
I'm uploading the image file and then previewing on jquery dialog for cropping using jcrop. For small size its working fine but when i'm uploading large file the dialog become stretch.
header includes:
<head>
<script type="text/javascript" src="<html:rewrite page='/scripts/crop/jquery.Jcrop.js'/>"></script>
<script type="text/javascript" src="<html:rewrite page='/scripts/jquery-plugins/jquery-ui-1.10.3.custom.min.js'/>"></script>
<link rel="stylesheet" src="<html:rewrite page='/styles/crop/jquery.Jcrop.css'/>"/>
<%--<link rel="stylesheet" type="text/css" src="<html:rewrite page='/styles/crop/jQueryUI.css'/>"/>--%>
<style type="text/css">
#media print {
.label.active {
background-color: transparent !important;
border-right: white !important;
}
}
table.form img {
width: 128px;
height: 128px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
}
.ui-dialog .ui-dialog-content {
max-width: 500px !important;
max-height: 600px !important;
/*width: 600px !important;*/
}
</style>
javascript code:
<script language="Javascript">
var jcrop_api;
function initJcrop()
{
jcrop_api = $.Jcrop('#cropBox',{
onChange: setCoords,
onSelect: setCoords
})
jcrop_api.setOptions({
allowSelect: true, allowMove: true, allowResize: true, aspectRatio: 1
});
}
// });
function setCoords(c)
{
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
function imageHandler(e2)
{
initJcrop();
// var elem = ;
$("#dialog").dialog({
show: {
modal:true,
resizable: true
,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500
// effect: 'fade',
// duration: 2000
} ,
// maxHeight:document.getElementById('cropBox').height,
// maxWidth:document.getElementById('cropBox').width,
close: function( event, ui ) {
jcrop_api.destroy();
$('#dialog').dialog('close');
}
});
// elem.dialog('open');
}
function readFile(){
var preview = document.querySelector('#cropBox');
var file = document.querySelector('#imageId').files[0];
var reader = new FileReader();
// fr.readAsDataURL(filename);
reader.onload = function () {
preview.src = reader.result;
imageHandler();
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
document.getElementById("isSubmit").value = "false";
}
function cropPic(){
document.getElementById("postForm").submit();
}
$(".ui-dialog-titlebar").hide();
function closeDialog(){
jcrop_api.destroy();
$('#dialog').dialog('close');
}
function setCoordinates(c) {
//alert("x " + c.x + " y " + c.y);
//alert("w " + c.w + " h " + c.h);
document.myForm.x.value = c.x;
document.myForm.y.value = c.y;
document.myForm.w.value = c.w;
document.myForm.h.value = c.h;
};
function checkCoordinates() {
if (document.myForm.x.value == "" || document.myForm.y.value == "") {
alert("Please select a crop region");
return false;
} else {
return true;
}
};
</script>
html
<span id="reuploadImg" ><html:file name="uf" property="file" size="37" onchange="readFile()" styleId="imageId" /></span>
<td>
<input type="hidden" name="x1" id="x1"/>
<input type="hidden" name="y1" id="y1"/>
<input type="hidden" name="x2" id="x2"/>
<input type="hidden" name="y2" id="y2"/>
<input type="hidden" name="w" id="w"/>
<input type="hidden" name="h" id="h"/>
<input type="hidden" name="isSubmit" id="isSubmit" value="true"/>
</td>
<div id="dialog" style="display: none;max-height: 600px;max-width: 600px" title="Preview" >
<img id="cropBox" style="max-height: 600px;max-width: 600px"/>
<br/><br/>
<div style="width: 100%;text-align: center">
<input type="button" value="Save" onclick="cropPic()" class="stdbutton"/>
<input type="button" value="Cancel" onclick="closeDialog()" class="stdbutton"/>
</div>
</div>
Here are the images:
I try to find out how can I click on button "deactivate" . This is html code:
<div class="ui-widget-overlay" style="width: 1328px; height: 1063px; z-index: 1001;"></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: block; z-index: 1002; outline: 0px none; height: auto; width: 640px; top: 737.4px; left: 173px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;">
<span id="ui-dialog-title-1" class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;"></span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button" unselectable="on" style="-moz-user-select: none;">
<span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;"></span>
</a>
</div>
<div class="confirmDialog ui-dialog-content ui-widget-content" style="width: auto; min-height: 134.133px; height: auto;">
<span class="closeButton"></span>
<h3></h3>
<p></p>
<p></p>
<div class="buttonRow">
<button class="negative cancel" type="button"></button>
<button class="deactivate" type="button"></button>
</div>
</div>
</div>
I tried to click on this button in this way:
#FindBy(className = "deactivate")
private WebElement deactivateButton;
WebDriverWait wait =new WebDriverWait(driver,15);
wait.until(ExpectedConditions.elementToBeClickable(deactivateButton));
deactivateButton.click();
But this doesn't help
Instead of elementToBeClickable please try with visibilityOf like below. It's much cleaner.:
WebDriverWait wait =new WebDriverWait(driver,20);
wait.until(ExpectedConditions.visibilityOf(deactivateButton));
deactivateButton.click();
I'm working with Struts 2 and jQuery. The plugin of timepicker doesn't work.
My JSP:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TestPicker</title>
<sj:head jqueryui="true" locale="es" jquerytheme="redmond" />
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
<script type="text/javascript">
$(function(){
$('#txtTime').timepicker({});
});
</script>
</head>
<body>
<input id="txtTime" type="text" name="txtTime" value="" ></input>
</body>
</html>
It generates this HTML:
<script type="text/javascript" src="/Asistencia/struts/js/base/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="/Asistencia/struts/js/base/jquery.ui.core.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/plugins/jquery.subscribe.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/struts2/jquery.struts2.min.js?s2j=3.6.1"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.6.1";
jQuery.scriptPath = "/Asistencia/struts/";
jQuery.struts2_jquery.local = "es";
jQuery.struts2_jquery.gridLocal = "es";
jQuery.struts2_jquery.timeLocal = "es";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.6.1");
});
</script>
<link id="jquery_theme_link" rel="stylesheet"
href="/Asistencia/struts/themes/redmond/jquery-ui.css?s2j=3.6.1"
type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
I think this code ?s2j=3.6.1 gets the problem.
Page of TimePicker addon
Now, I will try with ama3+anytime plugin.
This parameter is not the problem, it is just for internal use and tells the plugin about version of plugin. The problem is in your jQuery code because you are trying to bind a timepicker on the element before this element is created. Try
$(document).ready(function(){
$('#txtTime').timepicker({
timeFormat: "hh:mm tt"
});
});