JavaScript - Onclick Opacity = 100%

Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe

http://net.tutsplus.com/tutorials/ja...ck-navigation/

I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out.

The problem I have is that I need the images to be transparent initially when they are in the stack.

You can see the problem he http://bit.ly/cdelJu

Here is the javascript for this:

Code:

$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack2>img').toggle(function(){
		var vertical = 0;
		var horizontal = 90;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
			vertical = vertical + 40;
			horizontal = (horizontal+.75)*1.15;
		});
		$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingBottom: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingBottom: '35px'});
	});
	
	// Stacks additional animation
	$('.stack2 li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});

and here is the css:

Code:

/* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute;  }
.stack2 ul li img { border: 0;  }
.stack2 ul li span { display: none; }
.stack2 .openStack li span { 
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	right:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}

#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }

/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }

annd the html:

Code:

<div class="stack2">
		<img src="images/stacks/stack-down.png" alt="stack"/>
		<ul id="stack2">
	    <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li>
			<li><a href="#"><span>All&nbsp;Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
			<li><a href="example3.html"><span>Example&nbsp;3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
			<li><a href="example2.html"><span>Example&nbsp;2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
			<li><a href="index.html"><span>Example&nbsp;1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>			
		</ul>
</div>

Any help is greatly appreciated!

Hi there.

I just started out learning javascript and jQuery.. and here's one of those bump that Im unable to pass through..

So here's the problem.. I tried writing a simple modal effect on the site I was working on.. since I'm fairly new to javascript and jQuery so please bear with me

The problem that I am having is that the opacity of the #dialog (the white part in the middle ) is being inherited from the #mask.. the black part that covers the page..

I tried setting the opacity to #dialog{opacity:1;} but to no avail it's not working.. I'm trying to change the opacity cause the opacity is affecting the readability of the content..

Here's the simple code that I wrote.. can you please check them up?

Its been only two days since I started reading about Javascript and jQuery so please have some mercy

you can check up the page here..

http://dev.crownshipping.com.ph/single_update.html
just click on the boats.. and the modal thingy will pop up.. hope someone can help and enlighten me.. I'mma fast learner.. if you can give resource links.. except w3schools.. I already read the whole thing

Thanks

Andrew

here's the html code..

Code:

<div id="mask">
    	<div id="dialog" class="window">
        <!-- close button is defined as close class -->
        <a href="#" class="close">Close X</a>
        <h1>Vessel Name - KiKi C</h1>
        <img src="images/single_update.jpg" alt="xxx"/>
        
        </div><!--dialog-->
    </div><!--mask-->

here's the javascript code..
Code:

<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
	 //select all the a tag with name equal to modal
    $("a.modal").click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(document).width();
     
        //Set height and width to mask to fill up the whole screen
    
          $('#mask').css({'width':maskWidth,'height':maskHeight});
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",.8); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $('#dialog').css('top',  winH/2-$(id).height()/2);
        $('#dialog').css('left', winW/2-$(id).width()/2);
     	
        //transition effect
        $('#dialog').fadeIn(2000);
		$('#dialog').fadeTo("slow",1);
     
    });
     
    //if close button is clicked
    $('.close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').fadeOut(1000);
    });  
	
});
 </script>

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

the following script works great in Chrome. very smooth... but in Firefox and IE it is very jittery/jumpy from 0 to 100 opacity too quickly...
Code:

function changeFadeLevel(newval){
	document.getElementById("redbg").style.opacity=newval/100;
	document.getElementById("redbg").style.filter  = "alpha(opacity=" + newval + ")";
}

function changeBg(state){
	if(state==1){
		for(var i=0; i<=100; i++){
			setTimeout("changeFadeLevel("+i+")",i*3);
		}
		document.getElementById("overlaystatus").value='on';
	}else{
		for(var i=0; i<=100; i++){
			setTimeout("changeFadeLevel("+(100-i)+")",i*3);
		}
		document.getElementById("overlaystatus").value='off';
	}
}

Code:

<input type="hidden" id="overlaystatus" value="off" />
<img src="/bg.jpg" id="bg" border"0" />
<img src="/redbg.jpg" id="redbg" border="0" />

the images are 1596x1057 resolution stretched to 100% width with css

Code:

html, body {
height: 100%;
margin: 0;
padding: 0;
background:#000;
font-family:Arial, Helvetica, sans-serif;
}

img#bg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}

img#redbg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
opacity:0.0;
filter:alpha(opacity=0);
}

Hi Guys,

Been stuck on this for too long now. I'm trying to write a function that rotates images with a fade.

The function work properly, however I can't make the images fade back in.

The fadein function won't add to the .style.opacity

Here's the code with the php

Code:

function fadeout()
        {
            b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity - 0.01);
            if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 0.1)
            {
                clearInterval(fadeouttimer);
                b<?php echo ($AF_list_artist_id->artist_id); ?>.src = a<?php echo ($AF_list_artist_id->artist_id); ?>[starter<?php echo ($AF_list_artist_id->artist_id); ?>];
                
                function fadein()
                {
                    
                    b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity + 0.01);
                    //alert(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity);
                
                
                    if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 1)
                    {
                        clearInterval(fadeintimer);
                        setTimeout("rotate<?php echo ($AF_list_artist_id->artist_id); ?>("+(starter<?php echo ($AF_list_artist_id->artist_id); ?>+1)+")",6000);
                    }
                
                }
                
                var fadeintimer = setInterval(fadein,10);
            }
        }
        var fadeouttimer = setInterval(fadeout,10);

and without

Code:

function fadeout()
{
b7.style.opacity = (b7.style.opacity - 0.01);
if(b7.style.opacity == 0.1)
{
clearInterval(fadeouttimer);
b7.src = a7[starter7];

function fadein()
{

b7.style.opacity = (b7.style.opacity + 0.01);
//alert(b7.style.opacity);


if(b7.style.opacity == 1)
{
clearInterval(fadeintimer);
setTimeout("rotate7("+(starter7+1)+")",6000);
}

}

var fadeintimer = setInterval(fadein,10);
}
}
var fadeouttimer = setInterval(fadeout,10);

on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?!

here is the code for my Home link:

Code:

$('#nav ul li.home').hover(
		    function() {
		        $(this).stop().animate({backgroundColor:'#ff8300'}, 1300);
		        }, function () {
		        $(this).stop().animate({backgroundColor:'#666666'}, 100);
		    });

I'm using code based on these functions to fade images up from black as part of a slideshow:

Code:

function fade_down(id, millisec) {
	// fade image from 0% to 100% visible
	var speed = Math.round(millisec / 100);
	var timer = 0;
	for(i = 100; i >= 0; i--) { 
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
    }
}

function fade_up(id, millisec) {
	// fade image from 0% to 100% visible
	var speed = Math.round(millisec / 100);
	var timer = 0;
	for(i = 0; i <= 100; i++) { 
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
    }
}

function changeOpac(opacity, id) {
   //change the opacity for different browsers
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")";
}

It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks.

I have found that in IE8 I cannot give an element the alpha filter (opacity) if it has the position style set to something (relative or absolute). An element without the position style (it is the empty string) can have opacity in IE8.

I have found that in IE7 I can only give an element the alpha filter if the position style is set to something (relative or absolute). An element without a position style will not take the alpha filter.

This is a major conundrum. Does anyone have any insight into this bug? Given the above, I can only achieve opacity in one of the two browsers.

I have both IE8 and IE7 running in standards mode.

The opacity is being set programmatically with JS like so:
obj.style.filter = "alpha(opacity="+opacity+")";
where opacity is an integer between 0 and 100.

Obviously I don't have any problem with any other browser doing opacity because it is different styles for them and they don't care about the position style at all.

Yeah that was a loooong title. Hopefully it's clear enough

Right now, my div changes opacity if it's moused over qua the following code:

Code:

style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30

but this isn't quite optimal, cause if the user mouses out, it changes back to fade, and the user can't quite see what he's entering. So I would like the div to have opacity=1 when one of the textfields in it is active and opacity=0 when it's not. Is there a way to do that?


//deafdigit

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?

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>

<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 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..

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.