|
JavaScript - Start Opacity At 0
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 Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li> <li><a href="example3.html"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li> <li><a href="example2.html"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li> <li><a href="index.html"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li> </ul> </div> Any help is greatly appreciated! Similar TutorialsHere is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } Hello. I know I get set opacity for IE using the CSS Code: filter:alpha(opacity=50); and I set it with JS as Code: theObj.style.filter = "alpha(opacity=" + (opac * 100) + ")"; but how can I read it's initial value (and store it in a variable)? Andy. Added: I should mention I use this function to get the current style: Code: var GetStyle = function (el, strRule) { // e.g. "font-size" - robertnyman.com
var elem = (typeof el === 'string') ? document.getElementById(el) : el;
if (document.defaultView && document.defaultView.getComputedStyle ) {
return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
}
else if ( elem.currentStyle ) {
strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
return elem.currentStyle[strRule];
}
else
return '';
}
; Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! Hey all, I found this code but don't fully understand it. Can anyone take a brief moment to explain what is occuring in the clearMenu, setOpacity and fadeMenu functions: Code: // configuration variables
var timeout = 250; // milliseconds
var fadeSpeed = 500; // milliseconds
var useFade = true;
// timers array
var timers = new Array();
// state array -- by id, value = active, false = inactive
var state = new Array();
// lastOpacity: used to prevent multiple timers from making the fade flicker
var lastOpacity = new Array();
// MSIE has its own way of setting opacity, so we have to detect it
// all the other major browsers support the standard DOM opacity property
var msie = false;
if( navigator.appName == "Microsoft Internet Explorer" ) msie = true;
// entry point: set element to visible and clear its timers
function setMenu( id )
{
var e = document.getElementById(id); //When the user rolls over one of horizontal menu items, the setMenu method is called and we pass in as an argument, the id of the associated ul element, which we then set its visibility attribute to visible.
e.style.visibility = "visible";
state[id] = true;
setOpacity( id, 1 );
if(timers[id]) {
clearTimeout(timers[id]);
timers[id] = undefined;
}
}
// set element to hidden and reset its opacity
// typically called by a timer
// may be used as an entry point to bypass timers and fades
function hideMenu( id )
{
var e = document.getElementById(id);
state[id] = false;
e.style.visibility = "hidden";
if(useFade) setOpacity( id, 1 );
}
// entry point: hide the menu using fade (if enabled)
function clearMenu( id )
{
if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
}
// set the opacity
// special support for MSIE
function setOpacity( id, value )
{
var e = document.getElementById(id);
if(state[id]) value = 1; // menu fade was interrupted
else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id]; // prevents flicker if multiple timers set
if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
else e.style.opacity = (value); // Everyone else (standard DOM)
if( value == 0 ) hideMenu( id ); // when all faded, reset the menu state
lastOpacity[id] = value;
}
// fade a menu
// typically called by a timer
function fadeMenu ( id )
{
var start = 0;
var end = 0;
var s = Math.round( fadeSpeed / 25 ); // fade in 25ms increments
var timer = 0;
var i;
state[id] = false;
for( i = s; i >= 0 ; i-- ) {
setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
}
}
Thanks for any response. 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 Hello! I'm just starting to learn JavaScript, so don't take me too serious. I would like to set opacity of some element to 0 through JavaScript, using GetElementById function. This is my short code inside body of HTML: Code: <script>
document.getElementById("element").style.opacity="0";
</script>
<div id="element">
noopacity
</div>
It doesn't seem to work, what am I doing wrong? Thanks. 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>
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. 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);
}
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. I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere. E.g. I have following declaration in the head section of html: <script language="javascript" type="text/javascript" src="java1.js" </script> My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as: var firstname="Tom"; I put document.write statement to the head of html section as: <script language="javascript" type="text/javascript" src="java1.js"> document.write; </script> ....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding. 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 guys I'm new to the forums here. I want to learn how to use Javascript and AJAX along with jquery or prototype to develop a dynamic website. For example, I like how www.dropbox.com works. Everything has a transition, and you can drag and drop things around which is what I like. Ultimately I hope to be able to develop a dynamic website with social networking elements. I know my goals are lofty, but where should I get started and what should I learn. I have some cursory programming experience with visual basic, fortran and html. Any particular books that would help me learn. Ideally a book would have some programming "challenges" or small projects that would give me some experience. Thanks hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming
Ok so i want to code something like this http://i45.tinypic.com/29y10s1.png I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer. Can anyone give me some references that might help me get started with coding this. I have no clue where tos tart. This forum give luck, I get the solution myself regards. I've just started to learn Javascript at college, and I made a little code that traps people in a dialogue box loop. var escape = 0 for(escape === 0; escape <= 1 confirm("Going somewhere?") I want to know if there is a site, or a possibility I can start this code, simple by sending friends a URL they can click on. For completely innocent purposes, of course. Thanks! Hi everyone. I'm trying to figure out how to make it so that when someone enters a number in the first textbox to start counting from and then they enter a second number where to stop counting. then the user must enter a number to step up/down by when counting.. there are 3 textboxes, one for start, one for end and one for the step up/down. When the user pushes the button the page clears and then the numbers will show.. If they use the same starting and ending number they have to be alerted that it is not valid. The user can enter a starting number bigger than the ending number. Take into account that a user might enter a positive or negative step value any tips or guidance for this is very appreciated |
|||||||