JavaScript - Positioning Blocks Resolution Independant

All-

I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use:

Code:

<script type="text/javascript" src="/jwplayer/swfobject.js"></script>
        <script type="text/javascript">


var x = (+screen.width);
var y = (+screen.height);


if (x == '1920' & y == '1080')
        {
                var xn = 1440;
                var yn = 900;
                document.write(xn);
                document.write(yn);






        }

if (x == '1024' & y == '600')
        {
                var xn = 900;
                var yn = 400;
                document.write(xn);
                document.write(yn);
        }



                swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
        </script>

To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be.


Here is where the video code is


Code:

 <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
                <param name="movie" value="/jwplayer/player.swf" />
                <param name="allowfullscreen" value="true" />

                <param name="allowscriptaccess" value="always" />

                <?
                echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
                ?>
                <object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
                        <param name="movie" value="/jwplayer/player.swf" />

                        <param name="allowfullscreen" value="true" />

                        <param name="allowscriptaccess" value="always" />
                        <?
                        echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
                        ?>
                        <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>

                </object>
        </object>

In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn.

Any ideas? Please Please help! been stumped on this all afternoon!!

Thanks
Defyer!

im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.

Hi all,

I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images:

Code:

<script language="JavaScript" type="text/javascript">
				<!--
					if (document.images) {

						homebuttonup       = new Image();
 						homebuttonup.src   = "./Images/nav/home2.png" ;
  						homebuttondown     = new Image() ;
  						homebuttondown.src = "./Images/nav/home2.png" ;
	
						newsbuttonup       = new Image();
 						newsbuttonup.src   = "./Images/nav/news.png" ;
  						newsbuttondown     = new Image() ;
  						newsbuttondown.src = "./Images/nav/news2.png" ;
	
						gallerybuttonup       = new Image();
 						gallerybuttonup.src   = "./Images/nav/gallery.png" ;
  						gallerybuttondown     = new Image() ;
  						gallerybuttondown.src = "./Images/nav/gallery2.png" ;
						
						}

						function buttondown( buttonname )
						{
    						if (document.images) {
    					  document[ buttonname ].src = eval( buttonname + "down.src" );
    						}
							}
						function buttonup ( buttonname )
							{
  						  if (document.images) {
    					  document[ buttonname ].src = eval( buttonname + "up.src" );
    					}
					}
				// -->
			</script>
           
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>

This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated!

Hey guys I've been trying to get this script working to change a couple attributes in the CSS but it hasn't been working.

It's supposed to change the left and right margins of the #content tag if the resolution is greater that 1024x768. The text doesn't seem to want to stay in the center.

Heres the code:
Code:

<!--
if (screen.width > 1024)
{
ChangeCSS('#content','marginLeft','28%');
ChangeCSS('#content','marginRight','29%');
}
//-->

Heres the CSS:
Code:

#content {
        margin-bottom:0;
        margin-top:0;
        margin-left:24%;
        margin-right:27%;
	position: absolute;
	width: 38em;
}

The CSS code is all inline because this is a tumblr and I don't have a place to host style sheets.

Can anyone tell me whats wrong?

Thanks!

I am struggling to find a solution that enables me to have a div that is a certain percentage height of the window and then when the user is using a different resolution, it remains at that percentage of the screen height - not going off of the bottom as I have a fixed percentage no scroll full background image.

I have sorted it for width but can't get it to work for height. any ideas? lol

Bee
x

Hi there.

I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well.

Code:

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
 window.location="highres.html";
}
else
{
  window.location="lowres.html";
}
//-->
</SCRIPT>

I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions.

Is this an acceptable method, or do you think i'll run into problems?

Any advice would be great.

Cheers.
Pat.

I have this script:

Code:

<SCRIPT language="JavaScript">
<!--
// small
if ((screen.width>=1024) && (screen.width<1280))
{
 window.location="0_framside/1_small/849x507.html";
}

// medium
else if ((screen.width>=1280) && (screen.width<1400))
{
 window.location="0_framside/2_medium/1105x507.html";
}

// large
else if ((screen.width>=1400) && (screen.width<1600))
{
 window.location="0_framside/3_large/1225x639.html";
}

// xlarge
else if ((screen.width>=1600) && (screen.width<1920))
{
 window.location="0_framside/4_xlarge/1425x789.html";
}

// manual
else
{
  window.location="resolution.html";
}
//-->
</SCRIPT>

See the page in action he http://www.kollalfa.com/temp_LesForMeg/index2.html

