JavaScript - Swap Button For Loading Image (ajax)

Hello,

I have a rather complex problem involving ajax and the dynamic loading of text.

Basically, I have a flash player with a video and a series of annotations that the customer would like to appear next to the flash player. These annotations need to dynamically light up and move as the timecode associated with the annotation is passed on the flash player's timecode.

I had a basic static system up and running fine. The problem is that the videos could be 3 hours long and have thousands of annotations - which causes a looonng load time for the page so I would like them to appear dynamically.

At the moment I have tried using the below code to load the first 100 annotations and then when the 100th annotation appears, the next 100 should load up.

The trouble is that it doesn't work! The first 100 annotations cycle through perfectly but then nothing seems to happen when the 100th annotation is read. Please help!

Here's the code....

On the record's html page, I load up the first 100 annotations in the $annotations array in a container called 'media-meta-container' - which appears next to the Flash plaer:
Code:

<div id="media-item" style="width: 858px;">
<div id="media-meta-container" style="width: 302px;">
<ul>
<? $annotate_count = 0; ?>
<? for($i=0;$i<10;$i++): ?>
<? if($annotations[$i]["start"] > 0 && $annotations[$i]["end"] > 0): ?>
<li class="media-meta-li-off" id="annotation_container_<?=$annotate_count?>" onclick="seekPrompt(<?=$annotations[$i]["start"]?>);"><p><?=$annotations[$i]["text"]?></p></li>
<input type="hidden" id="start_<?=$annotate_count?>" value="<?=$annotations[$i]["start"]?>" />
<? $annotate_count++; ?>
<? endif; ?>
<? endfor; ?> 
</ul>
</div> 
<input type="hidden" id="count" value="<?=$annotate_count?>" size="12" />
<input type="hidden" id="start_count" value="0" size="12" />
<input type="hidden" id="start_time" value="0" size="12" />

On an attached javascript file the following function is run every 100ms to update the annotations next to the player:

Code:

function updateTimeCode()
{
	var player = document.FLVClipEditor;
	
	if (player)
	{
		var state = player.getState();
		var time = player.getCurrentTime();
		var start_count = document.getElementById("start_count").value;
		var start_time = document.getElementById("start_time").value;
		
		document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
		var end_count = document.getElementById("count").value;
				
		if(state != "stopped")
		{
			
			
			if(time <= start_time)
			{
				for(k=0;k<start_count;k++)
				{
					var start = document.getElementById("start_" + k).value;
					if(time < start) break;
				}
				
				var start_count = k - 1;
			}
			
			if(start_count > 0) start_count--;
			
			for(i=start_count;i<end_count;i++)
			{
				var start = document.getElementById("start_" + i).value;
				document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
				if(time < start) break;
			}
			

//IF WE HAVE REACHED THE END OF THE AVAILABLE ANNOTATIONS THEN LOAD UP SOME MORE - THIS IS THE PART I AM HAVING PROBLEMS WITH
//THE FUNCTION FIRES BUT NOTHING HAPPENS
			if(end_count == i)
			{
				var new_end_count = end_count + 50;
				document.getElementById("count").value = new_end_count;
				scroll_annotations(end_count, new_end_count);
			}
			
			
			document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
			document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
			
			if(i > 0) i--;
			
			if(i - start_count > 3) 
			{
				document.getElementById("start_count").value = i;
				document.getElementById("start_time").value = document.getElementById("start_" + i).value;
			}
			
			var filled = document.getElementById("annotation_container_" + i);
			
			
			if(i == 0)
			{
				var end = document.getElementById("start_0").value;
				if(time > end)
				{
					filled.className = 'media-meta-li-on';
				}
			}
			else
			{
				filled.className = 'media-meta-li-on';
					
			}
			
			document.getElementById("media-meta-container").scrollTop = filled.offsetTop - 412;
			
		}
	}
}

Here is the scroll_annotations() code that is being called when we reach the end of the annotations:

Code:

function scroll_annotations(start, end){
	$.ajax({
		type: "GET",
		url: "/xml/record_annotations.php",
		dataType: "xml",
		data: "id="+id+"&media_urn="+media_urn+"&start="+start+"&end="+end+"",
		success: function(xml) {
			
			$(xml).find('annotation_item').each(function(){
				
				var annotation_count = $(this).attr('id');
				var startTimecode = $(this).find('startTimecode').text();
				var start = $(this).find('start').text();
				var annotate_count = $(this).find('annotate_count').text();
				var text = $(this).find('text').text();
				$('<li class="media-meta-li-off" id="annotation_container_' + annotate_count + '" onclick="seekPrompt(' + start +');"><p>' + text + '</p><p>' + startTimecode + '</p></li><input type="hidden" id="' + annotate_count+ '" value="' + start + '" />').appendTo('ul#annotations-list-items');
				
			});
		}
	});
}

Where record_annotations produces an xml file like this to give the annotations variables:

Code:

