|
JavaScript - Non-blocking Interactive Crossfade
Hi there,
for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. Similar TutorialsI am trying to persuade the javascript to fade from one image into the next, but I'm only succeeding at fading into nothing, and then making the next image appear. The effect can be seen he http://userpages.bright.net/~toddw/orbit/aheader0.html The effect that I am trying to achieve is he http://userpages.bright.net/~toddw/orbit/aheader9.html the problem with the second example is that I can't figure out how to add the navigation controls,… so I thought it would be easier to address the crossfade with the first example. Code: var openBtn2 = "images/Button_open.gif";
var solidBtn2 = "images/Button_solid.gif";
var intervalID2;
var showing2 = 1;
var truckArray = new Array("","truck1","truck2","truck3","truck4");
var truckbtnArray = new Array("","truckBtn1","truckBtn2","truckBtn3","truckBtn4");
var inProgress2 = false;
function swapTruck(next) {
if (inProgress2) return;
inProgress2 = true;
if (next == 0) { next = showing2 + 1; } //if swapTruck is not called from a button
if (next == 5) { next = 1; } ***//if its the last news item
new Effect.Fade(truckArray[showing2], { duration: 0.3});
setTimeout(function() {
$(truckbtnArray[showing2]).src = openBtn2
$(truckbtnArray[showing2]).style.cursor = "pointer"
$(truckbtnArray[next]).src = solidBtn2
$(truckbtnArray[next]).style.cursor = "default"
new Effect.Appear(truckArray[next], { duration: 0.3})
showing2 = next
inProgress2 = false
}, 300);
clearInterval(intervalID2);
intervalID2 = setInterval("swapTruck(0)", 25000);
}
Event.observe(window, 'load', function() { //this binds the function() to the event window.onload
intervalID2 = setInterval("swapTruck(0)", 25000);
$("truckBtn1").src = solidBtn2;
$("truckBtn2").src = openBtn2;
$("truckBtn2").style.cursor = "pointer";
$("truckBtn3").src = openBtn2;
$("truckBtn3").style.cursor = "pointer";
$("truckBtn4").src = openBtn2;
$("truckBtn4").style.cursor = "pointer";
});
My html looks like this: <!-- define images for fading into each other --> <div id="slider"> <div id="truck1"><img src="c5_app_2.jpg" title="" /></div> <div id="truck2" style="display:none;"><img src="infolink_main.jpg" title="" /></div> <div id="truck3" style="display:none;"><img src="rr5700_app_2.jpg" title="" /></div> <div id="truck4" style="display:none;"><img src="c5_app_1.jpg" title="" /></div> </div> <!-- navigational buttons for image fade --> <div class="truck_buttons"> <img src="(EmptyReference!)" onClick="swapTruck(1)" id="truckBtn1"> <img src="(EmptyReference!)" onClick="swapTruck(2)" id="truckBtn2"> <img src="(EmptyReference!)" onClick="swapTruck(3)" id="truckBtn3"> <img src="(EmptyReference!)" onClick="swapTruck(4)" id="truckBtn4"> </div> I am working on a simple image crossfade for my website, and i downloaded a good file folder with a javascript code that works well. it's exactly what i'm trying to achieve. yet, when i put in the code into my webpage index it doesn't fade like it should. the images fade out but don't cross-fade into each other. I tried testing the original file/script with alternate images/jpgs to see if my images were messing things up but it was fine, yet when i use MY webpage in MY root folder it doesn't work. so is there something wrong with my rootfolder that is messing up the javascript? i'm pulling my hair out because the code looks fine to me. please help! thanks!! jason This is a image background slideshow im trying to incorp into a DIV instead of the <body>. Ive tried getElementById. But im still having trouble getting it to work. Also the crossfade only works in Internet explorer, i looked up the code to try and fix it for Firefox but i think it only works with CSS3. Any input would be great, i dont know a lot about Javascript most of this is self taut with a little experience using C++. Code: <script language="JavaScript">
<!----------------------------------------------------------------------------
var speed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'drawing1.jpg';
Pic[1] = 'drawing2.jpg';
Pic[2] = 'drawing1.jpg';
Pic[3] = 'drawing2.jpg';
Pic[4] = 'drawing1.jpg';
Pic[5] = 'drawing2.jpg';
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow()
{
if (document.MozOpacity!=null)
{
/*trying to fix crossfade for Firefox*/
obj.style.MozOpacity = (opacity/100) - .001;
}
else if (document.all)
{
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();
}
if (document.body)
{
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
}
//--------------------------------------------------------------------------------
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000">
Code: I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Hi all, I was asked by a friend if I could help with a school kids website. The general website stuff I am fine with however they are looking for some interactive content. Stuff they seem interested in are e.g.quizes, like 10 questions and after you finish you see how many you got right and the correct answers perhaps. Are there Javascripts available that will do this? Any ideas on recommendations or any other scripts/content that could be good on a kids site is of interest. Thanks Hi everyone, I'm pretty new to JS and I was wondering if anyone could put me on the right track to developing a slideshow which you can flip between the images manually or let it run through itself (and preferably contain links to other pages). Basically, like the one at the top of the Valve website: http://www.valvesoftware.com/index.html Thanks all I need to create an interactive map similar to the one on this site: http://viewers-guide.hbo.com/game-of-thrones/#!/map/ It is a map of a fictional area ( a real area but there are fictional buildings and characters on it) so I don't think google maps plugins are suitable. I don't want to reinvent the wheel, so if anybody has a good suggestion of a good jquery/javascript solution for interactive maps, please refer me to the relevant information. In other words, I need a map where by clicking the objects on the map, a popup window pops up with additional information about the 'scene' or a 'character'. In addition, the map will be dark from the beginning and more and more sites and characters will be revealed on it every week. Thanks for any tips! Can anyone suggest a non-Flash USA map that allows for popup? I've only found one online.
I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery): http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery In an attempt to block access to my website I have entered the following: [CODE] <script language="javascript"> var ip = '<!--#echo var="REMOTE_ADDR"-->' if (ip == '68.230.240.59' || ip == '216.33.127') { alert("STOP! You are not allowed to view this website!"); alert("Why can't you guys just leave me alone?"); if (confirm("Do you want to leave peacefully? Or will I have to help you?")) {location.href="http://www.yahoo.com" } else { ("OK you choose I don't care! Bye bye! Don't come back!"); {location.href="http://www.yahoo.com" }} } </script> I am concerned about the first if statement and use of the || (or). How do I do a blocking call in javascript? In the code below the alert at the last line of this code snippet hits before the code in if block completes which returns some value, by calling chached.get method in different js file. var getCachedData = function(_key){ var retStr; if (_key != '' || _key != null) { cached.get(_key, function(data){ if(data){ alert('data = ' +data.value); return data.value; } else{ return undefine; } }); } alert('completed'); } Please help I have a need to use a lot of pop ups to provide greater detail into items users are interested in. The problem is the percentage of time that a browser will block these pop ups. I would need to find a way to do one or both of two things: 1.) Find a way to show pop ups like with lightbox that will not be blocked by browsers without greatly hindering page load time 2.) Provide a Javascript / JQuery alert that can detect when a pop up has been blocked by a browser and notify a user through an alert along with a custom message written by me Anyone familiar with some Javascript coding that will do this or if lightbox is a practical solution without hindering page load time. There is likely to be anywhere from 10-30 different pop ups on a given page. I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : ) Code: //** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...height-script/
var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["sidebar-a", "content"]
ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}
ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}
ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second)
var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
var slideSpeed_in = 10;
var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
var xOffsetSubMenu = 0; // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
var slideDirection = 'right'; // Slide to left or right ?
/* Don't change anything below here */
var activeSubMenuId = false;
var activeMainMenuItem = false;
var currentZIndex = 1000;
var autoHideTimer = 0;
var submenuObjArray = new Array();
var okToSlideInSub = new Array();
var subPositioned = new Array();
function stopAutoHide()
{
autoHideTimer = -1;
}
function initAutoHide()
{
autoHideTimer = 0;
if(autoHideTimer>=0)autoHide();
}
function autoHide()
{
if(autoHideTimer>timeBeforeAutoHide)
{
if(activeMainMenuItem){
activeMainMenuItem.className='';
activeMainMenuItem = false;
}
if(activeSubMenuId){
var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
showSub();
}
}else{
if(autoHideTimer>=0){
autoHideTimer+=50;
setTimeout('autoHide()',50);
}
}
}
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function showSub()
{
var subObj = false;
if(this && this.tagName){
var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
okToSlideInSub[numericId] = false;
var subObj = document.getElementById('subMenuDiv' + numericId);
if(activeMainMenuItem)activeMainMenuItem.className='';
if(subObj){
if(!subPositioned[numericId]){
if(slideDirection=='right'){
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
}else{
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
}
submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
subPositioned[numericId] = true;
}
subObj.style.visibility = 'visible';
subObj.style.zIndex = currentZIndex;
currentZIndex++;
this.className='activeMainMenuItem';
activeMainMenuItem = this;
}
}else{
var numericId = activeSubMenuId;
}
if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
if(numericId!=activeSubMenuId && this && subObj){
subObj.style.width = '0px';
slideMenu(numericId,slideSpeed_out);
activeSubMenuId = numericId;
}else{
if(numericId!=activeSubMenuId)activeSubMenuId = false;
}
if(showSubOnMouseOver)stopAutoHide();
}
function slideMenu(menuIndex,speed){
var obj = submenuObjArray[menuIndex]['divObj'];
var obj2 = submenuObjArray[menuIndex]['ulObj'];
var width = obj.offsetWidth + speed;
if(speed<0){
if(width<0)width = 0;
obj.style.width = width + 'px';
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
obj.style.visibility = 'hidden';
obj.style.width = '0px';
if(activeSubMenuId==menuIndex)activeSubMenuId=false;
}
}else{
if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
obj.style.width = width + 'px';
if(width<submenuObjArray[menuIndex]['width']){
setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
}else{
okToSlideInSub[menuIndex] = true;
}
}
}
function resetPosition()
{
subPositioned.length = 0;
}
function initLeftMenu()
{
var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
if(!browserVersion)browserVersion=1;
var menuObj = document.getElementById('dhtmlgoodies_menu');
var mainMenuItemArray = new Array();
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
while(mainMenuItem){
if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
var aTag = mainMenuItem.getElementsByTagName('A')[0];
if(showSubOnMouseOver)
aTag.onmouseover = showSub;
else
aTag.onclick = showSub;
}
mainMenuItem = mainMenuItem.nextSibling;
}
var lis = menuObj.getElementsByTagName('A');
for(var no=0;no<lis.length;no++){
if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
lis[no].onmouseout = initAutoHide;
lis[no].onmousemove = stopAutoHide;
}
for(var no=0;no<mainMenuItemArray.length;no++){
var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
if(sub){
mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
var div = document.createElement('DIV');
div.className='dhtmlgoodies_subMenu';
document.body.appendChild(div);
div.appendChild(sub);
if(slideDirection=='right'){
div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
}else{
div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
}
div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
div.id = 'subMenuDiv' + (no+1);
sub.id = 'submenuUl' + (no+1);
sub.style.position = 'relative';
if(navigator.userAgent.indexOf('Opera')>=0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
}
sub.style.left = 1 - sub.offsetWidth + 'px';
if(browserVersion<7 && isMSIE)div.style.width = '1px';
if(navigator.userAgent.indexOf('Opera')<0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
}
if(!document.all)div.style.width = '1px';
}
}
menuObj.style.visibility = 'visible';
window.onresize = resetPosition;
}
window.onload = initLeftMenu;
|
|||||||