The problem?

On a computer with 1280x1024 resolution, IE detects it to be 1024 (thus sending the user to the wrong page). It works perfectly in all other browsers (that I have tried).

Any ideas? Thanks in advance!

Hi All!
I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page.

Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code.

Thanks in advance

Hi,

I know this is a very bad idea, but I need to do it just to prove a point. I was wondering if it is possible to remove content from a website based on the screen resolution, rather than have to redirect to a new URL.

For example:

Code:

<if height greater than 800px>
        Lots of code
<else>
       <br/>
</if>

Thank you

I have set javasscript code to detect and store into variable screen resolution.
How to store this javascript into variable PHP?



PHP Code:
<script type="text/javascript">
var ScreenWidth=screen.width; var ScreenHeight=screen.height; var ScreenResolution=ScreenWidth+"x"+ScreenHeight; document.write("<span style=\"color:red;text-transform: capitalize;\">your current screen resolution is " + ScreenResolution + "</span>");
--></script>
}
</script>

<?PHP
$screen=str_replace("#","",$resolution); echo "screen width is:".$screen;
?>

Dear Forum,

I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with:

an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res)

a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen)

an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+)

ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript:

Code:

<SCRIPT language="JavaScript">
if (screen.width<1000)
{document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}
</SCRIPT>

This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser.

If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/

many thanks

Will

Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html.



If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html"  width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe>

If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html"  width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe>

This is the format that I would want it in:

Code:

<script type="text/javascript">

if (condition)
  {
  code to be executed if condition is true
  }
else
  {
  code to be executed if condition is not true
  }

</script>

http://sb.cesarvillaca.com/footer-bug.html (code at the bottom)

I have been trying like crazy to get the positioning of this nav correct. I need to get each of the navs to position exactly over their respective links. So the white "Products" word (over state) should sit exactly over the purple "Products" link. It should stick in the correct position on screen resolution change too. This nave will be localized too so more letter should be able to be added to each line of the pop-ups and still stick in its spot. These are all the issues I am having. PLEASE HELP! I have spent soooo much time on this and its driving me crazy!!

Code:

<!DOCTYPE html>
<html>

<head>

	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="Content-Language" content="en-us"/>
	<meta http-equiv="imagetoolbar" content="no"/>
	<meta name="robots" content="index,follow,archive"/>

	<style type="text/css" title="">
	body { 
		font-family: Arial, Helvetica, sans-serif;
		line-height: 115%; 
		font-size:10px;
		background-color: #000000;
		height:100%;
		color:#FDB813;
	}
	
	.auto-width {
		display:-moz-inline-stack;
		display:inline-block;
		zoom:1;
		*display:inline;
	}

	#footer-container {
		background-color:#000;
		height:420px;
	}

	#footer{
		margin:0 auto; 
		width:980px; 
		background-color:#000;
	}

	#footer-nav {
		margin:30px 0 0 0px;
		width:980px;
		position:relative;
	}

	.fnpc {
		position:absolute;
		display:none;
		top:0px;
		left:19px;
		z-index:10;
	}

	.fnp {
		border:1px solid #555555; 
		background-color:#252526;
		color:#888888;
		text-align:left;
		padding:10px;
		position:relative;
		z-index:10;
		top:-34px; 
		left:0px;
	}

	.fto {
		border-top-style:none;
		border-right-style:solid;
		border-bottom-style:solid;
		border-left-style:solid;
		border-width:1px;
		border-color:#555555;
		background-color:#252526;
		position:absolute; 
		bottom:-1px; 
		left:0px; 
		z-index:11;
	}

	.fnc {
		font-size:10px;
		color:#ffffff;
		padding:10px;
		height:15px;
		cursor:pointer;	
	}

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>

<body>

