JavaScript - How To Add The Tooltip To The Element By Jquery Or Javascript?

I'm using custom javascript tooltips to show information about designs in a t-shirt shop, such as design name and artist. I downloaded the code and CSS for the tooltips and am attempting to assign the tooltip to each design using a javascript array and a for-in loop. Only problem is that the tooltips aren't showing at all, no matter what I do. I think the problem is related to the onmouseover event that I'm using, but the only thing that seems to work even partway is changing the visibility to "show" in the CSS. From that I can see that the text is being assigned to the tooltips properly and that they are being positioned within the window, but the onmouseover event is having no effect either way when I revert the visibility back to "hidden." Help!

Here is the code for the "toolTip.js" file:

Code:

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; 
	
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} 

function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} 
	
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); 
		dm = document.getElementById(oi); 
		ds = dm.style; 
		st = ds.visibility; 
		
		if (dm.offsetWidth) 
			ew = dm.offsetWidth; 
		
		else if (dm.clip.width) 
			ew = dm.clip.width; 
			
			if (st == "visible" || st == "show") 
				{ ds.visibility = "hidden"; } 
			
			else {
				tv = mouseY(evt) + 20; 
				lv = mouseX(evt) - (ew/4); 
				
				if (lv < 2) 
					lv = 2; 
				
				else if (lv + ew > wp) 
						lv -= ew/2; lv += 'px';tv += 'px';  
						ds.left = lv; 
						ds.top = tv; 
						ds.visibility = "visible";
				}
			}
		}

Here is the relevant code where I attempt to assign the event to the tooltip visibility change. Note the syntax in SetLinks() function, where the onclick behavior is set. This syntax is working perfectly here. I modelled the 'controlPopUp() syntax similarly, but no go.

Code:

window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
		controlToolTip();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
						
						var newDesignTip = document.createElement('div');
						var newDesignTipID = "tt-design" + boxNum;
						newDesignTip.setAttribute('class',"tip");
						newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						
						newDesignBox.appendChild(newDesignTip);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
			}
	}
	
function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				var currTip = "tt-design" + x;
				document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
			}
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = "tt-design" + x;
		popUp( e , currTip );
	}

Here is the CSS:

Code:

.tip {
	font:10px/12px Arial,Helvetica,sans-serif; 
	border:solid 1px #666666; 
	width:270px; 
	padding:1px;
	position:absolute; 
	z-index:100; 
	visibility:hidden;
	color:#333333; 
	top:20px;
	left:90px; 
	background-color:#ffffcc;
	layer-background-color:#ffffcc;
}

Thanks in advance for your help!

What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code.

Code:

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
  suggestions.hide();
  // On the change of the id_location text search for matching results.
  $('#text').keyup(function(){
    // Get the value of the id location.
    var text = $('#text').val();
    // Trim any unnecessary white spaces.
    text = jQuery.trim(text);
    // Start guessing after the length of text if greater than one.
    if (text.length > 1) {
      // Create a query string for ajax.
      var qry_str = '?suggestion=' + text;
      // Send an ajax json request.
      $.getJSON('http://example.com/page.html' + qry_str, function(data){
        // Empty the suggestions box.
        $('#suggestions').empty();
        // Show the suggestions box.
        $('#suggestions').show();
        if (data.length > 1) {
          // Start a list for the suggestion.
          $('#suggestions').append('<ul class="suggestion_list"></ul>');
          // Loop through all the results.
          for (i = 1; i < data.length; i++) {
          // Get the name.
          $('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
        }
        // If an id selection was made then place its complete text in the box and its id in the id location box.
        $('.suggestion').click(function(){
          // Get the id from the substring of the html id.
          var html_id = $(this).attr("id");
          var id = html_id.substring(11);
          // Get the name from the text.
          var name = $(this).html();
          // Alert just to test if you have the id.
          alert(id);
          // Set the value of the text box to the complete name.
          $('#text').val(name);
          // Hide and empty the suggestion box.
          $('#suggestions').hide();
          // Turn the focus back to the text.
          $('#text').focus();
        });
/*  This is the part that messes up the suggestion click function if turned on. */
        // Hide the box when focus is else where.
        $('#container').focusout(function(){
          alert('test');
//		  $('#suggestions').hide();
        });
      });
    }
  });
});
</script>
<div id="container">
  <input type="text" id="text" name="text" value="">
  <div id="suggestions">
    <ul class="suggestion_list">
      <li id="suggestion_1" class="suggestion">Option 1</li>
      <li id="suggestion_2" class="suggestion">Option 2</li>
      <li id="suggestion_3" class="suggestion">Option 3</li>
      <li id="suggestion_4" class="suggestion">Option 4</li>
    </ul>
  </div>
</div>

The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help.

Overview
Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li).

The Problem
Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page.

So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin.

Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works.

The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though....

The Code
Code:

