JavaScript - Clickable Object Inside <svg>

I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be.

Code:

print<<<HERE
               Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true, 
                onChange: function(item) {
                    var list = Sortable.options(item).element;
                    
                    if(changeEffect) changeEffect.cancel();
                    changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
                },
            
            
            
            onDrop: function(item) {
            var thing=Sortable.options(item).element.identify();
            
            var anchors = document.getElementById(thing).childNodes.length-2;
            
            if(anchors > 20){
            alert('This box had 20 creatures in it already, your last action has not been saved.');
            window.location.reload();
            }
            else{
            
            new Ajax.Request("saveImageOrder.php", {
                        method: "post",
                        parameters: { data: Sortable.serialize("sortlist$box") }
                    });
               }   
}               
            });
               
HERE;
$box++;

}
?>
          
        });
    </script>

if you solve this I'll send ya $10 via paypal

I created a method for displaying an object's properties:

Code:

renderfunction 	= false;

function showProperty (object, property)
{
	document.write  ('<td class="type">' + (typeof object[property])  + '</td>' 
					+ '<td class="name">' + property + '</td>');
	
	document.writeln('<td class="value">' + 
						(
								(typeof object[property] != 'function')
								? object[property]
								:(
										(property != 'showProperties')
										? (
											renderfunction
											? object[property]()
											: ('<span class="self">NOT RENDERED</span>')
											)
										: ('<span class="self">THIS</span>')
								 )
						) 
					+ '</td>');

	
	document.writeln('<td class="hasOwnProperty" >'  
							+ (
									object.hasOwnProperty(property)
									? "Local"
									: "Inherited"
								)
					 	+ '</td>');

	if (typeof object[property] == 'function')
	{
		document.writeln ('<td class="function">' + object[property] + '</td>');
	}
	else
	{
		document.writeln ('<td class="function"> </td>');
	}

}

As long as renderfunction = false, the object is fine coming out of this function.

However, if I change renderfunction to true, all my properties become undefined.

Why isn't this working as I expect it to?

How should I fix it?

Thanks in advance,

-Brian.

Hello together!

I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()".

In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need.

I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly.

Has anyone any idea??

I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)...

Problem is I'm not sure how to properly access those properties... see below please.

<script>

//This is an example of a problem im having in my own code...
//I want to access the name of the object within the links array wintin the object...

var objA = {name: "Object A", links: [objB, objC]};
var objB = {name: "Object B", links: [objC, objD, objE]};
var objC = {name: "Object C", links: [objB]};
var objD = {name: "Object D", links: [objE]};
var objE = {name: "Object E", links: [objD]};

//ex: I want to access the name of Object A's first link...
console.log(objA.links[0].name);

</script>

I'm hoping to get "Object B"...
But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object.
Is there another way around this? Any thoughts are appreciated.

Hi all,

I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues?


Code:

function createClass () {
	return new createClass()
	function createClass() {
		return new createInstance ()
		function createInstance () {
			//Default properties, values and methods which might later be extended
		}
	}
}

var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();

var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();

Ignore post (if mod, please delete)

Quote:
menu: function( a, b ) {
$( b ).observe( 'click', function( event ) {
event.stop();
if( $( a ).visible() ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
} else {
$( a ).show();
$( b ).addClassName( 'selected' );
document.observe( 'click', function( e ) {
if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
}
});
}
});

$$( '#' + b + ' > a' ).each( function( element ) {
element.observe( 'click', function( event ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
});
});
}
This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu..

Thanks.

I have a situation in which I have to track clicks (links etc..).

The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image.

Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information.

I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable.

Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it.

any ideas?

has to work in ie6+ and ff 3+

Hi,

I need to change the background and the header of a website on which i display ads (by an adserver)

It works with this code :

<script type="text/javascript">
parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)";
parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0";
parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat";
parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21";
parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)";
</script>

But i need those elements become clickable.
Have you any solutions ?

Thanks a lot.

Sorry for my %"*!?& english

Benoo

I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button:
Code:

<input type="button" value="Preview" onClick="popupform();">

works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry).

When I substitute
Code:

<input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();">

everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found.

The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff.

Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php)

Thanks in advance.

My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you.

Shawnel


<head>
<style type="text/css">
.style1 {
vertical-align: top;
}
</style>
</head>

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/Picture Box/PictureBox1.jpg"
var image2=new Image()
image2.src="Images/Picture Box/PictureBox2.jpg"
var image3=new Image()
image3.src="Images/Picture Box/PictureBox3.jpg"
var image4=new Image()
image4.src="Images/Picture Box/PictureBox4.jpg"
var image5=new Image()
image5.src="Images/Picture Box/PictureBox5.jpg"
//-->
</script>

<body style="margin-top: 0">

&nbsp;<a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="learnmore.htm"
else if (whichimage==2)
window.location="contactus.htm"
else if (whichimage==3)
window.location="hungerheroes.htm"
else if (whichimage==4)
window.location="donate.htm"
else if (whichimage==5)
window.location="volunteer.htm"
}
//-->
</script>

Hello..

I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button.

What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously.

How can I obtain this?
Whether if it's created in JavaScript or jQuery doesn't matter, I use both...

Thanks

Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense

I have some Javascript that is selecting text from a form textarea and copying it to the clipboard:

Code:

document.myForm.myTextarea.focus();
document.myForm.myTextarea.select();
document.execCommand( 'Copy' );

This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link.

When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ).

Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link?

Thanks!

Hi im using this php code right here for a search function that opens url's in an iframe PHP Code:
$text = $_POST['text'];
switch($_POST['engine']) {
case 1:
      for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } }
      $data = "http://www.yahoo.com".$text;
      break;
case 2:
      $data = "http://www.google.com".$text;
      break; 


Code:

<FORM name="search" ACTION='search.php' METHOD='POST' target="frame">
				   <input TYPE='text' NAME="text" id="text" class="search" /> 
					   &nbsp;<font face="verdana">
					   <input type='submit' name="submit" value="Go" class="button" /><br />
					   Select Engine: </font><br />
					   <select name="engine" size="26">
                              
                              <option value="1">yahoo</option>
					                                <option value="2">google</option>
</select>
</form>

what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this?

Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]

Code:

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>