<!-- Footer Starts Here. Everything Below should be stuck in an include. -->
<div id="footer-container" style="margin-top:200px;">
	
	<div id="footer">

		<div id="footer-nav">

			<div style="float:left; margin-right:50px;">
			
				<div id="fnp-container-Products" class="fnpc">
					<div id="fnp-Products" class="fnp auto-width">
						<a href="" class="">Aaaaaaa bbbbbb</a><br>
						<a href="" class="">Baaaaaa bbbbbb</a><br>
						<a href="" class="">Caaaaaa bbbbbb</a><br>
						<a href="" class="">Daaaaaa bbbbbb</a><br>
						<a href="" class="">Eaaaaaa bbbbbb</a><br>
						<a href="" class="">Faaaaaa bbbbbb</a><br>
					</div>
					<div id="footnav-Products" class="fto">
						<div class="fnc auto-width">Products</div>
					</div>
				</div>

				<a href="" class="footer-nav-link footer-Products">Products</a>

				<script type="text/javascript">
				<!--
				$('.footer-Products').mouseenter(function() {
					$('.fnpc').hide();
					$('#fnp-container-Products').show();
					$("#fnp-container-Products").css({ 
						"top":  $("#fnp-Products").height() + "px", 
						"left":  $("#fnp-Products").height() + "px" 
					});
				});
				//-->
				</script>

			</div>
			<div style="float:left; margin-right:50px;">
			
				<div id="fnp-container-Solutions_Center" class="fnpc">
					<div id="fnp-Solutions_Center" class="fnp auto-width">
						<a href="" class="">Aaaaaaa bbbbbb ccccc</a><br>
						<a href="" class="">Baaaaaa bbbbbb ccccc</a><br>
						<a href="" class="">Caaaaaa bbbbbb ccccc</a><br>
						<a href="" class="">Daaaaaa bbbbbb ccccc</a><br>
						<a href="" class="">Eaaaaaa bbbbbb ccccc</a><br>
						<a href="" class="">Faaaaaa bbbbbb ccccc</a><br>
					</div>
					<div id="footnav-Solutions_Center" class="fto">
						<div class="fnc auto-width">Solutions Center</div>
					</div>
				</div>

				<a href="" class="footer-nav-link footer-Solutions_Center">Solutions Center</a>

				<script type="text/javascript">
				<!--
				$('.footer-Solutions_Center').mouseenter(function() {
					$('.fnpc').hide();
					$('#fnp-container-Solutions_Center').show();
					$("#fnp-container-Solutions_Center").css({ 
						"top":  $("#fnp-Solutions_Center").height() + "px", 
						"left":  $("#fnp-Solutions_Center").height() + "px" 
					});
				});
				//-->
				</script>

			</div>
			
		</div>
	
	</div>

</div>

<script type="text/javascript">
<!--
$('.fnpc').mouseleave(function() { 
	$('.fnpc').hide();
});
//-->
</script>

</body>
</html>

Hello,

I need help with positioning elements and collapsing them after click on any of these elements. At this site: LINK i set the blocks using left and top property with !important directive in CSS but that is wrong, because blocks have not curling up after click. I find in JS file function which is responsible for curling and second function for expand back blocks. But i dont know how to set the positions of blocks in Javascript. Below i annex the JS code:

Code:

