I am using the following code for Ajax dropdown suggest(some what similar to google suggest). It is working good.
[source]: http://www.dynamicajax.com/ of this code
code in html
<html lang="en-US">
<head>
<style type="text/css" media="screen">
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
</style>
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
</head>
<body>
<h3>Simple AJAX Search Suggest</h3>
<form id="frmSearch">
<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest(this.value);" autocomplete="off" />
<!-- <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />-->
<div id="search_suggest">
</div>
</form>
</body>
</html>
code in javascript
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("It's about time to upgrade your browser. don't you think so?");
}
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('txtSearch').value);
searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('txtSearch').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
Now i wanted to know if i can navigate in the dropdown list with the help of keys. i.e
open a drop-down list by using the Down Arrow key. After opening a drop-down list, the user can navigate between drop-down items with the Up Arrow, Down Arrow, Home, End, Page Up, Page Down keys and then select an item with the Enter key. To close the list without changing the value, the user can press the Esc key.
Its nice to have, to have all the above mentioned features. - only if it is feasible.
But naviagting with Up arrow, Down Arrow are required. - Need help for these 2
Thanks in advance!
Do you mean autocomplete options appearing under your text input? In that case you want to set an option for keypress, and if it is a down arrow you do the same thing you currently do with "mouse_out" for the $(this) element, and "mouse_over" for the one below it. For up arrow, same thing with the one above it.
First you are going to need id's on each div, and make them sequential. Then you add functions for keypresses
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'onkeypress="javascript:keyPressFunc(k,this);' //THIS IS NEW
suggest += 'id="item"+i'; //THIS IS THE NEW LINE TO ADD
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += s
}
function keyPressFunc(k, comesFrom)
{
keyIn = k.keyCode;
suggestOut(this);
getsFocusId = "item" + 39-keyIn //38 is up arrow, 40 is down
suggestOver(document.getElementById(getFocusId));
}
I might have messed up the arguments for the incoming key and the reporting element, but thats the idea. The broad strokes are sound even if some details are missing:
1) add unique (and sequential) id's to each of these divs
2) add an event for keypress, use .keyCode to get value, up arrow is 40 down is 38, enter is 13 esc is 27. page up, pagedown, end, home are 33-36
3) For each of these you must do what you currently do for suggestOut for the div that takes the keypress, and what you currently do for suggestOver for another
I haven't done anything like this in vanilla javascript in quite some time so thats why im fuzzy. I think you'd really benefit from jQuery here, I know I would.
PS - get jQuery. Then you can set up these events really easy with stuff like
$(".suggest_link").keypress(function(k) {.....
Related
I am trying to write code that displays images from a datatable one at a time with a delay between each display in a continuous loop.
The issue I am having is only the first image is displaying, can anyone see where I have gone wrong or am I approaching this the wrong way?
PHP
<?php while($row_fb = mysqli_fetch_array($fb)){
$url = $ImagePath.''.$row_fb['SignageImageName']; ?>
<div id="banner-container">
<a><img src="/<?php echo $url;?>"/></a>
</div>
<?php
}?>
CSS
#banner-container a {
display: none;
position: absolute;
}
#banner-container {
position: relative;
}
JQUERY
(function() {
var a = $('#banner-container').children();
var index = 0;
run()
function run() {
a.filter('.active').fadeOut(500).removeClass('active');
a.eq(index).fadeIn(500).addClass('active');
index = (index + 1) % a.length; // Wraps around if it hits the end
setTimeout(run, 5000);
}
})();
Is there a way I can use a HTML form text box to perform an advanced search where I will be able to start typing a username of one of my members and it will list all members close to what I am still typing, something like the facebook search, but only with names (not profile pictures).
So for example, if I had a member list with contents like:
Jamie123
Jackzo
Josh
Dan
When I typed in my box, "J" all of the above apart from "Dan" would show in a drop box.
When I typed in my box, "Ja", "Dan" and "Josh" would not show... and so on?
Is this possible ? If so, How can i do this ?
I would look into using Select2. You can find out more here: http://ivaynberg.github.io/select2/
Yes...lets start by creating your text box:
<input type="text" name="DEMO_NAME" id="DEMO_NAME" alt="Possible Results" onKeyUp="searchSuggest();" autocomplete="off">
You will need a div sto show your results while the user is typing (place it under the textbox via css):
<div id="search_suggest"></div>
On the top of the html page you will have to include (apart from jquery) a .js file which will handle the request:
<script language="JavaScript" type="text/javascript" src="ajax_search.js" charset="utf-8"></script>
aja_search.js code is:
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Please update your Browser");
}
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = encodeURI(document.getElementById('DEMO_NAME').value);
searchReq.open("GET", 'search.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
if(document.getElementById('DEMO_NAME').value.length > 2)
{
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
else
{
ss.innerHTML = 'Please insert at least 3 characters';
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('DEMO_NAME').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
as you can see from the js above, user must input at least 3 characters in order to fire up the search. I strongly advise you to keep it.
last but not least you need the search.php file which is called by ajax in order to fetch results:
$search = $_GET["search"];
if(!empty($search))
{
$query = mysql_query("SELECT * FROM your_table WHERE username like('%" . simple_protect($search) . "%') ORDER BY username") or die (mysql_error());
while ($row = mysql_fetch_assoc($query))
{ //echo $query;
echo strip_all($row['username'])."\n";
}
}
else
{
echo "No Records available";
}
simple_protect and strip_all are functions of mine, the first one sanitizes the input while the second removes slashes etc. You can use your own.
finally you will need the css that shows results correctl, mine looks like this:
.suggest_link {
background-color: #333333;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
.suggest_link_over {
background-color: #666666;
padding:2px 4px 4px 2px;
color:#858585; font-family:Verdana; font-size:11px; color:#ffffff;
}
#search_suggest {
background-color: #333333;
text-align: left;
z-index:20;
width:240px; height: inherit;
border:hidden;
color:#ffffff; font-family:Verdana; font-size:11px; cursor: pointer;
}
and voila! you have your advanced search...
You have to use javascript for this, i recommend JQuery. You can do this with a built in function in JQuery called ajax, with it you can send a POST request to the server without refreshing the page. And then use php to fetch the data.
I recommend going to youtube and look at some tutorials if you ar new to javascript, look for JQuery tutorials.
Does anybody know how to make the text that appears in the following "li" both a link and also customizable through CSS? I have been unable to drop the text-decoration, change font style, color, etc. I've tried changing the style of the "tree" id but I was only able to change font size.
While both are important the link is crucial. Each "li" that is returned needs to be its own dynamically generated link. I've tried about 10 different ways now and I can't quite seem to get it to work.
<script>
function to_ul(id) {
var ul = document.createElement("ul");
for (var i=0, n=id.length; i<n; i++) {
var branch = id[i];
var li = document.createElement("li");
var text = document.createTextNode(branch.trackName);
li.appendChild(text);
ul.appendChild(li);
}
return ul;
}
function renderTree() {
var treeEl = document.getElementById("tree");
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
treeEl.appendChild(to_ul(treeObj.root));
}
</script>
</head>
<body onload="renderTree()">
<div id="tree"></div>
</body>
</html>
UPDATE
<script>
function to_ul(id) {
var ul = document.createElement("ul");
for (var i=0, n=id.length; i<n; i++) {
var branch = id[i];
var li = document.createElement("li");
li.innerHTML = "" + branch.trackName + ""
ul.appendChild(li);
function changeText(){
document.getElementById('player-digital-title').innerHTML = branch.trackFile;
}
}
return ul;
}
function renderTree() {
var treeEl = document.getElementById("player-handwriting-title");
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};
treeEl.appendChild(to_ul(treeObj.root));
treeEl.appendChild(to_ul(treeObj.root));
}
</script>
</head>
<body>
Click here
<br/>
<br/>
<br/>
<br/>
<div id="player-digital-title"></div>
</body>
</html>
To make a "link" presumably you want an anchor element inside each li element, and for the a elements you'd want to have href attributes that you don't seem to have in your data. But by way of example, assuming you want to use the id as the href you could do this:
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append($("<li></li>").append(
$("<a></a>").attr("href",v.id).html(v.trackName)));
});
$("#tree").append($ul);
});
Your question was tagged with "jQuery", so I've gone ahead and created the list (with anchors inside each li) using jQuery. The $.each() "loop" iterates through each element in the treeObj.root array, creating an a element with the id and trackName, appending that to a new li element, and appending that to a ul element. After the .each() finishes the new ul is appended to your tree div.
As far as styling the links, that's up to you to do the CSS you want, but since you mention dropping the text decoration you may want to start with something like this:
#tree a { text-decoration : none; }
Working demo: http://jsfiddle.net/B2Zsv/
(If that code and output as shown in the fiddle isn't the sort of thing you're looking for I suggest you update your question to show the desired output html that you want to generate.)
UPDATE
The following variation on my original code stores the track names as attributes on the anchors created, and then retrieves them on click.
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append(
$("<li></li>").append( $("<a></a>").attr({
"href":v.id,"data-file":v.trackFile}).html(v.trackName) )
);
});
$("#tree").append($ul);
$("#tree a").click(function() {
var trackname = $(this).html(),
filename = $(this).attr("data-file");
// here add your code to do something with filename and/or trackname
return false;
});
});
As you can see my click handler doesn't actually do anything with the filename once it gets it (my updated demo http://jsfiddle.net/B2Zsv/3/ displays it), but that shows you how to get the right filename so from there you can figure out how to play it...
First off create the link in js:
function to_ul(id) {
var ul = document.createElement("ul");
for (var i=0, n=id.length; i<n; i++) {
var branch = id[i];
var li = document.createElement("li");
li.innerHTML = "<a href='wherever' class='listAnchor'>" + branch.trackName + "</a>"
ul.appendChild(li);
}
return ul;
}
and then style it in css:
<style>
.listAnchor {
text-decoration: none;
}
</style>
To create an a element within the li elements, simply apply the same techniques as demonstrated in the code as you have it:
function to_ul(id) {
var ul = document.createElement("ul");
for (var i = 0, n = id.length; i < n; i++) {
var branch = id[i];
var li = document.createElement("li"),
a = document.createElement('a'); // create the `a`
a.href = "http://example.com/"; // set the `href`
var text = document.createTextNode(branch.trackName);
a.appendChild(text); // append text to the a
li.appendChild(a); // append the a to the li
ul.appendChild(li);
}
return ul;
}
JS Fiddle demo.
To style that link, you can either use CSS in your document, or in an external stylesheet (as with any other CSS):
li a:link,
li a:visited {
/* style the link's 'default' state */
}
li a:hover,
li a:active,
li a:focus {
/* style the 'interactive' states of the links */
}
JS Fiddle demo.
You could, of course, simply apply the styles directly in the JavaScript that creates said elements, though this is needlessly expensive:
/* all the other stuff removed, for brevity */
var li = document.createElement("li"),
a = document.createElement('a'); // create the `a`
a.href = "http://example.com/"; // set the `href`
a.style.color = '#000';
a.style.textDecoration = 'none';
/* ...and other stuff... */
JS Fiddle demo.
This approach, apart from being expensive, also lacks the ability to style the :hover, :active, :visited and :focus styles.
Is there a way that I can change a css style sheet's data from a html form and php and/or JQuery. So if I have the following
widths.css
#main #section1 {
width: 25%;
}
#main #section2 {
width: 50%;
}
#main #section3 {
width: 25%;
}
So I want to have 3 text boxes S1, S2 and S3 and then a user can place values into each text box. It will check they add up to 100% or less and then it will write them to the css in place of 25%, 50% and 25%. How would I achieve this using php and/or JQuery.
Thanks
well there is a dirty but solution to this. use php to write javascript to the the html possibly after ending of body tag.
so the code goes like this
..
...
</body>
<?php echo <<< code
<script type="text/javascript">
document.getElementById("section1").style.width="$_POST['s1']";
// and then for each section u can do this
code;
?>
you will have to set the CSS dynamically on the page it self. Once the user entered the data, you can use little bit of AJAX to change the styles. So something like below would be your PHP and styles on the page. if you want this to be a permenant change make sure to put the settings in a DB against the user's profile. This can be added to your AJAX script as well.
<style type="text/css">
#main #section1 {
width: <?php echo $s1; ?>%;
}
#main #section2 {
width: <?php echo $s2; ?>%;
}
#main #section3 {
width: <?php echo $s3; ?>%;
}
</style>
HTH
You can use the jQuery addClass() to add a specific CSS class with the style you require.
To use PHP, you could use CSS internally on the page:
<style type="text/css">
<?php echo "width: 100px;" //for example ?>
</style>
But I wouldn't necessarily recommend that.
something basic but which should work
$(".validate").click(function(){
//I've assumed your text inputs were children of an element with id section$i
var w1 = Number($("#section1 input").val());
var w2 = Number($("#section2 input").val());
var w3 = Number($("#section3 input").val());
if(w1+w2+w3 == 100){
//here you change css rules for #section$i elements
$("#section1").css("width",w1+"%")
$("#section2").css("width",w2+"%")
$("#section3").css("width",w3+"%")
}
else{
alert("sum of values must equals 100%")
}
});
assuming that you have a clickable area with class validate
You can use this script i just made for you:
var merge = function(objectCollections){
var array = new Array();
foreach(objectCollections,function(objectCollection){
foreach(objectCollection,function(object){
array.push(object);
});
});
return array;
}
var foreach = function(object,loop){
for (var key in object) {
if (object.hasOwnProperty(key)) {
loop(object[key],key);
}
}
}
var changeCSS =function(value){
var links = document.getElementsByTagName('link');
var styles = document.getElementsByTagName('style');
var sheets = merge([links,styles]);
var rules = value.split(/[(\ *{)(\})]/g);
for(var i in sheets){
if(typeof sheets[i] == 'object'){
var sheet = sheets[i].sheet ? sheets[i].sheet : sheets[i].styleSheet;
for(var j in sheet.cssRules){
if(typeof sheet.cssRules[j].selectorText != 'undefined'){
if(sheet.cssRules[j].selectorText == rules[0]){
sheet.cssRules[j].cssText = value;
console.debug(sheet.cssRules[j].cssText);
}
}
}
}
}
}
usage example:
changeCSS('#main #section1 {width: 25%;}');
this will change the css (not set a style on a tag or something)
Using PHP, JS, or HTML (or something similar) how would I capture keystokes? Such as if the user presses ctrl+f or maybe even just f, a certain function will happen.
++++++++++++++++++++++++EDIT+++++++++++++++++++
Ok, so is this correct, because I can't get it to work. And I apologize for my n00bness is this is an easy question, new to jQuery and still learning more and more about JS.
<script>
var element = document.getElementById('capture');
element.onkeypress = function(e) {
var ev = e || event;
if(ev.keyCode == 70) {
alert("hello");
}
}
</script>
<div id="capture">
Hello, Testing 123
</div>
++++++++++++++++EDIT++++++++++++++++++
Here is everything, but I can't get it to work:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin: 0px
}
div {
height: 250px;
width: 630px;
overflow: hidden;
vertical-align: top;
position: relative;
background-color: #999;
}
iframe {
position: absolute;
left: -50px;
top: -130px;
}
</style>
<script>
document.getElementsByTagName('body')[0].onkeyup = function(e) {
var ev = e || event;
if(ev.keyCode == 70 && ev.ctrlKey) { //control+f
alert("hello");
}
}
</script>
<div id="capture">
Hello, Testing 123<!--<iframe src="http://www.pandora.com/" scrolling="no" width="1000" height="515"frameborder="0"></iframe>-->
</div>
+++EDIT+++
Thanks to Jacob, I had thought that I had it fixed, but when I tried it in FF and IE (currently using chrome, which did work) it did not work. This script is just going to be for a personal page that only I will see, so it is not the biggest deal, but for future reference, I would just like to know why this is not working in either IE or FF.
Sure, the only way to do this would be through JavaScript, and you'd do so like this:
window.onload = function() {
document.getElementsByTagName('body')[0].onkeyup = function(e) {
var ev = e || event;
if(ev.keyCode == 70) {//&& ev.ctrlKey) {
//do something...
}
}
};
To find out the specific key code you want, see this article: http://www.webonweboff.com/tips/js/event_key_codes.aspx
jsFiddle example
You're looking for the javascript events associated with key presses. There are some annoying browser incompatibilities here, so you'll be best off using a JS library like jQuery, where you can use the jQuery keypress() method, but you can get the data you want from the javascript onkeypress event.
You are better off capturing all keys on the window rather than capturing key strokes on a specific element like other answers referred to.
so using native javascript:
window.onload = function (){
eventHandler = function (e){
if (e.keyCode == 70 && e.ctrlKey)
{
//do stuff
//console.log(e);
}
}
window.addEventListener('keydown', eventHandler, false);
}
using JQuery:
$(document).ready(function(){
$(window).keydown(function (e) {
if (e.keyCode == 70 && e.ctrlKey)
{
//do stuff
}
});
});
Using jQuery:
You can do it using jQuery Keydown
Nice article on capturing different key events:
Working with Events in jQuery
EDIT:
JavaScript
Here are nice articles to do this in javascript with nice DEMO:
Handling Keyboard Shortcuts in JavaScript
Detecting keystrokes