|
JavaScript - Ie6 Onclick Background-position Problem
So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay.
The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc. I know IE6 doesn't support hover on anything except anchors. This works in IE 7/8 FF 2/3 Safaris and most likely everything else: http://www.muchomungo.com/CrowdTwist..._template.html Relevant CSS Code: li {
list-style:none;
float:left;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul#toolbar a {
height: 111px;
display:block;
text-indent:-9999px;
font-size:0px;
line-height:0px;
outline: none;
}
#toolbar li.unselected:hover {
background-position:0px 222px;
}
#toolbar li.selected {
background-position: bottom;
height: 111px;
z-index: 10;
}
#toolbar li.unselected {
background-position: top;
margin-left:0px;
}
CSS file JS Code: var currentSection = 'dashboard';
var newpane = function(gotoLink){
if (currentSection == gotoLink) {
return;
}
lastSection = currentSection;
currentSection = gotoLink;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
document.getElementById(currentSection).className = "selected";
if (lastSection) {
document.getElementById(lastSection).className = "unselected";
}
}
Thanks for any help! Similar TutorialsHere is my script -- Applied in <head> Code: <script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";
function changeBG(bgImage)
{
document.body.background = backImage[bgImage];
}
</script>
And here is the code im using that is not working within <body> Code: <body>
<div id="map"></div>
<div id="bf_container" class="bf_container">
<div id="bf_background" class="bf_background">
<img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
<div class="bf_overlay"></div>
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Fujiyama<span>Japanese</span></h1>
<ul>
<li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
<li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1. Any help would be greatly appreciated. Thanks, Cross I have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it. I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px; You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll. PHP Code: <a href = "javascript:void(0)" onclick = "document.getElementById('light<?php echo $count;?>').style.display='block'; document.getElementById('light<?php echo $count;?>').style.position = 'fixed'; document.getElementById('light<?php echo $count;?>').style.top = '10px'; document.getElementById('fade<?php echo $count;?>').style.display='block'"> ... [link] ... </a> PHP Code: <div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper"> ... [lightbox content] ... </div> PHP Code: <style> .log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;} </style> Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box Hello, So I have two pieces of Javascript attached to my open/close text boxes. One for the visibility function: Code: <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
The other for changinging the image to reflect the text box's status (open of closed): Code: <script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>
The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position I would like it to stop changing the page position onclick. Any help would be much appreciated! Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! I want to use a windows aero theme for each div on my page. I.e. the divs are transparent and have a blur effect to them. The only way I see to achieve this is to make the div background a blurred version of the page background and use javascript to change the div background position based on the divs position on the page. I have used the demo found here as an example, but the problem with it is that the divs background position won't sync with the page background unless the user clicks on the div and moves it slightly. This isn't a problem if the divs starting position is top left, but if you want to have it start in the center of the page initially, the divs background position is top left. How could I modify this code to move the divs background to the correct position on page load? I do not want the user to be able to drag the divs. Code: $(document).ready(function () {
var dragging = true;
var startX, startY, posX, posY;
var window = $("#Panel1");
$("#header").mousedown(function (e) {
startX = e.clientX;
startY = e.clientY;
posX = window.offset().left;
posY = window.offset().top;
console.log("X: " + e.clientX + ", Y: " + e.clientY);
dragging = true;
});
$(document).mousemove(function (e) {
if (dragging) {
moveX = e.clientX - startX;
moveY = e.clientY - startY;
console.log("X: " + moveX + ", Y: " + moveY);
window.css({
left: posX + moveX,
top: posY + moveY,
"background-position": "-" + (posX + moveX) + "px -" + (posY + moveY) + "px"
});
}
}).mouseup(function () {
dragging = false;
});
});
I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes. So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Welcome to Whitetail Fantasies</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
background-color: #000;
}
#background {
position:absolute;
float:left;
width:1024px;
height:768px;
background-image:url(wf_layout/wf_bkgnd-1.jpg);
z-index:0;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">
<div id="background"></div>
<div id="outer">
<div id="header"></div>
<div id="wrapper">
<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
</tr>
<tr>
<td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
</tr>
<tr>
<td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
</tr>
<tr>
<td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
</tr>
<tr>
<td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td>
</tr>
<tr>
<td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="content_area">
<br /><br /><br />
<iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
</div>
iu
</div>
</div>
<div id="footer"></div>
<map name="Map" id="Map">
<area shape="poly" coords="0,100" href="#" />
<area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>
</html>
Hey all, I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load. I'm clueless as to how to do this. Here's my code for the image attached: Code: <div class="colour-picker"> <div class="tick-off" id="red" onclick="changeclass();"> </div> <div class="tick-off" id="blue" onclick="changeclass();"> </div> <div class="tick-off" id="black" onclick="changeclass();"> </div> <div style="float: right; margin-right: 6px;">Choose colour:</div> </div> CSS: Code: .colour-picker {
float: right;
margin: 0 10px 0 0;
line-height: 30px;
text-shadow: #292929 2px 1px 1px;
font-size: 15px;
color: #FFF;
padding: 0px;
height: 32px;
font-weight: normal;
}
.colour-picker #red {
background-color: red;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #blue {
background-color: blue;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #black {
background-color: black;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker .tick-off {
background-image: none;
}
.colour-picker .tick-on {
background-image: url(images/colour-tick.png);
background-repeat: no-repeat;
background-position: center center;
}
Can anyone tell me how to do it? Thanks! Adam Hi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? Hello Everyone! I have one link that I need to do two onclick events at once. At first I just tried writing them both but that obviously didn't work b/c I'm here! This would result in the first onclick event tacking place and not the second. So my question is could someone tell me how to write this code in javascript, so both events will take plack onclick, and then how I should reference that script within my link? Thank you for taking a look Code: <a href = "javascript:void(0)"
onclick = "document.getElementById('light<?php echo $count;?>').style.display='none';document.getElementById('fade<?php echo $count;?>').style.display='none'"
onclick = "document.getElementById('light<?php echo $count + 1;?>').style.display='block';document.getElementById('fade<?php echo $count + 1;?>').style.display='block'"> Previous
</a>
PHP Code: var deck = new Array (52); for (var ind = 0, face = 1; ind < 52; ind+=4, face++) { deck[ind] = face + "c"; deck[ind + 1] = face + "d"; deck[ind + 2] = face + "h"; deck[ind + 3] = face + "s"; } for (var a = 0, b = 0, c = 0; a < 19; a++, b+=2) { document.write("<img src='cards/placeholder.gif' name='" + deck[b] + "' width='53' height='68' onClick='alert(" + deck[b] + ")'>"); } I have this code for my Go Fish game, however it will not show an alert when you click the image. I've also tried onClick='alert(deck[" + b + "])' but that does not work either. Can someone help me please? hi i have a problem coding a menu i have 4 links on menu and clicking on items should expand a DIV and change the menu item image. also rollover has to change the image too i mean 3 conditions for every menu item: normal, rollover, clicked. i have no problem with rollover but when item is been clicked and image changes, image has to change on mouse over again, but has not to change to original image on mouse out. also clicking on another menu item has to change the previous item image to original. i'm confused enough i tried by samples over and over. but the main problem is that i dont know js syntaxes and coding however, anybody could help??? I finished this code, the full code is not here, but when I ran it as a diagnostic the action did not occur when i clicked on the "process item" button. I believe it may have something to do with the script, but i am new to javascript and cannot seem to figure it out, it is supposed to multiply the price by the number to give the value of sale (sale). Any help would be much appreciated!!! Code: <html>
<script language="javascript">
function test()
{
var Items,Price,Number,sale;
Items = parselfloat(document.victoria.secondnumber.value);
Price = parselfloat(document.victoria.price.value);
Number = parselfloat(document.victoria.num.value);
sale = Price*Number;
document.victoria.val.value=sale;
}
</script>
<body><form name ="victoria">
<center>
<table border=40 bordercolor="yellow">
<tr><td>Customer Number <input name ="firstnumber" type="text" size="6" value="1" ></td>
<td>Home Delivery <input name="customer_name" type="checkbox"Checked></td><tr>
<tr><td>Items Purchased</td><td><center><input name="secondnumber" type="text" size="12"></center></td></tr>
<tr><td>Item Number</td><td><center><input name="itemnum" type="text" size="12" value="1"></center></td></tr>
<tr><td>Price</td><td><center><input name="price" type="text" size="12"></center></td></tr>
<tr><td>Number Purchased</td><td><center><input name="num" type="text" size="12"></center></td></tr>
<tr><td>Value of Sale</td><td><center><input name="val" type="text" size="12" value="0"></center></td></tr>
<tr><td>Customer Total</td><td><center><input name="total" type="text" size="12" value="0"></center></td></tr>
<tr><td></td><td><input type="button" value="Process Item" onclick="test()"></td></tr>
</table>
</center></form>
</body></html>
I've been doing some research as to why this doesn't work but to no avail. I'm hoping someone here can lend a hand/brain. I'm relatively new to Javascript. This works perfectly in FF and IE7 but not IE6. The very last "tdright" div at the bottom of this list (the item shown in the HTML I've provided is in the middle of 30+ rows of parameters) also gets out of whack in IE6 for some reason. FF is fine, of course. Code: var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}
function toggleID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
if (element.style.display=="none"){
element.style.display="block"
}
else {
element.style.display="none"
}
}
Code: <div class="tdright">: <input type="text" size="1" name="x_label_angle" value="<?php echo $_SESSION['x_label_angle']; ?>"></div>
<div class="tdleft"><p class="IEtop4px">Interval</p></div>
<div class="tdright">:
<select name="x_label_interval" style="width:80px">
<option value="First & Last" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "First & Last") { ?> selected<?php } ?>>First & Last
<option value="Halfway" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Halfway") { ?> selected<?php } ?>>Halfway
<option value="One-Third" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "One-Third") { ?> selected<?php } ?>>One-Third
<option value="All" onClick="hideID('x_label_other_left');hideID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "All") { ?> selected<?php } ?>>All
<option value="Other" onClick="showID('x_label_other_left');showID('x_label_other_right');"<?php if ($_SESSION['x_label_interval'] == "Other") { ?> selected<?php } ?>>Other
</select>
</div>
<div class="tdleft" id="x_label_other_left" style="display:none"></div>
<div class="tdright" id="x_label_other_right" style="display:none"> <input type="text" size="1" name="x_label_other_interval" value="<?php if (is_numeric($_SESSION['x_label_interval'])) { echo $_SESSION['x_label_interval']; } ?>"></div>
Thanks in advance! I guess it is because it is 2am and had a few beers but i cannot get this to work and i know its pretty simple to do - see the code below: Code: {if ""|fn_needs_image_verification == true}
{assign var="is" value="Image_verification"|fn_get_settings}
<p{if $align} class="{$align}"{/if}>{$lang.image_verification_body}</p>
{assign var="id_uniqid" value=$id|uniqid}
{literal}
<script language="javascript" type="text/javascript">
function reloadCaptcha() {
captcha = document.getElementById("captureURLID").src;
return captcha += 'reload';
}
</script>
{/literal}
{if $sidebox}
<p><img id="verification_image_{$id}" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&`$id_uniqid`&"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" /></p>
{/if}
<p><input class="captcha-input-text valign" type="text" name="verification_answer" value= "" autocomplete="off" />
{if !$sidebox}
<img id="verification_image_{$id} captureURLID" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&`$id_uniqid`&"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" />
{/if}
<img src="{$images_dir}/icons/icon_reload.png" height="25" width="25" alt="Reload Captcha Image" onclick="reloadCaptcha();" class="valign image-captcha" /></p>
{/if}
now the following works totally fine, when you click the captcha code changes..... "onclick="this.src += 'reload'" you will notice i have added a custom reload button image below this with a onclick calling a custom function "reloadCaptcha(); which i want to reload the captcha image above it - however it is not working, i have done the function so it grabs the src from the element ID, i have added 2 ID's to the IMG but cannot remember if you can have multiple IDs or not which if not could be causing the problem but not 100% sure how to include the smarty code for the generated ID on that image. Any ideas on the code above from having a quick glimps? as the code stands i get the error: Error: captureURL is null Many Thanks Currently working on a slideshow for this website, and I've used the same code in the past but because I am now working with a wordpress template I'm having some problems. Link to slideshow The next image is loading underneath the current image and then moving up, which I need them images to stay in place of course. Code: <div id="lookbook">
<a href="http://www.axandapple.com/store/?cat=71" target="_self"><ul class="ppt">
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-1.jpg" ALT="Ax+Apple Presents The Witching Hour Collection"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-2.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-3.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-4.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-5.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-6.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces and Snake Charmer Bracelet"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-7.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces and Asteria Earrings"></img></li>
</ul></a>
<p style="text-align:center;"><button type="button" id="back">Back</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Forward</button></p>
</div>
<p>2011 Ax+Apple</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
$('#stop').click( function() {
stop();
showPlay();
} );
$('#play').click( function() {
start();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
function showPause() {
$('#play').hide();
$('#stop').show();
}
function showPlay() {
$('#stop').hide();
$('#play').show();
}
function start() {
interval = setInterval( "forward()", 3000 );
}
function stop() {
clearInterval( interval );
}
$(function() {
start();
} );
</script>
Code: #lookbook{
position:relative;
}
ul.ppt{
position:absolute;
height:699px;
}
.ppt li{
list-style-type:none;
position:absolute;
top:0px;
left:0px;
height:699px;
}
.ppt img{
background-color:#FFF;
padding:5px;
top:0px;
position:absolute;
}
#lookbook p{
text-align:center;
z-index:99;
}
#lookbook button{
background-color:#FFF;
border:0;
padding:0 3px 0 3px;
color:#000;
font:12px "Courier", "Courier New", Courier, monospace;
}
What I am trying to achieve, is a button that calls a function that changes the onclick attribute of that button, so that when it is clicked again, it resets the onclick attribute to call the default function. here is what the stripped down code looks like: Code: <html>
<head>
<script type="text/javascript">
function remove_prep(a){
a.value="cancel";
a.onclick="cancel_remove(this);";
}
function cancel_remove(a){
a.value="remove";
a.onclick="remove_prep(this);";
}
</script>
</head>
<body>
<input type="button" value="remove" onclick="remove_prep(this);" />
</body>
</html>
for some reason, it only fires once, after which it ceases to work properly. thanks for the help this part of my code is killing me. Hi there, I'm soo stuck on particular piece of code.. You see i have 2 radio buttons with values 12hr and 24hr; on clicking any of the above the time format should change automatically. by default the time format comes in 12hr format against onload event of <body>. I've tried using javascript but this problem is persisting... Can anyone help me pleassssse.. i m very new to this thread so i will try to be as clear as possible i m try to create a website where i n have inserted a menu (this menu template i found online which is free.) Code: <div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<li><a href="#"><span>Cities</span></a>
<div><ul>
<li><a href="#"><span>Pune</span></a></li>
<li><a href="#"><span>Mumbai</span></a></li>
<li><a href="#"><span>Delhi</span></a></li>
<li><a href="#"><span>Madras</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table. A menu is not hovered will be like this: some errors are found 1. Sub-menus are displayed under the menu I want to display All sub-menus on the right and next to menu border Eg: The result I want it to be looked like this: How can I fix the code like that ? 2. Sub menu does have the same size of length. When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties. How can fix the problem so that All submenu will be the same size of length when they are called ? My code is for leftMenu.php Code: <div id="leftmenu">
<ul>
<li><a href="index.php?page=dress">Fashion Dress</a></li>
<li><a href="index.php?page=handbag">Hand Bags</a></li>
<li><a href="index.php?page=scraves">Scraves</a></li>
<li><a href="index.php?page=watch">Bracelet Watches</a></li>
<li><a href="#" rel="dropmenu1">Silk Ties</a></li>
<li><a href="#" rel="dropmenu2">Pyjamas</a>
</li>
</ul>
</div>
<!-- SILK TIES drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="index.php?page=plain">Plain Style</a>
<a href="index.php?page=woven">Woven Style</a>
</div>
<!-- PYJAMAS drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?page=wonen">For Women</a>
<a href="index.php?page=men">For Men</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("leftmenu")
</script>
My code is for leftmenu.css Code: #leftmenu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
margin-top: .1em;
}
ul#leftmenu li {
display: block;
position: relative;
float:left;
}
#leftmenu li a {
display: block;
text-decoration: none;
background-image:url(images/leftNormal.gif);
width: 218px;
height: 30px;
margin-top: .1em;
}
#leftmenu li a:hover {
display: block;
text-decoration: none;
background-image:url(images/leftHover.gif);
width: 218px;
height: 30px;
white-space: 1em;
color:#FFF;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
background-image:url(images/leftmenu.gif);
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only @hắc*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-image:url(images/lefthover.gif);
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#FFF;
}
Javascript code in the page of leftmenu.js Code: var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)
//No need to edit beyond here////////////////////////
dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},
getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},
showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},
revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH<maxH){
var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},
clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},
dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
},
positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},
hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},
delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},
hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},
clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},
addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startchrome
}
I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly. Thanks i have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks |
|||||||