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>
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:
How can I load JavaScript to a JavaFx Webview after $(document).ready(function() ie. after the webview loads and without waiting for events like onButtonClick action, for example?
The answer to this would answer my main question, How to add jQuery into a webview?.
I've been trying to make the following work but I've been unsuccessful at integrating other similar solutions online onto my problem.
The HTML file I'd like to add onto a webview is as follows:
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
This is what I've been trying to do so far:
public class WebViewSample extends Application {
private Scene scene;
#Override
public void start(Stage stage) {
// create the scene
stage.setTitle("Web View");
scene = new Scene(new Browser(), 750, 500, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("WebViewSample/fullcalendar-1.6.4/fullcalendar/fullcalendar.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Browser extends Region {
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
webEngine.load("WebViewSample/fullcalendar-1.6.4/demos/default.html");
//add the web view to the scene
getChildren().add(browser);
}
private Node createSpacer() {
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
return spacer;
}
#Override
protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
}
#Override
protected double computePrefWidth(double height) {
return 750;
}
#Override
protected double computePrefHeight(double width) {
return 500;
}
}
All I get from this is a blank white window, instead of something like the jQuery calendar plugin FullCalender being drawn on the window.
Thank you in advance.
Try using this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="layout" content="main">
<meta name="viewport" content="width=device-width"/>
<title>Calendar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel='stylesheet' href="fullcalendar.css" />
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
//events:"%EVENT_URL%",
allDaySlot: false,
header:
{
left: 'today prev next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaDay',
firstHour:'9',
minTime:'8:00',
weekends: true
});
});
</script>
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"
});
});
I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this:
#navmenu {
width: 1000px;
height: 42px;
margin: 0px auto 30px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
font-size: 21px;
background-color: #000000
}
#navmenu li {
display: inline;
}
#navmenu a {
color: #eee;
display: inline;
line-height: 2em;
padding: 0.375em 0.5em;
text-decoration: none;
}
#navmenu a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
color: #000000;
background-color: #ffff33;
padding: 0.375em 0.5em;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. Random or not I don't care. I created a js file that is wired correctly.
I have tried several bits of code I found, but nothing works. Now I tried to do this to see if I can change the color at all:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. I am new to all this programming and I would greatly appreciate any help. It would be super nice if you could answer for dummies, so that I can understand.
Use:
$("#navmenu").hover(function(){
You missed the ID # selector.
You need to properly address the div using # for an ID or a . for a class:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});
You could give something like this a try as it will pick a random color on hover and switch back to the #EEE background on the hover out event:
jQuery:
$(function () {
$("#navmenu a").hover(function () {
var newColor = Math.floor(Math.random() * 16777215).toString(16);
$(this).css('background-color', '#' + newColor);
}, function () {
$(this).css('background-color', '#EEE')
});
});
Working Example: http://jsfiddle.net/Qc4R7/