<html>
<head>
<script>
(function($) {
	$.fn.extend({
		luSlider: function(options) {
		
			var o = $(this);
		
			var defaults = {
				element : $(this),
				direction: 'left',
				next: null,
				prev: null,
				distance: null,
				speed: 'slow',
				prevAtEnd : null,
				nextAtEnd : null,
				prevNextEvent: null,
				pagination: false,
				elementClick : false,
				pager : $(this),
				callback: null
			};
			
			var options =  $.extend(defaults, options);
			
			o.data('curPosition','');
			
			// set cursor for next & previous buttons
			if (options.prev != null) options.prev.css('cursor','pointer');
			if (options.next != null) options.next.css('cursor','pointer');
				
			
			// Wrap all of our items in a super large div with hidden overflow
			o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
			o.css('overflow','hidden');
			
			// If no distance specified, do it based on the width of a single element
			var totalWidth = 0;
			
			
			var el = options.element;

			
			// Get the total width of all our items
			el.parent('ul').css({'padding':'0px','margin':'0px'});
			
			el.each(function() {
				totalWidth += $(this).outerWidth(true);
								
				//float our items to the left
				el.css({'display':'block','position':'relative','float':'left'});

				

			});
			
			// Get individual item width
			var itemWidth = totalWidth / el.size();
			//var itemWidth = el.outerWidth(true);
		
			// Get the number of visible items based on our container size
			var spaceUsed = $(this).innerWidth() / itemWidth;
			var numVisibleItems = Math.floor( spaceUsed );
			
			
			/*
			if (spaceUsed % 1 > 0 ) {
				$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
			}*/
			
						
			// a variable to store the number of items
			var numItems = el.size();
			
			
			if (options.distance == null) options.distance = itemWidth; 


			/* Initialize the location */	
			if ( $(this).data('curPosition') == undefined ) {
				$(this).data('curPosition',0);
			} 
			
			
			// get the total number of pages
			var numPages = Math.ceil(numItems / numVisibleItems);
			
			
			togglePrevNext();
			buildPager();
			
													
			
			return this.each(function() {
			
				if (options.elementClick) {
					//el.click(function() {
					//	document.location = $(this).find('a').attr('href');
				//	});
				}
				
				//	var cb = options.prevNextEvent;
				
							
				
				// Animate Next
				options.next.click(function() {
					
					togglePrevNext();
									
					var theEnd = endOfShow();
					var howFar = options.distance;
				
					if (!(theEnd)) {

						o.data('curPosition',  Math.round( (o.data('curPosition')) + 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}				
						
						distance = "-=" + howFar;
						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
					} else {
						// end of show	
					}			
					
					
					
					togglePrevNext();
					
					movePager();
					
					handleCallBack();
				});
				
								
				// Animate Previous
				options.prev.click(function() {
				
					togglePrevNext();
					
					//var theEnd = endOfShow('prev');
					var theEnd = startOfShow();
					var howFar = options.distance;
					
					if (!(theEnd)) {
						o.data('curPosition',  (o.data('curPosition') - 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}
						
						distance = "+=" + howFar;

						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
						
					} else {
						// end of show
					}
										
					togglePrevNext();
					movePager();
					handleCallBack();
				}); // end prev.click
				
					
				$('#luSliderPager li').click(function() {
					var curPage = $('li.activePage').index();
					var newPage = $(this).index();
					var direction = (curPage > newPage) ? "+=" : "-=";
					
					var distance = Math.abs(curPage - newPage) * options.distance;
					
					if (options.pagination) {
						distance *= numVisibleItems;
					}

					var newLeft = direction + distance;
					
					// set position
					o.data('curPosition', newPage);
					movePager();
					
					// animate
					el.stop(true,true).animate({
						"left" : newLeft
					
					},options.speed);				

				});
				
			}); // end return
						
			function togglePrevNext() {
			
				(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
							
				(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);	
			} 
			
			
			function handleCallBack() {
				if (typeof options.callback == "function") options.callback(o,options); 
			}
			
			// Determine our boundaries...and if we've reached them
			function startOfShow() {
				return(o.data('curPosition') <=0 ) ? true : false; 
			}
			
			function endOfShow() {
		
				if (options.pagination) {
					return (o.data('curPosition') >= numPages-1) ? true : false;
				} else {
					return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
				}				
			}
			
			
			
			function movePager() {
				$('.activePage').removeClass('activePage');
				$('.pager').eq(o.data('curPosition')).addClass('activePage');
			}
			
		
			
			function buildPager() {
			
				/* Custom CSS rule for pager default */
				var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
				style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
				
				$(style).appendTo("head");
				
				var numItemsPerPage = o.width() / itemWidth;
				var pager = "<ul id='luSliderPager'>";
				
				
				for (var x = 0; x < numPages; x++ ) {
					if (o.data('curPosition') == x) {
					pager += "<li class='pager activePage'></li>";
					}else {
					pager += "<li class='pager'></li>";}
				}
				pager += "</ul>";	
				
			 	$(pager).appendTo(options.pager);
			 }
			
			
			function showPager() {
							
			}
			
		}
		
	});				
})(jQuery);

</script>


<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
	
	var myCB = function(o, options) {
			// my callback function executed after every transition
			//console.log(o.numVisibleItems);
	}
	
	$('#sliderContainer').luSlider({ 
		element : $('li'),
		next : $('#slide_terms_right'),
		prev : $('#slide_terms_left'),
		speed : 1000,
		prevAtEnd : "slide_terms_prev_disabled", 
		nextAtEnd : "slide_terms_next_disabled",
		elementClick : true,
		pagination : true,
		pager : "#pager",
		callback : myCB
	});
)};
</script>

</head>
<body>
<div id="sliderContainer">
		
	<ul id="mySlides">
         <li class="slide"></li>
         <li class="slide"></li>
         <li class="slide"></li>
        </ul>
</div>
</body>
</html>

notes
the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this:

Code:

...
var el = options.element;
console.log(el);  //displays what I'd expect, a jQuery object

el = o.find('li');  // only find li's that are children of the div attached to the plugin
console.log(el);  //displays exactly what I'd expect, a jQuery object of JUST the right li's

// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...

Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff.

I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P




THANK YOU SO MUCH,
-Celt

Hello,

I have this short script he

Code:

function resizeImages() { //Function will be ran onload in the <body> tag
	var img = document.images; //Puts all the images in an array
	
	for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
		var parentElement = img[i].parentNode; //Gets parent element of image
		
		var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
		var imgWidth = img[i].width(); //Gets image width
		
		var parentHeight = parentElement.height(); //Gets height of parent element
		var imgHeight = img[i].height();//Gets image height
		
		if (parentWidth < imgWidth){
			img[i].width(parentWidth); //Sets width of image to width of parent element
			img[i].style.height = "auto"; //Scales height
		}
		
		if (parentHeight > imgHeight){
			img[i].height(parentHeight);  //Sets height of image to height of parent element
			img[i].style.width = "auto"; //Scales width
		}
		
		alert(parentWidth); //To test if parentNode is working correctly.  Should return an integer.
	}
}

