JavaScript - Slideshow Position Problem

PLEASE! I NEED HELP!
I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem.
Here is the Slideshow.js code

Code:

 var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $$.Slideshow.Interrupted = true;

            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
          }
        );

      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 4000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

The html code for the pages looks like this:
Code:

 <div id='tmpSlideshow'> 
              <div id='tmpSlide-1' class='tmpSlide'> 
                <div class="banner1"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-2' class='tmpSlide'> 
                <div class="banner2"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-3' class='tmpSlide'> 
                <div class="banner3"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-4' class='tmpSlide'> 
                <div class="banner4"> 
                  <div class="banner"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
                    </div>
                    <div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
                </div>
          </div>
		   <div id='tmpSlide-5' class='tmpSlide'> 
                <div class="banner5"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Weight Loss</li>
                          <li>Fit for Life</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this:

Code:

<script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;



function fade(how)
{
	if(how==0)
	{
		if(opacity>0)
		{
			opacity = opacity - 0.1;
		}
		else return;
	}
	else
	{
		if(opacity<1)
		{
			opacity = opacity + 0.1;
			opacity_IE = opacity * 100;
		}
		else return;
	}
	document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
	var temp = 'fade('+how+')';
	setTimeout(temp, 1000);
}

function main_loop()
{
	fade(0); //break_point 2
	if(current == n_pics)
	{
		current = 1;
	}
	else
	{
		current = current + 1;	
	}
	document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
	fade(1);
	main_loop();
}

</script>
</head>

<body onload="main_loop();">

fade(0) means to fade out, and fade(1) - to fade in.

on IE i get 'Member Not found' on break_point 1
and
too much recursion at breake_point 2

can you help me?

I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.

Code:

 $(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});
</script>

I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.

Code:

.fadein { 
	  position:relative;
	  width:100%;
	  height:300px;
	  background-color:#000; 
	  overflow:hidden
}

.fadein img { 
	  position:relative;
	  left:300px;
	  width:auto;
	  text-align:center;
	  top:0px;
}

jonathaneiger.com

I'm teaching myself how to build websites; up until now I have made websites using tables within tables and it's all fairly straight forward, now I realise that divs and css allow you to do soooo much more!

I have put these files in a temp folder on my website so not to over write the current site. Basically I have followed this online tutorial
(http://www.cryer.co.uk/resources/jav...show_links.htm) but when I test the slideshow, it doesn't work.

the link is:
www.telecaretechnology.com/telecare2/index.html

Since I have started writing this, my css file seems to have had a wobbly - I assume my problem is where I'm trying to use server-side include?? Is that the best way to add these files?

the javascript I have used to make the slideshow run is he
http://www.telecaretechnology.com/te...2/slideshow.js

I would really appreciate any advice!

Kind Regards,

Jamie

Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance!
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'fade',
timeout: 3000,
after: function() {
$('#caption').html(this.alt);
}
});
});
</script>

Hi,

Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

http://www.javascriptkit.com/script/...ifferent.shtml

to use on my site.

Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?


If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

Thanks in advance

Script Below:


Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</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(my images here)

</script>

For the Links:

<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>

For the Image:

<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

hi,

please ignore this thread..it is a duplicate of one already active.

MODS please delete.

apologies for my mistake.

So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay.

The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc.

I know IE6 doesn't support hover on anything except anchors.

This works in IE 7/8 FF 2/3 Safaris and most likely everything else:

http://www.muchomungo.com/CrowdTwist..._template.html

Relevant CSS
Code:

li {
	list-style:none;
	float:left;

}


ul {
	list-style:none;
	margin:0;
	padding:0;
}

ul#toolbar a {
	height: 111px;
	display:block;
	text-indent:-9999px;
	font-size:0px;
	line-height:0px;
	outline: none;
}

#toolbar li.unselected:hover {
background-position:0px 222px;
}


#toolbar li.selected {
	background-position: bottom;
	height: 111px; 
	z-index: 10;
	}
#toolbar li.unselected {
	background-position: top;
	margin-left:0px;
	}

CSS file


JS

Code:

var currentSection = 'dashboard';
	
	
var newpane = function(gotoLink){

	if (currentSection == gotoLink) {
		return;
	}
	lastSection = currentSection;
	currentSection = gotoLink;
	
	// Change the section highlight.
	// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state

    
    document.getElementById(currentSection).className = "selected";
    if (lastSection) {
	    document.getElementById(lastSection).className = "unselected";
	}
}

Thanks for any help!

A menu is not hovered will be like this:



some errors are found

1. Sub-menus are displayed under the menu



I want to display All sub-menus on the right and next to menu border

Eg: The result I want it to be looked like this:



How can I fix the code like that ?

2. Sub menu does have the same size of length.

When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties.




How can fix the problem so that All submenu will be the same size of length when they are called ?

My code is for leftMenu.php

Code:

<div id="leftmenu">
    <ul>
        <li><a href="index.php?page=dress">Fashion Dress</a></li>
        <li><a href="index.php?page=handbag">Hand Bags</a></li>
        <li><a href="index.php?page=scraves">Scraves</a></li>
        <li><a href="index.php?page=watch">Bracelet Watches</a></li>
        <li><a href="#" rel="dropmenu1">Silk Ties</a></li>
        <li><a href="#" rel="dropmenu2">Pyjamas</a>
    </li>
    </ul>
</div>
<!-- SILK TIES drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="index.php?page=plain">Plain Style</a>
<a href="index.php?page=woven">Woven Style</a>
</div>
<!-- PYJAMAS drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?page=wonen">For Women</a>
<a href="index.php?page=men">For Men</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("leftmenu")
</script>

My code is for leftmenu.css

Code:

#leftmenu ul{
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: .1em;
}
ul#leftmenu li {
    display: block;
    position: relative;
    float:left;
}
#leftmenu li a {
    display: block;
    text-decoration: none;
    background-image:url(images/leftNormal.gif);
    width: 218px;
    height: 30px;
    margin-top: .1em;
}
#leftmenu li a:hover {
    display: block;
    text-decoration: none;
    background-image:url(images/leftHover.gif);
    width: 218px;
    height: 30px;
    white-space: 1em;
    color:#FFF;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
background-image:url(images/leftmenu.gif);
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only @hắc*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-image:url(images/lefthover.gif);
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#FFF;
}

Javascript code in the page of leftmenu.js

Code:

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
},

css:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
    if (this.enablereveal[0]){
        if (!dropmenu._trueheight || dropmenu._trueheight<10)
            dropmenu._trueheight=dropmenu.offsetHeight
        clearTimeout(this.revealtimers[dropmenu.id])
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
    }
    else{
        dropmenu.style.visibility="visible"
    }
    this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ //if done revealing menu
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(this.revealtimers[dropmenu.id])
    }
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        var dropmenuW=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth
    }
    else{
        var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        var dropmenuH=this.dropmenuobj._trueheight
        if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
            edgeoffset=dropmenuH+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
    if (this.iframeshimadded){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
            this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
            this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
            this.shimobject.style.display="block"
        }
    }
},

hideshim:function(){
    if (this.iframeshimadded)
        this.shimobject.style.display='none'
},

isContained:function(m, e){
    var e=window.event || e
    var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    if (c==m)
        return true
    else
        return false
},

dynamichide:function(m, e){
    if (!this.isContained(m, e)){
        this.delayhidemenu()
    }
},

delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
    this.css(this.asscmenuitem, "selected", "remove")
    this.dropmenuobj.style.visibility='hidden'
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
    this.hideshim()
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false);
    else if (target.attachEvent)
        target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
    if (!this.domsupport)
        return
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    for (var ids=0; ids<arguments.length; ids++){
        var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                var asscdropdownmenu=document.getElementById(relvalue)
                this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                try{
                    menuitems[i].innerHTML=menuitems[i].innerHTML+" "
                }catch(e){}
                this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e
                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                    }
                }, "mouseover")
                this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
            }
        } //end inner for
    } //end outer for
    if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
        document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
        this.shimobject=document.getElementById("iframeshim") //reference iframe object
        this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
        this.iframeshimadded=true
    }
} //end startchrome

}

I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly.

Thanks

I'm new to javascript and am not sure why this works in firefox and not chrome.
I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically.

if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome

Code:

<script type="text/javascript" >
	
	
window.onscroll = function() 
{
	if( window.XMLHttpRequest ) { 
		
			
			var x = 0 -document.documentElement.scrollTop;
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;
				
	}
}
	</script>

I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px.

Right now it does nothing. The element always keeps the fixed positioning even after resizing the window.

Here's what I have right now:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
<script language="javascript" src="emoto/float.js"></script>

</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>

style.css
Code:

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
min-width: 1000px;
}

#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}

img{
border: 0px;
}

float.js
Code:

if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';

Hi there,
Its Raheel here. I am new in web development. I think this problem is related to javascript, I have write script which will change images after 2sec, through setInterval function. Script is as follows.

<script>

var images = new Array ("img/1.jpg", "img/2.jpg", "img/3.jpg");
var currentIndex = 0;

function Start()
{
setInterval("ChangeImage()", 2000);
}

function ChangeImage()
{
currentIndex++;
if(currentIndex == images.length)
{
currentIndex = 0;
}

document.images[0].src = images[currentIndex];
}
</script>


But when i place in img tag which is in third row div and reload page, these series of images show in first row div. It does not show where i hv specified area for it in css.

First row div:
<div id="menu">
<img src="header/menu.png" name="menuImg"/>
</div>
My series of images show in this div when i load page.


3rd row div:
<div id="slideshow-img">
<img src="img/3.jpg" name="myimg" onclick="Start()"/>
</div>

I have checked there is no size issue in my images. Please someone resolve my problem within 4 hours. I'll highly appreciate.

Solved

I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images

Code:

<div id="imageBox">

                <!-- Random Images -->

                <img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />

                        </div>

and here is the external .js file for it

Code:

window.onload = pics;

var thisPic = 0;

 

        var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");

 

function pics(){

 

       

        thisPic = Math.floor((Math.random() * schoolImages.length));

       

        document.getElementById('randImage').src = schoolImages[thisPic];      

       

        cycle();

       

       

}

 

function cycle(){

       

        thisPic++;

       

        if(thisPic == schoolImages.length){

                thisPic = 0;

        }

       

        document.getElementById('randImage').src = schoolImages[thisPic];

       

        setTimeout(cycle, 3 * 1000);
               
     
}

I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now?

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks