PDA

View Full Version : Same script possible twice on a page?



Partizan
Apr 29th, 2009, 01:28 PM
On this page http://www.minifigtimes.com/news/2009/2009-02-20-story01.shtml I have some code that allows the user to click Next Picture whereby he/she sees another picture and related text below.

Does anyone know whether it is possible for me to have 2 of the scripts running on the page so I could have 2 Images and 2 cases of "Next Picture"?

Any help really appreciated. Thanks.

Rowsdower!
Apr 29th, 2009, 01:57 PM
Without seeing your specific application it's hard to give a solid answer. The code may be written in such a way that on its own you cannot put it in twice without editing something.

That said, at the very least you should be able to tweak the script to work for two instances on the same page.

Do you have a link to a live test page?

Partizan
Apr 29th, 2009, 02:21 PM
Apologies.

This is the page: http://www.minifigtimes.com/news/2009/2009-02-20-story01.shtml

This the the current script code:

HEAD:


<!-- SCRIPT BELOW IS FOR MULTIPLE IMAGES AND TEXT -->
<script type="text/javascript">
<!--
var img = new Array();
var caption = new Array();
var path = "http://www.minifigtimes.com/"

img[0] = path + "images-2009/news/2009-02-20-p1.png"
caption[0] = "The ecomony appears to be on a downward spiral with industrial production 95% lower than this time last year.<br><br> Minifigs who have lost their jobs receive a meagre &#163;28 a week from the social welfare system whilst the permamently unemployed pick up &#163;22. The latest unemployment figures represent around 40% of the population. ";

img[1] = path + "images-2009/news/2009-02-20-p2.png";
caption[1] = "General Secretary of the state and leader of the New Brick Order party, Obnoxious Consensus, is under pressure to resign. Should he stay on as expected, he may be forced into holding parliamentary elections before the Summer. <br> <br> Many minifigs interviewed in Legoland City called for Consenus to be the first to be fed to the lions if the \"sport\" is introduced.";

img[2] = path + "images-2009/news/2009-02-20-p3.png";
caption[2] = "An external report by auditors PricewoodhousePieces has concluded that the government will run out of funds by June 2008 and will have to rely on borrowing to fund public services such as the police. <br> <br> This, PwP suggest, may be problematic as judging by data from the main financial institutions, credit may not be freely available.";