<annotations>
−
<annotation_item id="0">
<start>64.760000</start>
<annotate_count>0</annotate_count>
<text> ahnfea </text>
</annotation_item>
−
<annotation_item id="1">
<start>65.360000</start>
<annotate_count>1</annotate_count>
<text> we all seek. Two states for two </text>
</annotation_item>
−
<annotation_item id="2">
<start>65.920000</start>
<annotate_count>2</annotate_count>
<text> people living in peace and security. </text>
</annotation_item>
−
<annotation_item id="3">
<start>70.720000</start>
<annotate_count>3</annotate_count>
<text> The verbal gloves came off at an EU </text>
</annotation_item>
−
<annotation_item id="4">
<start>73.680000</start>
<annotate_count>4</annotate_count>
<text> summit in Brussels as the French </text>
</annotation_item>
</annotations>

Thank you. Let me know if there is any other information you need

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve

I am using this code... simplified for example

Code:

[
<script type="text/javascript">

function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>



<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"


<div id="content"></div>

Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks

I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar.

I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Here is what I've got:

Code:

<img src="images/rule.png" id="rule" width="1" height="1" />
  		<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
  		<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<img src="images/resume.png" width="195" height="101" alt="resume" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a> 
  <img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>

I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like:

https://skitch.com/jillianadriana/r7...itled-document

I can't get it to load with the custom CSS.

So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2.

After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button.

Any help would be greatly appreciated.

Hey,

I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together.

Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears.
I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated.


http://www.jamesbutterworth.co.uk/untitled-1.html

Hey guys,

Im a little stuck with a JQ script im trying to create.

First the html:
Code:

            <div id="image_holder">
                <img src="images/default.jpg" id="image_swap" />
            </div>
            
            <ul id="links" class="test">
                <li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
                <li><a href="#" name="images/02.jpg">Joker 1</a></li>
                <li><a href="#" name="images/03.jpg">Joker 2</a></li>
            </ul>

What im trying to accomplish is:

1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left.
2.) if the mouse is:
2a) swap the current image loaded out with the new image to be loaded
else:
2b.)swap the current image loaded out with the default image.

I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image...

Code:

jQ('#links li a').hover(
	function() {
   		var img = jQ(this).attr("name");
		var parent = jQ(this).parent().parent().attr("id");

		jQ("#image_swap").fadeOut("medium", function() {
			// if mouse is within the #link id dont show default image
			if(parent === "links") {
				jQ(this).attr("src", img);
				jQ(this).fadeIn("medium");
			}
			// if the mouse is outside the #link id show the default image
		})
			
	},
	function() {
		jQ("#image_swap").attr("src", "images/default.jpg");
	}
);

Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page.

Below is the routine I am using that when invoked swaps images for other images:

Code:

<script>
function swapImage(swapContName) {
      if (swapContName == 'mainImage1') {
      document.getElementById('mainImage1').src = 'L1Bswap.gif';
      document.getElementById('hand1').src = 'handr.gif';
      document.getElementById('help1_pic').src = 'answers2.gif';
      document.getElementById('homework').src = 'spacer.gif';
      document.getElementById('instruct').src = 'spacer.gif';
      document.getElementById('instructflag').src = 'spacer.gif';
      }
}
</script>

Fairly simple and works well.

But one of the images I would like to vanish (using the empty spacer.gif) has a border:

Code:

<img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left">

It must have this black border, but when it gets swapped for a blank, I am left with the black square.

Anyone have any idea how to vanish the border along with the graphic?

(I have some vague idea that "border" is not used any more, but anyway...).

Hey everyone,

I'm just trying to figure out if it is possible to swap the pages background image when a button is clicked without refreshing the page? I've looked around and can't really find anything helpful.

Any tips or pointers in the right direction would be much appreciated

Thanks

YD

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

I need a script and HTML code for an image effect like this: http://www.saksfifthavenue.com/main/...11947&ev19=1:2 Something very easy, if possible. Thanks.

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

Hi guys,

I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.


Here's the javascript code
Code:

	var News_Images = new Array();
	News_Images[0]="images/max.gif"
	News_Images[1]="images/min.gif"

function DisplayNews(body,box,link,id){
		
		$(body + " > div > .news_box").each(function(){
	        if($(this).css("display")=="block"){
	        	$(this).slideToggle("slow");
	        }
	     });

	     $(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     $(body + " > div > a[class='open_button']").each(function(){
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     if($(body + " > div > #"+box+id).css("display")=="none"){
	     	$(body + " > div > #"+box+id).slideDown("slow");
			
	     	$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
			alert("box =" + box + " id = " + id + " link =" + link);
	     }
	}

And here is the html sample
Code:

    <div class="recent_news_box">
    <a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
    <a class="link_block" href="">Some Title Text</a>
        <div style="display: none;" class="news_box" id="news_link3">
        <img class="front_image" alt="" src="" align="right">
        <span class="date">Jul 21, 2009</span>
        <div>Some Stuff to display here will be short text</div>											
        </div>
    </div>

Thanks in advance.

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.