|
JavaScript - Turn Off Scroll Bars And Z-index In Javascript
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> Similar TutorialsI 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] Hi, 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. 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. All, Does anyone have any examples or links of some free Javascript code that will turn the pages of your website when you click the mouse and drag the "page"? Thanks in advance for any ideas! Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work. My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off. I have my checkbox created as well as all the effects working for it. Here is a piece of the main code as well as a link to the ambilight.js file Code: <label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
<div class="track">
<span>OFF</span><span>ON</span>
</div>
</div>
</label>
</div>
</div>
<div id="main" class="clearfix">
<div id="video-edge">
<img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
<div id="video-wrap" class="video-js-box moo-css">
<video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
<source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
<script type="text/javascript">
ambiLight.create(document.getElementById('example'))
</script>
Portfolio Page http://www.eschulist.com/test/js/ambilight.js I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn. Code: <script type="text/javascript">
$(document).ready(function(){
$(this).click(function(){
$('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
});
});
</script>
Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe? I am using the JavaScript Image Scroll found on http://net.tutsplus.com/tutorials/ja...mage-scroller/. I would like to make it so that the images loop with no gap, it has a view demo on the site which you can see here; http://net.tutsplus.com/tutorials/ja...mage-scroller/ Many Thanks, Tim Hello, I have an image scroll on my site that uses JavaScript. Each individual image/slide can be linked to a url. My problem is that it opens a new window when you click an image, and I want it to simply open the new link in the same window. Here is what I have in the head section: Code: <script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
Here is what I have in the body: Code: <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/scroll-logo.jpg","images/scroll-natingredients.jpg","images/scroll-ucoriginal.jpg","images/scroll-organic.jpg","images/scroll-uckick.jpg")
slideshowlinks("healthprogressives.html","faq.html","index.html","faq.html","index.html")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=5000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
Thank you~ Hi, This is my plan. I want to create a 3x3 grid on the page. Each square needs to be the height and width of the page. I will then use jquery scroll.to to move the grid, dispalying a different square to the user. Am I right in thinking that I wont be able use 100% width and 100% height in my CSS for the single box, since there are actually going to 8 squares that are off the page? I am guessing therefore that I should use javascript to take the window width and height, and then use this value to create each of the gridbox's. Is this the right way of doing it? I want to create this box. http://i31.tinypic.com/oqb12q.jpg I know i can do it with a iFrame, but i've heard they are quite vunerable to hacking. I already have my .php sorted to show the admin posted news on my site (Im alright at .php; rubbish and javascript). Was just wondering if there was a way to do it without using iFrames ? 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? I am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code 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>
<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<!------------------------------------------------------------->
<style type="text/css">
#wrapper{
width:800px;
}
#left_top{
background-color:#66FFFF;
width:270px;
padding-top:60px;
padding-left:30px;
float:left;
}
#right_top{
background-color:#66FF33;
padding-top:60px;
width:480px;
padding-left:20px;
float:left;
}
#first_div{
position:relative;
width:450px;
height:300px;
z-index:1;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#second_div{
position:relative;
font-size:16px;
width:450px;
height:300px;
z-index:2;
top: -320px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
#third_div{
position:relative;
font-size:16px;
width:450px;
height:300px;
z-index:3;
top: -640px;
visibility: hidden;
left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic; color:#FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left_top">
<table width="210" height="483">
<tr><td width="210" height="477" valign="top">
<div><a title="first div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div>
<div><a title="second div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div>
<div><a title="third div" href="#" class="style1"
onClick="return false"
onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr>
</table>
</div><!-- end of left_top -->
<div id="right_top">
<div id="first_div">
<p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div>
<div id="second_div">
<p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div>
<div id="third_div">
<p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div>
</div><!-- end of right_top div -->
</div><!-- end of wrapper -->
</body>
</html>
Hello All! First I would like to say that I have attempted to find an answer to my issue and there is obviously an enormous amount of help across this and other forums regarding how to use Javascript to modify your CSS styles including changing the z-Index property. I am to the point where I believe maybe it just needs an extra set of eyes to help me understand what I am doing wrong here! My dilemma is that I have a table on my site which has four images, one for different areas of the site. Below that table area, I have a space where I plan to display the text describing those sections upon mouse rollover. My goal is to have an outer div tag with position relative and then contain 4 div tags inside of that with position absolute so that I can stack them under the background all with negative z-Indexes. I have a javascript that is called on mouse over and mouse out to raise the z-Index of each div text area, but it is not working. See the code below: Javascript for the z-Index change: Code: <script type="text/javascript">
<!--
//function to change zIndex
function swapMyImages(obj,z){
var theObj;
//ie4
if(document.all){
theObj=document.all(obj);
theObj.style.zIndex=z;
}
//ie5,6, Mozilla 1.0 and Opera 6
if(document.getElementById){
theObj=document.getElementById(obj);
theObj.style.zIndex=z;
}
//nn4x
if(document.layers){
theObj=document.layers[obj];
theObj.zIndex=z;
}
}
//-->
</script>
</head>
Anchor for one of the images with mouse overs attached: Code: <a class="thumb" href="..." title="Visit Our Shop" onmouseover="swapMyImages('shoptext','10')" onmouseout="swapMyImages('shoptext','-10')"><img src="images/hometable_back.jpg" width="190" alt="Tee Shirt Shop" longdesc="..." /></a>
my Div section with the text areas set to negative z-Index: Code: <div id="hometext">
<div id="servicetext">service text here</div>
<div id="shoptext">shop text here</div>
<div id="portfoliotext">[portfolio text here</div>
<div id="contacttext">contact text here</div>
</div>
my style sheet items for the divs: Code: .hometext {
position:relative;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
}
#servicetext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#shoptext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#portfoliotext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#contacttext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
Hi, I am very new to Javascript but have found a great tutorial to create a dynamic dropdown menu. I got it to work, but have problems redirecting it to the correct page after the necessary page refresh to load the items in the 2nd dropdown menu. The Javascript in the header is the following: Code: <SCRIPT language=JavaScript>
function reload(form){
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='index.php?cat=' + val ;}
</script>
My PHP controller (index.php) code to load the correct frames is as follows: Code: <ul id="navbar"> <li><a href="index.php?id=home">Home</a></li> <li><a href="index.php?id=overview">Overview</a></li> <li><a href="index.php?id=add">Add new product</a></li> </ul> Code: if(isset($_GET['cat'])){
include ('add.html.php');}
else {
switch($_GET['id'])
{
default: include('home.html.php');
break; case "home": include('home.html.php');
break; case "overview": include('add.html.php');
break; case "add": include('add.html.php');
}
}
So I have made a workaround to load the "add.html.php" frame with the if(isset)$_GET['cat']. But what I really would like to do is to change the Javascript self.location to Code: self.location='index.php?id=add?cat=' + val ;} so that the PHP index script loads the add.html.php automatically. However, when changing the self.location as described above the page is redirected to home.html.php. It is really annoying, I have googled for a full day but haven't found a solution yet. Maybe someone can tell me how I can easily load the correct frame by using Javascript? Many thanks in advance!! Hi folks! I know this is a really simple script, but I'm still a beginner, still learning and struggling..haha thanks for sticking with me Anyway my aim here is to have x,y, or z Div come to the front onClick. I've figured out how to do it with two Div's (using the code below) but not with 3 or more. I'm not attached to the code, so if you want to suggest something totally different I am all ears! Thank you greatly! ian Code: <script>
function changeZunder() {
layer1.style.zIndex = 1;
layer2.style.zIndex = 2;
}
function changeZover() {
layer1.style.zIndex = 2;
layer2.style.zIndex = 1;
}
</script>
----
<body>
<div id="layer1" style="z-index: 1; position: absolute;" onClick="changeZover()">
FIRST BOX
</div>
<div id="layer2" style="z-index: 1; position: absolute;" onClick="changeZunder()">
SECOND BOX
</div>
</body>
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?
Hi, Is there any JavaScript object/ function that can turn an image 90 degrees ? Thank you for your help ! if it fails (does not find the string)? I thought it gave out the value 'null' or some such, but apparently not. Basically I want a function to execute, but only if replace will work. I need to do this as concisely as possible... Is there a simple way to do this? Otherwise is there an 'include' function or something I could use to check for a string in a value and make it's existence the premise on which an if statement works? Thanks in advance, sorry if this was incoherent... late nights and all. I have scripting that currently disables a C.O.D. option in a dropdown and disables a coupon code input box depending on login pulled from a cookie. I would like to use/modify this script to also disable a "free shipping" option depending on login with a condition of the cart subtotal (if ss_subtotal <= 199...) . I have all of the variables but cannot figure out the syntax to implement the modification. Here is the current script that disables the C.O.D. option and coupon box: Code: <script type="text/javascript">
var LexiConn = {
regCustomer: false,
reg_cookie: /.*ss_reg_.*/,
regGroup: null,
restrictedCustomerGroups: /^wholesale$/,
restrictedPaymentGroups: /^wholesale$/,
restrictedPaymentOption: /^C\.O\.D\. $/,
getCookie: function(){
if (document.cookie.length>0){
var ck = document.cookie.split(';');
for(n=0; n<ck.length; n++){
var ck_name = ck[n].split(',');
if(LexiConn.reg_cookie.test(ck_name)){
reg_ck_s = ck_name[0].split('=');
reg_ck_value = reg_ck_s[1];
var reg_ck = reg_ck_value.split('|');
if(reg_ck[2]=='yes'){
LexiConn.regCustomer = true;
}
LexiConn.regGroup = reg_ck[1];
}
}
}
},
restrictCouponBox: function(){
document.order.coupon_code.parentNode.style.display = 'none';
},
enableCouponBox: function(){
document.order.coupon_code.parentNode.style.display = 'block';
},
disableCOD: function(){
var paytype = document.getElementById('selPaytype');
var payopt = paytype.options;
var option_count = payopt.length - 1;
for(n=option_count; n>0; n--){
if(LexiConn.restrictedPaymentOption.test(paytype[n].innerHTML)){
paytype.removeChild(payopt[n]);
}
}
},
restrictCouponReg: function(values){
LexiConn.getCookie();
if(LexiConn.regCustomer==true){
if(LexiConn.restrictedCustomerGroups.test(LexiConn.regGroup)){
LexiConn.restrictCouponBox();
} else{
LexiConn.enableCouponBox();
}
if(!LexiConn.restrictedPaymentGroups.test(LexiConn.regGroup)){
LexiConn.enableCOD();
}
} else{
LexiConn.enableCouponBox();
LexiConn.disableCOD();
}
}
}
</script>
Here is the attempted modification: Code: <script type="text/javascript">
var LexiConn = {
regCustomer: false,
reg_cookie: /.*ss_reg_.*/,
regGroup: null,
restrictedCustomerGroups: /^wholesale$/,
restrictedPaymentGroups: /^wholesale$/,
restrictedPaymentOption: /^C\.O\.D\. $/,
restrictedShippingOption: /^ss_free$/,
getCookie: function(){
if (document.cookie.length>0){
var ck = document.cookie.split(';');
for(n=0; n<ck.length; n++){
var ck_name = ck[n].split(',');
if(LexiConn.reg_cookie.test(ck_name)){
reg_ck_s = ck_name[0].split('=');
reg_ck_value = reg_ck_s[1];
var reg_ck = reg_ck_value.split('|');
if(reg_ck[2]=='yes'){
LexiConn.regCustomer = true;
}
LexiConn.regGroup = reg_ck[1];
}
}
}
},
restrictCouponBox: function(){
document.order.coupon_code.parentNode.style.display = 'none';
},
enableCouponBox: function(){
document.order.coupon_code.parentNode.style.display = 'block';
},
disableFreeShipping: function(){
var ship = document.getElementByName("shipping");
var shipopt = ship.options;
var option_counter = shipopt.length - 1;
for(n=option_counter; n>0; n--){
if(LexiConn.restrictedShippingOption.test(ship[n].innerHTML)){
shipping.removeChild(shipopt[n]);
}
}
},
disableCOD: function(){
var paytype = document.getElementById('selPaytype');
var payopt = paytype.options;
var option_count = payopt.length - 1;
for(n=option_count; n>0; n--){
if(LexiConn.restrictedPaymentOption.test(paytype[n].innerHTML)){
paytype.removeChild(payopt[n]);
}
}
},
restrictCouponReg: function(values){
int shippingtotal = 199;
LexiConn.getCookie();
if(LexiConn.regCustomer==true){
if(LexiConn.restrictedCustomerGroups.test(LexiConn.regGroup)){
if ('ss_subtotal' <= 'shippingtotal'){
LexiConn.disableFreeShipping();
LexiConn.restrictCouponBox();
}
else{
LexiConn.restrictCouponBox();
}
}
else{
LexiConn.enableCouponBox();
}
if(!LexiConn.restrictedPaymentGroups.test(LexiConn.regGroup)){
LexiConn.enableCOD();
if ('ss_subtotal' <= 'shippingtotal'){
LexiConn.disableFreeShipping();
}
}
}
else{
LexiConn.enableCouponBox();
LexiConn.disableCOD();
}
}
</script>
If the source code is needed i can post a shortened version of it. Any help would be greatly appreciated. Hey, Is there any javascript that i can insert in my website pages, that will turn it upside down? |
|||||||