egoselfaxis
asked on
need to update slideshow javascript so that target attribute can be specified for links
I have the following slideshow javascript code (see attached).
How would I update the script so that target attributes can be specified for each of the links?
For example, . some of the links are to PDF files, .. in which case I'd like to specify target="_blank".
Please advise.
Thanks!
- Yvan
How would I update the script so that target attributes can be specified for each of the links?
For example, . some of the links are to PDF files, .. in which case I'd like to specify target="_blank".
Please advise.
Thanks!
- Yvan
var slideShowSpeed = 4000
var crossFadeDuration = 3
var Pic = [
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf'],
['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf'],
['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf']];
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i][0];
}
function runSlideShow1(){
if (document.all){
document.images.SlideShow1.style.filter="blendTrans(duration=2)"
document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow1.filters.blendTrans.Apply()
}
document.images.SlideShow1.src = preLoad[j].src
document.images.SlideShow1.link = Pic[j][1];
document.images.SlideShow1.onclick = function(){location=this.link};
if (document.all){
document.images.SlideShow1.filters.blendTrans.Play()
}
j = j + 1;
if (j > (p-1)) j=0
t = setTimeout('runSlideShow1()', slideShowSpeed)
}
var slideShowSpeedB = 5000
var crossFadeDurationB = 3
var PicB = [
['slideshow/ad_small_custjourn.jpg','custom.cfm'],
['slideshow/ad_small_michelin_custom_atlas.jpg','michelin.cfm'],
['slideshow/ad_small_custsudoku.jpg','sudoku.cfm'],
['slideshow/ad_small_custpapers.jpg','newspapers.cfm']];
var tB
var jB = 0
var pB = PicB.length
var preLoadB = new Array()
for (iB = 0; iB < pB; iB++){
preLoadB[iB] = new Image()
preLoadB[iB].src = PicB[iB][0];
}
function runSlideShow2(){
if (document.all){
document.images.SlideShow2.style.filter="blendTrans(duration=2)"
document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDurationB)"
document.images.SlideShow2.filters.blendTrans.Apply()
}
document.images.SlideShow2.src = preLoadB[jB].src
document.images.SlideShow2.link = PicB[jB][1];
document.images.SlideShow2.onclick = function(){location=this.link};
if (document.all){
document.images.SlideShow2.filters.blendTrans.Play()
}
jB = jB + 1;
if (jB > (pB-1)) jB=0
tB = setTimeout('runSlideShow2()', slideShowSpeedB)
}
var slideShowSpeedC = 6000
var crossFadeDurationC = 3
var PicC = [
['slideshow/ad_small_frames.jpg','frames.cfm']];
var tC
var jC = 0
var pC = PicC.length
var preLoadC = new Array()
for (iC = 0; iC < pC; iC++){
preLoadC[iC] = new Image()
preLoadC[iC].src = PicC[iC][0];
}
function runSlideShow3(){
if (document.all){
document.images.SlideShow3.style.filter="blendTrans(duration=2)"
document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDurationC)"
document.images.SlideShow3.filters.blendTrans.Apply()
}
document.images.SlideShow3.src = preLoadC[jC].src
document.images.SlideShow3.link = PicC[jC][1];
document.images.SlideShow3.onclick = function(){location=this.link};
if (document.all){
document.images.SlideShow3.filters.blendTrans.Play()
}
jC = jC + 1;
if (jC > (pC-1)) jC=0
tC = setTimeout('runSlideShow3()', slideShowSpeedC)
}
function runSlideShows(){
runSlideShow1();
runSlideShow2();
runSlideShow3();
}
try:
var slideShowSpeed = 4000
var crossFadeDuration = 3
var Pic = [
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf*_blank'],
['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf*_blank'],
['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf*_blank']];
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (var i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i][0];
}
function runSlideShow1(){
if (document.all){
document.images.SlideShow1.style.filter="blendTrans(duration=2)"
document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow1.filters.blendTrans.Apply()
}
document.images.SlideShow1.src = preLoad[j].src
document.images.SlideShow1.link = Pic[j][1];
document.images.SlideShow1.onclick = function(){
var temp=this.link.split('*');
if(temp.length>1)
{
window.open(temp[0],temp[1],'width=600,height=400');
}
else
location=this.link;
};
if (document.all){
document.images.SlideShow1.filters.blendTrans.Play()
}
j = j + 1;
if (j > (p-1)) j=0
t = setTimeout('runSlideShow1()', slideShowSpeed)
}
var slideShowSpeedB = 5000
var crossFadeDurationB = 3
var PicB = [
['slideshow/ad_small_custjourn.jpg','custom.cfm'],
['slideshow/ad_small_michelin_custom_atlas.jpg','michelin.cfm'],
['slideshow/ad_small_custsudoku.jpg','sudoku.cfm'],
['slideshow/ad_small_custpapers.jpg','newspapers.cfm']];
var tB
var jB = 0
var pB = PicB.length
var preLoadB = new Array()
for (iB = 0; iB < pB; iB++){
preLoadB[iB] = new Image()
preLoadB[iB].src = PicB[iB][0];
}
function runSlideShow2(){
if (document.all){
document.images.SlideShow2.style.filter="blendTrans(duration=2)"
document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDurationB)"
document.images.SlideShow2.filters.blendTrans.Apply()
}
document.images.SlideShow2.src = preLoadB[jB].src
document.images.SlideShow2.link = PicB[jB][1];
document.images.SlideShow2.onclick = function(){
var temp=this.link.split('*');
if(temp.length>1)
{
window.open(temp[0],temp[1],'width=600,height=400');
}
else
location=this.link;
};
if (document.all){
document.images.SlideShow2.filters.blendTrans.Play()
}
jB = jB + 1;
if (jB > (pB-1)) jB=0
tB = setTimeout('runSlideShow2()', slideShowSpeedB)
}
var slideShowSpeedC = 6000
var crossFadeDurationC = 3
var PicC = [
['slideshow/ad_small_frames.jpg','frames.cfm']];
var tC
var jC = 0
var pC = PicC.length
var preLoadC = new Array()
for (iC = 0; iC < pC; iC++){
preLoadC[iC] = new Image()
preLoadC[iC].src = PicC[iC][0];
}
function runSlideShow3(){
if (document.all){
document.images.SlideShow3.style.filter="blendTrans(duration=2)"
document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDurationC)"
document.images.SlideShow3.filters.blendTrans.Apply()
}
document.images.SlideShow3.src = preLoadC[jC].src
document.images.SlideShow3.link = PicC[jC][1];
document.images.SlideShow3.onclick = function(){location=this.link};
if (document.all){
document.images.SlideShow3.filters.blendTrans.Play()
}
jC = jC + 1;
if (jC > (pC-1)) jC=0
tC = setTimeout('runSlideShow3()', slideShowSpeedC)
}
function runSlideShows(){
runSlideShow1();
runSlideShow2();
runSlideShow3();
}
>> in which case I'd like to specify target="_blank".
FYI: the target attribute is not supported by <img> elements, which is what your code uses.
FYI: the target attribute is not supported by <img> elements, which is what your code uses.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hielo -- both of your implementations work for me (thank you) --- but are you saying that it's not possible for me to specify target="_blank" ? ( I was hoping that I'd be able to get the PDFs to open in a new tab ... instead of in a popup window )
- Yvan
- Yvan
>>Hielo -- both of your implementations work for me
:)
>> (thank you)
You are welcome.
>>but are you saying that it's not possible for me to specify target="_blank"
Correct. Currently you are NOT using links -ex:
<a href="" target="_blank">...</a>
Instead, this:
document.images
is a collection of <img> elements, which does not support "target".
On my code, try replacing:
window.open(link,target,'w idth=600,h eight=400' );
with:
window[target].location.hr ef=link;
to see it it "simulates" the "target" functionality.
:)
>> (thank you)
You are welcome.
>>but are you saying that it's not possible for me to specify target="_blank"
Correct. Currently you are NOT using links -ex:
<a href="" target="_blank">...</a>
Instead, this:
document.images
is a collection of <img> elements, which does not support "target".
On my code, try replacing:
window.open(link,target,'w
with:
window[target].location.hr
to see it it "simulates" the "target" functionality.
>>to see it it...
I meant to write:
to see if it...
I meant to write:
to see if it...
what about my suggestion? did it worked?
>>what about my suggestion?
You are opening the link in a new window "indiscriminately", making the point of having "blank" moot. He wants to be able to have the flexibility of specifying the target for "some" links.
You are opening the link in a new window "indiscriminately", making the point of having "blank" moot. He wants to be able to have the flexibility of specifying the target for "some" links.
As per his original question, only target he wants to specify is 'blank'
ASKER
gurvinder372 - although the PDFs are opening in a new tab, --- the wrong PDF file is being opened. In fact, I'm not really sure where it's coming from, as it appears to be random.
I suspect that the problem is with this line:
document.images.SlideShow1 .onclick = function(){window.open(Pic [j][1])};
- Yvan
I suspect that the problem is with this line:
document.images.SlideShow1
- Yvan
>>I suspect that the problem is with this line:
Bingo! He needed a closure!
Bingo! He needed a closure!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Actually - I think the PDF links just aren't matching up with their slides. They seem to be off by 1.
http://thebookco.com/
- yg
http://thebookco.com/
- yg
ASKER
(It's the leftmost small ad at the bottom)
>>As per his original question, only target he wants to specify is 'blank'
OK, then what's the point of having ...,file.pdf','blank'); if you are always going to do window.open? You are not using the third element in the array for anything!
OK, then what's the point of having ...,file.pdf','blank'); if you are always going to do window.open? You are not using the third element in the array for anything!
True, that element is not required
ASKER
Yep - that did it! Thanks gurvinder372!
- Yvan
- Yvan
Yvan,
The solution you accepted uses window.open which I CORRECTLY implemented it first ID:36505238 and ID:36505295.
So, what's with the grading done here?
The solution you accepted uses window.open which I CORRECTLY implemented it first ID:36505238 and ID:36505295.
So, what's with the grading done here?
ASKER
I used gurvinder372's solution ... which opens the pdfs in a new tab like I wanted. (Both your versions spawned new browser windows) The points I awarded you were not a "grade". I hope you didn't take offense. (Is it possible for me to go back and change the points distribution?)
- Yvan
- Yvan
>>Is it possible for me to go back and change the points distribution
You would need to ask for the question to be reopened for re-grading. Don't worry about it.
I just wanted to understand your rationale. Since you stated "Hielo -- both of your implementations work for me (thank you) " earlier on, I was expecting at least 50/50 split. You obviously cannot use two solutions at once for the same problem, but the accepted solution does not necessarily have to take the majority of points but "Both your versions spawned new browser windows " makes a difference.
Regards,
Hielo
You would need to ask for the question to be reopened for re-grading. Don't worry about it.
I just wanted to understand your rationale. Since you stated "Hielo -- both of your implementations work for me (thank you) " earlier on, I was expecting at least 50/50 split. You obviously cannot use two solutions at once for the same problem, but the accepted solution does not necessarily have to take the majority of points but "Both your versions spawned new browser windows " makes a difference.
Regards,
Hielo
var Pic = [
['slideshow/add_small_holi
['slideshow/ad_small_top10
['slideshow/ad_small_top10
and update line 31-32 as
document.images.SlideShow1