JavaScript - Absolute Within Relative Not Working Bcuz Of Js

Hello everyone!

I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed?

Thanks
Lucas

Hi there, am working on an assignment to replicate the caesar cipher. i've written a function to move the cipher text one postion to the right and it works. i'm now trying to write another function that calls on the first where the signal character and index character do not match. The function then returns a new array.

Here is the first function and it's test call:

Code:

function right(letterArray)
{
	var lowerArray = new Array(letterArray.length);
	for (var letter = 0; letter < letterArray.length; letter = letter + 1)
	{		 
		lowerArray[letter] = letterArray[letter - 1];
		if(letter == letterArray.length - 1)
		{
		lowerArray[0] = letterArray[letterArray.length - 1];
		}
	}	
return lowerArray; 
}

function testTask02()
{
	right(cipherArray)
	
	window.alert(right(cipherArray));
	// calls the right() function with cipherArray, an array of lower case
	// characters as an argument.
	// displays the return value in a dialogue box.
}

And here is the bit i'm having trouble with:

Code:

function rotateToPosition(signalCharacter, indexCharacter, plainAlphabet, cipherAlphabet) 
{
	var resultArray = new Array(cipherAlphabet.length);
	for (var copy = 0; copy < cipherAlphabet.length; copy = copy + 1)
	{
		resultArray[copy] = cipherAlphabet[copy];
		resultArray[indexCharacter] = resultArray[copy];
	}
	var signalPosition = signalCharacter;
	for (var position = 1; position < plainAlphabet.length; position = position + 1)
	{
		if (plainAlphabet[position] == plainAlphabet[signalPosition])
		{
			signalPosition = position;			
		}
	}
	while (resultArray[indexCharacter] != plainAlphabet[signalPosition])
	{
		right(resultArray);
	}			
	return resultArray;
}

function testTask03()
{
	rotateToPosition('A', 'g', plainArray, cipherArray)
	
	window.alert(rotateToPosition('A', 'g', plainArray, cipherArray));
	// calls the rotateToPosition() function with signal character, 
	// index character, an array of upper case letters and an 
	// array of locwer case letters as arguments.
	// displays the return value in a dialogue box
	
	//TO DO TASK 3 (iii)
}

Been working on this for hours and my brain is fried! If anyone can point me in the right direction that would be awesome.

Many thanks

I am working on a puzzle that produces a container div.
Within that div are produced a grid of 9.16. or 25 tiles.
The tiles are positioned absolutely so I can be sure of their
relative placement.
The container div width and height is calculated according to a
preset tile width and height (square actually). So the width of
the container should adjust to either 3,4 or 5 tile widths and
heights.

The trouble is that the offset position of the top left tile is
different relative to the container for each different set of
tiles (even though it is supposed to be the same position
relative to the container for each).

I do this so I can apply dragging to the container div.
The tiles will follow the container when it is moved and
the game will not loose its place when tiles swap locations.
(one tile is elected as blank, and tiles, one to left, right, top
or bottm, with game content, will swap location with blank when
clicked)

Sample posted at http://www.jekillen.com/jekillen/con...e_dev_ALT.html

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>

Hi,

So here is my ordeal. I have an image that when a user clicks, a textarea should show up at the click. I specify textarea style top and left in javascript. On Firefox this works fine, but in Internet Explorer (IE) the textarea is created right before the image instead of on top of the image. It is like that it just ignored the top and left positions.

Also, users can query the database to show all the (mouse clicked) textareas that were created on the image. I coded this using PHP and a bunch of echo's. For some reason, the PHP code works with the CSS styles top and left specified meaning the textareas show up fine on top of the image. But creating a brand new textarea with a mouse click in javascript is not working.

Can someone help me figure out what I'm doing wrong for IE? Thanks!

Here is the javascript (does not work in IE, works in FF):
Code:

function createTextArea(e){
     getMouseCoords(e);//sets posy, posx
     var newDiv= document.createElement("textarea");
     newDiv.setAttribute("name","comment[]");
     newDiv.style.visibility="visible";
     newDiv.style.top= (posy) +'px';
     newDiv.style.left= (posx) +'px';
     newDiv.style.overflow="hidden";
     // append to the document FORM
     var form=getTagFromArray("form","commentform");
     form.appendChild(newDiv);
}

HTML that calls javascript:
Code:

<img id="theImage" src="random.gif" border=1 onclick="createTextarea(event);">

Here is the php when I load the textareas from the database (works in both IE & FF):
Code:

//get data from database
//forloop for each textarea saved in database
echo "<textarea  name=\"comment[]\" style=\"top:".($locy)."px;left:"
.($locx)."px;overflow:hidden;visibility:hidden;\" >".$row['comment']."</textarea>";
//end forloop

Background on my task:
My page accepts a url with various parameters passed in querystring. One of the parameter is the URL of the Image I wish to display on the page. I save this URL in a variable "imagesource"

To ensure the image is not bigger than the size permitted, I use image object to get the height and width of the image.

