|
JavaScript - Css Positioning
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>
Similar TutorialsI'm centering a section of html between a header and a footer on window load and resize. However, there are some strange issues happening. I'll list a couple and the code below. I also have an external header.php, footer.php, and profile.css that are used, but I don't want to post unnecessary code. If needed, I'll be glad to post it up though. Any help would be greatly appreciated. This one has got me stumped. -If the window is reduced lower than full screen, as the window is lengthened the footer will jump over the last line of text in the middle content. -If the window is loaded in a reduced window, then fullscreened, sometimes the middle content will not recenter. HTML Code: <?php
session_start();
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/UserFunctions.php");
//Checks for logout function
if(isset($_GET['logout'])){
logOut();
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user is not logged in
if(isset($_SESSION['loggedIn']) != True){
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user has saved new account information
if(isset($_POST['accountSaved'])){
accountChangeSave($_POST['firstName'],$_POST['middleName'],$_POST['lastName'],$_POST['agency'],$_POST['password'],$_POST['email']);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/profile.css"/>
<script type="text/javascript" src="jsFiles/main.js"></script>
<title>Home</title>
</head>
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<!-- Header Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/header.php");
?>
<div id="main">
<!-- Administrator profile -->
<?php
if($_SESSION['userType'] == 'admin' or $_SESSION['userType'] == 'superAdmin'){
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/groupSilhouette.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Manage Users</div>
</div>
</div>
<!-- Basic user profile -->
<?php
}else{
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/briefcase.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Apps</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<!-- Footer Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/footer.php");
?>
</body>
</html>
CSS Code: /*Site Wide*/
body {
margin: 0;
padding: 0;
color: #ffffff;
font-family: Gill Sans, sans-serif;
background-color: #F1F1F1;
height:100%;
}
html{
overflow:scroll;
height:100%;
}
img{
border-width:0px;
}
#wrap{
min-height:100%;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: white;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
/*Middle Content*/
#main{
overflow:auto;
padding-bottom: 170px;
}
#middleContent{
position:relative;
width:100%;
min-width:900px;
text-align:center;
}
#error{
size:x-large;
color:black;
font-weight:600;
}
/*header.php*/
#header{
background-image: url("../images/backgroundOrange.jpg");
position: relative;
height: 100px;
width: 100%;
min-width:900px;
}
#navigationBar {
height:1em;
font-family: sans-serif;
position: absolute;
font-size: 18px;
top:40px;
right:0%;
}
#topLogo {
position: absolute;
top: 18px;
}
/*footer.php*/
#titleText{
font-size:large;
font-weight:2;
}
#footer{
position: relative;
background-color:#1F1F1F;
color:#ffffff;
min-width:900px;
margin-top:-170px;
height: 170px;
width:100%;
clear:both;
}
#bottomCopyright{
position:relative;
top:150px;
color: #BBBBBB;
font: sans-serif;
width:100%;
text-align:center;
font-size:small;
margin:auto;
}
#infoImageContainer{
position:relative;
float:left;
margin-top:50px;
left: 20px;
}
#infoImage{
position:relative;
height:40px;
}
#infoTextContainer{
position:relative;
float:left;
height:50%;
margin-top:1.5em;
left: 40px;
}
#infoText{
font-size:small;
position:relative;
height:3em;
}
#contactImageContainer{
position:relative;
float:right;
height:50%;
margin-top:50px;
right: 170px;
}
#contactImage{
position: relative;
height:35px;
}
#contactTextContainer{
position:relative;
float:right;
height:50%;
margin-top:1.5em;
left: 40px;
}
#contactText{
font-size:small;
position:relative;
height:3em;
right:20px;
}
#networkLinksContainer{
position:relative;
margin:auto;
height:50%;
margin-top:40px;
width:100%;
text-align:center;
}
#networkLinks{
position: relative;
height:54px;
margin:auto;
width:300px;
text-align:center;
top:40px;
}
/*Account Box*/
#fade{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
min-width:900px;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#boxWrapper{
position:absolute;
top:0px;
left:0px;
width:100%;
margin:auto:
}
#accountBoxContent{
display: none;
position: relative;
margin:auto;
width: 250px;
height: 430px;
padding: 16px;
background-color: #DBDBDB;
z-index:1002;
overflow: auto;
}
#editTitle{
height:50px;
font-size:X-Large;
font-weight:bold;
color:#282828;
vertical-align:inline-middle;
}
#editAccountLine{
color:#282828;
background-color:#282828;
height:1px;
}
#editAccountForm{
text-align:right;
position:relative;
top:30px;
color:#282828;
font-size:small;
font-weight:bold;
}
#editAccountLinks{
position:relative;
top:20px;
text-align:center;
}
#editAccountLinks > a{
color:#282828;
text-decoration:none;
}
#changeLinks{
position:relative;
bottom:3px;
font-size:x-small;
color:blue;
}
#formatText{
position:relative;
bottom:6px;
text-align:left;
font-style:italic;
}
#password{
background-color:#EBEBE4;
color:#545454;
}
#email{
background-color:#EBEBE4;
color:#545454;
}
Javascript Code: var firstName;
var middleName;
var lastName;
var agency;
var password;
var email;
//Vertically centers the middle content div
function setMiddleContentPos() {
var window = document.body.scrollHeight;
var header = document.getElementById('header').scrollHeight;
var footer = document.getElementById('footer').scrollHeight;
var middle = document.getElementById('middleContent').scrollHeight;
var center = window - header - footer;
var top;
if(window-header-footer-middle > 50){
top=center/2-middle/2;
document.getElementById('middleContent').style.top=top+'px';
}
}
//Vertically centers the middle content div
function setLightBoxPos(contentId) {
var winHeight = getWindowHeight();
if(winHeight > 0){
var contentElement = document.getElementById(contentId);
var contentHeight = contentElement.offsetHeight;
if(winHeight - contentHeight > 0){
//[Window height]/2 - [Lightbox Height]/2
contentElement.style.top = (winHeight/2 - contentHeight/2)+'px';
}
else{
contentElement.style.top = '0px';
}
}
}
//Open and Close Lightbox
function openLightBox(contentId){
document.getElementById(contentId).style.display='block';
document.getElementById('fade').style.display='block';
setLightBoxPos(contentId);
}
function closeLightBox(contentId){
document.getElementById(contentId).style.display='none';
document.getElementById('fade').style.display='none';
}
//Set account values in js vars based on form
function setAccountValuesJS(){
firstName = document.getElementById('firstName').value;
middleName = document.getElementById('middleName').value;
lastName = document.getElementById('lastName').value;
agency = document.getElementById('agency').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
}
//Set account values in form based on js vars
function setAccountValuesForm(){
document.getElementById('firstName').value = firstName;
document.getElementById('middleName').value = middleName;
document.getElementById('lastName').value = lastName;
document.getElementById('agency').value = agency;
document.getElementById('password').value = password;
document.getElementById('email').value = email;
}
//Checks a string for prescence of illegal characters
//Illegal Characters: > < ' " \ / &
function stringIsClean(string){
if(string.indexOf('>') != -1 || string.indexOf('<') != -1 || string.indexOf("'") != -1 || string.indexOf('"') != -1 ||
string.indexOf('&') != -1 || string.indexOf('/') != -1 || string.indexOf('\\') != -1){
return true;
}
else{
return false;
}
}
//Saves account information
function saveAccount(){
firstNameTest = document.getElementById('firstName').value;
middleNameTest = document.getElementById('middleName').value;
lastNameTest = document.getElementById('lastName').value;
agencyTest = document.getElementById('agency').value;
passwordTest = document.getElementById('password').value;
emailTest = document.getElementById('email').value;
if(stringIsClean(firstNameTest) || stringIsClean(middleNameTest) || stringIsClean(lastNameTest) || stringIsClean(agencyTest) ||
stringIsClean(passwordTest) || stringIsClean(emailTest)){
document.getElementById('formatText').style.color = 'red';
}
else{
setAccountValuesJS();
document.getElementById('accountSaved').value = 'true';
document.getElementById('accountForm').submit();
}
}
//Sets middle content to adjust on load and resize
window.onload = function() {
setMiddleContentPos();
}
window.onresize = function() {
//setLightBoxPos('accountBoxContent');
setMiddleContentPos();
}
So, here is my question: Is there some possibility with php to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . 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 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 After searching this site I could not find any old posts on how to position the PROMPT box. As default (as you all most likely know) the prompt box in IE browser comes up in the top left corner. not very visable and would like to center it so it would be more visiable to the user being prompted. Can someone help me with this? thanks John I have had trouble with this problem for a while and I'm open to all suggestions. My problem is one of reference and of appending children to the body of the document. What I am trying to do is calculate the height of a tooltip div so that I can position it vertically away from the mouse dynamically based on where the mouse is while it is still over the link. I have a list of anchors set in an unordered list and they have a tooltip attribute: tooltip="tooltip info goes here". Code: initToolTips = function(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
var tip = anchors[i].getAttribute("tooltip");
if(!tip) continue;
var divHolder = document.createElement("div");
var divTop = document.createElement("div");
var divMid = document.createElement("div");
var divBot = document.createElement("div");
divHolder.className = "tooltip"; // color:#333;
divTop.className = "tooltiptop"; // background:url(...) ;
divMid.className = "tooltipmid"; // background:url(...) repeat-y;
divBot.className = "tooltipbot"; // background:url(...);
divHolder.appendChild(divTop);
divHolder.appendChild(divMid);
divHolder.appendChild(divBot);
var atts = divHolder.style;
anchors[i].onmouseover = function(e){
divMid.innerHTML = e.target.getAttribute("tooltip");
document.body.appendChild(divHolder);
alert(divHolder.style.height); //divHolder is
}
anchors[i].onmousemove = function(e){
var ie = (document.all);
if(ie){
atts.marginLeft =(event.clientX) + "px";
//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
else{
atts.marginLeft = (e.pageX) + "px";
//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
}
anchors[i].onmouseout = function(e){
document.body.removeChild(divHolder);
}
}
}
The initToolTips function is called from a window.onload. The problem is that in the onmouseover function i cannot get to the height attribute of the div anymore, I have had people tell me that the reference is gone when the function ends so I cannot use the divHolder variable like that. I have also had people tell me that I cannot reference height values when the object does not exist yet. To me it looks like the div tooltip object exists after the onmouseover function but i cannot obtain a reference to it. I have thought about setting an attribute of the anchor tag the creates the div like offsetToolTipY='divHolder.style.height'; but i can't get a reference of the height outside of the onmouseover function because it hasn't been appended to the document yet. The only other thing I could think of was to setup the div completely and set the display:none; attribute and then append it to the document (all outside of the onmouseover function). And then the onmouseover function would only set the display:inline; but again this did not work because for some reason it still does not have the height information. here is the code for that example: Code: wren.initToolTips = function(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
var tip = anchors[i].getAttribute("tooltip");
if(!tip) continue;
var divHolder = document.createElement("div");
var divTop = document.createElement("div");
var divMid = document.createElement("div");
var divBot = document.createElement("div");
divHolder.className = "tooltip";
divTop.className = "tooltiptop";
divMid.className = "tooltipmid";
divBot.className = "tooltipbot";
divHolder.appendChild(divTop);
divHolder.appendChild(divMid);
divHolder.appendChild(divBot);
var atts = divHolder.style;
atts.display = "none";
document.body.appendChild(divHolder);
anchors[i].onmouseover = function(e){
divMid.innerHTML = e.target.getAttribute("tooltip");
atts.display = "inline";
//alert(divHolder.style.height); //alerts nothing
}
anchors[i].onmousemove = function(e){
var ie = (document.all);
if(ie){
atts.marginLeft =(event.clientX) + "px";
//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
else{
atts.marginLeft = (e.pageX) + "px";
//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
}
anchors[i].onmouseout = function(e){
atts.display = "none";
}
}
}
I can't get any height information from the dynamically created div at all. Any Help is immensely appreciated. Thank You. -Jon hey guys im just building a portfolio website for my self and i wanted to create something that could work well across a number of devices and screen sizes. i recently came across this website http://tillwiedeck.com/ and noticed that the menu positions itself according to the size of the browser window. This works really well when viewing it on devices such as ipads and iphones. My question is that does anybody know if there is any way i could make an object always position itself at say 25% of the windows width and another object always position itself at 75% of the windows width. really hope i'm making myself clear. thanks heaps Hello, I'm a beginner to Javascript and I have a problem. My idea is to move the container to the right of the page when the user has a widescreen. This is what I came up with: Code: width = 1;
height = 1;
var container = document.getElementById('container');
if (typeof (window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
}
else {
width = screen.width;
height = screen.height;
}
if ((width / height) > 1.5) {
container.style.right = 0;
container.style.position = 'absolute';
}
Everything works fine, except the style part. Can anybody help me?? A full description of the problem, all the code and the test is also posted on: http://happinesshabitS.com/testroto4.htm I am trying to install a rotating banner on http://HappinessHabit.com How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked. I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com The code I placed on the test page is: Code: <script type="text/javascript" src="jshdrotate-1.js" ></script> </head> and Code: </head> <body onLoad="preloadImgs();randomImages();"> <img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a> Can I place this right above the </body> tag? The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below: Code:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies. Did I post and describe what I am trying to do and the problem correctly? Many thanks! I have x number of groups Each group has 8 objects For each group there is a button that makes it visible or invisible. At the moment, this leaves white space in the places where a group is invisible. So, say i have 5 groups; If all of the groups were visible it would look like this group 1 group 2 group 3 group 4 group 5 Now say groups 1, 2, and 5 are visible and the others are not. it would look like this group 1 group 2 group 5 -------*******instead of having this white space where 3 and 4 used to be, i want 5 to appear in the position of 3. 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 I had trouble posting this problem on the forum so a full description of the problem, all the code and the test is also posted on: http://happinesshabitS.com/testroto4.htm I am trying to install a rotating banner on http://HappinessHabit.com How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked. I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com The code I placed on the test page is: Code: <script type="text/javascript" src="jshdrotate-1.js" ></script> </head> and Code: </head> <body onLoad="preloadImgs();randomImages();"> <img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a> Can I place this right above the </body> tag? The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below: Code: function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
Many thanks for your help ! I am really in the dark about this. Alright, I'm trying to work on a little web app. I want to put my phone into landscape and have it return the correct values instead of reversing everything. Does this make sense? I'm talking about the alpha, beta, and gamma positioning. Also, when rotating a cube I made with it...if i rotate gamma positioning, it only goes from 0-180 and -180 to 0. So when I reach that 180, the cube totally reverses on it's other side, how can i prevent this? Hey I have ben writing & understanding this code but I can't make this work, have done my homework..so I have atleast tried http://jsfiddle.net/defencedog/hLZCt/ Hey everyone Just throwing this out there, is it possible to have an image displayed within a canvas moves around relative to the mouse's position? For example, say I had a square canvas in the middle of the screen, and I had a small circle on that, could I have the circle position itself within the square canvas relative to the mouses position on the screen. So if my mouse was in the bottom left of the screen, the circle would be bottom left of the canvas? Thanks YD Hi, Im new to javascript and spent hours trying to find the answer to this, Im sure its quite simple.. Im trying to add js banners to my website but cannot for the life of me adjust the position (right left) and float to the code. Is there a way to do so in plain text editor without messing with the site CSS code? Here is the code: <script type="text/javascript" src="http://js.xxx.com/javascript.php?prefix=w7UWAcUfIi4MJGdq9P6W22Nd7ZgqdRLk&media=9804&campaign=1"> </script> thanks I have followed all the correct steps to the Javascriptkit code for Plus Size Image Viewer: http://www.javascriptkit.com/script/...eviewer.shtml# Everything works fine but the Enlarge Image buttons are not where they should be. They should all appear at the bottom left of each individual image and are floating up. See example he http://www.bannerpen.ca/plastic_glossy.html Im not sure if the problem is the position or the display or none in the plusimageviewer.css script?? [CODE] .enlargecaption{ position: absolute; border: 1px dotted navy; font: normal 11px Arial; } .enlargecaption a{ display:block; background: lightgray; /*bg color of caption*/ padding: 3px; text-decoration: none; color: black; } .enlargecaption a:hover{ background: lightyellow; /*bg color of caption when mouse rolls over it*/ } .enlargebox{ position: absolute; border:1px solid gray; display:none; } .enlargebox .title{ background:gray; color:white; padding: 3px 2px; text-align: right; font:bold 14px Arial; } .enlargebox .title img{ cursorointer; cursor:hand; } [CODE] Im not really sure how to go about this, but one idea that i had was artificial velocity. let me explain the problem first though before i see if my idea is feasible. The problem: I have 5 buttons, and 5 groups. Each group has 8 objects (every group has the same essential objects that are the same sizes) Basically, each button makes a group dissapear or appear. If all the groups were visible, it would look like this: group 1 group 2 group 3 group 4 group 5 But if just groups 1 & 5 were visible it would look like this: group 1 group 5. do you see my problem? my idea to fix it was to make some kind of container around each group. the container would somehow move the whole group of objects as if it was one. then, i was thinking of doing something like this: if (container1's top isn't touching another container's bottom){ give container1 a negative, exponential velocity. //this way it would look very smooth } else{ dont move it } does this sound feasible or is there a better way? |
|||||||