JavaScript - Fadeout() After Fadein() Problem

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

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

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

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();

}

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

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!

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/

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";
    }
  }
}

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')
});
});

Hi pals,
I am really tired in this problem of event keyup. I given same in my keyup function like:

$(document).ready(function () {
alert("GGG"+parseInt(jQuery.browser.version)); //To display test value working
$("#find_text").keyup(function(e)
{
if(e.which == 13) {
alert('Enter key was pressed'); //enter Here
alert("FFF"+parseInt(jQuery.browser.version)); //Here got Error
}
});
});

I got Error : jQuery is not defined
alert("FFF"+parseInt(jQuery.browser.version));

I use keycode,which , but no help, It's Work nicely in Chrome Browser but not in FF.
Please give a Solution reply ASAP, I am really Tired.The code enter the Condition
But that jQuery part make error.

Thankfully
Anes P.A

Scratch that, its started working...

oh well haha

hi at all!!!
I'm new in this forum.
I have a problem and I need your experience in js!
I have one page in html, but that is build only with js and css3.
My problem is:

The page generate in automatic one template every time u click one voice in menu, but the name of the page is always the same.
When I click "Back" for visualize post page, I cant visualize because I have only one page!

My question is:
How can I create a function to manage "back page" if I have always only one page?


Thanks u





Reply With Quote




01-07-2015, 09:48 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

I am afraid that you are giving us *WAY* too little information for us to even guess at an answer.

Show your code.

Or, better, show us a live URL that exhibits the problem.

hi i found some javascript on the internet that seemed to do what I wanted to achieve but cannot get it to work

when the mouse is over the image it should show a bigger image. I've used the internet explorer debugger and there seems to be problem in the code, but i dont understand javascript programming. Im a php man myself.

all the script is enclosed in this page

http://www.web-malta.com/testimage.html if you put the mouse over the photo you will see there is an error on the page.

hope someonbe can help.

cheers