JavaScript - Image Fadeout When Form Field Selected?

I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this:

X X X X X
X X X X X

This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0.

Here's the HTML and CSS:

Code:

<ul class="carz">
<li><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" /></li>
<li><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" /></li>
<li><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" />/li>
<li><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" /></li>
<li><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" /></li>
<li><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" /></li>
</ul>

The classes are like so:

Code:

.imgtophidden {
opacity: 0;
}
.imgtop {
opacity: 100;
}

I am new to jQuery coding (but loving learning) and I want to figure out: how do I make this in jQuery? Here's what I have so far:

Code:

$(function() {
$("ul.carz li").hover(function() {
	$(this).find('img.imgtophidden').addClass('imgtop')
	} , function() {
	$(this).find('img.imgtop').addClass('imgtophidden')
});
});

like for example i have text areas named upload1 and upload2

when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts"

I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page.

Any way you know of to do this?

I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful.

Thanks very much.

Here is my validation script from dreamweaver i also have it in php for server side. But I trying to get a checkbox to make a text field required when you select it. Right now I have it so when you hit submit whether the text field is filled out or whether the checkbox is selected or not the error message comes up no matter what i do please help.

the link to the page is http://www.mark-10.com/inquiries2

Code:

function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
  if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
    return false	;
   }
  else {
    return true;
   }
}
}

function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    }
	 if(!validateCheckbox()) {
       errors+="If checkbox checked, please include telephone number";
     }
if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }




//-->

Hi,

Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

This is probably way, way off but I've done this and it doesn't work.

Any help would be greatly appreciated, thanks.


<script language="JavaScript">
function changelist() {
//here we assign the value of the hidden input to x
x=eval(document.getElementByName("SelectLists[40]");

if(document.getElementById("SelectLists[40]").selected=true
x=SelectLists[40]

else(document.getElementById("SelectLists[41]").selected=true
x=SelectLists[41]

else(document.getElementById("SelectLists[42]").selected=true
x=SelectLists[42]

//now we assign the new value to the input
document.getElementById("theHiddenInput").name=x;

//and now we test
alert(document.getElementById("theHiddenInput").name)


}
</script>





<input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
<select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
<option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
<option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
<option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>

Hello!

On this project I'm working on, my client asked me, if I could make an item fade out after some time. I said I'll try my best, even though I have no idea about javascript. So if anyone could help me, that would be awesome.
It's a div called "alert", that would disappear after ~15seconds, and wouldn't show back no mater how long the page is loaded.

Thanks, Greg

////delete, thanks :) ////

i wud like to grab the values for the selected item in the last combobox n insert it into a form. thanks in advance

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 // first combo box

	data_1 = new Option("1", "$");
	data_2 = new Option("2", "$$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_2_1 = new Option("21", "--");
	data_2_2 = new Option("22", "--");
	data_2_3 = new Option("23", "--");
	data_2_4 = new Option("24", "--");
	data_2_5 = new Option("25", "--");

// third combo box

	data_1_1_1 = new Option("111", "1");
	data_1_1_2 = new Option("112", "2");
	data_1_1_3 = new Option("113", "3");
	data_1_2_1 = new Option("121", "4");
	data_1_2_2 = new Option("122", "5");
	data_1_2_3 = new Option("123", "6");
	data_1_2_4 = new Option("124", "7");
	data_2_1_1 = new Option("211", "8");
	data_2_1_2 = new Option("212", "9");
	data_2_2_1 = new Option("221", "10");
	data_2_2_2 = new Option("222", "11");
	data_2_3_1 = new Option("231", "12");
	data_2_3_2 = new Option("232", "13");



// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

</head>

<body>


<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">1</option>
	<option value="value3">2</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>


</form>
</body>
</html>

Hi there,

I would like to create a page that has a dropdown menu populated with a list of images. When someone selects an image, the image and a URL to a webpage will display (screenshot below). Each image will have a different URL. How do I accomplish this?

Thanks!

Denise

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/

I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[


Code:

var windowState = false;

action1 = document.getElementById("action1");

function requestWindow(url) {

	if(windowState==false) {
		windowOpen();
	}
	else if(windowState==true) {
		windowClose();
	}
	
	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	}
	
	else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET",url,false);
	xmlhttp.send(null);
	document.getElementById('action1').innerHTML=xmlhttp.responseText;

}

function windowOpen() {

	windowState = true;

	windowSize()

	action1.style.display = "none";
	
	$("#action1").fadeIn(1300);
	
	clearMenu();

}

function windowClose() {

	windowState = false;
	
	action1.style.display = "inline";
	
	$("#action1").fadeOut(1300);
	
	clearMenu();
	
	windowOpen();

}

I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

Best Morteza

Hi guys,

Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item.

The code I am using is the following

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">

function mainmenu(){
	$("#neon li.root").hover(function(){
			$(this).fadeOut('500');
			},function(){	
		$(this).fadeIn('500');
			});	
	}

$(document).ready(function () {		
mainmenu();		
});
</script>

<style type="text/css">


 /* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}

 /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}

/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}

</style>

  <ul id="neon" class="neon">
    <li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
    <li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
    <li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
  </ul>

Any help would be appreciated!

Thanks!

Hi Guys,

I'm using jcarousellite to show my newsitems in a vertical carousel.
http://www.gmarwaha.com/jquery/jcarousellite/

The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first.

Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list.


Can someone give me a hint?

Thanks in advance,
Marcel


-- Code Below --

Code:

$(function() {
	$(".widgetCarousel").jCarouselLite({
		circular: true,
		vertical: true,
		visible: 3,
		scroll: 1,
		start: 1,
		auto: 500,
		speed: 1000,
		beforeStart: function(a) {
			$(a).parent().fadeTo(100, 0);
    		},
		afterEnd: function(a) {
			$(a).parent().fadeTo(100, 1);
		}
    	});

});

<div class="widgetCarousel">
	<ul>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>	
	</ul>	
</div>

Greetings,

I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child.

Code:

<select id="NumberofChildren" name="NumberofChildren">
        <option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
</select>

The div IDs to display are 1child, 2child, 3child, 4child, 5child.

I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you!