|
JavaScript - Device Orientation Positioning And Landscape
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? Similar TutorialsDo we have any alternative for orientation attribute of Td element in javascript for firefox? Below code works fine in IE but throws undefined in firefox: if(MyTd.orientation == "Vertical") //throws undefined { //Do something } The HTML for this Td is as follows: <td id="MyTd" orientation = "Vertical" ></td> Thanks. I am looking for a image gallery that will work where some photos are positioned horizontally and some are vertical. I hope it is possible. The photos are for an artist that I am working with. I hope someone will have an answer. It doesn't have to be fancy. Even a simple magnifyer would be fine. I guessed that javascript might be the most appropriate form. Thank you in advance, Buffmin.
I need to add a form field to be on the top - centered on the page regardless if the page is portiat or landscape. Is this possible? Everything works like a Charm with the exception of the alignment on the different page orientation - Here is what I have so far: // add form field to each page of the PDF for (var pageNumber = 0; pageNumber < this.numPages; pageNumber++) { var dateStamp = this.addField("DateStamp","text",pageNumber,[450,770,155,790]); dateStamp.textSize=10; dateStamp.textColor=color.red;} this.setAction("WillPrint", "var today = new Date(); var current_hour = today.getHours(); var current_minute = today.getMinutes(); this.getField('DateStamp').value = \"Valid 24 Hours From Printed Date... \" + util.printd(\"dd/mmm/yyyy\",new Date()) + \" \" + current_hour + \":\" + current_minute;"); Please help! DSatele Hi, everyone! I am a freshman in the JavaScript area. One thing i am wondering recently is that whether JavaScript can get a data from the sensors as accelerometer, gyroscope or orientation sensors of a mobile device? From as a iPhone, iPad or some other Android system mobile phones, may i just use JavaScript to get the data from their sensors? Looking forward the replies from anybody. Thanks a lot! Best regards, Borui http://mybestmaterial.blueeyedpandahosting.com/cep/1/ Works exactly as expected (and all the code is built into the source code view of the page.) What happens is 2 timers are set up. 1 is running when user clicks the Start/Stop link. The second is started when the user clicks the Laughter Start/Stop link. So the sequence should be User -- Start click then after that -- laughter-start-stop click... You will see both timers start running. The laughter click will be clicked multiple times as the app is designed to time how much laughter a comedian or speaker is getting relative to the amount of time on stage. So click the laughter start stop multiple times before clicking the START-STOP the last time. Then a PAR score is generated - which is a simple percent of the time laughter happened, vs the time on stage. The link above works like a charm. THE PROBLEM is -- on my SPRINT TREO 700p --- when I click the laughter start/stop click it stops all the timers. I think for some reason the TREO won't allow the second NEW DATE() to be declared or something... because when I comment those two lines out --- line 166 and 167 in Dreamweaver version of the file -- (if you copy full source into dreamweaver...) Then the clicking doesnt' stop the main timer -- but it also doesn't work!! ANY THOUGHTS on how to decloare the SCOPE fo the NEW DATE() so it only effects that one function? OR any other suggestions? Code pasted below Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Comedy Analyzer - Simple</title>
</head>
<script type="text/javascript">
var flagclock = 0;
var flagstop = 0;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
function startstop()
{
//var startstop = document.getElementById('startstopbutton');
var startdate = new Date();
var starttime = startdate.getTime();
if(flagclock==0)
{
flagclock = 1;
counter(starttime);
}
else
{
if(laughter_flagclock==1) {
laughter_startstop();
}
flagclock = 0;
flagstop = 1;
splitdate = '';
//total laughter === running_total_laughter_time;
//total time == running_total_time;
var par_score = (Math.round(running_total_laughter_time/running_total_time*100))/100;
var par_score_percent = par_score*100;
//var par_score = running_total_laughter_time/running_total_time;
laughter_output.value = "PAR SCORE = " + par_score_percent;
}
}
var running_total_time;
function counter(starttime)
{
output = document.getElementById('output');
clock = document.getElementById('clock');
laughter_output = document.getElementById('laughter_output');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if(flagstop == 1)
{
timediff = timediff + stoptime
}
if(flagclock == 1)
{
clock.value = formattime(timediff,'');
running_total_time = timediff;
refresh = setTimeout('counter(' + starttime + ');',10);
}
else
{
//start and stop the running counter while adding the values to the next deal.
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime,roundtype)
{
if(roundtype == 'round')
{
var ds = Math.round(rawtime/100) + '';
}
else
{
var ds = Math.floor(rawtime/100) + '';
}
var sec = Math.floor(rawtime/1000);
var min = Math.floor(rawtime/60000);
ds = ds.charAt(ds.length - 1);
if(min >= 60)
{
startstop();
}
sec = sec - 60 * min + '';
if(sec.charAt(sec.length - 2) != '')
{
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
}
else
{
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if(min.charAt(min.length - 2) != '')
{
min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
}
else
{
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec + ':' + ds;
}
function resetclock()
{
if(flagclock == 1)
{
//alert("if side of reset clock");
var resetdate = new Date();
var resettime = resetdate.getTime();
counter(resettime);
}
else
{
//alert("ELSE side of reset clock");
clock.value = "00:00:0";
}
flagstop = 0;
stoptime = 0;
splitdate = '';
laughter_resetclock();
window.clearTimeout(refresh);
output.value = '';
}
</script>
<script type="text/javascript">
var laughter_flagclock = 0;
var laughter_flagstop = 0;
var laughter_stoptime = 0;
var laughter_currenttime;
var laughter_splitdate = '';
var laughter_output;
var laughter_clock;
var count = 0;
function laughter_startstop()
{
var laughter_startdate = new Date();
var laughter_starttime = laughter_startdate.getTime();
if(laughter_flagclock==0)
{
laughter_flagclock = 1;
laughter_counter(laughter_starttime);
laughter_number_text = document.getElementById('laughter_number');
count++;
laughter_number_text.value = count;
}
else
{
laughter_flagclock = 0;
laughter_flagstop = 1;
laughter_splitdate = '';
}
}
var running_total_laughter_time;
function laughter_counter(laughter_starttime)
{
laughter_clock = document.getElementById('laughter_clock');
laughter_currenttime = new Date();
var laughter_timediff = laughter_currenttime.getTime() - laughter_starttime;
if(laughter_flagstop == 1)
{
laughter_timediff = laughter_timediff + laughter_stoptime
}
if(laughter_flagclock == 1)
{
laughter_clock.value = laughter_formattime(laughter_timediff,'');
running_total_laughter_time = laughter_timediff;
//laughter_output.value += "-- laughter -- "+running_total_laughter_time;
laughter_refresh = setTimeout('laughter_counter(' + laughter_starttime + ');',10);
}
else
{
window.clearTimeout(laughter_refresh);
laughter_stoptime = laughter_timediff;
}
}
function laughter_formattime(laughter_rawtime,laughter_roundtype)
{
if(laughter_roundtype == 'round')
{
var laughter_ds = Math.round(laughter_rawtime/100) + '';
}
else
{
var laughter_ds = Math.floor(laughter_rawtime/100) + '';
}
var laughter_sec = Math.floor(laughter_rawtime/1000);
var laughter_min = Math.floor(laughter_rawtime/60000);
laughter_ds = laughter_ds.charAt(laughter_ds.length - 1);
if(laughter_min >= 60)
{
laughter_startstop();
}
laughter_sec = laughter_sec - 60 * laughter_min + '';
if(laughter_sec.charAt(laughter_sec.length - 2) != '')
{
laughter_sec = laughter_sec.charAt(laughter_sec.length - 2) + laughter_sec.charAt(laughter_sec.length - 1);
}
else
{
laughter_sec = 0 + laughter_sec.charAt(laughter_sec.length - 1);
}
laughter_min = laughter_min + '';
if(laughter_min.charAt(laughter_min.length - 2) != '')
{
laughter_min = laughter_min.charAt(laughter_min.length - 2)+laughter_min.charAt(laughter_min.length - 1);
}
else
{
laughter_min = 0 + laughter_min.charAt(laughter_min.length - 1);
}
return laughter_min + ':' + laughter_sec + ':' + laughter_ds;
}
function laughter_resetclock()
{
//alert("laughter_resetclock called");
if(laughter_flagclock == 1)
{
var laughter_resetdate = new Date();
var laughter_resettime = laughter_resetdate.getTime();
laughter_counter(laughter_resettime);
}
else
{
laughter_clock.value = "00:00:0";
}
laughter_flagstop = 0;
laughter_stoptime = 0;
laughter_splitdate = '';
count = 0;
laughter_number_text.value = count;
window.clearTimeout(refresh);
laughter_output.value = '';
//window.clearTimeout(refresh);
output.value = '';
}
</script>
<body>
Running Time :: <input id="clock" type="text" value="00:00:0" style="text-align: center;" size="14"readonly><br />
Laughter Time :: <input id="laughter_clock" type="text" value="00:00:0" style="text-align: center;"size="14" readonly><br />
Laugh Count :: <input id="laughter_number" type="text" value="0" style="text-align: center;" size="4" readonly><br />
<div id="start_button"><a href="javascript:startstop();">Timing Start/Stop</a></div>
<div id="laughter_start_button"><a href="javascript:laughter_startstop();">Laughter Start/Stop</a></div>
<textarea id="laughter_output" style="height: 90%;" cols="40" rows="1"></textarea><br />
<a href="javascript:resetclock();">Full-Reset</a><br /><br />
</body>
</html>
Hello all, I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file. The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way. I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads. I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below. Code: <!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine
Peninsula & The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script>
// initialise the drop-down menus
runOnLoad(Dropdown.initialise);
</script>
</head>
<body>
<div id="wrapper">
<a href="tel://+61425859742"><div id="mobile_header"></div></a>
<a href="tel://+61425859742"><div id="phoneBlock"></div></a>
<div id="header"></div>
<div id="nav">
<ul class="dropdown">
<li>
<a href="index.html">Home</a>
</li>
<li>Electrical
<ul>
<li>
<a href="domestic_electrician.html">Domestic</a>
</li>
<li>
<a href="electrical_contractors.html">Commercial/Industrial</a>
</li>
</ul>
</li> <li>
<a href="air_conditioner_installation.html">Air Conditioners</a>
</li> <li>
<a href="solar_power_systems.html">Solar</a>
<ul>
<li><a href="solar_system_maintenance.html">Maintenance</a>
</li>
<li><a href="solar_energy_facts.html">About Solar</a>
</li>
</ul>
</li> <li>
<a href="b_type_gas_service.html">Type B Gas</a>
</li> <li>
<a href="formgenerator/forms/contact.html">Contact Us</a>
</li>
</ul>
</div>
<div id="content-2">
<div class="clear"> </div>
<div id="top_border"></div>
<div id="content-2-1">
<span class="blackheading">Watt You Need Electrical -
Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast</span>
<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can
take that extra bit of time and effort to make sure you get the best service and advice.
<br /><br />
If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a
split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best
quality job at a competitive price.
<br /><br />
Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>,
we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B
Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
<br /><br />
<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
</p>
</div>
<div id="bottom_border"></div>
</div>
<div id="footer">
<table class="tableFooter">
<tr><td>Watt You Need Electrical Pty. Ltd. © 2014</td></tr>
</table>
</div>
</div>
</body>
</html>
Code: /*
Dropdown.js
Creates touch-friendly drop-down menus
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the Dropdown object
var Dropdown = (function(){
// the delay, in milliseconds
var DELAY = 250;
// the list of menus
var menus = [];
// Initialises the drop-down menus.
function initialise(){
// listen for touch events on the document if appropriate
if ('createTouch' in document){
document.body.addEventListener('touchstart', handleTouchStart, false);
}
// loop over the menus, converting them
var menus = document.querySelectorAll('ul.dropdown');
for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);
}
/* Handles a touch start event. The parameter is:
*
* e - the event
*/
function handleTouchStart(e){
// determine whether any menu is open
var isOpen = false;
for (var i = 0; i < menus.length; i ++){
if (menus[i].isOpen) isOpen = true;
}
// return immediately if all menus are closed
if (!isOpen) return;
// move up the document tree until we reach the root node
var node = e.target;
while (node != null){
// return immediately if we are inside a drop-down menu
if (/\bdropdown\b/.test(node.className)) return;
// move onto the parent node
node = node.parentNode;
}
// close all menus
close();
}
/* Closes all menus except the specified menu. The parameter is:
*
* menu - a menu not to close; this parameter is optional
*/
function close(menu){
// loop over the menus, closing them
for (var i = 0; i < menus.length; i ++){
if (menus[i] != menu) menus[i].close();
}
}
/* Creates a drop-down menu. The parameter is:
*
* node - either the DOM node of the menu or the ID of the node
*/
function applyTo(node){
// fetch the DOM node if a string was supplied
if (typeof node == 'string') node = document.getElementById(node);
// create and store the new menu
menus.push(new Menu(node));
}
/* Creates a drop-down menu. The parameter is:
*
* node - the DOM node of the menu
*/
function Menu(node){
// store the node
this.node = node;
// update the class name
node.className += ' dropdownJavaScript';
// listen for mouse events
if ('addEventListener' in node){
node.addEventListener(
'mouseover', this.bind(this.handleMouseOver), false);
node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
node.addEventListener('click', this.bind(this.handleClick), false);
}else{
node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
node.attachEvent('onmouseout', this.bind(this.handleMouseOut));
node.attachEvent('onclick', this.bind(this.handleClick));
}
// listen for touch events if appropriate
if ('createTouch' in document){
node.addEventListener('touchstart', this.bind(this.handleClick), false);
}
}
// whether the menu is open
Menu.prototype.isOpen = false;
// the timeout
Menu.prototype.timeout = null;
/* Binds the specified function to the current object. The parameter is:
*
* f - the function
*/
Menu.prototype.bind = function(f){
// return the bound function
var thisObject = this;
return function(){ f.apply(thisObject, arguments); }
}
/* Handles a mouse over event. The parameters a
*
* e - the event
* immediate - true to open the menu without a delay
*/
Menu.prototype.handleMouseOver = function(e, immediate){
// clear the timeout
this.clearTimeout();
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// if the target is within a list item, set the timeout
if (item.nodeName == 'LI'){
this.toOpen = item;
this.timeout =
window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
}
}
// Handles a mouse out event.
Menu.prototype.handleMouseOut = function(){
// clear the timeout
this.clearTimeout();
// set the timeout
this.timeout = window.setTimeout(this.bind(this.close), DELAY);
}
/* Handles a click event. The parameter is:
*
* e - the event
*/
Menu.prototype.handleClick = function(e){
// close any other menus
close(this);
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// check that the target is within a list item
if (item.nodeName == 'LI'){
// check whether the item has a closed submenu
var submenu = this.getChildrenByTagName(item, 'UL');
if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){
// open the submenu
this.handleMouseOver(e, true);
// prevent the default action
if ('preventDefault' in e){
e.preventDefault();
}else{
e.returnValue = false;
}
}
}
}
// Clears the timeout.
Menu.prototype.clearTimeout = function(){
// clear the timeout
if (this.timeout){
window.clearTimeout(this.timeout);
this.timeout = null;
}
}
// Opens the last item hovered over.
Menu.prototype.open = function(){
// store that the menu is open
this.isOpen = true;
// loop over the list items with the same parent
var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
for (var i = 0; i < items.length; i ++){
// check whether there is a submenu
var submenu = this.getChildrenByTagName(items[i], 'UL');
if (submenu.length > 0){
// check whether the submenu should be opened or closed
if (items[i] != this.toOpen){
// close the submenu
items[i].className =
items[i].className.replace(/\bdropdownOpen\b/g, '');
this.close(items[i]);
}else if (!/\bdropdownOpen\b/.test(items[i].className)){
// open the submenu
items[i].className += ' dropdownOpen';
// determine the location of the edges of the submenu
var left = 0;
var node = submenu[0];
while (node){
left += node.offsetLeft;
node = node.offsetParent;
}
right = left + submenu[0].offsetWidth;
// move the submenu to the right of the item if appropriate
if (left < 0) items[i].className += ' dropdownLeftToRight';
// move the submenu to the left of the item if appropriate
if (right > document.body.clientWidth){
items[i].className += ' dropdownRightToLeft';
}
}
}
}
}
/* Closes the menus within the specified node. The parameter is:
*
* node - the node; if omitted, all menus are closed
*/
Menu.prototype.close = function(node){
// if no node was specified, close all menus
if (!node){
this.isOpen = false;
node = this.node;
}
// loop over the items, closing their submenus
var items = node.getElementsByTagName('li');
for (var i = 0; i < items.length; i ++){
items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
}
}
/* Returns an array containing the children of the specified node with the
* specified tag name. The parameters a
*
* node - the node
* tagName - the tag name
*/
Menu.prototype.getChildrenByTagName = function(node, tagName){
// initialise the list of children
var result = [];
// loop over the children, adding those with the right tag name to the list
for (var i = 0; i < node.childNodes.length; i ++){
if (node.childNodes[i].nodeName == tagName){
result.push(node.childNodes[i]);
}
}
// return the children
return result;
}
// return the public API
return {
initialise : initialise,
applyTo : applyTo
};
})();
Any help is appreciated. Hi developers Needing some help. My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse. I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices? The code I am using is: <script type="text/javascript"><!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; //--></script> Which drives the following html: <ul id="links"> <li><a href="whats_new/whats_new.html">what's new</a></li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">clothing</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="clothing/clothing_page1.html">clothing</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">accessories</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="bags/bags_page1.html">bags</a> <a href="jewellery/jewellery_page1.html">jewellery</a> </div> </li> </ul> Any suggestions would be much appreciated. Thank you. Nonye 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>
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 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 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?? 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. 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 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 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. 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/ |
|||||||