It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage.

Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed.

The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder.

Thank you,
Jared

I am using a jQuery slider for a website but the W3C comes up with invalid because:

document type does not allow element "div" here
.before('<div id="buttons">')

Code:

<script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager:  '#buttons'
});
});
</script>

Any help with this would be appreciated thanks.

HI
I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id.
How can I do so?

Thanks

I am very new to javascript(and these forums) and I am teaching my self to use the canvas element.
I am trying to draw an image to the canvas but nothing is appearing.
And I am getting no error in the chrome console.
Can anyone see why?


Code:

function RPGanimation(options)
{	
	
	this.initcanvas(options);
	this.initbackground(options);
	
	
};

RPGanimation.prototype = {

initbackground: function(options){

this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();

},
initcanvas:function(options){

this.canvas	= document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}




};

I create the object in a webpage with the canvas element created just before that script tag...

I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only.

Kindly help.

I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script: Code:

var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
	
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}

here is the html
Code:

<html>
<head><title>Image dropdown</title>
<script type = "text/javascript" src = "experimento5.js">
</script>
</head>
<body onload = "initialize()">
<h1> Choose any image</h1>
<img  id = "thumbnail" src = "images/desk1.gif" >
<form>
<select id = "imageChooser">
<option value = "image1"> Bands</option>
<option value = "image2"> Clips</option>
<option value = "image3"> Lamp</option>
<option value = "image4"> Erasers</option>
</select>
</form>
</body>
</html>

Hello.

I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html

I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy.

Is there any way I could do that?

Thanks!

Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question.

At the moment I have the following function for handling events such as onclick, mouseover, mouseout.

Code:

function switcher(action, img){
	switch(action){
		case "hover": 
			//mouse is on image
			document.imgSeat.src = "images/hover.gif";
		break;
		case "click":
			//mouse has clicked image
			document.imgSeat.src = "images/click.gif";
		break;
		default:
			//mouse elsewhere
			document.imgSeat.src = "images/defaulter.gif";
		break;
	}
}

And the html the function refers to
Code:

<body>
<div id="imagesholder">
	<a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a>
</div>
</body>

What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead.
However I seem to be banging my head against the wall.

I've tried using the following

Code:

document.getElementById(img).src = "images/available.gif"; //no error, just does nothing

//where img is "0" instead of "seat0"
document.seat[img].src = "images/available.gif";  //error: document.seat is undefined

Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong.

Its about this:
http://www.wduffy.co.uk/blog/keep-el...omment-page-1/

Everywhere is used for a whole div on some side and when its on the top of the page.
But what if its in the middle..?
Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013
Scroll down and then up.Anyway to fix this?

I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news

I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out.

This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/

I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window.

If anyone can help me do this, it would be appreciated.

This is the iframe data that was generated by the wizard:

Code:

<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe>