JavaScript - Mouseover Effects: Why Won't My Pics Load??

please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox

please follow this link:

http://particletree.com/examples/lightbox/

while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form
first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data...
and on third page he will have a message that his registration is done successfully..

so

how to switch between pages in lightbox effects???

hi all,

i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:

Code:

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
 }
 
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>

in my body is:
Code:

<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet"> 
(latest tweet generating code)
</div>

this creates a little bird, which displays latest tweet when rolled-over.

you can see a working example of this he
http://nang-nang.net/tumblr/blog/try.html

my question a
(1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

also
(2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

an answer to (1) at least would be very much appreciated!

Im currently working on a project for class and have been directed to use Javascript for what im looking to do.

Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do.

At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another.

I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

Hi guys

I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added:

Code:

<script type="text/javascript">
$(document).ready(function () {	
	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here.

Any ideas on how I can fix this?

The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out


http://www.sketchtravel.com/
http://www.foofighters.com/us/discography

thanks for your help

-rob

Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?

I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories.

i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want.

I'm working with the following images:

arrow1:
arrow2:
arrow3:

in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself)

the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1".

this is the code I'm working with, hope someone can help

Code:

<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"

second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>

<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>

this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this?


Code:

// SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

(function() { // BeginSpryComponent
 
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
 alert("SpryDOMEffects.js requires SpryDOMUtils.js");
 return;
}

if (!Spry.Effect) Spry.Effect = {};

Spry.Effect.Animator = function(opts)
{
 Spry.Effect.Animator.Notifier.call(this);

 this.animatorID = Spry.Effect.Animator.nextID++;
 this.dropFrames = true;
 this.fps = 60; // frames per-second
 this.duration = 500; // msecs
 this.timer = 0;
 this.startTime = 0; // Used only when dropFrames is true.
 this.currentFrame = 0;
 this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
 this.stopped = false;

 Spry.Effect.Animator.copyProps(this, opts);

 this.interval = 1000 / this.fps;
 this.numFrames = (this.duration / 1000) * this.fps;

 if (this.onComplete)
 {
  var self = this;
  this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
 }
};

Spry.Effect.Animator.nextID = 1;

Spry.Effect.Animator.copyProps = function(dst, src)
{
 if (src)
 {
  for (prop in src)
   dst[prop] = src[prop];
 }
 return dst;
};

Spry.Effect.Animator.getElement = function(element)
{
 if (arguments.length > 1)
 {
  for (var i = 0, elements = [], length = arguments.length; i < length; i++)
   elements.push(Spry.Effect.Animator.getElement(arguments[i]));
  return elements;
 }
 if (typeof element == 'string')
  element = document.getElementById(element);
 return element;
};

Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Effect.Animator.Notifier = function()
{
 this.observers = [];
 this.suppressNotifications = 0;
};

Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
 if (!observer)
  return;

 // Make sure the observer isn't already on the list.

 var len = this.observers.length;
 for (var i = 0; i < len; i++)
 {
  if (this.observers[i] == observer)
   return;
 }
 this.observers[len] = observer;
};

Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
 if (!observer)
  return;

 for (var i = 0; i < this.observers.length; i++)
 {
  if (this.observers[i] == observer)
  {
   this.observers.splice(i, 1);
   break;
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
 if (!methodName)
  return;

 if (!this.suppressNotifications)
 {
  var len = this.observers.length;
  for (var i = 0; i < len; i++)
  {
   var obs = this.observers[i];
   if (obs)
   {
    if (typeof obs == "function")
     obs(methodName, this, data);
    else if (obs[methodName])
     obs[methodName](this, data);
   }
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
 if (--this.suppressNotifications < 0)
 {
  this.suppressNotifications = 0;
  Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
 }
};

Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
 ++this.suppressNotifications;
};

Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;

Spry.Effect.Animator.prototype.start = function()
{
 this.stopped = false;
 this.currentFrame = 0;
 this.startTime = (new Date()).getTime();

 this.notifyObservers("onAnimationStart");

 var self = this;
 this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};

Spry.Effect.Animator.prototype.stop = function()
{
 if (this.timer)
  clearTimeout(this.timer);
 this.timer = 0;
 this.stopped = true;

 this.notifyObservers("onAnimationStopped");
};

Spry.Effect.Animator.prototype.onStepAnimation = function()
{
 var obj = {};

 if (this.dropFrames)
 {
  obj.duration = this.duration;
  obj.elapsed = ((new Date).getTime()) - this.startTime;
  if (obj.elapsed > obj.duration)
   obj.elapsed = obj.duration;
 }
 else
 {
  obj.duration = this.numFrames;
  obj.elapsed = ++this.currentFrame;
 }

 obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)

 this.notifyObservers("onPreDraw", obj);
 this.draw(obj.elapsed, obj.duration, obj.easingConst);
 this.notifyObservers("onPostDraw", obj);

 if (!this.stopped)
 {
  if (obj.elapsed < obj.duration)
  {
   var self = this;
   this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
  }
  else
  {
   this.stop();
   this.notifyObservers("onAnimationComplete");
  }
 }
};

Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
 // The default draw method does nothing. It is assumed that
 // derived classes will provide their own implementation of this
 // method.

 debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};


///////////////////////////////////////////////////////////////////////////////

Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
 this.animationSets = [];

 Spry.Effect.Animator.call(this, opts);

 this.add(elements, styleStr);
};

Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;

Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
 // The first argument for the CSSAnimator can be
 // the id of an element, an element node, or an array of
 // elements and/or ids.

 elements = Spry.$$(elements);

 if (elements.length < 1)
  return;

 var animSet = { elements: elements, cssProps: []};

 this.animationSets.push(animSet);

 // Convert the styleStr into an object.

 var toObj = Spry.Utils.styleStringToObject(styleStr);
 for (var p in toObj)
 {
  var obj = new Object;
  var v = toObj[p];
  obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
  obj.units = v.replace(/[-\d+\.]/g, "");
  toObj[p] = obj;
 }

 for (var i = 0; i < elements.length; i++)
 {
  var obj = animSet.cssProps[i] = new Object;
  for (var p in toObj)
  {
   var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
   if (!pFuncs)
    pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];

   obj[p] = new Object;
   obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
   obj[p].to = toObj[p].value;
   obj[p].distance = obj[p].to - obj[p].from;
   obj[p].units = toObj[p].units;
  }
 }
};

