|
I am trying to implement the double click event on a child element of an autocomplete text box. I can assign the ondblclick to the div but when I double click the innerHTML shows all of the child elements and not the one I double clicked on. See the code below:
var aStr2 = new Array("computer - Plain IA", "computer - Plain JSOC", "communication - Plain IA", "condor - Plain IA");
function AutoComplete(oText) {
// initialize member variables
this.oText = oText; // the text box
this.oDiv = document.getElementById("acdiv"); // oDiv; // a hidden for the popup auto-complete
this.nMaxSize = 30;
this.aStr = new Array(5);
this.aStrx = new Array(5);
this.aStr3 = aStr2;
// preprocess the texts for fast access
var i, n = this.oText.value.length;
for (i = 0; i < aStr2.length; i++) {
this.aStrx[i] = aStr2[i];
}
this.nCount = this.oText.value.length;
// if a suitable number then show the popup-div
if ((this.nMaxSize == -1) || ((this.nCount < this.nMaxSize) && (this.nCount > 0))) {
// clear the popup div.
while (this.oDiv.hasChildNodes())
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the AutoCompleteDB
for (i = 0; this.aStr3[i] != null; i++) {
if (this.aStr3[i].indexOf(this.oText.value) == -1) {
delete this.aStrx[i];
}
}
// add each string to the popup-div
var i, n = aStrx.length;
for (i = 0; i < n; i++) {
var oDiv2 = document.createElement('div');
//debugger;
oDiv.appendChild(oDiv2);
if (aStrx[i] != null) {
oDiv2.innerHTML = aStrx[i];
}
oDiv2.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv2.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv2.onmouseout = AutoComplete.prototype.onDivMouseOut;
this.oDiv = oDiv2;
this.oDiv.style.visibility = "visible";
this.oDiv.style.color = "Black";
this.oDiv.style.background = "Yellow";
}
}
else // hide the popup-div
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}
}
AutoComplete.prototype.onblur = function () {
this.oDiv.style.visibility = "hidden";
}
function dblclick() {
// debugger
alert("hello");
}
|
|
|
|
|
Got it working. Just made the following class var global:
var first = true;
var aStrx = new Array(5);
var oDiv;
var indextext = 0;
Then added the event to each childelement:
var oDiv2 = document.createElement('div');
//debugger;
oDiv2.id = i;
oDiv2.setAttribute('ondblclick', 'dblclick("' + oDiv2.id + '")');
Finally, added the functions:
function dblclick(id) {
if (first == true) {
populateTxt(aStrx[id]);
first = false;
}
indextext++
if (indextext >= aStrx.length - 1) {
indextext = 0;
first = true;
}
}
function populateTxt(selectedtext) {
document.getElementById("txtSearch2").value = selectedtext;
indextext = 0;
oDiv = document.getElementById("acdiv");
oDiv.innerHTML = "";
oDiv.style.visibility = "hidden";
}
|
|
|
|
|
Hello,
I'm trying to move a picture around my screen randomly.
Here is my code:
<!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=utf-8" />
<title>JavaScript: Moving an Image</title>
<script type="text/javascript">
var i = 0;
function Init()
{
var elem = document.getElementById("ss");
var move = parseInt(elem.style.marginTop+10);
elem.setAttribute("style", "marginTop:" + move.toString() + "px");
elem.setAttribute("style", "marginLeft:" + move.toString() + "px");
elem.setAttribute("style", "marginBottom:" + move.toString() + "px");
elem.setAttribute("style", "marginRight:" + move.toString() + "px");
setInterval("Init()",1000);
}
function backToCenter()
{
var elem = document.getElementById("ss");
elem.style.marginTop="200px";
elem.style.marginRight="200px";
elem.style.marginBottom="200px";
elem.style.marginLeft="400px";
}
</script>
<style>
#box
{
width: 500px;
height: 300px;
position: relative;
margin: 20px auto 0px auto;
border: 5px outset #000;
overflow: hidden;
}
.image
{
position: absolute;
z-index: 100;
}
</style>
</head>
<body onload="Init()">
<div id="ss"style="height: 200px; width: 500px;"><img class="image" id="img1" src="beer-logo.jpg" height="50px" width="50px"/></div>
</body>
</html>
but the picture doesnt move, i cant figure out how to do this.
any help would be more than thankfull.
cheers.
|
|
|
|
|
Sir;
I think it's because of the lines (below) are overwriting each other.
elem.setAttribute("style", "marginTop:" + move.toString() + "px");
elem.setAttribute("style", "marginLeft:" + move.toString() + "px");
elem.setAttribute("style", "marginBottom:" + move.toString() + "px");
elem.setAttribute("style", "marginRight:" + move.toString() + "px");
Also, the value of the attribute style should be margin-top: npx not marginTop: nxp (we remove the '-' character from the javascript identifier marginTop).
Sir, lets begin with moving the picture down at speed of 10px/sec.
elem.style.marginTop = move.toString() + "px";
then you change the direction when the picture reaches the edge of the screen.
Help people,so poeple can help you.
|
|
|
|
|
Thanks for the help.
my problem is that i need to keep it moveing all the time, with your code the picture stays in the smae place.
My problem is in this area:
var x = parseInt(elem.style.marginTop);
x=x+10;
elem.style.marginTop = x+"px";
the compiler has an issue with this line:
elem.style.marginTop = x+"px";
I changed the code abit (lost the setAttribute and replaced it with what you gave me)
Hope you can help me out.
|
|
|
|
|
What error do you get? That looks correct.
|
|
|
|
|
Let me exaplain what I want maybe it will give you a better idea of how to help me:
I need my picture to randomly move around the screen that why i give a random amount to each diarection, i'v been trying to thing of an algorithm to solve this, I have the algorithm but the syntax is just not matching up.
i found the element.style.margin(and direction here) = something will move the object, but i need the object to move in a certin step so the movement will look smooth.
any help would be more than thankfull.
Kind reggards
|
|
|
|
|
Sir;
- about you first comment what exception does the browser throw in the console?
- about the smoothing, you should make the steps faster and smaller for example 10px/sec can be 1px/100 millisecond (you change the time interval in setInterval() to 100 and the 10px in move() to 1px.
- about moving in certain steps, you can use an array than contains information about both speed and direction or the endpoints.
Help people,so poeple can help you.
|
|
|
|
|
I have wrote some nice code that moves a panel using 4 circle formula
take a look
function DrawArc1(t) {
var a = (1.0 + t / 2000.0) * Math.PI;
var x = 50.0 + 50.0 * Math.cos(a);
var y = - 50.0 * Math.sin(a);
var panel = document.getElementById('movepanel');
panel.style.left = x + 'px';
panel.style.top = y + 'px';
}
function DrawArc2(t) {
var a = (0.5 + t / 2000.0) * Math.PI;
var x = 100 + 50 * Math.cos(a);
var y = 50 - 50 * Math.sin(a);
var panel = document.getElementById('movepanel');
panel.style.left = x + 'px';
panel.style.top = y + 'px';
}
function DrawArc3(t) {
var a = (t / 2000.0) * Math.PI;
var x = 50.0 + 50.0 * Math.cos(a);
var y = 100.0 - 50.0 * Math.sin(a);
var panel = document.getElementById('movepanel');
panel.style.left = x + 'px';
panel.style.top = y + 'px';
}
function DrawArc4(t) {
var a = (1.5 + t / 2000.0) * Math.PI;
var x = 50 * Math.cos(a);
var y = 50 - 50 * Math.sin(a);
var panel = document.getElementById('movepanel');
panel.style.left = x + 'px';
panel.style.top = y + 'px';
}
function move() {
var t = 0;
var timeout = setInterval(function() {
if (t >= 0 && t <= 2000) {
DrawArc1(t);
}
else if (t > 2000 && t <= 4000) {
DrawArc2(t - 2000);
}
else if (t > 400 && t <= 6000) {
DrawArc3(t - 4000);
}
else if (t > 6000 && t <= 8000) {
DrawArc4(t - 6000);
}
else clearInterval(timeout);
t += 100;
}, 100);
}
the function move calls DrawArc1, DrowArc2, DrawArc3, DrawArc4 according to time to make a relationship between time and position. i hope you find it useful.
you can also put the formulas and time intervals in an array.
Help people,so poeple can help you.
|
|
|
|
|
|
over my head, sir 
Help people,so poeple can help you.
|
|
|
|
|
Hi there.
It seems that there's a couple of problems with your code.
Firstly, it bogs down quickly due to the way that the init function is set to create a new timer each time it's called
Next, elem.setAttribute("style" ..... - this sets the style for the element - the style is defined inline, that is - a single string that contains all of the style info - just like the style string you have for the ss div
I think there was something else, though it's been a really long day.
Anyway, here's some code that works - even if it is a bit epileptic!
<html>
<head>
<title>JavaScript: Moving an Image</title>
<script type="text/javascript">
function Init()
{
setInterval("onMove();",100);
}
function constructStyleString(xPos, yPos)
{
var result = "margin-top: " + yPos + "px;";
result += "margin-left: " + xPos + "px;";
return result;
}
function onMove()
{
var xPos, yPos;
xPos = Math.random() * 50;
yPos = Math.random() * 20;
var elem = document.getElementById("imgContainer");
elem.setAttribute("style", constructStyleString(xPos, yPos));
}
</script>
</head>
<body onload="Init();">
<div id="imgContainer" style="height: 200px; width: 500px;">
<img class="image" id="img1" src="img/progBar1024-2.gif" height="24px" width="10px"/>
</div>
</body>
</html>
|
|
|
|
|
When you use jQuery UI resizable plugin the mouse cursor style can be as "e-resize" (2 arrows in opposite directions). But, how can we change it? I've tried this:
$("#right-line").hover(function() {
$(this).css("cursor", "crosshair");
});
And it doesn't work, that is the cursor is still "e-resize".
Actually, I've made my own outer black div around the main div rectangle. That outer black div is like a thin border and has 8 small squares in top-left, top-right, bottom-left, bottom-right corners and top-center, bottom-center, left-center and right-center locations, which I want to use as my own handles. It means I don't want to allow "e-resize" cursor along the whole border of container, but only on my own squares.
So, I need to control the cursor style in jQuery UI resizable plugin.
I know I can change the original jQuery CSS file, but is there a way to achieve this programmatically?
Thank you for any suggestion.
|
|
|
|
|
lets see;
Resizable Plugin uses css classes to change cursor shape. see this:
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
you can select the element using the class and set the css for it
$('.ui-resizable-se').css("cursor", "crosshair");
Help people,so poeple can help you.
|
|
|
|
|
Hi, I'm writing help files in the form of html pages with javascript code. They're then compiled into a WinHelp chm file and deployed with the program I'm writing. Here's a problem that I've seen with a couple of my pages: Some of my pages contain an image with rectangles you can click on and it will pop up a pop up box (not another window) that contains another page. This is the code I'm using:
<pre lang="Javascript"><area shape="rect" coords="23, 77, 58, 330" href="javascript:void(0);" class="MCPopupSpot" onclick="FMCPopup( event, this ); return false;" MadCap:iframeName="popup1" />
<span class="MCPopup">
<iframe class="MCPopupBody" name="popup1" frameborder="0" MadCap:src="test.htm" src="../Skin/Blank.htm" style="display: none;" onload="if ( typeof( FMCIFrameOnload ) == 'function' ) {{ FMCIFrameOnload( this ); }}">
</iframe>
</span></pre>
So this works great, besides that when you click on one of these pages and then attempt to browse away from the parent page by using the back button it doesn't work. The back button will reopen the old popup pages that you clicked on in the parent page. Is there any code I can write that makes certain pages ignore their history so that the back button will not navigate back to those popups but instead navigate to the last parent page I was on? Or has anyone else experienced this problem using this method to create pop up boxes? I figured this was the best solution to the work around, but maybe someone has a better idea.
I probably can elaborate more, it's a very unique problem that's hard to explain.
Thanks in Advance,
James
modified 24-May-12 11:47am.
|
|
|
|
|
|
Is anybody there who has experience with making html input text box draggable using jQuery?
I've tried to wrap text box inside div and can make it resizable, but not draggable. The div and text box are placed on standard jQuery UI dialog. Actually, I need both - draggable and resizable html input text box inside dialog.
The code is as follows:
$(document).ready(function() {
$("#btnShow").click(function(e) {
$('#dialog').dialog("open");
});
$('#dialog').dialog({
title: "Sample dialog",
resizable: false,
autoOpen: false,
width: 400,
height: 300,
buttons: [{ text: "OK", click: function() { } },
{ text: "Cancel", click: function() { $(this).dialog("close") } }]
});
$('#divText1').draggable({
containment: "parent",
cursor: "move"
}).resizable({
containment: "parent",
handles: "e, w"
});
});
<input id="btnShow" type="button" value="Show" />
<div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;">
<div id="divText1" style="width: 200px; height: 30px;">
<input type="text" style="width: 98%;" value="Hello world!" /><br /><br />
</div>
</div>
Thank you in advance.
Goran
|
|
|
|
|
|
I haven't tested it but I believe the problem you are likely running into is that the textbox has input area so if you click that area and try to drag, you are in control of the textbox not the div. You need an element that you can drag, maybe put an image to the left of the textbox or something like that. But trying to drag inside a textbox will just highlight the text.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
I have an array of strings and want to locate each array's string that begins with another string. (ie)
array arr = new array("computer, condor");
var str1 = "con";
?
How do I find out which array element string begins with str1 ("con")?
Thannks,
Steve Holdorf
|
|
|
|
|
There is no automatic functionality for this, that I know of, you need to do it yourself.
Approach 1:
1. Store your strings as JSON;
2. Use $.each on the JSON to iterate through each element and find the ones you need.
Approach 2:
Just iterate through the list of strings yourself, comparing each element on that condition.
|
|
|
|
|
|
I am trying to create a simple autocomplete textbox control. Now, in a hidden field I have text: "computer communication condor" and I have a textbox control that I am using a javaScript RegEx object to do the search; however, no partal or full matching is occuring. The code is below. Can someone help me out?
function javascriptOnTextChange() {
var string1 = document.getElementById('<%=txtSearch.ClientID%>').value;
var string2 = document.getElementById('<%=HiddenFieldSearch.ClientID%>').value; ;
var pattern = '/' + string1 + '/gix';
alert(pattern.exec(string2));
Now, if I type in 'com' that alert box should find the first occurance of the match (i.e. computer) however the alert shows null.
Thanks,
Steve Holdorf
|
|
|
|
|
Not a precise answer to your question, just to share my experience of using Autocomplete object from jQuery UI - it worked just fine, and was very easy to use.
Link: http://jqueryui.com/demos/autocomplete/[^]
|
|
|
|
|
I have upload control button and when i load a file from the computer then i need to read the content of the file and then it will be pasted in to the editor.
is it possible if possible please provide me the possible solution
Thanking you
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
