|
JavaScript - Jcarousel : Help Needed
Hi i have a question and i would really appreciate the help of fellow coders. I came across a certain horizontal jcarousel on the website http://www.goal.com , i would like to know how this was done as i would like to use this type of jcarousel for my websites homepage . i would really appreciate the help of you guys .
Similar Tutorialshttp://sorgalla.com/projects/jcarousel/ I would like to use this jcarousel. I dont use AJAX, I just want to set it up with script in my head and html on my website. Is this possible or do I have ot use AJAX? I am not familiar with it at all.. I completed the steps it said. I put the folder in my directory. I added the script to my head code, as well as the other one. I then also added the other two scripts in my html where I would like them to be. It's not showing up so I know I am missing steps or not doing it correctly Help anyone? THANK YOU!!! Hello, We have jcarousel on our forum site which rotates automatically. It is vbulletine forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set. But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller. Our site URL is http://newtest.naturalparenting.com.au Please go at any topic and post page finally, Below first post there is a scroller e.g http://newtest.naturalparenting.com....ad.php?t=42713 While old site design is still active at http://ninad.naturalparenting.com.au Please go at any topic and post page finally, Below first post there is a scroller e.g http://ninad.naturalparenting.com.au...ad.php?t=40745 At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally. It is really very strange issue for me. I have tried all ways to fix it but alas !!! Any help would be greatly appreciated. Code: <style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 0px;
background: transparent;
border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 695px;
padding: 20px 30px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
width: 75px;
height: 220px;
padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
height: 220px;
margin-left: auto;
margin-right: auto;
width: 675px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 75px;
height: 220px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 83px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
/* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 83px;
left: 5px;
width: 31px;
height: 31px;
cursor: pointer;
/*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 31px;
/*background-image: url(images/checkout/nivo_nav.png);*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
* Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
position: absolute;
bottom: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
position: absolute;
top: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
#upsell {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
}
#upsell li {
border: 0 dashed #CCCCCC;
float: left;
height: 220px;
list-style: none outside none;
margin: 0 10px 0 0;
padding: 2px;
width: 125px;
}
</style>
<script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>
Jquery, Jcarousel problems - want it to go back to the start and then stop Here is the link - I want it to go from the last - which would be the 3rd image and swoosh back to the beginning and stop. my alternative is already uploaded where I have it just go to the 4th which is the same at the first.. Help it would look nicer with it swooshing back to the beginning and stopping. http://www.macrojump.com/sti_demo/home.php Code: $(document).ready( function() {
function carouselInit(carousel) {
$('.level0-hero-carousel .carousel-control a').bind('click', function() {
carousel.scroll( parseInt( $(this).attr('rel') ) );
carousel.stopAuto();
return false;
});
carousel.clip.hover(function() {
//carousel.stopAuto();
}, function() {
//carousel.startAuto();
});
};
function firstItemAction(carousel, item, idx, state) {
$('.level0-hero-carousel .carousel-control a').removeClass('active').eq(idx-1).addClass('active');
};
$('.level0-hero-carousel').jcarousel({
scroll: 1,
initCallback: carouselInit,
itemFirstInCallback: firstItemAction,
auto: 4,
wrap: 'first',
animation: 1500,
buttonNextHTML: null,
buttonPrevHTML: null
});
if( $('.level0-hero-carousel ul li').size() > 1 )
$('.level0-hero-carousel .carousel-control').show();
$('.level0-hero-carousel .carousel-control a').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
/* Alerts */
$('.level0-alerts ul li').eq(0).show();
var alertsInterval = null;
var alertsIndex = 0;
var alertsIntervalLength = 1500;
var alertsCount = $('.level0-alerts ul li').size();
var expandedSizeClass = 'level0-alerts-expanded-' + alertsCount;
// Update NumAlerts Text
$('.level0-alerts .alerts-toggle span').text(
alertsCount + ' Alerts'
);
$('.level0-alerts .alerts-controls .alerts-toggle').bind('click', function() {
var itemsCount = $('.level0-alerts ul li').size();
if( $('.level0-alerts').hasClass('level0-alerts-expanded') ) {
$('.level0-alerts').removeClass('level0-alerts-expanded');
$('.level0-alerts').removeClass(expandedSizeClass);
switchAlert();
startAlertsInterval();
} else {
$('.level0-alerts').addClass('level0-alerts-expanded');
$('.level0-alerts').addClass(expandedSizeClass);
$('.level0-alerts ul li').show();
stopAlertsInterval();
}
return false;
});
var switchAlert = function() {
$('.level0-alerts ul li').hide();
alertsIndex++;
$('.level0-alerts ul li').eq(alertsIndex % alertsCount).show();
}
var startAlertsInterval = function() {
if(alertsInterval == null)
alertsInterval = setInterval(switchAlert, alertsIntervalLength);
}
var stopAlertsInterval = function() {
if(alertsInterval != null) {
clearInterval(alertsInterval);
alertsInterval = null;
}
}
if(alertsCount > 1) {
$('.level0-alerts .alerts-controls').show();
startAlertsInterval();
}
});
/*
* jQuery Placeholder Plug-in
*
* Copyright (c) 2010 Max Davis
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: 1
* Version: 0.1
*
* v0.1
* - First public release
*
*/
(function($){
$.fn.placeholder = function() {
$(this).each( function() {
if($(this).attr("type") == "password") {
var original_pass_field = $(this);
if(original_pass_field.val() == "") {
$(this).parent().append("<input type=\"text\" value=\""+ $(this).attr("placeholder") +"\" name=\"pass_placeholder\" class=\"form-text placeholder-inactive\" id=\"pass_placeholder\">");
$(this).css("display","none");
}
var original_pass_field = $(this);
$("#pass_placeholder").focus(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","none");
original_pass_field.css("display","");
original_pass_field.focus();
}
});
original_pass_field.blur(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","");
original_pass_field.css("display","none");
}
});
} else {
if($(this).val() === "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass('placeholder-inactive');
}
$(this).focus(function() {
if($(this).val() === $(this).attr("placeholder")) {
$(this).removeClass('placeholder-inactive').addClass('placeholder-active');
$(this).val("");
}
}).blur(function() {
if($(this).val() === "") {
$(this).removeClass('placeholder-active').addClass('placeholder-inactive');
$(this).val($(this).attr("placeholder"));
}
});
}
} )
}
})(jQuery);
Hello all, I'm nick3d, from the UK. I'm new to this forum... Anyway... I am struggling with a project, basically what I want is. I want a slide in menu bar to the left of my screen, which is also a floating menu, so it follows my page when scrolled up and down, also, in the menu on the left I want the links to be like this UserCP FAQ Calender etc... Then once link clicked I want this to happen UserCP Change View Edit FAQ Calender, etc. so tabs can be opened, are there any available scripts out there which does all this?? Or could any one point me in the right direction? Hello guys i really need your help please. i need a code that when a button or image is clicked then a div's width and height are changed. Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work. I need a code that when a button is clicked then the div's and the flash's width and height are changed. please have a look at the temp website (http://latinunit.net/temp/ , you will understand where im coming from. on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down. My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file. i have spent 2 days on this little issue i just cant make it work, so please anyone can help me. Hi all, I'm a new member of this forum. I need help. My validation code checks for errors while filling out a permission form. If any of the fields are invalid it alerts a javascript box. But it disappears only after 2 mouse clicks. Can anyone help me out? Thank you. prik Hello! I am currently having some troubles finishing my website. www.djbobambo.com. I would like the music to play on every html page but the problem is that when i change a pages the music resets and begins from the beginning. I would like it to continue so when you change from page to page the music keeps playing. Any ideas? Thanks! This is the code i use: Code: <img id="music" onclick="musicfunc()" src="images/buttons/on.png" width="195" height="20" style="float: center; padding-right: 50px; padding-top: 58px;">
<OBJECT id="MediaPlayer" width="1" height="1" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
<PARAM name="URL" value="home.mp3">
<PARAM name="AutoStart" value="True">
<PARAM name="PlayCount" value="9999">
</OBJECT>
<script type="text/javascript">
var musicstat = "1";function musicfunc(){if(musicstat == "0"){document.getElementById ('music').src="images/buttons/on.png";musicstat = "1";document.getElementById("MediaPlayer").setAttribute("URL", "home.mp3");}else if(musicstat == "1"){document.getElementById ('music').src="images/buttons/off.png";musicstat = "0";document.getElementById("MediaPlayer").setAttribute("URL", "");}}
</script>
Hi everyone, Im have a problem here with having a mouseover hilight effect on my table. Can anyone help ? Im not great at js. PHP Code: if($i%2 == 0){$rcolor='#313131';}else{$rcolor='#212121';} $sql=mysql_query("SELECT * FROM ranks_memberxp WHERE xp <=$mem[points] ORDER BY xp DESC LIMIT 1"); $rank=mysql_fetch_assoc($sql); $sql=mysql_query("SELECT color FROM member_groups WHERE id=$mem[gid]"); $mem_color=mysql_result($sql,0); $out[body].=" <tr style='background-color:$rcolor' height='24' > <td valign='center' width='2%' align='center' background='$config[cellbgx]'><font color='white' size='3'> $i "; if($xp2[xperience_lastupdate] >= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_up.gif' border='0'>"; } else if($xp2[xperience_lastupdate] <= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_down.gif' border='0'>"; } else{ $arrowicon=""; } $out[body].=" </font></td> <td valign='center' width='7%' align='center'><img src='./images/flags/{$mem[country]}_small.gif' border='0' /></td> <td valign='center' width='7%' align='left' background='$config[cellbgx]'><a href='./profile.php?account=$mem[id]'><b><span style='color:$mem_color' size='3'>$mem[name]</span></b></a></td> <td valign='center' width='7%' align='center' background='$config[cellbgx]'><img src='$rank[image]' height='15px' width='15px' title='$rank[name]'/></td> <td valign='center' width='7%' align='center'>$pmerleague $pmerforum</td> <td valign='center' width='7%' align='center'><a href='aim:goim?screenname=$mem[aim]&message=Hello, are you there?'><img border='0' align='absmiddle' src='http://360IcoNs.com/images/aim.gif'></a></td> <td class='tag' valign='center' width='19%' background='http://www.360icons.com/theme/dark-grunge/images/box.png' style=' padding-left:130px;' align='center'>$mem[xbl]</td> <td valign='center' width='7%' align='center'><b>$mem[points]</b></td> <td valign='center' width='8%' align='center'>$online</td> <td valign='center' width='8%' align='center'>$mem[Joined]</td> </tr></text>"; CAN SOMEONE TRY EDIT THAT TO GET IT TO WORK ? I just cant get it.... I have the following code to load iframes but I don't know how to make it load the "LT-video_default.html" when it first loads the page. If I choose one of the options and then go back and choose the "Choose a manufacturer" option it loads the desired page. Here is the code. Code: <script language="JavaScript">
<!-- Begin
function leapto(form) {
var myindex=form.dest.selectedIndex
parent.CONTENT.location.href=(form.dest.options[myindex].value);
// You can output to ANY frame using: parent.[framename].location.href
}
// End -->
</script>
<div id="videoWrapper">
<form name="labtv">
<select name="dest" size="1" onchange="leapto(this.form)">
<option selected="selected" value="LT-video_default.html">Choose A Manufacturer
</option><option value="LT-video_nanodrop.html">NanoDrop
</option><option value="LT-video_bioflux.html">Bioflux
</option><option value="LT-video_genvault.html">GenVault
</option><option value="LT-video_hamilton.html">Hamilton
</option></select>
</form>
<iframe name="CONTENT" frameborder="no" height="400" scrolling="no" width="650">
</iframe>
</div>
Hello. I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image) I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu. <head> Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
<body> Code: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p><select name="picture" size="1" onChange="showimage()"> <option selected value="image1.jpg">Option 1</option> <option value="image2.jpg">Option 2</option> <option value="image3.jpg">Option 3</option> </select></p> </form> What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus. For example: Drop down menu number 1 Shoe Color: Black or Red Drop down menu number 2 Shoelace Color: White or Brown Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces. So, this code does what it's supposed to do (check an array for dis-allowed input and supply the appropriate keyboard for touchscreen users) but I was worried that maybe this wasn't the most succinct logic... Code:
kb=2,kp=1;
for(var i in Setup.DisAllowed){
if(Setup.DisAllowed[i]==0)
kp=0;
if(Setup.DisAllowed[i]==1||Setup.DisAllowed[i]==2)
kb--;
}
if(kp)APP.Module('KeyPad');
if(kb)APP.Module('KeyBoard');
if(kp&&kb)APP.Module('AlphaNumeric');
Keeping in mind the Setup.DisAllowed array and APP.Module method are fixed in stone, would anyone recommend a better way to use the array to select the necessary keyboard? Hi guys i am new to this forum facing some issues with my php code. The code below says on click go to cart.php I want to add a condition to the same-- if(reasons==Internal) { go to="cart1.php" } else { go to="cart.php" } Kindly help me with the same.... <td> <p align="center"> <input name="Next" type="button" id="Next" value="Next" onmouseover="reasonempty();"onclick='javascript:window.location.href="cart.php?form=tmrfForm&field=" +document.getElementById("reasons").value+"&field5="+document.getElementById("weekend").value,"","to p=0,left=400,width=1000,height=1000,menubar=yes,toolbar=yes,scrollbars=yes,resizable=yes,status=yes" ; return false;'> </p> </td> Will appreciate if pls put the code ....... Hi I'm trying to download the security image from this site (at the bottom): http://pacesalsa.promotionexpert.com...2/register.jsp However, every time one refreshes the image, the image changes (obviously). So, I'm trying to figure out how to download the current image on the page to a jpg or png (or any image file type). Could someone please tell me how to do this? Thanks. I have been trying for hours to do the following: - Change the background of a div by clicking a link from another div tag. - It also needs to change back when clicked again. I know there are alot of experienced coders out there and I'm eager to learn... help would be appreciated! I am needing to use javascript to show a prompt, and when the user enters a number from 1-12 (1 for each month of the year) it adds it to a new array. Then when the user types "stop" it prints the corresponding months. I'm new to javascript so I am not quite sure how to go about doing it. This is what I have currently, but I don't think it is right. Code: <script type="text/javascript">
var month=['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var selmonth= new Array();
var month2=prompt('Which Month', '');
if (month2==1){
selmonth[0] = month[1];
var month2=prompt('Which Month', '');
}
if (month2==2){
selmonth[1] = month[2];
var month2=prompt('Which Month', '');
}
if (month2==3){
selmonth[2] = month[3];
var month2=prompt('Which Month', '');
}
if (month2==4){
selmonth[3] = month[4];
var month2=prompt('Which Month', '');
}
if (month2==5){
selmonth[4] = month[5];
var month2=prompt('Which Month', '');
}
if (month2==6){
selmonth[5] = month[6];
var month2=prompt('Which Month', '');
}
if (month2==7){
selmonth[6] = month[7];
var month2=prompt('Which Month', '');
}
if (month2==8){
selmonth[7] = month[8];
var month2=prompt('Which Month', '');
}
if (month2==9){
selmonth[8] = month[9];
var month2=prompt('Which Month', '');
}
if (month2==10){
selmonth[9] = month[10];
var month2=prompt('Which Month', '');
}
if (month2==11){
selmonth[10] = month[11];
var month2=prompt('Which Month', '');
}
if (month2==12){
selmonth[11] = month[12];
var month2=prompt('Which Month', '');
}
if (month2=='stop'){
document.write(selmonth.join(" <br> "));
}
else{
alert('Please enter a valid value');
}
</script>
It'd be great if someone is able to help me. Thanks. new to JavaScript, simple question... question: how do i determine an output from a prompt to be bold? e.g. a user enters "hello" and the output printed from the prompt becomes bold one=parseFloat(prompt('enter number',0.bold)); Pretty pretty please help me with this I am running out of time and pulling my hair out with this whole thing. Thanks a million in advance! Rhonda <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> function numberGuess() { stringVar=prompt("Enter your guess number"); while (stringVar<999) { } } </script> <script> function enterNames() { stringVar=prompt("Enter name"); } </script> <script> function enterProducts() { stringVar=prompt("Enter product name"); return } </script> </head> <body> <p> </p> <h1>WDV221 Intro Javascript</h1> <h3 align="center">Javascript Loops</h3> <p>Topics: loops, for loops, while loops, sentinels!</p> <p>Place all script code on this page.</p> <p>1. Create a function that will ask you for a number until you enter 999 which will end the loop. You do not need to display the number. </p> <p>2. Create a function that will ask you for a name until you tell the function that you do not have any more names. After you enter each name it will ask you if you have more names to enter. If you enter yes the process will continue. Display each name at the end of the following sentence.</p> <p>The name you entered is: </p> <p>3. Create a runtime script that will use a prompt( ) to accept how many products will be displayed. Use a for loop to display "Product Name" and the product number as a <p> element.</p> <p><strong>Example output:</strong></p> <p>Product Name 1</p> <p>Product Name 2</p> <p>...</p> <p>4. Create a runtime script that will use a nested for loop to create a table with 3 rows and 5 cells. Place the same number or a letter in each cell. </p> <p>Hint: Write a table in HTML. Do a row first then do multiple rows. </p> <p>5. Create a function called totalSales( ) that will ask the user to enter an amount until you enter "done". Add those amounts together and display them in an alert when the user is done entering amounts..</p> <p>Have fun!!</p> </body> </html> basically i need to create a form that has three questions, but the answers have to match my answers...what is the best way to do this (without DB)...i was thinking create an array with the 3 answers then match the fields with the answers in my array...any help is appericated! thanks guys I have a script that works good, but it says undefined underneath, this must mean an error. But I cant work out how to get rid of it. This is the html it is a transistional XHTML doc type. Code: <div id="slidedom"> <script type="text/javascript" src="js-files/slider.js"></div></script> Then I have the js file which I will have to post all of as I am not sure of the error bit. Code: var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['images/sign-1.gif']
variableslide[1]=['images/sign-3.gif']
variableslide[2]=['images/sign-4.gif']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='188px' //set to width of LARGEST image in your slideshow
var slideheight='60px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#FFF'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
I have taken out the credit, as I have changed it a bit, but will reinstate it later on. All I really need to know is how to define it in the XHTML maybe. Can anyone help? |
|||||||