/    Sign up×
Community /Pin to ProfileBookmark

Javascript Slideshow textarea Spacing?

Copy linkTweet thisAlerts:
Nov 17.2007

Is it possible to use html to space the information in the caption textarea?

I want to be able to center the text and add a link inside of each caption.
When I try to enter html into the ‘captionTxt’ it shows in the textarea.

Link to page: [URL=”http://www.paintingsbygrafton.com/slideshow.html”]http://www.paintingsbygrafton.com/slideshow.html[/URL]

Code:

[CODE]<SCRIPT language=”JavaScript1.2″>
var numSlides = 44;
var currentSlide = numSlides;
var captionTxt = new Array(numSlides);

function setUpCaptions() {
captionTxt[1] = “1 of 44 $550.00 36×48 Sold Un-Named”
captionTxt[2] = “2 of 44 $800.00 48×54 Sold Un-Named”
captionTxt[3] = “3 of 44 $450.00 30×40 Sold Un-Named”
captionTxt[4] = “4 of 44 $350.00 36×36 Sold Un-Named”
captionTxt[5] = “5 of 44 $350.00 36×36 Sold Un-Named”
captionTxt[6] = “6 of 44 $350.00 36×36 Un-Named”
captionTxt[7] = “7 of 44 $700.00 Sold Un-Named”
captionTxt[8] = “8 of 44 $550.00 38×48 Un-Named”
captionTxt[9] = “9 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[10] = “10 of 44 $350 36×36 Un-Named”
captionTxt[11] = “11 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[12] = “12 of 44 $800.00 48×54 Sold Un-Named”
captionTxt[13] = “13 of 44 $550.00 39x 50 Un-Named”
captionTxt[14] = “14 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[15] = “15 of 44 $600.00 47×52 Un-Named”
captionTxt[16] = “16 of 44 $700.00 48×60 Sold Un-Named”
captionTxt[17] = “17 of 44 $800.00 48×60 Sold Un-Named”
captionTxt[18] = “18 of 44 $800.00 36×48 Sold Un-Named”
captionTxt[19] = “19 of 44 $450.00 38×50 Un-Named”
captionTxt[20] = “20 of 44 $450.00 39×52 Un-Named”
captionTxt[21] = “21 of 44 $800.00 49×66 Un-Named”
captionTxt[22] = “22 of 44 $600.00 48×60 Sold Un-Named”
captionTxt[23] = “23 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[24] = “24 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[25] = “25 of 44 $800.00 38×60 Sold Un-Named”
captionTxt[26] = “26 of 44 $550.00 36×48 Sold Un-Named”
captionTxt[27] = “27 of 44 $800.00 48×60 Sold Un-Named”
captionTxt[28] = “28 of 44 $800.00 48×60 Sold Un-Named”
captionTxt[29] = “29 of 44 $800.00 48×60 Sold Un-Named”
captionTxt[30] = “30 of 44 $400.00 30×40 Sold Un-Named”
captionTxt[31] = “31 of 44”
captionTxt[32] = “32 of 44”
captionTxt[33] = “33 of 44”
captionTxt[34] = “34 of 44”
captionTxt[35] = “35 of 44”
captionTxt[36] = “36 of 44”
captionTxt[37] = “37 of 44”
captionTxt[38] = “38 of 44”
captionTxt[39] = “39 of 44”
captionTxt[40] = “40 of 44”
captionTxt[41] = “41 of 44”
captionTxt[42] = “42 of 44”
captionTxt[43] = “43 of 44”
captionTxt[44] = “44 of 44”
}
function setUp() {setUpCaptions();
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++)
document.all[(“image”+i)].style=document.all[(“image”+i)];
}
switchSlide(1);
}

function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[(“image”+newSlide)].style.visibility=”visible”;
document.all[(“image”+currentSlide)].style.visibility=”hidden”;
// remove the next line if you don’t want captions:
document.all[“captions”].document.forCaptions.captionsText.value=captionTxt[newSlide];
currentSlide = newSlide;
}

//–>
</script>
</head>

