JavaScript - Fadein Fadeout Source Code

Hi, I know nothing about javascript but I was able to handle the instructions to install the login/password featu http://www.javascriptkit.com/script/...ginpass2.shtml

works great! however, when someone views the source code, they're able to see what the password is. additionally they can see the url of the page it would take them if they entered the password. how do i protect against this vulnerability?

thanks in advance!

recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source."

this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before?

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

hi, i am trying to have the homepage of my website fade in, kind of like an intro to the site. I only want this fade in to happen on the home page when the website is initially visited, not every time the user clicks home. I am new to jquery but have had much success using plugins for effects. If anyone can help me figure out the code to create a fade in intro i would be very thankful!
Richard

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

http://dannycremers.com/menus.html

i've been experimenting with random images floating in the background that i now want to turn into links to other images,
the code i have right now is the following:


Code:

	<div id="div2"><a href="#sub_target" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/img/2.png" alt="" /></a>
    			   <div><a href="#" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/inprogress/img/koekoek.jpg" alt="" /></a></div></div>

image 2.png is the image with the black border, onclick of that image i want the orange picture to become visible in the center of the page which sort of works.. but for some reason when the page loads an extra version of the orange image shows up as well, any idea how i can get rid of this while also maintaining the orange image showing up onclick??


another issue i've been having is with the fadein code, it always used to work but after adding the onclick/toggle script it stopped working, does anybody have any idea why that is and how i can work around that? tnxxx!

Hi all,

I have set my sprite on this page http://www.kylehouston.com/portfolio.html to fade in, my problem is when the page loads the images appear and then they fade in, how can i set them to fade in without showing them first of all?

Thanks in advance

Kyle

Greetings everyone; Jesse here. Long time reader, first time poster.

I have a personal website, currently in development, located at: http://www.jesselang.ca

If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar.

This functionality is "OK" at best.

What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows.

The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal.
Code:

<script type="text/javascript">
	lastone='empty'; 
	function showIt(lyr) 
	{if (lastone!='empty') lastone.style.display='none'; 
	lastone=document.getElementById(lyr); 
	lastone.style.display='block';}
</script>

The respective html looks something like this:
Code:

<a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>

The coresponding html for the container to display looks like this. This code also shows the "hide container" button:
Code:

<div id="interestcontainer" style='display:none;'>
        <h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>

And the CSS looks like this:
Code:

a.arrow{
	display:block;
	float:right;
	background:url(../images/ico-arrow.gif) top no-repeat;
	text-decoration:none;
	overflow:hidden;
	width:13px; 
	height:11px;
	margin-left:3px;}

------------------

Would it be asking to much to have someone help me achieve the following functionality?
-load page with all side containers hidden
-display only 1 side container at a time
-fadein and fadeout effects
-same button displays and hides
-button swaps images for displat/hide commands

Again, my code can be seen at:
http://www.jesselang.ca
http://jesselang.ca/files/style.css


I'd very much appreciate the help.

Thank you in advance.
*j

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/

Ok super new to Jquery here. I finally got talked into trying it.

Ok so... I have

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';
	action1.style.filter = "alpha(opacity=" + (0*100) + ")";
	action1.style.opacity = 0;
	
	var si = setInterval(function() {

	io+=0.05;
	
	action1.style.filter = "alpha(opacity=" + (io*100) + ")";
	action1.style.opacity = io;
		
	}, 100);
	
	io = 0;
	
	if(io==1) {
	
		window.clearInterval(si);
	
	}
	
	clearMenu();

}

I would love to know how to replace that with the fadein() function.

I'm looking for something like this

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';

        //THE FADE IN GOES HERE but how?
	
	clearMenu();

}

ok last question. Do I need to hide my elements somehow differently in CSS before I can use this?

update:

ok so far trying this and its not working

Code:

function windowOpen() {

	windowSize()
	document.getElementById("action1").innerHTML = '';
	
	action1.fadeIn('slow');
	
	clearMenu();

}

finally made it work with

Code:

function windowOpen() {

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

}

Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end.

In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content.

Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code:

(function() {
var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
    ae = as[i];
	ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();

It's functional and works, it just doesnt "fade in".

Anyone know why it's not fading in?

Code:

		function addPerson() {
    		//current keeps track of how many people we have.
    		var strToAdd = '<div id="input" class="ideaInput"><label class="idea">Another Name</label><input name="idea[]" class="idea" type="text"/>'
    		strToAdd += '<label class="description">Description (optional)</label><textarea name="description[]" class="description"></textarea></div>'
    		
    		$('#all-inputs').append(strToAdd);
    	};
 
		$(document).ready(function() {
    		$('#btnAdd').click(function () {
    			$(addPerson).fadeIn('slow')
    		});
      	});

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>

Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..

How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript?
The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on.

Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated.

Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com

I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob

Here is the script from the jscript_imagehover.js file...
Code:

var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;    // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
    window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
  navigator.userAgent.indexOf("AppleWebKit") > -1;

if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
        this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
if (isWebKit){
  return document.body;
  }else if (isOpera) {
  return document.documentElement;
  }else{
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
    zoomimg_w=zoomimgwidth;
    zoomimg_h=zoomimgheight;
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.min(window.innerHeight);

}
  var relativeX = null;
  var relativeY = null;
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
//      relativeX = e.x; // original code replaced to work with Opera
//      relativeY = e.y; // original code replaced to work with Opera
      relativeX = event.offsetX;
      relativeY = event.offsetX;
    }
    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
      // returning different values for ff and (opera and webkit) - fixed 12th june 2010
    } else {
      ycoord += e.pageY;
    }

  } else if (typeof window.event != "undefined"){ // Seems to be IE
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
    if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
      /*
    ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
        ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
    } else {
        ycoord += ie_offset + truebody().scrollTop + event.clientY;
    }
  }

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}

  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}