JavaScript - Transparent And Onclick

Code:

/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){
	this.setting=settingarg
	settingarg=null
	var setting=this.setting
	setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
	setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
	setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
	setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
	setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
	setting.oninit=setting.oninit || function(){}
	setting.onslide=setting.onslide || function(){}
	if (setting.displaymode.randomize) //randomly shuffle order of images?
		setting.imagearray.sort(function() {return 0.5 - Math.random()})
	var preloadimages=[] //preload images
	setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
	for (var i=0; i<setting.imagearray.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=setting.imagearray[i][0]
		if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
			setting.longestdesc=setting.imagearray[i][3]
	}
	var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
	setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
	var slideshow=this
	jQuery(document).ready(function($){ //fire on DOM ready
		var setting=slideshow.setting
		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}
		setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
			.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
			.appendTo(setting.$wrapperdiv)
		var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
			.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
			.appendTo(setting.$wrapperdiv)
		var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
		if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
			fadeSlideShow.routines.adddescpanel($, setting)
			if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
				setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
				setting.$descinner.click(function(e){ //asign click behavior to "close" icon
					if (e.target.className=="close"){
						slideshow.showhidedescpanel('hide')
					}
				})
				setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
					slideshow.showhidedescpanel('show')
					$(this).css({visibility:'hidden'})
				})
			}
			else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
				setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
				setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
			}
		}
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
			$loadingimg.hide()
			slideshow.paginateinit($)
			slideshow.showslide(setting.curimage)
		}
		else{ //initialize slideshow when first image has fully loaded
			$loadingimg.hide()
			slideshow.paginateinit($)
			$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
		}
		setting.oninit.call(slideshow) //trigger oninit() event
		$(window).bind('unload', function(){ //clean up and persist
			if (slideshow.setting.persist) //remember last shown image's index
				fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
			jQuery.each(slideshow.setting, function(k){
				if (slideshow.setting[k] instanceof Array){
					for (var i=0; i<slideshow.setting[k].length; i++){
						if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
							slideshow.setting[k][i].innerHTML=null
						slideshow.setting[k][i]=null
					}
				}
			})
			slideshow=slideshow.setting=null
		})
	})
}

fadeSlideShow.prototype={

	navigate:function(keyword){
		var setting=this.setting
		clearTimeout(setting.playtimer)
		if (setting.displaymode.type=="auto"){ //in auto mode
			setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
			setting.displaymode.wraparound=true //set wraparound option to true
		}
		if (!isNaN(parseInt(keyword))){ //go to specific slide?
			this.showslide(parseInt(keyword))
		}
		else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
			this.showslide(keyword.toLowerCase())
		}
	},

	showslide:function(keyword){
		var slideshow=this
		var setting=slideshow.setting
		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
			return
		}
		var totalimages=setting.imagearray.length
		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
			: Math.min(keyword, totalimages-1)
		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
		$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
		}
		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
				clearTimeout(setting.playtimer)
				try{
					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
				}catch(e){
					alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
				}
				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
					slideshow.showhidedescpanel('show')
					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
				}	
				setting.currentstep+=1
				if (setting.displaymode.type=="auto"){
					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
				}
			}) //end callback function
		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
		setting.fglayer=setting.bglayer
		setting.bglayer=(setting.bglayer==0)? 1 : 0
		setting.curimage=imgindex
		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
		}
		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
			this.paginatecontrol()
		}
		if (setting.$status) //if status container defined
			setting.$status.html(setting.curimage+1 + "/" + totalimages)
	},

	showhidedescpanel:function(state, animateduration){
		var setting=this.setting
		var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
		setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
			if (setting.descreveal=="always" && state=="hide")
				setting.$restorebutton.css({visibility:'visible'}) //show restore button
		})
	},

	paginateinit:function($){
		var slideshow=this
		var setting=this.setting
		if (setting.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid)
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				var $rel="nofollow" target=$(this)
				slideshow.navigate($target.data('action'))
				e.preventDefault()
			})
			setting.$status=setting.$togglerdiv.find('.status')
		}
	},

	paginatecontrol:function(){
		var setting=this.setting
			setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
			setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
			if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
				setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
				setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
			}
	}

	
}

fadeSlideShow.routines={

	getSlideHTML:function(imgelement){
		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="nofollow" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
		layerHTML+=(imgelement[1])? '</a>\n' : ''
		return layerHTML //return HTML for this layer
	},

	getFullHTML:function(imagearray){
		var preloadhtml=''
		for (var i=0; i<imagearray.length; i++)
			preloadhtml+=this.getSlideHTML(imagearray[i])
		return preloadhtml
	},

	adddescpanel:function($, setting){
		setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
			.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
			.appendTo(setting.$wrapperdiv)
		$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
			.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
			.appendTo(setting.$descpanel)
		setting.$descinner=setting.$descpanel.find('div.descpanelfg')
		setting.panelheight=setting.$descinner.outerHeight()
		setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
		if (setting.descreveal=="always"){ //create restore button
			setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)


		}
	},


	getCookie:function(Name){ 
		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
		if (document.cookie.match(re)) //if cookie found
			return document.cookie.match(re)[0].split("=")[1] //return its value
		return null
	},

	setCookie:function(name, value){
		document.cookie = name+"=" + value + ";path=/"
	}
}

