|
JavaScript - No Scroll Bars Showing Up In Any Browser
I made this webpage. It runs with a simple javascript function that changes the content in the window when you click on the menu buttons. the only problem is there are no vertical scroll bars when viewed in any browser. There seems to be a place for them but no actual scroll bar. I tried modifying the color and such with cs but it didn't change anything.
please help the site www.star1on1tutoring.com here is all the code starting with the html, then the css, and the two javascript pages [code] <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="assets/java/global.js"></script> <script type="text/javascript" src="assets/java/menu.js"></script> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/> <title>Star 1 on 1 Tutoring</title> <meta name="description" content="One on One tutoring for individuals and small groups in the Charlotte, North Carolina area. Taught by a former Charlotte-Mecklenburg teacher, we cater to your child's individual needs and goals. Package and groups discounts are available. "/> <meta name="robots" content="all,follow"/> <meta name="keywords" content=" star 1 on 1 tutroing, star one on one, one on one, Charlotte, North Carolina, Stonecrest, South Charlotte, Tutor, private tutor, tutoring, dominique greve, help in school, behind in school, huntington learning, huntington tutoring, small group tutoring, teacher, private teacher, math, science, social studies, history, math tutor, science tutor, history, history tutor, social studies tutor, grades, A+, better grades, children, school, better in school, Charlotte private tutor "/> </head> <body> <div id="logo"> </div> <div id="book"> <ul id="internalNav"> <li><a href="#intro">Introduction</a></li> <li><a href="#subjects">Subjects and Grades</a></li> <li><a href="#rates">Rate Information</a></li> <li><a href="#difference">The Difference</a></li> <li><a href="#bookIt">Book It!</a></li> <li><a href="#payment">Payment and Discounts</a></li> </ul> <div class="section" id="intro"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="subjects"> <h3> K-8 all subjects (math depends on level)</h3> <h3>Study Skills/Organization</h3> <h3>Introductory Spanish </h3> <h3>High school (depends on course and level) </h3> </div> <div class="section" id="home"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="rates"> <h3>Individual Rate: $30/hr</h3> <h3>Small Group Rates: </h3> <h3>2 students $50/hr</h3> <h3>3 students $75/hr</h3> <h3>4 students $100/hr</h3> </div> <div class="section" id="difference"> <p> At Star 1 on 1 Tutoring, your child's program is tailored specifically to his or her needs and learning style. We can focus on your child's actual course work and assignments, using the school's preferred textbooks and resources.* You do not have to commit to a lengthy and inflexible contract with an organization that pursues its own curriculum at its predetermined pace.* Star 1 on 1 Tutoring focuses on what it takes for your child to succeed.</p> </div> <div class="section" id="bookIt"> <h2> For more information or to book your session</h2> <h3> Call 704-321-9226</h3> <h3> or <a href="mailto:dgreve@star1on1tutoring.com">E-mail Me</a></h3> </div> <div class="section" id="payment"> <p> You can pay with a credit card or check with a secure payment on Paypal. I also offer package rates.<h3> Buy 9 sessions get the 10th free.</h3> </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="9411314"> <table> <tr><td><input type="hidden" name="on0" value="Package">Package</td></tr><tr><td><select name="os0"> <option value="1 hour session">1 hour session $30.00</option> <option value="5 1- hour sessions">5 1- hour sessions $150.00</option> <option value="10 1- hour sessions">10 1- hour sessions $270.00</option> </select> </td></tr> </table> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </div> <div id="pencil"></div> <div id="apple"></div> </body> </html> @charset "UTF-8"; /* CSS Document */ html, body { overflow-y:scroll; overflow-x:scroll; } body { background-image:url(../images/newbg.jpg); font-size:.9em; overflow-y:scroll; background-attachment:fixed; } #logo { background: url(../images/logobacking.png) no-repeat; position:fixed; top:0px; left:200px; height:198px; width:609px; } #book { background:url(../images/newbook_06.png) no-repeat; position:fixed; left:23px; top:173px; width:960px; height:455px; } #apple { background-image:url(../images/star.png); height:310px; width:340px; position:fixed; left:50px; top:440px; } #pencil { background:url(../images/newpencil.png) no-repeat; position:fixed; top:470px; left:372px; height:278px; width:617px; } #internalNav li a { text-decoration:none; list-style-type: none; color:#000000; } img { border:none; } #internalNav li { font-family:"Courier New", Courier, monospace; font-size:1.5em; color:#000000; list-style-type:none; text-decoration:none; border:none; } #internalNav { position:fixed; left:80px; top:255px; } #home { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #subjects { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #rates{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #difference{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #bookIt{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #intro{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #payment{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:370px; } // JavaScript Document function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function showSection(id) { var divs = document.getElementsByTagName("div"); for (var i=0; i<divs.length; i++ ) { if (divs[i].className.indexOf("section") == -1) continue; if (divs[i].getAttribute("id") != id) { divs[i].style.display = "none"; } else { divs[i].style.display = "block"; } } } function prepareInternalnav() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("internalNav")) return false; var nav = document.getElementById("internalNav"); var links = nav.getElementsByTagName("a"); for (var i=0; i<links.length; i++ ) { var sectionId = links[i].getAttribute("href").split("#")[1]; if (!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; links[i].destination = sectionId; links[i].onclick = function() { showSection(this.destination); return false; } } } addLoadEvent(prepareInternalnav); [CODE] Similar TutorialsHi, I have written a magnifier (using both CSS and JavaScript), and it appears to work OK in the four browsers I have tested (IE9, FF3.5.7, Safari 5.1, and Opera 11.51). However, Safari annoyingly puts in scroll bars when you are magnifying the picture. I can get rid of this by making the ctrlDiv offset as hidden, but then this removes the bottom scroll bar completely in all browsers (not really useful if the document is bigger than the browser window). I have read about putting the image as a background image of another element, but cannot for the life of me get this to work at all. Also, the functions to return the absolute position of elements (and mouse pointer) does not work if the document has a margin (i.e. width:1216px;margin:auto) - but I can work around this at the moment. Anyway, the complete code is at http://www.geraldholdsworth.co.uk (it was easier to stick it there and post a link than to post the code here). Cheers, Gerald. I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar? Also, how would I set the zindex so the bubbles are always in front of everything else. Thank you in advance. //Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com) //Based on code by Altan d.o.o. (snow@altan.hr) //For full source code and installation instructions to this script, visit http://www.dynamicdrive.com var no = 15; // image number or falling rate var speed = 2; // the lower the number the faster the image moves var snow = new Array(); snow[0] = "bubble.png" snow[1] = "bubble2.png" snow[2] = "bubble3.png" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 600, doc_height = 1024; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]+pageYOffset; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px'; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px'; } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } // End --> </script> Hi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? How can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized. And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page. I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects. lookin 4wrd. Just want to say thanks in advance for all of those who can help me out with this. Here is the page I'm working on: http://jackradetsky.com/recent_work.html As you will see there are only two pictures on there now. I want the left table cell to have an up arrow and a down arrow below those pictures where the user can scroll (down and up) and see other pictures, which when clicked on will show a larger image to the right. It's setup now as you will see for the larger image to appear to the right. It's just not setup for this scroll function where the user can click on an up arrow or down arrow to make the users see the other pictures in the table cell. Also this section should not have a scrollbar show up when the pictures are being scrolled down to see. I'm not sure on how to proceed with this. Thank you for the help in advance. I appreciate it. -Brian Hi to everyone! Script first: Code: var allowscroll = 0
//Mouse scroll ____________________________________________________________________________________
function handle(delta) {
if(allowscroll == 1){
if (delta < 0){
simgs1dest_x -= 30
}
else{
simgs1dest_x += 30
}
}
if(allowscroll == 2){
if (delta < 0){
textdest_y -= 30
}
else{
textdest_y += 30
}
}
}
function wheel(event){
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener){
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
I'm using this script to scroll two divs, which each activates self scrolling onMouseOver and onMouseOut deactivate scrolling by setting allowscroll varible to 0. And everything works fine, but this script doesn't allow to scroll browser entire page! So is there a script wich will scroll browser page when allowscroll is equal to 0? Code: function movediv()
{
booking_details.style.top = document.body.scrollTop;
}
---------------
<style>
.demo {color:#000000; border-color:#666666; background-color:#FFCC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;
layer-background-color:#cccccc; position:absolute; left:12.5%; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
</style>
---------------
<body onScroll="movediv();">
<div id="booking_details" class="demo" style="visibility:hidden">
....
.... code .....
....
</div>
</body>
When i scroll the DIV sticks to the TOP of the browser, is there any way to make it sticks to the BOTTOM of the browser as you scroll? Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to? Thanks in advance for any help given. Code: var RecoverScroll=
{
timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0,
init:function(pageName)
{
var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont();
if( document.documentElement )
this.dataCode=3;
else
if( document.body && typeof document.body.scrollTop!='undefined' )
this.dataCode=2;
else
if( typeof window.pageXOffset!='undefined' )
this.dataCode=1;
if(pageName)
this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_');
this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() });
if(window.location.hash == ""
&& (offsetData=this.readCookie(this.cookieId)) != ""
&& (offsetData=offsetData.split('|')).length == 4
&& !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3])))
{
if(!!window.SoftScroll && SoftScroll.scrollTo)
{ SoftScroll.init(); SoftScroll.scrollTo(sx, sy); }
else
window.scrollTo(sx, sy);
}
this.record();
},
reset:function()
{
clearTimeout(this.timer);
this.timer=setTimeout(function(){RecoverScroll.record();}, 50);
},
record:function()
{
var cStr;
this.getScrollData();
this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y);
},
setTempCookie:function(cName, cValue)
{
document.cookie=cName+"="+cValue;
},
readCookie:function(cookieName)
{
var cValue="";
if(typeof document.cookie!='undefined')
cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : "";
return this.bon?cValue:"";
},
getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/)
{
switch( this.dataCode )
{
case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
break;
case 2 : this.x=document.body.scrollLeft;
this.y=document.body.scrollTop;
break;
case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break;
}
},
addToHandler:function(obj, evt, func)
{
if(obj[evt])
{
obj[evt]=function(f,g)
{
return function()
{
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
}
else
obj[evt]=func;
},
sf:function( str )
{
return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;});
},
cont:function()
{
var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data);
}
}
Is there any way to lock down the menu bars? I currently have a form that was created in Adobe Professional. I have hidden the menu bars on initial view of this form, in an effort to force the sales associates to use buttons that I created that will show them all fields that are required. This worked for a while, but now the sales associates have found out how to unhide the menu bars and are again submitting incomplete forms. I would like to have something in place, that if they do unhide the menu bars, there are certain commands that they cannot use (i.e. Attach to E-mail). Is there any way to put script on this form that will gray out certain commands on the menu bars?
All, Does anyone know a good example on where to find something that when I click on vote it calculates the results and then shows me horizontal bars to show the percentage for each vote? There will only be two? Thanks in advance. Greetings, I am currently using the websites tutorial about browser detection using the navigator. http://www.javascriptkit.com/javatutors/navigator.shtml I am however finding myself unable to detect a pattern in order to learn from. My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws. For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser. There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose. So if someone can explain how I could do it for Safari I would be very appreciative. I need a script that will redirect to a specific page is the browser is safari version 4. if the browser is NOT safari 4 I want the browser to stay on the current page.
Hello, I have a question what is the best way to identify a browser, browser version and OS in javascript. I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers. Thanks Have a container set to an em height and need the get the scroll or overflow value. Basically need to know if text node inside container has content hidden below the height allowed. How do I get this?
Does anyone know where I could get a scroller similar to the one used in this recent news div? http://www.383project.com/ thanks! Hi all, I am building a website with a smooth scroll function... that site is: katielipsitt.com/website As you will see if you click the menu links, the page scrolls too far up. I would like each div to stop right below the navigation. I am not very familiar with javascript, so I am wondering where in the code I would put this? I imagine I'll be able to put in something to tell the page to "scroll to Div'X' but leave 150 pixels of padding at the top" Is that possible? Thanks!! here is the source of my plugin, OSX Style Dialog http://www.ericmmartin.com/projects/simplemodal-demos/# here is my code... my problem is the content is so long... and i can't scroll the page down.. Code: <!DOCTYPE html>
<html>
<head>
<title> SimpleModal OSX Style Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2009 - Eric Martin' />
<!-- OSX Style CSS files -->
<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='osx-modal'><h2>OSX Style Modal Dialog</h2>
<p>A OSX style modal dialog demonstrating the felxibility of SimpleModal.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div id="osx-modal-data">
<table width="477" border="0">
<tr>
<td width="471"><h1>Terms & Conditions</h1></td>
</tr>
<tr>
<td><p><strong>IMPORTANT -- READ CAREFULLY BEFORE USING THE SERVICES PROVIDED ON THIS WEB SITE: This End User Agreement ("Agreement") is a legal agreement between you (either an individual or an entity) and PNRC . By accepting the Terms and Conditions of this Agreement you agree to be bound by the terms and conditions of this Agreement. If you do not agree with the terms of this agreement, you will not be permitted to use this Web Site.</strong></p></td>
</tr>
<tr>
<td><p><strong>YOU AGREE THAT YOUR USE OF THIS WEB SITE ACKNOWLEDGES THAT YOU HAVE READ THIS AGREEMENT, UNDERSTAND IT, AND AGREE TO BE BOUND BY ITS TERMS AND CONDITIONS.</strong></p></td>
</tr>
<tr>
<td><p>1. Restrictions - You may not download, copy, modify, adapt, translate, reverse engineer, decompile, disassemble or modify the Software nor attempt to gain knowledge of the source code of the Software in any manner. You shall permit the PNRC to audit your compliance with this Agreement as the PNRC deems reasonably necessary. All rights not expressly granted to you are reserved to the PNRC.</p></td>
</tr>
<tr>
<td><p>2. Content. - You acknowledge that the content on the Web Site is provided by third parties and that the PNRC acts as a passive conduit for the distribution and publication of such content. The PNRC does not endorse any content on or accessible through the Web Site and is not responsible or liable to you or to any third party for the truthfulness or accuracy such content.</p></td>
</tr>
<tr>
<td><p>3. Advertisements - The Web Site may contain advertisements by third parties which may contain links to other sites. Unless otherwise specifically stated, the PNRC does not endorse any product or make any representation regarding the content or accuracy of any materials contained in, or linked to, any advertisement on the PNRC website.</p></td>
</tr>
<tr>
<td><p>4. No Warranty - THE WEB SITE AND THE SOFTWARE ARE PROVIDED ON AN "AS IS" BASIS WITHOUT ANY WARRANTIES OF ANY KIND. THE PNRC MAKES NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE USE OF THE WEB SITE OR THE SOFTWARE. THE PNRC DOES NOT AND CANNOT WARRANT THE PERFORMANCE OR RESULTS YOU MAY OBTAIN BY USING THE WEB SITE OR THE SOFTWARE AND THE PNRC MAKES NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, AS TO NON-INFRINGEMENT OF THIRD PARTY RIGHTS, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT WILL THE PNRC BE LIABLE TO YOU FOR ANY CONSEQUENTIAL, INCIDENTAL OR SPECIAL DAMAGES, INCLUDING ANY LOST PROFITS OR LOST SAVINGS, EVEN IF THE PNRC HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, OR FOR ANY CLAIM BY ANY THIRD PARTY.</p></td>
</tr>
<tr>
<td><p>5. Limitation of Liability - UNDER NO CIRCUMSTANCES WILL THE PNRC, ITS OFFICERS, DIRECTORS, EMPLOYEES, CONTRACTORS, LICENSORS OR SUPPLIERS BE LIABLE TO YOU OR ANY OTHER PERSON FOR ANY CONSEQUENTIAL, INDIRECT, PERSONAL INJURY OR DEATH, SPECIAL, PUNITIVE OR INCIDENTAL DAMAGES, WHETHER FORESEEABLE OR UNFORESEEABLE, BASED ON YOUR CLAIMS OR THOSE OF ANY THIRD PARTY (INCLUDING, BUT NOT LIMITED TO, CLAIMS FOR LOSS OF DATA, GOODWILL, PROFITS, USE OF MONEY OR USE OF THE SOFTWARE, INTERRUPTION IN USE OR AVAILABILITY OF DATA, STOPPAGE OF OTHER WORK OR IMPAIRMENT OF OTHER ASSETS) ARISING OUT OF A BREACH OR FAILURE OF AN EXPRESSED OR IMPLIED WARRANTY, BREACH OF CONTRACT, MISREPRESENTATION, NEGLIGENCE, STRICT LIABILITY IN TORT OR OTHERWISE. IN NO EVENT WILL THE AGGREGATE LIABILITY WHICH THE PNRC, ITS OFFICERS, DIRECTORS, EMPLOYEES, CONTRACTORS, LICENSORS OR SUPPLIERS MAY INCUR IN ANY ACTION OR PROCEEDING EXCEED THE TOTAL AMOUNT ACTUALLY PAID BY YOU TO THE PNRC FOR THE USE OF THE WEB SITE SOFTWARE IN THE THREE MONTHS IMMEDIATELY PRECEDING THE EVENT GIVING RISE TO THE ACTION OR PROCEEDING.<br />
YOU ARE RESPONSIBLE FOR ALL MATTERS RELATED TO THE SECURITY OF YOUR COMPUTERS, SYSTEMS AND COMPONENTS THEREOF, AND ALL DATA AND BUSINESS RELATED TO THE OPERATION OF THE SOFTWARE. THE WEB SITE AND THE SOFTWARE ARE MADE AVAILABLE OVER THE INTERNET, WHICH IS AN "OPEN" ENVIRONMENT IN WHICH THIRD PARTY ACCESS IS POSSIBLE, AND OFTEN PERMITTED. YOU ARE RESPONSIBLE FOR ENSURING THE SECURITY OF YOUR SYSTEMS, INCLUDING, BUT NOT LIMITED TO "FIREWALL" CONFIGURATIONS AND ANTI-VIRUS PROTECTIONS, AND the PNRC SHALL HAVE NO RESPONSIBILITY OR LIABILITY FOR ANY LOSS, COST, EXPENSE OR DAMAGE YOU MAY SUFFER RELATED TO THE USE OF THE SOFTWARE.</p></td>
</tr>
<tr>
<td><p>6. Indemnity. You agree to idemnify the PNRC, its directors and officers from any damages, costs and/or losses they or it may suffer as a result of any breach on your part (or on the part of your employees or agents) of the terms and conditions of this Agreement.</p></td>
</tr>
<tr>
<td><p>7. Exclusion from the United Nations Convention on Contracts for the International Sale of Goods - The rights and obligations under this agreement shall not be governed by the United Nations Convention on Contracts for the International Sale of Goods and/or any local implementing legislation, the application of which is expressly excluded.</p></td>
</tr>
<tr>
<td><p>8. Governing Law - This agreement shall be governed by the laws of the Province of Ontario, Canada, excluding applicable conflict of law rules. You hereby submit to the exclusive personal jurisdiction and venue of the courts of the Province of Ontario with respect to matters related to this agreement.</p></td>
</tr>
<tr>
<td><p>9. Force Majeure - Except for payment obligations hereunder, neither you nor the PNRC will be liable for any failure or delay in performing an obligation under this Agreement that is due to causes beyond its reasonable control, such as natural catastrophes, governmental acts or omissions, laws or regulations, labour strikes or difficulties or transportation stoppages or slowdowns. If any of these causes continues to delay or prevent performance for more than 90 days, the affected party may terminate this Agreement, effective immediately, upon notice in writing to the other party, which notice may be delivered by E-mail.</p></td>
</tr>
<tr>
<td><p>10. Termination - This Agreement will automatically terminate if you fail to comply with any term hereof. No notice shall be required from the PNRC to effect such termination. You may also terminate this agreement at any time by notifying the PNRC in writing of termination, which notice may be delivered by E-mail. Upon any termination of this Agreement you shall immediately discontinue use of the Software.</p></td>
</tr>
<tr>
<td><p>11. Miscellaneous - This Agreement shall constitute the complete and exclusive agreement between you and the PNRC and supersedes all other proposals, prior understandings or agreements between the parties pertaining to the Software. The terms and conditions of this Agreement may not be amended except by the PNRC providing you with at least 30 days written notice of amendment, which notice may be delivered by e-mail. If any provision of this Agreement is held to be unenforceable for any reason, such provision shall be reformed only to the extent necessary to make it enforceable and such decision shall not affect the enforceability of such provision under other circumstances, or of the remaining provisions hereof under all circumstances. </p></td>
</tr>
<tr>
<td><INPUT type="button" value="Close Window" onClick="window.close()"> </td>
</tr>
</table>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>
</body>
</html>
here is the CSS Code: body {height:100%; margin:0;}
#osx-modal-content, #osx-modal-data {display:none;}
/* Overlay */
#osx-overlay {background-color:#000; cursor:wait;}
/* Container */
#osx-container {background-color:#eee; color:#000; font-family:"Lucida Grande",Arial,sans-serif; font-size:.9em; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000;}
#osx-container a {color:#ddd;}
#osx-container #osx-modal-title {color:#000; background-color:#ddd; border-bottom:1px solid #ccc; font-weight:bold; padding:6px 8px; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close {display:none; float:right;}
#osx-container .close a {display:block; color:#777; font-size:.8em; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close a:hover {color:#000;}
#osx-container #osx-modal-data {padding:6px 12px;}
#osx-container h2 {margin:10px 0 6px;}
#osx-container p {margin-bottom:10px;}
#osx-container span {color:#777; font-size:.9em;}
I've started seeing this on a few pages and I'd like to add it to mine. I'd like to add a back to top button where it doesn't just jump right to the top, but acts like the user were actually using the scroll bar. here are some well done examples: http://www.javascriptkit.com/jsref/window.shtml and http://www.webdesignerheaven.com/ I like the first one better (where it shows an up arrow if you've scrolled far enough), and I found what I think is the javascript responsible (though I'm not sure if it's exact right to take it.) let alone, i'm not sure how i would even implement it yet. http://www.javascriptkit.com/jkinclu...ltopcontrol.js i've got a basic example working on my own site, I just don't know how to stop it, (right now it just keeps going and going even if i try to scroll back down.) i'd like to be able to tell if the user reached the top, then stop it, but from what I've looked, i can't find a way to check where exactly they are in my page. i figure, if i can get mine to stop, I can fancify it later with the image that shows if you've moved down and what not, right now I'd like to just stop it when it reaches the top. Hello All, How can i want to capture onscroll event in Javascript ? Thanks in advance. Hi, on my site:http://www.jbiddulph.com/chrisbradshaw/ I need to be able to scroll the whole site horizontally, there may be 20 or so images, ther only way i have figured out how to do it is it guess a max width, like just put width: 5000px; but I cannot determine the whole width with however many images in the page?! I have a javascript below that gets the width of the first image but I need to get width of all images and add 20px padding to the right of each http://www.jbiddulph.com/chrisbradshaw/getwidth.html Can someone please help?! I have looked a Jquery sliders and scrollers and can only find carousels?! |
|||||||