|
JavaScript - Id Of Div Elements For Draggable
Hi There
I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so. I need to:- 1.create a collection of div elements with className - draggable 2. make a list of all the element id's 3. make all elements with said id's draggable I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far Code: var dv;
var dh;
dv = document.getElementsByTagName('div');
if (dv.className == 'draggable')
{
for (var i = 0; i <= dv.length; i++)
{
dh = dv[i].getAttribute('id');
for (var j = 0; j <= dh.length;j++)
{
document.getElementById('content').innerHTML = dh[j].getAttribute('id');
}
}
}
else
{
alert ("no id");
}
I keep getting the alert message "no id" loaded
Similar TutorialsHi, Does anybody know of an example of creating a draggable iFrame in a similar way what can be done on iGoogle with the iFrame gadget using javascript? The problem that I'm having is that the elements within the iFrame can still steal the input focus when dragging the frame using the bar I'm using to initate the drag process. For example when clicking and holding the mouse down on a bar that I'm using to initiate the drag positioned above the iFrame and then moving the mouse to drag the whole frame containing the bar and iFrame I have a problem whereby if the cursor strays over the google search box on http://www.google.com the editbox steals the input focus and the dragging stops until you carefully move the mouse carefully out of the editbox control. Can anybody point me to a page/the html/css containing an iFrame containing http://www.google.com that can't be interacted with because it has a div on top of it e.g. a semitransparent one would look nice for example. Then hopefully I can incoperate the changes into my javascript on initiation of the drag of the frame to disable the elements within the iFrame? If there are any other solutions to this problem, prefereably with an example that works with browsers back as far as ie6 please let me know? Cheers Ben W Hi i am trying to create a draggable css layer. Code: <html>
<head>
<style type="text/css">
#box {position:absolute;
left:150;top:150;
background-color:blue;
height:100;
width:100;}
</style>
<script type="text/javascript">
function start(){
var count = cnt.value
var count=0;
while (count=0)
{
var x;
var y;
var layer = document.getElementById('box');
x=window.event.clientX;
layer.style.left=x;
y=window.event.clientY;
layer.style.top=y;
}
}
function stop(){
var count = cnt.value;
count = 1;
}
function shw(){
alert(cnt.value);
}
</script>
<body>
<input type="hidden" name="cnt" value="1">
<div id="box" onclick="start()" onrelease="stop()">
</div>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" name="show" value="Show" onclick="shw()">
</body>
</html>
It doesn't seem to work though. The loop never seems to start. btw i was also thinking couldn't i just put while(box.clicked) { or something along those lines. Thanks I am designing a site where users can submit a location. I want to use Google Maps with a draggable marker which posts the lat, lon when dropped on a position. I was wondering if anyone knows of a tutorial or could point me in the direction of anything similar. Hi guys I need help on sorting out a drag&drop script I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images. The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like. I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function I have the following piece of code in the head section of my page, which is the actual code for dragging the elements Code: function Browser() {
var ua, s, i;
var ln = 1;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
then in the Body, I have the DIV that can be dragged around through the "onmousedown" event Code: <div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')">
<?php
print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>'
?>
</div>
then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around Code: <script>
window.onload = function () {
document.getElementById("milano").onclick = function () {
alert('AAAAA');
}
}
</script>
I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution... Cheers, Mattia I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/# so far i have recreated the top left and right edges using Code: var window_width = $(window).width();
var window_height = $(document).height();
var image_height = $("#background").height(); (2914px)
var image_width = $("#background").width(); (3920px)
$("#background").draggable({
scroll: false,
stop: function (event, ui) {
var animate_to = {};
var window_width_resized = $(window).width();
if (ui.position.left > 0) {
animate_to.left = '0px';
}
if (ui.position.top > 0) {
animate_to.top = '0px';
}
//initial size for width
var image_width_gap = window_width - (image_width + ui.position.left);
if (image_width_gap > 0) {
animate_to.left = (0 - (image_width - window_width)) + 'px';
}
//after window gets resized for width
var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
if (image_width_gap_resized > 0) {
animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
}
$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });
then i am using the same logic to do the bottom edge but it doesnt work any ideas here is how i thought the bottom would work Code: //initial size for height
var image_height_gap = window_height - (image_height + ui.position.top);
if (image_height_gap > 0) {
// animate_to.top = (0 - (image_height - window_height)) + 'px';
}
help would be greatly appreciated fixed.. my bg image was infact smaller Hi everyone, I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this: Code: var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
The body has this: Code: <img src="images/balloons.gif" class="dragme"> Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page. I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot. I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier). Thanks I set out to do a little exercise in creating draggable divs that look like app windows in pure javascript, with very little html. Problem is my mouseup event isn't always triggering and will never drop the div in the new spot. I have a global variable to determine whether or not the div is being dragged. This is toggled on the mouseup and mousedown events on the titlebar div. I have a mouesmove event on the body so that it can determine if the global dragging variable is true or false. If true then it moves the div to the x/y coordinates of the mouse Same thing with the mouseup event. It should move the div to the x/y coordinates of the mouse Sometimes it works, sometimes it doesnt. Most of the time it acts like it just wants to select text while I'm dragging (which i thought my selectstart event would take care of) Code: <html>
<head>
<title>testjs</title>
<script>
var dragging = false;
function Window(title,top,left,width,height)
{
this.title = (typeof title == 'undefined')?'New Window':title;
this.x = (typeof top == 'undefined')?0:top;
this.y = (typeof left == 'undefined')?0:left;
this.width = (typeof width == 'undefined')?600:width;
this.height = (typeof width == 'undefined')?400:height;
this.borderStyle = 'solid';
this.windowPanel = null;
this.Open =
function()
{
var windowPanel = document.createElement('div');
windowPanel.setAttribute('id','windowPanel');
windowPanel.setAttribute('z-index', '2');
windowPanel.style.position='absolute';
windowPanel.style.left = this.x+'px';
windowPanel.style.top = this.y+'px';
windowPanel.style.width = this.width + 'px';
windowPanel.style.height = this.height + 'px';
windowPanel.style.border = 'thin solid black';
var titleBar = document.createElement('div');
titleBar.setAttribute('id','titleBar');
titleBar.setAttribute('z-index', '4');
titleBar.style.position = 'absolute';
titleBar.style.left = '0px';
titleBar.style.top = '0px';
titleBar.style.width = this.width + 'px';
titleBar.style.height = '22px';
titleBar.style.borderBottom = 'thin solid black';
titleBar.innerHTML = "<span style=position:absolute;>"+this.title+"</span>";
titleBar.addEventListener('mousedown', function(e){MouseDown(e,this)}, false);
titleBar.addEventListener('mouseup', function(e){MouseUp(e,this)}, false);
titleBar.addEventListener('selectstart', function(e){return false}, false);
var closeButton = document.createElement('div');
closeButton.style.position = 'absolute';
closeButton.style.left = this.width - 30 + 'px';
var cbimg = document.createElement('img');
cbimg.setAttribute('src', 'close_button_red.png');
cbimg.setAttribute('width', '16');
cbimg.setAttribute('height', '16');
closeButton.appendChild(cbimg);
closeButton.addEventListener('click', function(event){CloseWindow('windowPanel')}, false);
document.body.addEventListener('mousemove', Mover, false);
titleBar.appendChild(closeButton);
windowPanel.appendChild(titleBar);
document.body.appendChild(windowPanel);
}
}
function Mover(e)
{
if(dragging == true) {
console.log(e.pageX);
document.body.style.cursor = 'move';
document.getElementById('windowPanel').style.x = e.pageX + 'px';
document.getElementById('windowPanel').style.y = e.pageY + 'px';
}
else
document.body.style.cursor = 'auto';
}
function MouseUp(e,ele)
{
dragging = false;
ele.parentNode.style.top = e.pageY + 'px';
ele.parentNode.style.left = e.pageX + 'px';
}
function MouseDown(e,ele)
{
dragging = true;
}
function CloseWindow(wnd)
{
document.body.removeChild(document.getElementById(wnd));
}
function init()
{
wnd = new Window('A new approach', 100, 150, 1024, 768);
wnd.Open();
}
</script>
</head>
<body onLoad='javascript:init()'>
<a href="#" onClick="javascript:init();">Open</a>
</body>
</html>
I currently am using a mootools popup on www.Hope1st.com to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse weird right? yea i know... so i thought of a solution...instead of the whole box being draggable why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready? its a mouthful....a million thanks to whoever is talented enough to help me Code: var mooSimpleBox = new Class({
options: {
width: 300,
height: 200,
opacity: '0.8',
btnTitle: "Ok",
closeBtn: null,
boxTitle: "messageBox",
boxClass: 'mainBox',
id: 'myID',
fadeSpeed: 500,
box: null,
addContentID:null,
addContent: null,
boxTxtColor: '#000',
isVisible: false,
isDrag: true
},
initialize: function(options){
this.isVisible = false;
if(options['isDrag']) this.isDrag = options['isDrag'];
if(options['width']) this.width = options['width'];
if(options['height']) this.height = options['height'];
if(options['opacity']) this.opacity = options['opacity'];
if(options['btnTitle']) this.btnTitle = options['btnTitle'];
if(options['boxTitle']) this.boxTitle = options['boxTitle'];
if(options['boxClass']) this.boxClass = options['boxClass'];
if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
if(options['id']) this.id = options['id'];
if(options['closeBtn']) this.closeBtn = $(options['closeBtn']);
if(options['addContentID']) this.addContentID = options['addContentID'];
if(options['addContentID']) {
this.addContent = $(this.addContentID).innerHTML;
$(this.addContentID).setStyle('visibility','hidden');
$(this.addContentID).remove();
}
this.createBox();
},
createBox: function(){
this.box = new Element('div');
this.box.addClass(this.boxClass);
},
clickClose: function(){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0); this.box.setStyle('display','none');
this.isVisible = false;
},
fadeOut: function(){
if(this.isVisible){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0);
this.isVisible = false;
}
},
fadeIn: function(){
if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}else if (document.body) {
theHeight=document.body.clientHeight;
}
var top = window.getScrollTop();
var boxTop = (theHeight - this.height) / 2 ;
boxTop = (boxTop + top);
var boxLeft = (theWidth - this.width) / 2;
this.box.setStyle('top',boxTop);
this.box.setStyle('left',boxLeft);
this.box.setStyle('position','absolute');
this.box.setStyle('width',this.width);
this.box.setStyle('height',this.height);
this.box.setStyle('opacity',this.opacity);
this.box.setStyle('cursor','move');
this.box.setStyle('z-index','999990000');
this.box.setAttribute('id', this.id);
this.box.setStyle('visibility','hidden');
this.box.injectInside(document.body);
if(this.isVisible == false){
this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity);
this.addHT();
this.isVisible = true;
}
},
addHT: function(){
this.closeBtn = new Element('button', {
styles: {
'border': 'none',
'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)',
'color':'#fff',
'position':'absolute',
'bottom':'3px',
'right':'3px',
'width':'44px',
'height':'19px',
'font-size':'13px',
'font-weight':'bold',
'font-family':'arial',
'cursor':'pointer'
}
})
var width = this.width.toInt() + 5;
if(window.ie){
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': '20px',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}else{
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': 'auto',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}
$(titleBar).innerHTML = this.boxTitle;
var insideDiv = new Element('div',{
styles: {
'padding':'10px'
}
});
insideDiv.setAttribute('id','myContent');
this.box.innerHTML = "";
insideDiv.injectInside(this.box);
insideDiv.innerHTML = this.addContent;
this.closeBtn.innerHTML = this.btnTitle;
$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this));
titleBar.injectInside(this.box);
this.closeBtn.injectInside(this.box);
if(this.isDrag == 'true'){
this.box.makeDraggable();
}
}
});
mooSimpleBox.implement(new Options, new Events);
Hi Guys, I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full. Ok so I have these Input boxes and select boxes on my form. I have them input this way: Code: <input type="text" name="monto[]"> So I can then parse the many that get added and removed when I submit the form, this way PHP see's them as an array. Now I have used this in the past to cycle through my inputs to check values and such on them, but with these [] it doesn't work. Code: var changeCheck = document.getElementsByName('check');
for(i=0; i<changeCheck.length; i++)
{
var enter = new Number(getEl('dueitem' + changeCheck[i].value));
if(changeCheck[i].checked == true) {
final = enter + final;
}
}
Is there a way to cycle all these elements when they are as []. Even if it's cycle them by name, though I never had a determined amount I always have the same names for the 12 different fields there are. Ok so I have these elements on my page: Code: <input type="text" size="5" name="val[]" value="'.$NotaMaxima.'"> I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number. The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this: Code: var els,i,asig;
els=document.getElementsByTagName('val');
for(i in els) {
asig = parseInt(els[i].value) - parseInt(asig);
}
alert(asig);
But no go, any ideas? I have a webpage which has the prototype library in it as well as my own script. I just started on it, but I've already run into issues using the for... in loop. I'll admit, I'm a complete noob at javascript, so this is probably something pretty simple. Code: function prepareToolBar()
{
//define toolbar tool names
var toolbar = [
'line',
'circle',
'ellipse',
'square',
'rectangle',
'text'];
for (var i in toolbar)
{
var tmp = document.createElement("p");
tmp.appendChild(document.createTextNode(toolbar[i]));
document.body.appendChild(tmp);
}
}
addLoadEvent(prepareToolBar);
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof oldonload != 'function')
{
window.onload = func;
} else {
window.onload = function() { oldonload(); func(); }
}
}
Below is the output on the page from the function: Code: circle
ellipse
square
rectangle
text
function (iterator, context) { var index = 0; iterator = iterator.bind(context); try { this._each(function (value) {iterator(value, index++);}); } catch (e) { if (e != $break) { throw e; } } return this; }
function (number, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var index = - number, slices = [], array = this.toArray(); while ((index += number) < array.length) { slices.push(array.slice(index, index + number)); } return slices.collect(iterator, context); }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = true; this.each(function (value, index) {result = result && !!iterator(value, index);if (!result) {throw $break;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = false; this.each(function (value, index) {if ((result = !!iterator(value, index))) {throw $break;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; this.each(function (value, index) {results.push(iterator(value, index));}); return results; }
function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }
function (filter, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; if (Object.isString(filter)) { filter = new RegExp(filter); } this.each(function (value, index) {if (filter.match(value)) {results.push(iterator(value, index));}}); return results; }
function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }
function (number, fillWith) { fillWith = Object.isUndefined(fillWith) ? null : fillWith; return this.eachSlice(number, function (slice) {while (slice.length < number) {slice.push(fillWith);}return slice;}); }
function (memo, iterator, context) { iterator = iterator.bind(context); this.each(function (value, index) {memo = iterator(memo, value, index);}); return memo; }
function (method) { var args = $A(arguments).slice(1); return this.map(function (value) {return value[method].apply(value, args);}); }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value >= result) {result = value;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value < result) {result = value;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var trues = [], falses = []; this.each(function (value, index) {(iterator(value, index) ? trues : falses).push(value);}); return [trues, falses]; }
function (property) { var results = []; this.each(function (value) {results.push(value[property]);}); return results; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (!iterator(value, index)) {results.push(value);}}); return results; }
function (iterator, context) { iterator = iterator.bind(context); return this.map(function (value, index) {return {value: value, criteria: iterator(value, index)};}).sort(function (left, right) {var a = left.criteria, b = right.criteria;return a < b ? -1 : a > b ? 1 : 0;}).pluck("value"); }
function () { return [].concat(this); }
function () { var iterator = Prototype.K, args = $A(arguments); if (Object.isFunction(args.last())) { iterator = args.pop(); } var collections = [this].concat(args).map($A); return this.map(function (value, index) {return iterator(collections.pluck(index));}); }
function () { return this.length; }
function () { return "[" + this.map(Object.inspect).join(", ") + "]"; }
function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }
function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }
function () { return this.map(); }
function reverse() { [native code] }
function forEach() { [native code] }
function () { this.length = 0; return this; }
function () { return this[0]; }
function () { return this[this.length - 1]; }
function () { return this.select(function (value) {return value != null;}); }
function () { return this.inject([], function (array, value) {return array.concat(Object.isArray(value) ? value.flatten() : [value]);}); }
function () { var values = $A(arguments); return this.select(function (value) {return !values.include(value);}); }
function (sorted) { return this.inject([], function (array, value, index) {if (0 == index || (sorted ? array.last() != value : !array.include(value))) {array.push(value);}return array;}); }
function (array) { return this.uniq().findAll(function (item) {return array.detect(function (value) {return item === value;});}); }
function () { return [].concat(this); }
function () { var results = []; this.each(function (object) {var value = Object.toJSON(object);if (!Object.isUndefined(value)) {results.push(value);}}); return "[" + results.join(", ") + "]"; }
As you can see, it shows the 6 elements in the array that I want, but it also shows random elements. By the way, I can fix this by changing it to a normal for loop, but I want to know what I'm doing wrong. I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks. Code: <script type="text/javascript">
Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}
var myArray=[1,2,3,4,5];
document.write(myArray.prototype.sum);
</script>
What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript: Code: <a href="#" id="square0"><li class="square"></li></a> This is my complete code: Code: <html">
<head>
<title>Squares</title>
<style>
li.square {
width: 26px;
height: 26px;
border: 1px solid black;
display: block;
float: left;
margin: 5px;
background-color: #39F;
}
div#squares {
width: 725px;
margin: 50px;
background-color: #CCC;
float: left;
}
div#form {
width: 700px;
text-align: center;
clear: both;
margin: 50px 50px 0 50px;
}
</style>
<script>
<!--
function generateSquare() {
var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);
container.insertBefore(linked, container.firstChild);
addToElement(squareID);
}
function addToElement(elementID){
var new_element = document.createElement('li');
new_element.setAttribute('class', 'square');
document.getElementById(elementID).innerHTML=new_element;
}
//-->
</script>
</head>
<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>
<body>
<div id="squares">
<ul id="listOfSquares">
</ul>
</div>
</body>
</html>
Hi I wanted to create multiple check box and once check box is clicked user should able to enter text and submit so i created this but when check box toggle it keep creating text areas. i wanted to create 1 text area per one check box also i need to store each text area value to data base. how can i correct this to achieve my needs PHP Code: <script type="text/javascript"> function validate(chk){ if (chk.checked == 1){ var htmlText = "<textarea name='area' cols='40' rows='5'></textarea>"; var newElement = document.createElement('div'); newElement.id = 'text'; newElement.innerHTML = htmlText; var fieldsArea = document.getElementById('text'); fieldsArea.appendChild(newElement); }else {} } </script> <form> <label>option1 <input type=checkbox name=chk1 onclick="return validate(chk1);"></label> <label>option2 <input type=checkbox name=chk2 onclick="return validate(chk2);"></label> </form> <div id="text"></div> Sorry for the language errors Regards. Im working on a function where i need to return the active elements ID. the element will have class="main" id="1" onmouseover="showSub()"> Would someone be able to write me a simple function which simply puts the elements ID number in an alert box? I can figure out the rest i need from that . Thanks, Tom Hi, I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row. How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids. Thanks. Hi all, iv'e been trying to get round this for 2 days and still nothing. What i want to do is to be able to outline elements on a page when hovered over... simple you might think. which it is. Then with the id of the item outlined when right clicked, and chose an option, other things happen. The menu side is sorted, and the hover outline is sorted. But iv'e been trying to put them both together but it wont work! This is the closest iv'e gotten, whcih runs sooooo slow. Code: $(document).ready(function() {
function elementHover(){
$("*").bind("mouseover", function(event) {
var element = $(event.target);
if($(element).attr("rel")!="rightClickMenu"){
$(element).addClass('outline-element');
if( ($(element).attr("id")!="") && (typeof $(element).attr("id") != "undefined") ){
getElementObj($(element));
$("[id!='" + $(element).attr("id") + "']").hover(function(){
$("#" + $(element).attr("id")).removeClass('outline-element');
});
}else{
return "";
}
}else{
return "";
}
});
}
elementHover();
});
the big problem being this var element = $(event.target); if i changed it to var element = $(event.target); alert($(element).attr("id")); it would open the dialog box about 10 times spitting all kinds of results. Any help would be much appreciated. Hi again!! This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate. PHP Code: <form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left"> <tr align="center"> <td width="10" class="forhead" style="white-space:nowrap;"> </td> <td width="92" class="forhead" style="white-space:nowrap;">Qty</td> <td width="94" class="forhead" style="white-space:nowrap;">Rate</td> <td width="94" class="forhead" style="white-space:nowrap;">Amount</td> </tr> </table> <tr align="left"> <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" > <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td> <table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text"> <tr> <td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td> <td width="92" class="forhead" style="white-space:nowrap;"> <input type="text" name="qty[]" style="width:80px;" onblur=""> </td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" name="rate[]" style="width:80px;" value=""></td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td> </tr> </table> <table border="0"> <tr> <td>Total:</td> <td><input type="text" name="total[]" style="width:80px;" value=""></td> </tr> <tr> <td colspan="2"> <input name="Submit" type="submit" value="Save" style="text-decoration:none" /> <input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'"> </td> </tr> </form> <script type="text/javascript"> function getValues(objName,objName2,objName3) { var var3 = ""; var arr = new Array(); arr = document.getElementsByName(objName); arr2 = document.getElementsByName(objName2); arr3 = document.getElementsByName(objName3); for(var i = 0; i < arr.length; i++) { for(var i = 0; i < arr2.length; i++) { for(var i = 0; i < arr3.length; i++) { var obj1 = document.getElementsByName(objName2).item(i); var var2 = obj1.value; var obj = document.getElementsByName(objName).item(i); var var1 = obj.value; var obj3 = document.getElementsByName(objName3).item(i); var var3 = obj3.value; var var4 = var1 * var2; document.getElementsByName(objName3).item(i).value=var4; } } } } function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch(e) { alert(e); } } </script> I would like to know that how can I show the value of all the elements in array "amount" in total field?? Alright,ill go straight to the problem. I want to get all the elements with a certain tag.However i can only get the first one. my code: Code: function getTags(tag) {
var x = document.getElementsByTagName(tag);
var y = x.length;
for(var i = 0; i <= y;i++) {
return x[i];
}
}
|
|||||||