// Add more images here
function changeIMG(direction) {

var current=document.images.nextpic.src;

for (var i = 0;i<img.length;i++) {
if(img[i]==current) {
if(direction=="forward") {
if(i==img.length-1) {
swap(0);
}
else {
swap(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap(img.length-1);
}
else {
swap(i-1);
}
}
break;
}
}
}

function swap(nr) {
document.images.nextpic.src=img[nr];
document.getElementById("imgcaption").innerHTML=caption[nr];
}

//-->
</script>

<!-- END -->



BODY:

<div class="img right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">
<img name="nextpic" src="http://www.minifigtimes.com/images-2009/news/2009-02-20-p1.png" onclick="changeIMG();" alt="LEGO news">
<p id="imgcaption" style="width: 100%;">
The ecomony appears to be on downward spiral with industrial production down 95% in one year.<br><br>
Minifigs who have lost their jobs receive a meagre &#163;28 a week from the social welfare system whilst the permamently unemployed pick
up &#163;22. The latest unemployment figures represent around 40% of the population.
</p>
<a href="#" onclick="changeIMG('forward');return false;" class="link-next-picture">Next Picture</a>

<div>

Rowsdower!
Apr 29th, 2009, 03:15 PM
OK, here's the lazy way...

If you paste this in your page just under the current div with changing images:
<div class="img right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">
<img name="nextpic2" src="http://www.minifigtimes.com/images-2009/news/2009-02-20-p1.png" onclick="changeIMG2();" alt="LEGO news">
<p id="imgcaption2" style="width: 100%;">
The ecomony appears to be on downward spiral with industrial production down 95% in one year.<br><br>
Minifigs who have lost their jobs receive a meagre £28 a week from the social welfare system whilst the permamently unemployed pick
up £22. The latest unemployment figures represent around 40% of the population.
</p>
<a href="#" onclick="changeIMG2('forward');return false;" class="link-next-picture">Next Picture</a>
<div>

Then paste this copy of the script in the header just after the existing script:
<!--Second copy of the script-->
<script type="text/javascript">
<!--
var img2 = new Array();
var caption2 = new Array();
var path2 = "http://www.minifigtimes.com/"

img2[0] = path2 + "images-2009/news/2009-02-20-p1.png"
caption2[0] = "The ecomony appears to be on a downward spiral with industrial production 95% lower than this time last year.<br><br> Minifigs who have lost their jobs receive a meagre £28 a week from the social welfare system whilst the permamently unemployed pick up £22. The latest unemployment figures represent around 40% of the population. ";

img2[1] = path2 + "images-2009/news/2009-02-20-p2.png";
caption2[1] = "General Secretary of the state and leader of the New Brick Order party, Obnoxious Consensus, is under pressure to resign. Should he stay on as expected, he may be forced into holding parliamentary elections before the Summer. <br> <br> Many minifigs interviewed in Legoland City called for Consenus to be the first to be fed to the lions if the \"sport\" is introduced.";

img2[2] = path2 + "images-2009/news/2009-02-20-p3.png";
caption2[2] = "An external report by auditors PricewoodhousePieces has concluded that the government will run out of funds by June 2008 and will have to rely on borrowing to fund public services such as the police. <br> <br> This, PwP suggest, may be problematic as judging by data from the main financial institutions, credit may not be freely available.";

// Add more images here
function changeIMG2(direction) {

var current=document.images.nextpic2.src;

for (var i = 0;i<img2.length;i++) {
if(img2[i]==current) {
if(direction=="forward") {
if(i==img2.length-1) {
swap2(0);
}
else {
swap2(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap2(img2.length-1);
}
else {
swap2(i-1);
}
}
break;
}
}
}

function swap2(nr) {
document.images.nextpic2.src=img2[nr];
document.getElementById("imgcaption2").innerHTML=caption2[nr];
}

//-->
</script>
<!--End of Second Copy of Script-->

Like I said, this is waaaaaay lazy, but the highlighted red parts are what makes it work. It would be more adviseable to change the way the function is called so that more than one ID can be used, but for a quick fix this works just fine. Let me know if you have any trouble with this or if you want to explore a more sophisticated approach...

Partizan
Apr 29th, 2009, 04:29 PM
Thanks a million Rowsdower!

I have it set up on a test page, http://www.minifigtimes.com/index2.shtml and it is working fine.

I have a few questions, regarding some format which maybe you or someone might know how to fix it.

1. If you see on the http://www.minifigtimes.com/index2.shtml page the little image to the right of "News in brief.... Sport: Greentown Atletic have..." is one line higher than the text "Sport: Greentown Atletic have...". It has jumped up because I have used the <p> tag after the image:



<img name="nextpic2" src="http://www.minifigtimes.com/news/2009/images/nib-minifig-alan-mcmanus-1.png" class="farright" onclick="changeIMG2();" alt="LEGO news">

<p id="imgcaption2" style="width: 100%;" >
Sport: Greentown Atletic have been sold to Green Islander businessfig Mr Alan McManus for a &#163;45m fee. The club will play their
first game under new ownership when they entertain Parma at the Athletic Ground. Former owner, Higginsland businessfig Mr Primus
Stove, is expected to use the &#163;8.75m profit from the sale to bid for another club, with Serie B side Foggia understood to be a target.
</p>

<a href="#" onclick="changeIMG2('forward');return false;" class="link-next-picture">Next Snippet</a>

I have used something like display:inline; in CSS before but cannot remember how do use it anymore, if this is what I need to use :confused:

2. On the page http://www.minifigtimes.com/index2.shtml page when one clicks Next Snippet it shows a new image and some text. I have made, for each image, some text of different lengths which results in an annoying jumping experience on the screen. Is there any way I can stop this without having to ensure that the text lengths are the same for both images.

3. Finally, just curious whether it is possible to get the image and text to fade in when one clicks Next Picture / Next Snippet? I guess this would involve another js, and merging it with the script im currently using?

Rowsdower!
Apr 29th, 2009, 06:35 PM
Thanks a million Rowsdower!

I have it set up on a test page, http://www.minifigtimes.com/index2.shtml and it is working fine.

I have a few questions, regarding some format which maybe you or someone might know how to fix it.

1. If you see on the http://www.minifigtimes.com/index2.shtml page the little image to the right of "News in brief.... Sport: Greentown Atletic have..." is one line higher than the text "Sport: Greentown Atletic have...". It has jumped up because I have used the <p> tag after the image:



<img name="nextpic2" src="http://www.minifigtimes.com/news/2009/images/nib-minifig-alan-mcmanus-1.png" class="farright" onclick="changeIMG2();" alt="LEGO news">

<p id="imgcaption2" style="width: 100%;" >
Sport: Greentown Atletic have been sold to Green Islander businessfig Mr Alan McManus for a £45m fee. The club will play their
first game under new ownership when they entertain Parma at the Athletic Ground. Former owner, Higginsland businessfig Mr Primus
Stove, is expected to use the £8.75m profit from the sale to bid for another club, with Serie B side Foggia understood to be a target.
</p>

<a href="#" onclick="changeIMG2('forward');return false;" class="link-next-picture">Next Snippet</a>

I have used something like display:inline; in CSS before but cannot remember how do use it anymore, if this is what I need to use :confused:

2. On the page http://www.minifigtimes.com/index2.shtml page when one clicks Next Snippet it shows a new image and some text. I have made, for each image, some text of different lengths which results in an annoying jumping experience on the screen. Is there any way I can stop this without having to ensure that the text lengths are the same for both images.

3. Finally, just curious whether it is possible to get the image and text to fade in when one clicks Next Picture / Next Snippet? I guess this would involve another js, and merging it with the script im currently using?

Well let's see...

1. Try adding margin-top:0; to the style for your <p> tags in that area. I think this is what you're after.

2. You have the option to place the controls for changing stories ABOVE the text and image so that the control won't move (which I would probably do regardless of any other changes just to make navigation easier) AND/OR you can specify an overall height for the containing <div> so that main page text won't be affected but can still flow underneath the side story AND/OR you can set a right margin on the main page text so that it doesn't wrap underneath the side story at all no matter how tall/short it is.

3. I'm sure it's possible but I don't know how to design/implement fading in javascript. I'm not that good with javascript yet. You might have to just find a new script that includes the fade in/out feature and scrap the existing script or else post a question about it in the javascript forum here.

Partizan
Apr 29th, 2009, 09:52 PM
Well let's see...
1. Try adding margin-top:0; to the style for your <p> tags in that area. I think this is what you're after.


Thanks! this seems to work as shown here http://www.minifigtimes.com/index2.shtml but with my IE 8 Beta it is messed up. Can someone check if it is just my IE8 as the Next Picture link doesnt work too with my IE8 seems. Everything is ok with Firefox and Chrome.




Well let's see...
2. ...AND/OR you can specify an overall height for the containing <div> so that main page text won't be affected but can still flow underneath the side story AND/OR you can set a right margin on the main page text so that it doesn't wrap underneath the side story at all no matter how tall/short it is.


How do I specify an overall height? This sounds like a good solution.

Also I would love to know how to set the right margin on the main page text so that it doesn't wrap underneath the side story at all no matter how tall/short it is.

If needed, this is my CSS as is: www.minifigtimes.com/default.css

Rowsdower!
Apr 29th, 2009, 10:33 PM
Thanks! this seems to work as shown here http://www.minifigtimes.com/index2.shtml but with my IE 8 Beta it is messed up. Can someone check if it is just my IE8 as the Next Picture link doesnt work too with my IE8 seems. Everything is ok with Firefox and Chrome.





How do I specify an overall height? This sounds like a good solution.

Also I would love to know how to set the right margin on the main page text so that it doesn't wrap underneath the side story at all no matter how tall/short it is.

If needed, this is my CSS as is: www.minifigtimes.com/default.css

Specifying an overall height for the side content can be accomplished by putting the image and paragraph of the dynamic content into a <div> and then giving that <div> a specified height (e.g. height:300px;) and giving it overflow:auto; (this will allow the user to scroll down in the side story content if somehow the text still becomes too long to fit in the defined space).

Actually, come to think of it, you could just specify a height for the paragraph while using overflow:auto; and skip the <div> completely if you wanted to.

Rowsdower!
Apr 29th, 2009, 10:42 PM
Took me a minute to find a good breaking point for this, but try placing a <div> around your main body text like this:
<div style="margin-right: 290px;" id="wrapper">
<p>
Robin Rangers' three year tenure in Serie A is over today as the club were mathematically relegated to the SuperLeague's second division
following a 2-1 home loss to league leaders Legoland United. Rangers have now failed to win in their last 14 league games and have
amassed a meagre 4 points from a possible 30 in their last 10 games. In a more than half empty Robin Arena, Rangers fell behind and fell part
in the 6th minute when United's Iván De la Peña rounded Petr Čech to slot home from 7 yards.
</p>
<p>
Being a single goal down at the half-time interval flattered the hosts and it was no surprise when 15 minutes into the second half the
visitors doubled their tally. A corner kick from Alex Taribello was headed in at the far post by United's 39-year old veteran defender
David Balleri. The goal saw most remaining Rangers fans head to the gates.
</p>
<p>
Five minutes after going down 2-0 the home side did pull one back when Massimo Margiotta pounced on a rare mix-up between Fabio Galante
and Mauro Bonomi and shot past Francesco Antonioli. With news of Legoland FC's and Ajax Skerries comfortable victories coming though on
the stadium loudspeakers, the final whistle in the Robin Arena was greeted with much relief by travelling United fans and resigned
defeat by those of Rangers. Rangers, who were saved from relegation in the 2006/7 season only due to the fact that the
licences of Ravenna and Empoli were rescinded by the LFA, and who finished the following season a single point above safety, were in no
position to complain at their relegation.
</p>
<p>
Club president, Mr Robin Hood, continuing his self-imposed boycott of the capital's media, spoke after the game to the local Castle Clan
newspaper and revealed some of his plans. "Radomir Antić will be offered a new contract. He is a good manager and has managed to
secure promotion for us before and I have no doubt he will again. I plan to, both literally and metaphorically speaking, rob from the rich,
to rebuild his team. I shall spearhead the fight to return my minifigs to Serie A by raiding other teams in the coming months".
</p>

<p>
Elsewhere, both Ajax Skerries and LFC kept the pressure firmly on United with wins over Fiorentina and Inter Police respectively. With 3
games remaining the bookmakers have put United as favourites, slightly ahead of the chasing pack due to their 1 point lead over LFC and
their apparent easier run-in to that of both the Helmets and the Cartel.
</p>

<p>
The game of the day was in Turin where struggling giants Celebs and Lion Lakers went head-to-head in a crunch relegation battle. With the
sides lying in 18th and 19th place, hovering just above the drop zone, both sides considered victory crucial to their chances of retaining
their top flight status. As the clock reached the 90th minute Celebs were in apparent control leading 2-1 thanks to a double from Lionel
Messi but they hadn't bargained for the comeback of the season. A injury time equaliser was headed home by Lúcio in the 92nd minute and a
minute later referee Mr Biggus Anus pointed to the spot and awarded Lion Lakers a penalty, which Pippo Inzaghi duly converted. The dramatic
3-2 win will no doubt go down in the book of legends at Lakers and has given the club a real chance of survival as the team are now 5 points
above the drop. As for the Celebs, three-time Serie A champions, Serie B is too close for comfort.
</p>
</div>

You could pull the inline CSS out and add the #wrapper and all details to your external CSS stylesheet to keep things clean.

Partizan
Apr 30th, 2009, 10:49 AM
Thanks for all the help Rowsdower, I am experimenting with the options :)

Rowsdower!
Apr 30th, 2009, 03:28 PM
No problem, good luck!

Partizan
Apr 30th, 2009, 05:14 PM
HEY THANKS.

Sorry to be asking a new q, but Is it possible to do a "lazy" job on this script?

I have been trying to figure out where to put the 2 so that I can use this script 2 times on the same page. The script is an onclick that reveals hidden text when user clicks on "More..."

I experimented putting a 2 after displayDiv() and revealonclick but was just guessing..

HEAD

<!-- ############# REVEAL HIDDEN TEXT ############# -->
<script language="javascript" type="text/javascript">
function displayDiv()
{
var dv = document.getElementById("revealonclick");
dv.style.display = ( dv.style.display != "block" ) ? "block" : "none";
}
</script>
<!-- ############# END REVEAL HIDDEN TEXT ############# -->

BODY

<!-- Start of div with the hidden content -->
<div>
<img src="http://www.minifigtimes.com/images-site/tip.gif" alt="Tip"> <span onclick="displayDiv()" class="reveal-hide"> More...</span>
</div>
<div id="revealonclick">

<p>
The weekend also saw United, Ajax Skerries and LFC secure their chance to play in next season's money-spinning
Super 16 Conference. The final top 2 from Serie A will secure automatic entry with the third placed team facing a qualification
play-off against a representative club from one of the continents weaker leagues.
</p>

</div>

Rowsdower!
Apr 30th, 2009, 08:31 PM
HEY THANKS.

Sorry to be asking a new q, but Is it possible to do a "lazy" job on this script?

I have been trying to figure out where to put the 2 so that I can use this script 2 times on the same page. The script is an onclick that reveals hidden text when user clicks on "More..."

I experimented putting a 2 after displayDiv() and revealonclick but was just guessing..

HEAD

<!-- ############# REVEAL HIDDEN TEXT ############# -->
<script language="javascript" type="text/javascript">
function displayDiv()
{
var dv = document.getElementById("revealonclick");
dv.style.display = ( dv.style.display != "block" ) ? "block" : "none";
}
</script>
<!-- ############# END REVEAL HIDDEN TEXT ############# -->

BODY

<!-- Start of div with the hidden content -->
<div>
<img src="http://www.minifigtimes.com/images-site/tip.gif" alt="Tip"> <span onclick="displayDiv()" class="reveal-hide"> More...</span>
</div>
<div id="revealonclick">

<p>
The weekend also saw United, Ajax Skerries and LFC secure their chance to play in next season's money-spinning
Super 16 Conference. The final top 2 from Serie A will secure automatic entry with the third placed team facing a qualification
play-off against a representative club from one of the continents weaker leagues.
</p>

</div>


With this one I wouldn't bother with the lazy method because it would actually take more effort than doing it the right way would. What you need to do is something like this:
<!-- ############# REVEAL HIDDEN TEXT ############# -->
<script language="javascript" type="text/javascript">
function displayDiv(div_id)
{
var dv = document.getElementById(div_id); //passes the id of the div you want to reveal as a variable rather than a constant
dv.style.display = ( dv.style.display != "block" ) ? "block" : "none";
}
</script>
<!-- ############# END REVEAL HIDDEN TEXT ############# -->

Then call the function just a little tiny bit differently like so:
<!-- Start of div with the hidden content -->
<div>
<img src="http://www.minifigtimes.com/images-site/tip.gif" alt="Tip"> <span onclick="displayDiv('revealonclick');" class="reveal-hide"> More...</span>
</div>
<div id="revealonclick">
<p>
The weekend also saw United, Ajax Skerries and LFC secure their chance to play in next seasons money-spinning
Super 16 Conference. The final top 2 from Serie A will secure automatic entry with the third placed team facing a qualification
play-off against a representative club from one of the continents weaker leagues.
</p>
</div>
...and then for the second or fiftieth instance just create a div with a new id and call the function using that id...
<div>
<img src="http://www.minifigtimes.com/images-site/tip.gif" alt="Tip"> <span onclick="displayDiv('potato_salad');" class="reveal-hide"> More...</span>
</div>
<div id="potato_salad">
<p>
The weekend also saw United, Ajax Skerries and LFC secure their chance to play in next seasons money-spinning
Super 16 Conference. The final top 2 from Serie A will secure automatic entry with the third placed team facing a qualification
play-off against a representative club from one of the continents weaker leagues.
</p>
</div>

As long as the pairs match the code will work countless times in the same page.

Partizan
May 1st, 2009, 12:11 AM
I can't thank you enough! Cheers for this mate, it's perfect :thumbsup: