div display problems
This problem looks simple, so *mea culpa* in advance if it's poor etiquette to ask it. 

I have some divs inside a tab panel div which is set to display.

    <div id="fragment-5a" class="ui-tabs-panel" style="display: block;">
        <div id="mainpic">
        <img align="middle" alt="somewhere" 
        src="http://localhost/gopag3/projects/somest.jpg"></div> 
    <div id="altpic"><img src="#"></div> 
    <div id="mainpicblurb">texttexttext</div></div>

One div '**mainpic**' holds an img. The second '**mainpicblurb**' holds text and links inside a sub-div '**piclinks**'. Div '**altpic**' is empty and hidden (display:none) but otherwise an exact copy of 'mainpic'.

I am trying to write a script which does the following:

 1. hides 'mainpic'
 2. grabs href (img src) and adds it as img src to 'altpic'
 3. shows 'altpic'

Here's what I have done.

    $(document).ready(function() {
		$('#piclinks div a').click(function() {
			var link = $(this).attr('href');
			$('#mainpic').hide();
			$('#altpic img').replaceWith('<img align="middle" src="' + link + '">');
			$('#altpic').show();
		return false;
		});	
	});

This does not work overall. The href is successfully grabbed. The img src is successfully dumped into 'altpic' and 'return false' works ok, but neither 'mainpic' or 'altpic' have the right display attribute. 

It may be that the tabs CSS is overriding whatever I do, although looking at it in Firebug I can't see how.

It's perfectly possible the above is a long string of howlers. My gut instinct is that the selection process is wrong. I need to traverse the DOM from #piclinks div a back up the tree to gather in #mainpic and #altpic, using parent() and siblings(), possibly. 

Anyway, suggestions/understanding criticism welcome.

Tom


div display problems
===

This problem looks simple, so *mea culpa* in advance if it's poor etiquette to ask it. 

I have some divs inside a tab panel div which is set to display.

    <div id="fragment-5a" class="ui-tabs-panel" style="display: block;">
        <div id="mainpic">
        <img align="middle" alt="somewhere" 
        src="http://localhost/gopag3/projects/somest.jpg"></div> 
    <div id="altpic"><img src="#"></div> 
    <div id="mainpicblurb">texttexttext</div></div>

One div '**mainpic**' holds an img. The second '**mainpicblurb**' holds text and links inside a sub-div '**piclinks**'. Div '**altpic**' is empty and hidden (display:none) but otherwise an exact copy of 'mainpic'.

I am trying to write a script which does the following:

 1. hides 'mainpic'
 2. grabs href (img src) and adds it as img src to 'altpic'
 3. shows 'altpic'

Here's what I have done.

    $(document).ready(function() {
		$('#piclinks div a').click(function() {
			var link = $(this).attr('href');
			$('#mainpic').hide();
			$('#altpic img').replaceWith('<img align="middle" src="' + link + '">');
			$('#altpic').show();
		return false;
		});	
	});

This does not work overall. The href is successfully grabbed. The img src is successfully dumped into 'altpic' and 'return false' works ok, but neither 'mainpic' or 'altpic' have the right display attribute. 

It may be that the tabs CSS is overriding whatever I do, although looking at it in Firebug I can't see how.

It's perfectly possible the above is a long string of howlers. My gut instinct is that the selection process is wrong. I need to traverse the DOM from #piclinks div a back up the tree to gather in #mainpic and #altpic, using parent() and siblings(), possibly. 

Anyway, suggestions/understanding criticism welcome.

Tom