Spry.Effect.CSSAnimator.prototype.start = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   if (!eleProps)
    eleProps = ele.spryCSSAnimatorProps = new Object;
 
   var obj = cssProps[i];
   for (var p in obj)
    eleProps[p] = this.animatorID;
  }
 }

 return Spry.Effect.Animator.prototype.start.call(this);
};

Spry.Effect.CSSAnimator.prototype.stop = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var obj = cssProps[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
     delete eleProps[p];
   }
  }
 }

 return Spry.Effect.Animator.prototype.stop.call(this);
};

Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var eleProps = ele.spryCSSAnimatorProps;
   var obj = cssProps[i];
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
    {
     var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
     if (!pFuncs)
      pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
 
     if (elapsed > duration)
      pFuncs.set(ele, p, obj[p].to + obj[p].units);
     else
      pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
    }
   }
  }
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs = {};

Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
 get: function(ele, prop)
 {
  return ele.style[prop];
 },

 set: function(ele, prop, val)
 {
  ele.style[prop] = val;
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
 get: function(ele, prop)
 {
  var val = 1;
  
  if (ele.style.opacity)
   val = ele.style.opacity;
  else if (ele.style.filter)
  {
   var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
   if (strVal)
    val = parseInt(strVal) / 100;
  }
  return val + "";
 },

 set: function(ele, prop, val)
 {
  ele.style.opacity = "" + val;
  ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
 }
};

///////////////////////////////////////////////////////////////////////////////

Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
 var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
 Spry.Effect.Animator.copyProps(opts, options);

 var objs = [];
 for (var i = 0; i < this.length; i++)
 {
  var obj = objs[i] = new Object;
  obj.ele = this[i];
  obj.from = obj.ele[propName];
  obj.distance = to - obj.from;
 }

 var startTime = (new Date).getTime();

 var animateFunc = function()
 {
  var elapsedTime = ((new Date).getTime()) - startTime;

  if (elapsedTime > opts.duration)
  {
   for (var i = 0; i < objs.length; i++)
    objs[i].ele[propName] = to;
   if (opts.onComplete)
    opts.onComplete();
  }
  else
  {
   for (var i = 0; i < objs.length; i++)
   {
    var obj = objs[i];
    obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
   }
   setTimeout(animateFunc, opts.interval);
  }
 };

 setTimeout(animateFunc, opts.interval);
 return this;
};

Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
 var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
 a.start();
 return this;
};

})(); // EndSpryComponent

I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax.
I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope.
I also tried writing separate plugin for my need but i don't have clear idea how does it work.

So please either suggest a way or give me link to article which is simple to understand and can clear how it work.

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

Hi guys,

I am trying to insert the following call into my page;

Code:

      <script type="text/javascript" defer="true">
$('#query').autocomplete({
    serviceUrl:'service/autocomplete.ashx',
    minChars:1,
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:250,
    deferRequestBy: 0, //miliseconds
    params: { country:'Yes' }, //aditional parameters
    // local autosugest options:
    lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
  });
</script>

It works fine in all browsers except ie(6,7,8) Code:

Internet Explorer can not open website. Operation Aborted.

I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded.

I tried adding Defer="true" to the script however this doesn't seem to work.

Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded?

Thanks guys

George

I have created a page using the code below and it works fine.

Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery.

Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")

</script>
<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}

</script>