<BODY onLoad=”setUp()”>
<DIV id=”image44″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image044.jpg”></DIV>
<DIV id=”image43″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image043.jpg”></DIV>
<DIV id=”image42″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image042.jpg”></DIV>
<DIV id=”image41″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image041.jpg”></DIV>
<DIV id=”image40″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image040.jpg”></DIV>
<DIV id=”image39″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image039.jpg”></DIV>
<DIV id=”image38″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image038.jpg”></DIV>
<DIV id=”image37″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image037.jpg”></DIV>
<DIV id=”image36″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image036.jpg”></DIV>
<DIV id=”image35″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image035.jpg”></DIV>
<DIV id=”image34″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image034.jpg”></DIV>
<DIV id=”image33″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image033.jpg”></DIV>
<DIV id=”image32″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image032.jpg”></DIV>
<DIV id=”image31″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image031.jpg”></DIV>
<DIV id=”image30″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image030.jpg”></DIV>
<DIV id=”image29″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image029.jpg”></DIV>
<DIV id=”image28″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image028.jpg”></DIV>
<DIV id=”image27″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image027.jpg”></DIV>
<DIV id=”image26″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image026.jpg”></DIV>
<DIV id=”image25″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image025.jpg”></DIV>
<DIV id=”image24″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image024.jpg”></DIV>
<DIV id=”image23″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image023.jpg”></DIV>
<DIV id=”image22″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image022.jpg”></DIV>
<DIV id=”image21″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image021.jpg”></DIV>
<DIV id=”image20″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image020.jpg”></DIV>
<DIV id=”image19″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image019.jpg”></DIV>
<DIV id=”image18″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image018.jpg”></DIV>
<DIV id=”image17″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image017.jpg”></DIV>
<DIV id=”image16″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image016.jpg”></DIV>
<DIV id=”image15″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image015.jpg”></DIV>
<DIV id=”image14″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image014.jpg”></DIV>
<DIV id=”image13″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image013.jpg”></DIV>
<DIV id=”image12″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image012.jpg”></DIV>
<DIV id=”image11″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image011.jpg”></DIV>
<DIV id=”image10″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image010.jpg”></DIV>
<DIV id=”image9″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image09.jpg”></DIV>
<DIV id=”image8″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image08.jpg”></DIV>
<DIV id=”image7″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image07.jpg”></DIV>
<DIV id=”image6″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image06.jpg”></DIV>
<DIV id=”image5″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image05.jpg”></DIV>
<DIV id=”image4″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image04.jpg”></DIV>
<DIV id=”image3″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image03.jpg”></DIV>
<DIV id=”image2″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image02.jpg”></DIV>
<DIV id=”image1″ class=”slides”><IMG src=”http://www.paintingsbygrafton.com/images/image01.jpg”></DIV>
<DIV style=”position:absolute; top:401px; left:212px”>
<A href=”javascript:switchSlide(-1)”><font color=”#000000″; face=”lucida bright”>previous – </font></A>
<A href=”javascript:switchSlide(1)”><font color=”#000000″; face=”lucida bright”>next</font></A>
</DIV>
<DIV id=”captions” style=”position:absolute; left:10px; top:150px”>
<B>Painting Info</B>
<FORM name=forCaptions>
<TEXTAREA name=”captionsText” wrap=”virtual” rows=10 cols=15″></TEXTAREA>
</FORM>
</DIV>
[/CODE]

Thanks in advance to any help.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@webgurlauthorNov 18.2007 — Nobody has any idea how to do it? :eek:
Copy linkTweet thisAlerts:
@Arty_EffemNov 18.2007 — Nobody has any idea how to do it? :eek:[/QUOTE]
Your demo takes too long to load because the images aren't optimised, which is probably the point where people lose interest.

Your code uses [I]document.all[/I], which is non-standard and will fail.

Form elements don't parse HTML.

You could have a set of divs each containing the caption text and links, and just set the display property of the appropriate one.

You could copy your text to a div using the dreaded [I]innerHTML[/I].

You could use DOM methods to insert/replace text nodes and link elements into a single div.
×

Success!

Help @webgurl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...