(function($)
{	
	/**************************************************************************/

	var Geneva=function(geneva,page)
	{
		/**********************************************************************/

		var $this=this;

		this.geneva=$(geneva);

		this.genevaListMenu=$('#geneva-list-menu');
		this.genevaListMenuElement=$('#geneva-list-menu li');

		this.genevaBoxMenu=$('#geneva-box-menu');
		this.genevaBoxMenuElement=$('#geneva-box-menu li');

		this.genevaCloseButton=$('.geneva-close-button');

		this.genevaPage=$('#geneva-page');
		this.genevaWindow=$('#geneva-window');

		this.genevaBoxMenuElementWidth=parseInt(this.genevaBoxMenuElement.css('width'));
		this.genevaBoxMenuElementHeight=parseInt(this.genevaBoxMenuElement.css('height'));

		this.genevaBoxMenuElementMargin=10;
		this.genevaBoxMenuElementWidth=parseInt($('#geneva-box-menu li').css('width'));

		this.genevaWidth=parseInt(this.geneva.css('width'));

		this.page=page;

		this.currentHash='';
		this.previousHash='#!/main';

		this.currentPage=-1;
		this.previousPage=-1;

		this.scrollbar='';

		/**********************************************************************/
		/**********************************************************************/

		this.load=function()
		{
			var i=0;
			$this.genevaBoxMenuElement.each(function() 
			{
				var url=$(this).css('background-image').replace(/^url|"|\(|\)/ig,'');
				var image=$(document.createElement('img')).attr('src',url+($.browser.msie ? '?i='+getRandom(1,10000) : ''));

				$(image).bind('load',function() 
				{
					if((++i)==$this.genevaBoxMenuElement.length)
					{
						$this.genevaBoxMenu.hover(

							function() 
							{
								$(this).children('li').animate({opacity:0.8},500);
							},
							function() 
							{
								$(this).children('li').animate({opacity:1},500);
							}
						);

						$this.geneva.children('.preloader').remove();
						$this.genevaBoxMenuElement.css('display','block');
						$this.expand({onComplete:function() { $this.enable=true; $this.handleHash(); }});
					};			
				});
			});               
		};

		/**********************************************************************/
		/**********************************************************************/

		this.handleHash=function()
		{
			if(window.location.hash=='') window.location.href='#!/main';

			$this.currentHash=window.location.hash;					
			if($this.currentHash!=$this.previousHash) $this.doHash();

			$(window).bind('hashchange',function(event) 
			{
				event.preventDefault();

				if($this.isEnable()==false) return; 

				$this.currentHash=window.location.hash;
				$this.doHash();
				$this.previousHash=$this.currentHash;
			});  
		};

		/**********************************************************************/

		this.doHash=function()
		{
			if(!$this.enable) return(false);
			$this.enable=false;                

			var isOpen=$this.isOpen();
			var currentPage=$this.checkHash();

			if(currentPage==false) 
			{
				$this.enable=true;
				return(false);
			};

			$this.currentPage=currentPage;
			if($this.previousPage==-1) 
				$this.previousPage=$this.currentPage;

			if($this.currentPage==-1) $this.close();
			else 
			{
				$this.genevaBoxMenuElement.removeClass('selected');
				$('#geneva-box-menu-element-'+$this.currentPage).addClass('selected');
				$this.open(isOpen);               
			};

			return(true);
		};

		/**********************************************************************/

		this.checkHash=function()
		{
			if($this.currentHash=='#!/main') return(-1);

			for(var id in $this.page)
			{
				if('#!/'+id==$this.currentHash) return(id);
			};

			return(false);
		};

		/**********************************************************************/
		/**********************************************************************/

		this.collapse=function(event)
		{
			var i=0;
			$this.genevaBoxMenuElement.each(function() 
			{
				$(this).animate({top:($this.genevaBoxMenuElementMargin+(i*10)),left:$this.genevaBoxMenuElementMargin, opacity:1},getRandom(100,1000),'easeInOutQuint',function()
				{
					if((++i)==$this.genevaBoxMenuElement.length) $this.doEvent(event);
				});
			});  
		};

		/**********************************************************************/

		this.expand=function(event)
		{
			var i=0,j=0,k=0,top=0,left=0;

			$this.genevaBoxMenuElement.each(function() 
			{
				top=(j*$this.genevaBoxMenuElementHeight)+$this.genevaBoxMenuElementMargin*(j+1);
				left=(i*$this.genevaBoxMenuElementWidth)+$this.genevaBoxMenuElementMargin*(i+1);

				$(this).animate({top:top,left:left,opacity:1},getRandom(100,1000),'easeInOutQuint',function()
				{
					if((++k)==$this.genevaBoxMenuElement.length) $this.doEvent(event);
				});

				if((++i)%3==0)
				{
					i=0;
					j+=1;
				};
			});       
		};

		/**********************************************************************/
		/**********************************************************************/

		this.open=function(isOpen)
		{
			$this.selectListMenuElement();

			if(isOpen)
			{
				$this.closePage({onComplete:function() 
				{
					$this.geneva.animate({width:$this.genevaBoxMenuElementWidth+($this.genevaBoxMenuElementMargin*2)},200,'easeInOutBounce',function() 
					{
						$this.geneva.animate({width:$this.genevaWidth},200,'easeInOutBounce',function() 
						{
							$this.openPage();
						});
					});             
				}});   
			}
			else
			{
				$this.collapse({onComplete:function() 
				{
					$this.openListMenu(true,{onComplete:function() 
					{
						$this.openPage();
					}});
				}});                      
			};
		};

		/**********************************************************************/

		this.close=function()
		{
			$this.closePage({onComplete:function() 
			{
				$this.openListMenu(false,{onComplete:function() 
				{
					$this.genevaBoxMenuElement.removeClass('selected');
					$this.expand({onComplete:function() 
					{
						$this.enable=true;                            
					}});
				}});
			}});
		};

		/**********************************************************************/
		/**********************************************************************/

		this.getPageData=function(key,property)
		{
			return($this.page[key][property]);
		};

		/**********************************************************************/

		this.openPage=function()
		{
			$this.clearPage();
			$this.showWindowPreloader(true);
			$this.showWindow(true);

			$.get('page/'+$this.getPageData($this.currentPage,'html'),{},function(page) 
			{	
				$this.genevaPage.html(page);                    

				jQuery.getScript('page/script/base.js',function() 
				{
					if($this.getPageData($this.currentPage,'js')!='')
						jQuery.getScript('page/script/'+$this.getPageData($this.currentPage,'js'));
				});

				$this.createScrollbar();
				$this.showWindowPreloader(false);

				$this.showPage(true,{onComplete:function() 
				{
					$this.enable=true;
					$this.showCloseButton(true);
					$('#geneva-box-menu-element-'+$this.currentPage+' a').attr('href','#!/main');
					$this.previousPage=$this.currentPage;
				}});            
			},
			'html');             
		};

		/**********************************************************************/

		this.closePage=function(event)
		{
			$this.showCloseButton(false);  
			$(':input,a').qtip('destroy');

			if($this.previousPage!='-1')
				$('#geneva-box-menu-element-'+$this.previousPage+' a').attr('href','#!/'+this.previousPage);

			$this.showPage(false,{onComplete:function() 
			{
				$this.clearPage();
				$this.showWindow(false);   
				$this.doEvent(event);  
			}});                
		};

		/**********************************************************************/
		/**********************************************************************/

		this.openListMenu=function(open,event)
		{
			$this.genevaListMenu.animate({height:(open ? 370 : 0)},getRandom(100,500),'easeInOutQuint',function()
			{
				$this.doEvent(event);                 
			});
		};

		/**********************************************************************/

		this.selectListMenuElement=function()
		{
			$this.genevaListMenu.find('a').removeClass('selected');
			$('#geneva-list-menu-element-'+$this.currentPage).addClass('selected');               
		};

		/**********************************************************************/
		/**********************************************************************/

		this.isOpen=function()
		{
			return($this.currentPage==-1 ? false : true);
		};

		/**********************************************************************/

		this.isEnable=function()
		{
			if(!$this.enable)
			{
				window.location.href=$this.previousHash;
				return(false);
			}  

			return(true);
		};

		/**********************************************************************/
		/**********************************************************************/

		this.clearPage=function()
		{
			$this.genevaPage.html('');
		};

		/**********************************************************************/

		this.showPage=function(show,event)
		{
			$this.genevaPage.animate({opacity:(show ? 1 : 0)},getRandom(100,1000),'easeInOutQuint',function()
			{
				$this.doEvent(event);                 
			});               
		};

		/**********************************************************************/
		/**********************************************************************/

		this.showCloseButton=function(show)
		{
			$this.genevaCloseButton.css('display',show ? 'block' : 'none');
		};

		/**********************************************************************/
		/**********************************************************************/

		this.showWindow=function(show)
		{
			if(show) $this.genevaWindow.css('display','block');
			else $this.genevaWindow.css('display','none');
		};

		/**********************************************************************/

		this.showWindowPreloader=function(show)
		{
			if(show) $this.genevaWindow.addClass('preloader');
			else $this.genevaWindow.removeClass('preloader');
		};

		/**********************************************************************/
		/**********************************************************************/

		this.createScrollbar=function()
		{
			$this.scrollbar=$this.genevaWindow.jScrollPane({maintainPosition:false,autoReinitialise:true,mouseWheelSpeed:20}).data('jsp');
		};

		/**********************************************************************/
		/**********************************************************************/

		this.doEvent=function(event)
		{
			if(typeof(event)!='undefined')
			{
				if(typeof(event.onComplete)!='undefined') event.onComplete.apply();
			};                  
		};

		/**********************************************************************/
	};

	/******************************************************************/

	$.fn.geneva=function(page)
	{
		/***************************************************************/

		var geneva=new Geneva(this,page);
		geneva.load();

		/***************************************************************/
	};

	/******************************************************************/

})(jQuery);

and the correct working site (but with another design) Geneva - Business vCard Template

Sorry for my english and please help me

Greetings

Hi, I am sure there is a simple thing I am doing wrong.

I am using serif plus, (instead of dreamweaver), I have 12 pages, and am using 3 seperate master pages for various pages.

Master page B holds the repetitive information for page7.html and contained within page7 is an iframe linked to page18.html. On page7.html, beside the iframe I have six 'hot spots' anchored within the page displayed (page18). This works really well.

The problem I have is when page7.html loads it comes up at the top of the iframe, (half way down the main page), not the top of the page that contains it. I have tried putting an anchor at the top of page7.html and inserting code as in OnLoad, go to anchor etc., window.location, and just about everything else I could think of, but nothing seems to make the page open in the correct place. You have to scroll to the top each time.

Can anyone help with this please.

Not very experienced but hoping to learn.

Sybs