|
JavaScript - Javascript And Css Z-index Div Swapping Issue
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;
}
Similar TutorialsI 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>
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!! For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox: this would be the original source: <script type="text/javascript" src="Includes/eng_chars.js"></script> it would be swapped for this souce file on checkbox checked: <script type="text/javascript" src="Includes/heb_chars.js"></script> and then returned to <script type="text/javascript" src="Includes/eng_chars.js"></script> when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed Thanks So i have this weird problem that only occurs in IE, in combination with Adsense. I also tried FF and Chrome and it does not occur in those browsers. I use javascript to swap around divs, since css 'order' is not supported in every browser (at least not working for my iphone 4). The swapping is working fine in IE when you resize from a screen larger than 1024 to a screen smaller than 1024 and then to a screen larger than 1024. However it does not work well when you open the page/script in a screen smaller than 1024 and then make it larger (in IE). The sidebar 'aside' stays on the right side after 'article' instead of moving to the left. This only happens when i use adsense in the sidebar.. Otherwise it all works fine... Very weird to me.. Anyone who can help out? See this weird problem he JS Bin Here is the code: Code: <html>
<head>
<style>
html,
body {
padding: 0;
margin: 0;
background: #eee;
}
body {
padding: 0 3%
}
header,
footer,
.slogan,
.page-wrapper,
.headline-wrapper,
aside,
article {
box-sizing: border-box
}
.slogan,
aside,
article {
background: #fff
}
aside,
article {
padding: 20px;
border-radius: 10px;
margin: 10px 0 0 0;
-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
}
header,
footer {
padding: 20px
}
@media (min-width:1024px) {
.page-wrapper,
header,
footer {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
.page-wrapper {
display: table;
width: 100%;
padding-top: 50px;
max-width: 1200px;
margin: 0 auto;
}
.page-wrapper > aside,
.page-wrapper > article {
display: table-cell;
padding: 20px;
}
.page-wrapper aside {
width: 30%
}
article {
position: relative
}
.slogan {
padding: 0 20px;
border-bottom: 0px;
width: 100%;
margin: 0;
line-height: 50px;
height: 50px;
position: absolute;
left: 0;
top: -50px;
}
.slogan {
border-radius: 10px 10px 0 0;
-webkit-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
background: #ddd;
}
article {
border-radius: 0 0 10px 0
}
aside {
border-radius: 10px 0 0 10px
}
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
function handleMargins() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 1024) {
$(".page-wrapper").each(function() {
var detach = $(this).find("aside").detach();
$(detach).insertAfter($(this).find("article"));
})
}
if(width >= 1024) {
$(".page-wrapper").each(function() {
var detach = $(this).find("article").detach();
$(detach).insertAfter($(this).find("aside"));
})
}
}
jQuery(document).ready(handleMargins);
$(window).resize(handleMargins);
</script>
</head>
<body>
<header>header</header>
<div class="page-wrapper">
<aside> sidebar <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- N_Responsief_Alle_CTR_AlleAdsenseSites -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3961745091197220"
data-ad-slot="3968514626"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></aside>
<article>
<h3 class="slogan">One line slogan only
</h3>
<p>This is the articlediv</p>
</article>
</div>
<footer>footer</footer>
</body>
</html>
Reply With Quote 12-23-2014, 03:35 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts You need a doctype! maybe add <!DOCTYPE html> at the top of this code. IE needs a doctype or it is screwy. Below is the code. My function: Code: function swap_content(id1,id2)
{
var tmp = document.getElementById(id1).name;
var theval = document.getElementsByName('primary_propertyp_id')[0].value;
document.getElementById(id1).name = document.getElementsByName('primary_propertyp_id')[0].name;
document.getElementsByName('primary_propertyp_id')[0].name = tmp;
document.getElementById(id2).id = document.getElementById('primary').id;
document.getElementById('primary').id = 'addressid_'+theval+'_div';
}
Applicable Code for primary info: Code: <div id="primary"> <label>primary to secondary:</label><input name="primary_propertyp_id" type="text" id="addressid_<? echo $row['primary_property_id']; ?>" value="<? echo $row['primary_property_id']; ?>"/> </div> Applicable Code for secondary info/link to change: Code: echo "<div id=\"addressid_" . $properties_row['id'] . "_div\">"; echo "<a href=\"#\" onclick=\"swap_content('addressid_" . $properties_row['id'] . "','addressid_" . $properties_row['id'] . "_div'); return false\">Make Primary</a>"; echo "<input id=\"addressid_" . $properties_row['id'] . "\" name=\"addressids[]\" value=\"" . $properties_row['id'] . "\" type=\"text\">"; echo "</div>"; This is running through a PHP loop so it's making multiple divs and links for the secondaries. I am wanting to be able to swap out any of them to make them 'primary'....this works for the first click, but after the first click it makes every div id and input name the same as the first that was clicked. It's also not working AT all if i click on the bottom link first, then a link above it. Top-down works, bottom-up doesn't...Please help Thanks in advance, Jeremy I tried posting the code but it's too long... Page address: http://professorcuddlecore.com/paintings/ Problem: Click first or second photo, pops up fine, bottom text is behind the photo. You can view the JS by viewing source etc, sorry I can't fit it here. I spent 2-3 hours trying to figure out the problem but I'm new to JS and it looks like pretty convoluted code I'm using (obviously didn't write it myself, it's by "PopBox.") Thanks for any time spent helping me, pre-appreciated. 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 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>
I have selection boxes that when you choose an option an associated picture is supposed to display.. the problem is that with IE i can use whatever attribute i want and i get the desired effect except with the label attribute which happens to be the only attribute (i know of) that firefox will work with... IE still swaps the picture but also changes the text in the selection box to the img url.. here are my codes: Code: function swapImage(){
var theImage2Display = document.comp.caseselect.options[document.comp.caseselect.selectedIndex].label;
var imagePlace = document.getElementById("caseimg");
imagePlace.src = theImage2Display;
}
and in the html Code: <img src="start.jpg" id="caseimg" /> <select name="caseselect" style="width:625px" onchange="Calculate(); swapImage();"> <option label="start.jpg" value="0" selected="true">Case</option> <option label="COOLER MASTER Elite 310red.jpg" value="50">COOLER MASTER Elite 310 Red ($50.00)</option> <option label="COOLER MASTER Elite 310blue.jpg" value="50">COOLER MASTER Elite 310 Blue ($50.00)</option> <option label="COOLER MASTER Elite 310orange.jpg" value="50">COOLER MASTER Elite 310 Orange ($50.00)</option> <option label="COOLER MASTER Elite 310silver.jpg" value="50">COOLER MASTER Elite 310 Silver ($50.00)</option> </select> Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. Hi everyone, I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values. my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match. I am all new to JS and please please help Many thanks Hi everyone, I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript Code: <html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
}
</script>
</head>
<body>
<form name="frmMain">
<input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
<br />
<input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
</form>
</body>
</html>
Problem: I have a DIV whose content needs to change on mouseover and return to prior state on mouse out. I do not want to pre store the divs inner HTML in variables. So I am trying to get the script on execution (mouseover) to grab the existing innerHTML from the DIV, assign it to a variable, then write the new innerHTML content. on mouse out, function sets innerHTML to the variable in order to restore original content. For some reason the code below causes a strange flicker effect, also sometimes it catches the mouseout and works, other times it does not catch mouseout and is stuck with the content changed on mouse over? any ideas why/how i set this up wrong? HTML Code: <div id="ac-repair-inspection" class="bgbblue cborder" onMouseOver="test();" onMouseOut="testo();" > <div class="ctr"><h2 class="fs19 uline">COOLING SYSTEM TUNE-UP</h2></div> <div style="padding-left:17px"> <ul style="padding:0;" class="fs15"> <li>Check Refrigerant Pressures</li> <li>Monitor Thermal Expansion Valve operation</li> <li>Check temperature differential</li> </ul> </div> <!-- end list --> </div> <!-- end ac repair inspection --> SCRIPT (Placed at end of HTML before closing body tag) Code: <script type="text/javascript">
var temp= document.getElementById("ac-repair-inspection").innerHTML;
function test() {document.getElementById("ac-repair-inspection").innerHTML="<img src='../images/layout_images/cold-tune-up-promo.png' width='340' height='428'>";}
function testo() { document.getElementById("ac-repair-inspection").innerHTML= temp;}
</script>
CSS Code: #ac-repair-inspection {
position:absolute;
width:340px;
height:428px;
left: 453px;
top: 10px;
}
I'm a total beginner at both CSS and Javascript. What I want to do is to swap things on mouseover, and keep the code as simple as possible both so I have a chance of understanding it and so it will work on as many browsers as possible. I've got an image swap to work as I hoped using the method at http://acmeous.blogspot.com/2008/07/...-on-mouse.html, and am hoping to swap DIVs in the same way, with the initial DIV containing text and a thumbnail, and the replacement DIV a full size image. I started with http://www.willmaster.com/library/fe...r_div_swap.php In the following, mousing over should cause initDiv to disappear and imageDiv to appear; mousing out should cause imageDiv to disappear and initDiv to appear. Instead, I see imageDiv flickering over initDiv whenever the mouse is moved within the div. What's the simplest way to correct my error? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
.mybox { width:full; height:115px; border-color:black; border-style:solid; border-width:1px; padding:0px; }
</style>
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
--></script>
<div id="imageDiv" class="mybox" style="display:none;">
large image here of same dimensions as DIV
</div>
<span onmouseover="HideDIV('initDiv');DisplayDIV('imageDiv')" onmouseout="HideDIV('imageDiv');DisplayDIV('initDiv')" style="cursor:pointer">
<div id="initDiv" class="mybox">
<table><tr><td>lots of text<td>thumbnail</table>
</div>
</span>
</html>
I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix. This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does. Code: $(document).ready(function(){
var showMenu = function ( el, menu, p )
{
var o = $(el).offset();
$(menu).clearQueue();
$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100 } );
$(menu).stop().fadeIn(1);
$(menu).mouseover( function () {
$(this).clearQueue();
$(this).stop().fadeIn(1);
});
$(menu).mouseout( function () {
$(this).clearQueue();
$(this).stop().fadeOut(1);
});
$(el).bind( 'mouseout', {target:menu}, function(e) {
$(e.data.target).stop().fadeOut(1);
});
$(el).bind( 'mouseover', function() {
$(p).fadeOut(1);
});
$(el).bind( 'mouseout', function() {
$(p).fadeIn(1);
});
}
var n=0;
$(document).ready(function() {
$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });
});
});
see it live he http://dev.joshuadnelson.com/clients/postgrowth/ ok so i need help.... I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six.. The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the <select>..... THIS IS WHAT I NEED HELP WITH The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the <select>....I HAVE THIS DONE The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log.... I HAVENT EVEN GOTTEN AROUND TO WORRYING ABOUT THIS YET This is what i have so far and have so far exhausted everything that i know to try to get it to work but this is just the code with out any of my failed attempts dragged into it <head> <style> input{background-color:#B0D0BC;text-align:center} </style> <script> order=["c_01.jpg"] function roll(){ {r=Math.ceil(Math.random()*5) document.images[0].src="c_0"+r+".jpg" t.value=t.value+"\n"+r} {r=Math.ceil(Math.random()*5) document.images[1].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[2].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[3].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[4].src="c_0"+r+".jpg" t.value=t.value+" "+r} } function swap(n){ remember=document.images[n].src= document.images[n].src="c_01.jpg" remember=order[n] } </script> <div align="center"><center><table border="4" cellpadding="5" bgcolor="#E0E0DC"> <tr> <td> <img src="c_01.jpg" alt="100" onclick="swap(0)"></td> <td> <img src="c_02.jpg" alt="100" onclick="swap(1)"></td> <td> <img src="c_03.jpg" alt="100" onclick="swap(2)"></td> <td> <img src="c_04.jpg" alt="100" onclick="swap(3)"></td> <td> <img src="c_05.jpg" alt="100" onclick="swap(4)"></td> </tr> <tr> <td colspan="5" align="center"> Select A Value: <select name="hi"> <option value="hi1" onchange="swap(0)">1</option> <option value="hi2" onchange="swap(1)">2</option> <option value="hi3" onchange="swap(2)">3</option> <option value="hi4" onchange="swap(3)">4</option> <option value="hi5" onchange="swap(4)">5</option> </select> </td> </tr> <tr> <td colspan="5" align="center"> <input type="button" onclick="roll()" value="roll them"> <br> <textarea name="t" cols="40" rows="12" >History Of Roles</textarea> Aloha, I'm trying to make a page that changes a pic to match the paragraph the user's mouse is over. Page is here, http://rentalocal.thad.com/sample1 The problem I have is that the page reloads the initial image (the map) every time I move my mouse from one list item to the next, before it loads the next pic. It only does this the first time, but it's annoying, slow, and makes my page look bad. I tested it using both Safari and Firefox and got the same results. Does anyone know how I should correct it? TIA, Thad Code: <ul class="borderit" onmouseout="document.getElementById('picture').src='/pic0.jpg'">
<li onmouseover="document.getElementById('picture').src='/pic1.jpg'">
We are picked up at our hotel in Waikiki. We are greeted with aloha, and fresh leis too.
Our destinations are numerous, so let's get started!
</li>
<li onmouseover="document.getElementById('picture').src='/pic2.jpg'">
We drive away from Waikiki toward the Windward side of O'ahu. Along the way, we see Diamond Head.
We stop at a scenic lookout for our first pictures of the day.
</li>
<li onmouseover="document.getElementById('picture').src='/pic3.jpg'">
From there we view at Koko Crater and Hanauma Bay. Next we stop at the Halona Blowhole,
where the waves force water through a lava tube and into the sky as high as 30 feet!
</li>
<li onmouseover="document.getElementById('picture').src='/pic4.jpg'">
We continue along past the amazingly beautiful blue costal waters. Have you ever seen waters so blue?
</li>
<li onmouseover="document.getElementById('picture').src='/pic5.jpg'">
We are now far from the hustle and bustle of Honolulu and Waikiki. We stop for a visit to one of the many
fantastic local beaches, but not for long, we have much more to see!
</li>
<li onmouseover="document.getElementById('picture').src='/pic6.jpg'">
As we continue we reach a local macadamia nut farm where we stop to buy some flavorful gifts for friends
back home. We make more visits to an art gallery, a ranch, a local restaurant
for some ono (Hawaiian word for yummy) food.
</li>
<li onmouseover="document.getElementById('picture').src='/pic7.jpg'">
We make a stop at Laie Point, and learn about its Hawaiian legend.
</li>
<li onmouseover="document.getElementById('picture').src='/pic8.jpg'">
From there we continue on to the North Shore. We stop at a few of the world-famous beaches and observe
some of the day's surfers. We even get a chance to swim with a honu (turtle).
</li>
<li onmouseover="document.getElementById('picture').src='/pic9.jpg'">
After a stop at a shrimp truck, we get to Hale'iwa Town for some shopping and dining. We get some yummy Matsumoto Shave Ice.
</li>
<li onmouseover="document.getElementById('picture').src='/pic10.jpg'">
After leaving the North Shore we begin our return the Waikiki. We travel through wonderfully fragrant pineapple fields.
We stop at the Dole Plantation and try not to get lost in the world's largest maze.
</li>
<li onmouseover="document.getElementById('picture').src='/pic11.jpg'">
On our way back to town we visit the National Cemetery at Punchbowl and the State Capitol.
</li>
<li onmouseover="document.getElementById('picture').src='/pic12.jpg'">
Our final stop is another scenic point for one last view of the day.
</li>
<li style="margin-bottom:.5em" onmouseover="document.getElementById('picture').src='/pic13.jpg'">
We return to our hotel. Today we saw so many wondrous sights, took countless pictures, heard about Hawaiian history and legend,
sampled some local food, discovered some Hawaiian treasures, and learned some Hawaiian language. This will be a memory
that we will recall for the rest of our lives.
</li>
</ul>
hi everyone. i have to create the 15 puzzle game and im having a difficult time getting started. can anyone help? i need to create a table (4x4) that has one empty space. All the other spaces must have a random generated value between 1 and 15. All i got so far is a onclick image swapping function.... need help! thanks
Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file: Code: function swapIt(id1,id2,id3)
{
var object1 = document.getElementById(id1);
var object2 = document.getElementById(id2);
var object3 = document.getElementById(id3);
var z1 = object1.style.zIndex;
var z2 = object2.style.zIndex;
var z3 = object3.style.zIndex;
object1.style.zIndex = z3;
object2.style.zIndex = z1;
object3.style.zIndex = z2;
}
Here's the code invoking this function in my html file: Code: function moveAvalon()
{
var x = xCoord("avalon");
if(x <= (W - 125))
{
shiftIt("avalon", 10, 0);
setInterval("moveAvalon()", 50);
}
else if(x > (W - 125))
{
swapImages();
}
}
function swapImages()
{
showIt("kids");
showIt("fiction");
showIt("nfiction");
setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
}
|
|||||||