Now here's my code:
function foo(){
......
var imagesource = URL of the image;
....
var newImg = new Image();
newImg.src = imagesource;
var height = newImg.height;
var width = newImg.width;
....
}


Now, say if, imagesource = http://www.yourwebsite.com/yourimage.jpg
I expect newimage.src to be http://www.yourwebsite.com/yourimage.jpg
But I get
newimage.src = http://www.mywebsite.com/http://www.yourwebsite.com/yourimage.jpg

Browser in use : IE 8 (if it matters in this case)

Am I wrong in my assumption to begin with?

I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning.

I have a series of divs that are assigned absolute top and left values to
form a grid. The grid tiles are programmed to swap coordinates in pairs
when one of the pairs is clicked.
Then if I do a sampling of the divs by:
Code:

//returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
  {
   var GMC = GM.getElementsByTagName('div');
   var str = '';
   for(i = 0; i < GMC.length; i++)
      {
       if(GMC[i].hasChildNodes)
         {
          for(var j = 0; j < GMC[i].childNodes.length; j++)
             {
              var gmc = GMC[i].childNodes[j];
              var gmcTxt = gmc.childNodes[0].data;
              str += gmcTxt;
             }
         }
      }
  }
alert(str);

The list does not represent the positions of the divs as they
appear in the browser, but in a sequence that is saved in another
array when the divs are created.

The same is true for document.getElementById('[id assigned each div]')
The only way to detect the sequence is to do a long drawn out loop looking
for coordinate values, and comparing them to a prestablish template set
of values, then looping back through to compare the contents of each div
and decide if they are in the right place (visually).

The problem is that some divs may have the same content.
If the same content appears to be in the right place, the coordinates can
be wrong. So I need to detect the content and decide if it is right, regard-
less of the coordinates. This has to be done by the program (of course).

So the question is: What is javascript doing when it is asked to
Code:

document.getElementByTagName('[elem]');

In this case are the divs children of the document?
(in the case of my project, children of a container div)
And why would they not be detected in the order apparent in the browser
window?

I will post the current version and return and post a reply with the
url. http://www.jekillen.com/jekillen/con..._wise_dev.html

I have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it.

I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px;

You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll.

PHP Code:

<a href = "javascript:void(0)" 
    onclick = "document.getElementById('light<?php echo $count;?>').style.display='block';
    document.getElementById('light<?php echo $count;?>').style.position = 'fixed';
    document.getElementById('light<?php echo $count;?>').style.top = '10px';
    document.getElementById('fade<?php echo $count;?>').style.display='block'">
    
    ... [link] ...

</a>

PHP Code:

<div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper">
    ... [lightbox content] ...
</div>

PHP Code:

<style>
.log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;}
</style> 


Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box

I'm an experienced programmer (c, perl , python, bash) but absolutely newcomer with Javascript. The code I'm experimenting with is shown below. What I'm trying to do at this point is define a function in a script section in the head of my html page, then call that function in the onclick action of a form button. Sounds trivially simple, but for some reason it isn't doing what I expect.

The eventual result will be that the Javascript will launch a Silverlight video player using the values supplied by the end user, but for now I just want to get the basic buttons to work

<code>
<html>
<head>
<title>Silverlight player</title>
<script type="text/javascript">
var vProto;
var vServer;
var vStream;

function showMe() {
alert("In the function");
vProto = document.getElementById('proto').value;
vServer = document.getElementById('server').value;
vStream = document.getElementById('stream').value;
return false;
}

function alertMe() {
alert(document.getElementById('server').value);
return false;
}

</script>
</head>
<body>
<div id="dataEntry">
<form name="dataForm">
<table align='center'>
<tr>
<td>Protocol:</td>
<td><input type="text" id="proto" title="HTTP, RTSP, MMS"></td>
</tr>
<tr>
<td>Server:</td>
<td><input type="text" id="server" width='45'></td>
</tr>
<tr>
<td>Stream:</td>
<td><input type="text" id="stream"></td>
</tr>
<tr>
<td colspan='2' align='center'>
<input type='button' value='Monitor' onClick="showMe(); return false">
</td>
</tr>
<tr>
<td colspan='2' align='center'>
<input type='button' id='alert1' value='Alert!' onClick="alert(document.getElementById('server').value);">
<input type='button' id='alert2' value='Alert!' onClick="alertMe();">
</td>
</tr>
</table>
</form>
</div>
<div id='report'>
<script type="text/javascript">
document.write("Playing Silverlight stream at " + vProto + "://" + vServer + "/" + vStream + "<br />");
</script>
</div>
</body>
</html>
</code>

So, what embarrassing simple thing did I leave out?

Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations.

I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary.

Code:

<link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
  @import url('rss_include/style.css');
</style>