Hi
I have a problem where I have a drop down menu above a flash banner. The drop down is being hidden by the banner when you hover over it. I added the following to stop that <param name='wmode' value='transparent'>. Its working fine in IE 6 where the drop down options are over the banner but it wont work with IE7/8 or firefox. Any suggestions for code that will work for all browsers?

Code:

document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='381' height='130'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='/content/images/flash/abc.swf'><param name='quality' value='high'><param name='wmode' value='transparent'><embed src='/content/images/flash/abc.swf' wmode='transparent' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='381' height='130'></embed></object>");

Hi there,

I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow).

I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link.

Any suggestions?

Thank you all.
B

Hi,
There is a live search on my web page but the box of available options which falls below the 'input' field has a transparent background color. How can it be changed to non-transparent?

This line below makes the background white, but all the text on the page shines through, since the default is transparent.
[CODE]
document.getElementById("linksearch").style.backgroundColor="#FFFFFF";
[CODE]

This instruction line does not help much 'cos I can't figure out the correct way to make it work:
[CODE]
Object.style.backgroundColor="color|inherit|transparent".
[CODE]

Thanks.

Hey guys,

OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below:

Buttons:
Code:

<div id="newButton">
                  <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
                  <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>

The textarea ID is:
Code:

text_editor_textarea

and this is the code that I would like to be placed inside the textarea:
Code:

 Nature of Request: 
 Creation Size: 
 Primary Colors: 
 Text To Insert: 
 Donation: 
 Extra Information: 
 URL: 

I tried this, but the BBCode would not keep it's structure and would all end up on one line.

EDIT: Oh...The BBCode is parsing inside the code box >.<

hi everybody..


i have this simple code:

Quote:
<html>
<head>
<script language="javascript" type="text/javascript">
document.write("<input type='button' value='push' onclick='hi()'/>");
function hi() {
alert("hi");
document.write("<input type='button' value='enter' onclick='javascript: bye()'/>");




}
function bye() {
alert("bye");


}
</script>
</head>


<body>




</body>
</html>


if i try to run it on chrom its works well..

but on IE or FireFox its not define the bye() function..

whats the reason?! and how i can solve it?..

thanks very much..

Hello...

Here is an example of a site I'm working on:

http://mrmatthewreese.com/surine/custominlays.php

notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked?

Just curious if anyone can help.


Here is the javascript code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='boldlink';
Lst=obj;
}

/*]]>*/


</script>

<a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br />
<a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br />
<a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br />
<a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br />
<a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br />
<a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br />
<a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br />
<a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br />
<a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br />
<a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a>

Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) .

The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem?

<a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" >


Now this showclubs function shows a hidden div and at the end I have a return:false;

but when you click on the link - it still seems to reload to the page and take you to the top

how can I get it to just show the div without seeming to reload the page?

Hey.
When a checkbox is checked, I want it to add the id number of what I've got in a PHP variable, to appear in a <input type="text" />.
For example:

The id is 1, 2, and 3. So 3 checkbox's.
I click on the first, and it adds to another input field, '1'.
I hit the second, and the same thing happens, except the id is 2.

Of course, I know how to do the ID and all with PHP.
All I need to do now, is where when you click a check box, it adds to another field, and adds & after every check.

Here is my code:
Code:

<input type="checkbox" name="delete" 
         onclick="this.checkedbox.style.display=(this.value=='checked' ? 'inline' : '2' )" />
<input type="text" name="checkedbox" />

Thanks.

Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%.

I also have multiple instances of class1 and class2.

If anyone can help me I will praise you on the highest mountain!

Thanks,

B

I've got this script that spins an image for me but it dont stop spinning, in other words when i press startspinning with onclick it dont change it to stopspinning function it just keeps spinning, it works fine with href but not onclick.

Code:

function StartSpinning() {
		
		int = setInterval( 'SpinChange()', 100 );
		$( 'SpinButton' ).innerHTML = "Spinning (Click to Stop)";
		$( 'SpinButton' ).onclick = "StopSpinning();";
		Effect.Fade( 'turns', {duration: 0.3} );
	
	}
	
	function StopSpinning() {
		
		clearInterval( int );
		$( 'SpinButton' ).innerHTML = "Spin it";
		$( 'SpinButton' ).onclick = "StartSpinning();";
		UpdateFigure();
		Effect.Appear( 'turns', {duration: 0.3} );
	
	}

Can anyone help thanks.

Hi all,
I'm a js newbie and am filling in for someone on a job. He is dispalying banners on some pages and they want only one of the banners to click thru to a URL ("92002" is the banner id which needs to become a link)

existing code is below:
----------------

function showBanner(id) {
var arrBanners = new Array("72002", "12003", "63019", "72003", "53052", "83032", "62009", "52006", "73003", "73001", "92002");
for(var i in arrBanners) {
if (id == arrBanners[i]) {
var output = '<div><img height="130" width="693" border="0" src="/images/banners/banner' + id + '.jpg"/></div>';
document.write(output);
return false;
}
}
}
-----------------

How do i do this?
Many thanks

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>

If you wanted to change an ids onclick would int you just do this

document.getElementById("").onclick = "";

Is there a way to do it?