JavaScript - Removing Caption In Jquery Facebox

I have been trying for several days now to append a text caption to a displayed image using Javascript, but with no real success. Perhaps JS is not the best way. Has anyone a suggestion as to the best way to tackle this.

I want to replace the image captions with text ones to help speed up the site. It is my home site here.

A modification of the existing code seems obvious, but I have been unable to do this. Any help gratefully received.

Frank

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>

Good day all,

I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems.

Few things I am looking to change/add:

1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image.

2. Start the thumbnail position in the middle instead of the left

3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails.

Below I've include the Javascript code: Is this the best way or is there a better way?

Example of slideshow: http://neileverosborne.com/portfolios/manatees.html

JAVASCRIPT:
Code:

	var displayWaitMessage=true;	// Display a please wait message while images are loading?


	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}

	function releaseSlide()
	{
		var id = this.id;
		slideSpeed=0;
	}

	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;

			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}

			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);

	}

	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';
			activeImage.style.opacity = 0.5;
		}
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;
		activeImage = this;
	}

	function initSlideShow()
	{
		document.getElementById('arrow_left').onmousemove = startSlide;
		document.getElementById('arrow_left').onmouseout = releaseSlide;
		document.getElementById('arrow_right').onmousemove = startSlide;
		document.getElementById('arrow_right').onmouseout = releaseSlide;




		imageGalleryObj = document.getElementById('theImages');
		imageGalleryLeftPos = imageGalleryObj.offsetLeft;
		var galleryContainer = document.getElementById('galleryContainer');
		imageGalleryWidth = galleryContainer.offsetWidth - 20;
		maxGalleryXPos = imageGalleryObj.offsetLeft;
		minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

		if (navigator.userAgent.indexOf('MSIE') >= 0) {
			var arrowWidth = document.getElementById('arrow_left').offsetWidth;
			var el = document.createElement('div');
			el.style.position = 'absolute';
			el.style.left = arrowWidth + 'px';
			el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
			el.style.overflow = 'hidden';
			el.style.height = '100%';

			document.getElementById('galleryContainer').appendChild(el);
			el.appendChild(document.getElementById('theImages'));
		}
		var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
		for(var no=0;no<slideshowImages.length;no++){
			slideshowImages[no].onmouseover = showImage;
		}

		var divs = imageGalleryObj.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
		}
		gallerySlide();
	}

	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
		if(subImages.length==0){
			var img = document.createElement('IMG');
			document.getElementById('previewPane').appendChild(img);
		}else img = subImages[0];

		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath;

	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';
		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
		document.getElementById('largeImageCaption').style.display='block';

	}
	window.onload = initSlideShow;

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

Is it possible to prevent the tooltip that appears when mousing over an image from appearing? This is without removing the alt or title tags.

I am retrieving a value from a form, but the problem is that the value is surrounded in parentheses (intentionally). However when making an if statement to see if the value is greater then "X", i can not make an if statement becouse there are parentheses around the number. How can i strip the parentheses??

I can't really get any help over on the greasemonkey forums so hopefully I can get some needed help here.

My goal with a script I am writing is to remove signatures from a forum I am a part of. Some of the people abuse it with half a page of stuff and it's out of control. So here is what the HTML source code for it looks like

Code:

<table cellSpacing="1" width="100%" border="0" class="tback" cellPadding="2">
<tr>
<td width="100" class="headcell">Author</td>

<td class="headcell">Topic</td>
</tr>
<tr vAlign="top" class="cell">
<td align="center">
<div><a href="profile.asp?$sid=&amp;id=5126">Roadwildcat</a></div>
<div class="fcaption">Pee Wee League</div><br><div><img src="images/stars-2.gif" alt="2 Stars"></div><br><img src="Avatars/Georgia.gif" alt="Member Avatar" height="62" width="62"><div class="fcaption">DC Georgia 2020 to Present</div>
<div class="fcaption">115 Posts</div>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><span class="fcaption"><img src="images/oPost.gif" alt="Old Post" height="10" width="10" border="0" align="absmiddle">Posted - 03 January 2011 5:41</span></td>

<td align="right"><a href="myForum.asp?$sid=&amp;mode=compose&amp;to=5126"><img src="images/pm.gif" width="33" height="18" border="0" hspace="3" align="absmiddle" alt="Send Roadwildcat a Private Message"></a><a href="post.asp?$sid=&amp;mode=Quote&amp;id=24958&amp;fid=2&amp;t=24958&amp;fpage=1"><img hspace="3" alt="Reply With Quote" src="images/quote.gif" width="28" height="18" align="absmiddle" border="0"></a></td>
</tr>
</table>
<hr size="1" noshade>I have been trying to set my attendance to the all star games but when I do a game search on the map it is showing no games at all. Anyone else having this problem?<hr size="1"><span class="fcaption">SEC Champions 2022-2027 <br/> National Runner-up 2027 <br/> Recruiting BEAST! <br/> BULLDAWG BOUNCE</span></td>
</tr>

The very bottom where it has the 'span' tag and it says "SEC Champions" is where the Signatures are located. I want to completely remove that using my script and this is what I have right now

Code:

function sigRemove() {
	var sigs = document.getElementsByTagName('span');
	for (var i = 0; i < sigs.length; i++) {
		sigs[i].style.display = 'none';
	}
}

I know it's incomplete but I only want to remove that bottom span tag and everything inside of it and not every span tag on the page. Please help and I apologize for the long post

hi,

at the moment my code: Code:

new Date();

this displays:

Thur Nov 24 201115:28:53 GMT+0000 (GMT)

I only want it to say:

Thur Nov 24 201115:28:53

I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event.

Wouldn't this little script remove any element with an id = 'link_container' ?

<script type="text/javascript">
var deleteDiv = document.getElementById('link_container');
document.body.removeChild(deleteDiv);
</script>

Hi,

So I've got an array called questions_raw

Code:

questions raw = [
["<Q1> Question",
    "choice1","choice2", "choice3"],
["<Q2> Question",
    "choice1","choice2", "choice3"],
...
]

And I want to list all of the questions, but not the choices/answers. So far, I've managed to list just the questions, but because another function randomly sorts them, I need to sort them back into numerical order for a separate function (displaying the questions)

I use characters (>,^) at the front to separate them into different answer types (just to explain the code)

I try this to cut each string down so that they can be sorted numerically/alphebetically -

Code:

function linearlist()
{
var list = [];
var tempStr = "";
for (var l = 0; l < 145; l++)
{
	tempStr = questions_raw[l][0];
    list[l] = tempStr;
}

if (list.charAt(0)== " " )  list = list.substring(3) ;
if (list.charAt(0)== ">" )  list = list.substring(3) ;
if (list.charAt(0)== "^" )  list = list.substring(3) ;
var sorted = list.sort();

document.Qtext2form.Qtext2.value = sorted.join("\n");
}

But it doesn't like it - because "it has no method charAt"

Any idea what i'm missing? Is it just that you have to put the [l] in every time you call a variable?

Cheers