<script language="javascript">
    var XMLHttpRequestObject = false;
	var img = new Image();
	img.src = "rss_include/loading.gif";
    
    if ( window.XMLHttpRequest )
        XMLHttpRequestObject = new XMLHttpRequest();
    else if (window.ActiveXObject)
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

	function changeOptions()
	{
		LoadFeed();
	}
	
	function LoadFeed(value, initial)
	{		
        if ( XMLHttpRequestObject )
        {
            var dsource = "rss_include/ajax.php?loadfeed"; 

			if (value)
				dsource += "=" + value;
			else
			{
				var val = document.getElementById("rss_feed").value;
				if ( val == "" )
					document.getElementById("rss_feed").selectedIndex += 1;

				dsource += "=" + document.getElementById("rss_feed").value;
			}

			dsource += "&fulltext=" + document.getElementById("showtext").checked;
			dsource += "&showimages=" + document.getElementById("showimages").checked;
			
            XMLHttpRequestObject.open("GET",dsource);
            XMLHttpRequestObject.onreadystatechange = function()
            {
				if ( XMLHttpRequestObject.readyState != 4 )
				{
					document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";	
				}
				
                if ( XMLHttpRequestObject.readyState == 4 && 
                        XMLHttpRequestObject.status == 200 )
                {
					document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
                }
            }
            XMLHttpRequestObject.send(null);
        }		
	}
</script>

<?php

require_once("rss_include/config.php");

function LoadFile($xml_file)
{
	$xml = null;
	if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
	{
		echo '</select>';
		echo "Error opening XML feeds file: $xml_file<br>";
		return;
	}
	
	return $xml;
}

function ShowFeedOptions($xml_file)
{	
	echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';
	
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;
	
	$url = array();
	foreach($xml->feeds->category as $category)
	{
		echo "<option value=\"\">" . $category['name'] . "</option>";
		
		foreach($category->feed as $feed)
		{
			if ( $feed['name'] != "" )
			{
				// Add a spacing to the feeds
				$name = "&nbsp;&nbsp;&nbsp;&nbsp;" . $feed['name'];
				$url = str_replace("&", "%26", $feed['url']);
				$url = str_replace("http://", "", htmlspecialchars($url));
				echo "<option value=\"$url\">" . $name . "</option>";
			}
		}
	}
	
	echo '</select>';
	
	$options = array();
	$rss = $xml->options[0];

	if ( strcasecmp($rss['fulltext'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");
		
	if ( strcasecmp($rss['images'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");

	return $options;
}

function SetOptions($options)
{
	if ( sizeOf($options) == 2 )
	{
		echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
		echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
	}
}

if ( isset($_GET['links']) )
{
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;

	// end the link editing
	return;
}

?>
<div class="container" id="container_div">
	<a name="top"></a>
		<div class="header_div">
			<div style="display:run-in;float:left;">
			<font class="graytext">RSS Feed:</font>
			<?php $options = ShowFeedOptions($feeds_xml); ?>
			
			<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
			<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
			</div>
			
			<?php SetOptions($options); ?>
		</div>
	<div class="rss" id="rss_div">
		<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
	</div>
	<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>

<-- CSS BELOW -->


Code:

body
{
	overflow: auto;
	font-family: arial;
}
div.header_div
{
	position: relative;
	/*background-color: #EFEFEF;*/
	width: 100%;
	overflow: auto;
	margin: auto;
}
div.container
{
	/*border: 1px solid black;
	background-color: #EFEFEF;*/
	position: relative;
	margin: auto;
	display: block;
	overflow: auto;
	/* SPECIFY HEIGHT & WIDTH AS DESIRED */
	height: 90%;
	width: 80%;
}
div.rss
{
	width: 99%;
	margin: 2px;
	background-color: tan;
	position: relative;
	/*border: 1px solid black;*/
}
img.loading
{
	position: relative;
	margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
	display: inline;
	color: blue;
}
a.rss_link:hover
{
	color: #BBBBFF;
}
a.rss_link:visited
{
	color: black;
}
a.top,a.top:active {
	text-decoration: none;
	font-size: 10pt;
	display: inline;
	color: black;
}
a.top:hover {
	text-decoration: underline;
	color: brown;
	display: inline;
}
font.graytext
{
	font-size: 10pt;
	color: #444444;
}
font.rss_title
{
	font-size: 12pt;
	font-weight: bold;
	text-decoration: underline;
}
font.rss_date
{
	font-size: 9pt;
	font-weight: normal;
	color: black;
	display: block;
}
font.rss_description
{
	font-size: 12pt;
	color: blue;
}
select
{
	color: black;
	font-size: 10pt;
	background-color: #EAEAEA;
}

any help would be greatly appreciated.....thanks

I hope I have this post in the right place! Any help would be very much appreciated...

I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website.

This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser)

My javascript is he
http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces)

The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces)

In the head I have:
<script type="text/javascript" src="../javascript/backgroundchange.js"></script>

...then I have: <body onload="set_style_from_cookie()">

...and for users to choose which background:
<form>
<input type="image" src="../images/white-background-thumb.jpg"
onclick="switch_style('bg1');return false;"
name="theme" value="White" id="bg1">
etc...
</form>

My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally!

I have tried putting the javascript directly onto each page but I still had the same problem.

I hope someone can help, I will be so grateful if I can get this to work.

Many thanks indeed!

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!

Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php

The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/
The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/
And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images.

I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing...

First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine.

Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing.

Thanks for any help.