|
JavaScript - Container Positioning On Widescreen
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?? Similar Tutorialsi want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically. thank you! Hi Folks, Hope someone can help. I want to do this with js and not with any html/css tables, image fills or whatever other trick, but I don't know how... Say I have multiple DIV containers below each other, which contain multiple DIV boxes floating next to each other. None of the DIV elements have a fixed height: Code: <div id="container1"> <div id="box1">some text</div> <div id="box2">some double more text</div> <div id="box3">some other text</div> </div> <div id="container2"> <div id="box4">some double more text</div> <div id="box5">some more text</div> <div id="box6">some other text</div> </div> I want for each container (separately) to have the contained box divs to fit the biggest one in height. For example, in container1, if box2 contains more text than the others, I want box1 and box3 height to fit box2. And in container2, if box4 has more text than the others, I want box5 and box6 height to fit box4, etc. In my dreamworld, the solution would be flexible and fully automated, which means, it would look for all container divs of class x or Id x and apply the same rule to all child divs. Hope it's clear enough ;o) I have heard of jquery "equalheights" plugin but I don't think it can do that ? or then I misunderstood something. Could I be using some "get element by class" function and then apply a style.height to the divs? TIA for any suggestion Hi all Ive basically 3 php scripts: -one that writes an xml file from a directory of image files -one that creates a thumbnail from a jpeg file resizes it and puts a little drop shadow on the thumbnail -one that reads the xml file and outputs the html code so all is good a little old school, but it works, I get a page of thumbnails in whatever form I want with links. Ive attached a lightbox script I found to open the thumbnails and thats ok. What I would like to do is target the images to a container inside a div tag using jquery, maybe even fade the image in something fancy. but Id be happy with the basics. Just click on the thumbnail show it in the adjacent container. (dont have a container yet thats what i need some help with with) I'm doing my best going through various tutorials and the chm file learning as I go here is the test page that outputs the thumbnails: http://www.eagleview.ca/newsite/cont...om=0&pageto=12 any help is appreciated william Hey guys. I've been trying to figure this out now for the past 9 hours and I have no idea what I'm doing...lol Ok, I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar. Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe. http://www.mediafire.com/?zqzym4iniyd Thanks so much for your help! I have a container that has <li> items in it and in order to expand them you hit the + sign to smoothly expand the content under that header. My problem is that I want the header and the + to be on the same line and to not be appended to the <li> items when they are expanded. Right now the read more button(expand button) ends up at the bottom when it is clicked because of the list items expanding. Here is my js for that section, and the css for the read more button. Code: // auto-add-in 'read more' hooks after 4 bullet points
$("#att_container ul").each(function() {
var elem = $(this);
// break up list into separate lists, more than 4 is toggle_container
if ( elem.children("li").length > 0 )
{
elem.after('<ul class="toggle_container">'); // add hidden container after current element
var hiddenContainer = elem.next(".toggle_container"); // save a reference to it
elem.children("li").slice(0).appendTo(hiddenContainer); // move the children past the limit
hiddenContainer.after('<p class="trigger"><a href="#"> </a></p>'); // read more button
}
});
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click
$("p.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("p.trigger").click(function(){
$(this).prev(".toggle_container").slideToggle("slow");
});
// Expand and Collapse All
$(".expand").click(function(){
$("p.trigger").addClass("active").prev(".toggle_container").slideDown("slow");
});
$(".collapse").click(function(){
$("p.trigger").removeClass("active").prev(".toggle_container").slideUp("slow");
});
});
Here is the css for the read more button Code: #att_container p.trigger a {
display:block;
float:right;
width: 76px;
height: 19px;
margin: 0;
padding: 0;
background: url(../images/readmore_att.jpg) top left no-repeat;
}
#att_container p.active a {
background: url(../images/readmore_att.jpg) bottom left no-repeat;
}
Greetings, I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious. I would like the display an image within a 100 x 100 pixel container. If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container. I want to avoid pixelation of the images as much as possible. All images are external and not on the local server so I only have an image URL. I would like to hide all images until they are resized appropriately. Does anybody know of a piece of javascript code that can do something similar to this? Sincerely, Travis Walters Hola, I have a problem where I have a number of random set of elements that have a fixed rule for class name. I want to move them to a container element according to this class name. So for example the site generates Code: <p class="dog-1"></p> <p class="dog-2"></p> <p class="cat-1"></p> <p class="dog-3"></p> My output would be ideally Code: <div class="dog"> <p class="dog-1"></p> <p class="dog-2"></p> <p class="dog-3"></p> </div> <div class="cat"> <p class="cat-1"></p> </div> When searching for a solution, all I could find was simple ordering of elements according to class... Thanks I am doing a project and I have a problem. I have retrieved data from a json file using ajax and the xmlhttprequest, but I am not able to put the content I retrieve into the dojo content pane. The content pane is inside a border container. I have tried the following, but it does not work. The HTMLPage4.html has the json data inside. please help me really urgent to me!!!!!!!as soon as possible Code: function getInfoContent(graphic)
{
function ajaxRequests()
{
var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i = 0; i < activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i])
}
catch (e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
var mygetrequests = new ajaxRequests()
mygetrequests.onreadystatechange = function() {
if (mygetrequests.readyState == 4) {
if (mygetrequests.status == 200 || window.location.href.indexOf("http") == -1) {
var bookss = eval("(" + mygetrequests.responseText + ")") //retrieve result as an JavaScript object
var rssent = bookss.infos.info
for (var i = 0; i < rssent.length; i++) {
// alert(mygetrequests.responseText);
var placeImg = ""
var txt = ""
// placeImg += rssent[i].descImg
txt += rssent[i].desc
var shorttxt = ""
shorttxt += txt.substring(0, 30);
var bc = new dijit.layout.BorderContainer({ style: "font-size: 11pt; height: 574px; width:739px; border:0px;" });
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 11.5%; width: 100%; color: black; background-color: transparent; border:0px;",
content: "<table><div id = \"mydiv\">" + shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();'><u> More...</u></a></div></td></table>"
});
bc.addChild(c1);
}
}
else {
alert("An error has occured making the request")
}
}
return bc.domNode;
}
mygetrequests.open("GET", "HTMLPage4.htm", true)
mygetrequests.send(null)
}
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? 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>
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 . . . 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 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 I'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();
}
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 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 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 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/ |
|||||||