Centering thumbnailviewer with Jquery?

[BryanYoung]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

Hi all! I hope someone here can help me out with this. I'm coding my photography portfolio, and I decided to use Dynamic Drive's thumbnailviewer as my gallery. It works marvelously, the only problem is that in the .js code, the thumbnail viewer is centered to the page, and I don't want it to be centered to the page. I don't know much about javascript, so I can't seem to figure out how to prevent it from being centered. My goal is to be able to position it freely using CSS isntead of Jquery. Below is part of the code that I THINK is where the centering is taking place. Can someone please tell me how to prevent the javascript centering so I can center it using css?? Thanks in advance to whomever takes the time to help me! The full code can be found through http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

[jscheuer1]

Can someone please tell me how to prevent the javascript centering so I can center it using css??

What does it matter if it's centered using javascript or css? It's still centered.

I think what you mean is you want to place it somewhere else besides center using css. To do that doesn't require changing the script at all, simply overriding it. In fact, depending upon where you want the viewer to appear, you might only want to override part of what the script is doing.

To override anything the script is doing, use the !important keyword in your style. Like in the thumbnailviewer.css file we see:


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

You could do:


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: fixed !important;
left: 10px !important;
top: 100px !important;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

So now, no matter what the script does, the viewer will always be 10px from the left of the window and 100px from the top. Or:


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 50px !important;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

Now the script will still be relied upon to center it vertically within the viewable area of the window, but it will always be 50px from the left edge of the page. Careful here, if the page has a horizontal scrollbar, the viewer might be partially or completely hidden if the page has been horizontally scrolled.

Whatever change(s) you make -

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

You might want to see:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

Where the 'viewer' is simply a div on the page which you can place anywhere you like in the normal flow of the layout.

[BryanYoung]

John, thank you so much for responding! I never have much luck with getting anyone to respond to me on these kinds of forums..

I must say thank you for telling me about the !important keyword. I had no idea that existed. That's going to help me greatly in other projects I'm working on! It doesn't help me much with what I'm trying to accomplish, though. See, the layout that I'm creating for my portfolio is a fluid layout, and thus I'm using percentages to set the widths and heights of my divs. So positioning the thumbnailviewer how you suggested wouldn't work because then the thumbnailviewer wouldn't adapt to resizing the browser like the rest of the elements on my layout do.

To elaborate a bit more, I have a div with a class of "container" floated to the right of the main wrapper, and I want the thumbnailviewer to pop up when a thumbnail is clicked, but I want it to pop up INSIDE of the container div. Right now, it's popping up in the center of the page, thus not aligning with the container div. To see the page I'm working on, go to http://sincerelybryan.com/tester3

You'll see that when you click a thumbnail, the viewer pops up at the center of the page, thus you can still see that the thumbnails are in the background. I want the viewer to completely hide the thumbnails when it pops up. I could accomplish that if I could position the popup/thumnailviewer inside the container div and say align it to the top and left using top: 0 and left: 0.

I actually got it to work the way you suggested (which you can see at http://sincerelybryan.com/tester2/sample-project2) but it worked because that version is a fixed layout. I later decided to make my site fluid, and now I can't get it to work. Sorry if this is long.. Any suggestions John?

[jscheuer1]

.
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, add this script to the end of the head section:


<script type="text/javascript">
jQuery(function($){
$('#thumbBox').prependTo('#container .container');
});
</script>

Set these styles in the stylesheet:


#container .container {position: relative;}
#thumbox {top: 0 !important; left: 0 !important; padding: 0 !important;}

That should do it!

The browser cache may need to be cleared and/or the page refreshed to see changes.

Also be aware that the size of the thumbnail viewer (#thumbBox) is dependent upon the size of the image being shown in it, and that the size of the the thumbnail field (div class="thumbnails") is dependent upon the number and size of the thumbnail images in it, so unless those match up, there will not be the type of total coverage you're looking for.

Further, I'm not certain why you would want this anyway. In the average browser, the larger image is too large. I think it would be better to leave these things alone, have a smaller larger image, and allow it to be centered on the page.

[BryanYoung]

John, you are a SAVIOR. It worked! It looks perfect now. Thank you so incredibly much. Last night I was nearly ready to pull all my hair out, but decided to wait to see if you responded with a solution before turning to something so drastic. Haha.

And you are correct that the larger image would be too large in the average browser. I'm creating a fluid website with three different stylesheets, and the one I'm working on right now (the one you saw when you went to my site) is the widest version that the user will see when the browser window is completely maximized. Next, I'm going to code a stylesheet for the "average-sized" browser window.

Once again, thank you so incredibly much.

[jscheuer1]

As long as in the average sized version the larger image and thumbs are proportionally smaller, it should all work out. That and of course that the css and/or javascript that detects an average sized browser works adequately.