homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Help needed on links to open in same window.
Help needed on having links open in same window.
fredfletcher




msg:4376735
 7:47 pm on Oct 19, 2011 (gmt 0)

Hello,

I would have contacted the website's owner, but there's no email on the site.

I'm looking for someone's help on this. By looking at the code below, the link(s) open in a new window, and wanted to know if there's something that can either be added, modified or deleted in order for the links to open in the same browser window, as the way it presently works (code below), is that the links open in a new window, which is not what I do not want it to do. Any help would be appreciated.

Thank you!

Source: [huntingground.freeserve.co.uk ]

<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 4</TITLE>

<script type="text/javascript">

hs4Arr=[

["pic1.jpg","pic1.jpg","Alt Text 1"],
["pic2.jpg","page1.htm","Alt Text 1"],
["pic3.jpg","pic3.jpg","Alt Text 1"],
["pic4.jpg","",""],
["pic5.jpg","",""],
["pic6.jpg","",""],
["pic7.jpg","",""],
["pic8.jpg","",""],
["pic9.jpg","",""],
["pic10.jpg","",""] // no comma at the end of last index

]

dir=0 // 0 = left 1 = right
speed=3
imageSize=100 // % set to zero to use fixedWidth and fixedHeight values
fixedWidth=100 // set a fixed width
fixedHeight=60 // set a fixed height
spacerWidth=20 // space between images

alwaysCenter=1 // center the popup 0 = no 1 = yes
popupLeft=0 // popup default left, use if not centering
popupTop=0 // popup default top, use if not centering

biggest=0
ieBorder=0
totalWidth=0
hs4Timer=null

preload=new Array()
for(var i=0;i<hs4Arr.length;i++){
preload[i]=new Image()
preload[i].src=hs4Arr[i][0]
}

function initHS4(){
scroll1=document.getElementById("scroller1")

for(var j=0;j<hs4Arr.length;j++){

scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+hs4Arr[j][2]+'" title="'+hs4Arr[j][2]+'" onclick="showBigPic('+j+')">'

if(imageSize!=0){ // use percentage size
newWidth=preload[j].width/100*imageSize
newHeight=preload[j].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}

document.getElementById("pic"+j).style.width=newWidth+"px"
document.getElementById("pic"+j).style.height=newHeight+"px"

if(document.getElementById("pic"+j).offsetHeight>biggest){
biggest=document.getElementById("pic"+j).offsetHeight
}

document.getElementById("pic"+j).style.marginLeft=spacerWidth+"px"

totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth

}

totalWidth+=1

for(var k=0;k<hs4Arr.length;k++){ // vertically center images
document.getElementById("pic"+k).style.marginBottom = (biggest-document.getElementById("pic"+k).offsetHeight)/2+"px"
}

scrollBox=document.getElementById("scroll_box")

if(document.uniqueID && scrollBox.currentStyle && document.compatMode!="CSS1Compat"){
ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}

if(document.getElementById&&document.all){
ieBorder=parseInt(scrollBox.style.borderTopWidth)*2
}

scrollBox.style.height=biggest+ieBorder+"px"

scroll1.style.width=totalWidth+"px"

scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= scroll1.offsetWidth+"px"
scroll2.style.top= 0+"px"
scroll2.style.width=totalWidth+"px"

if(dir==1){
speed= -speed
}

scrollHS4()
}


function scrollHS4(){
if(paused==1){return}
clearTimeout(hs4Timer)

scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)

scroll1Pos-=speed
scroll2Pos-=speed

scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"

hs4Timer=setTimeout("scrollHS4()",50)

if(dir==0){
if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}

if(scroll2Pos< -scroll1.offsetWidth){
scroll2.style.left=scroll1.offsetWidth+"px"
}
}

if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.width)){
scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"
}

if(scroll2Pos>parseInt(scrollBox.style.width)){
scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"
}
}

}

st=null
function pause(){
clearTimeout(hs4Timer)
clearTimeout(st)
}

function reStartHS4(){
clearTimeout(st)
st=setTimeout("scrollHS4()",100)
}

paused=0
picWin=null

function showBigPic(p){

if(hs4Arr[p][1]!=""){
paused=1

if(picWin&&picWin.open&&!picWin.closed){picWin.close()} // if picWin exists close it

if(hs4Arr[p][1].indexOf("jpg")!=-1){
bigImg=new Image()
bigImg.src=hs4Arr[p][1]

if(alwaysCenter==1){
popupLeft = (screen.availWidth - bigImg.width) / 2
popupTop = (screen.availHeight - bigImg.height) / 2
}

data="\n<center>\n<img src='"+bigImg.src+"'>\n<\/center>\n"

var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"

picWin=window.open("","win1",winProps)
picWin.document.write("<HTML>\n<HEAD>\n<TITLE><\/TITLE>\n")
picWin.document.write("<\/HEAD>\n")
picWin.document.write("<BODY style='background-color:black;margin-top:10px;margin-left:10px'>\n")
picWin.document.write("<div id=\"display\">"+data+"<\/div>")
picWin.document.write("\n<\/BODY>\n<\/HTML>")
}
else{
picWin=window.open(hs4Arr[p][1])
}

}

}

window.onfocus=function(){
paused=0
scrollHS4()
}

onunload=function(){ // close the popup when leaving page
if(picWin&&picWin.open&&!picWin.closed){
picWin.close()
}
}

</script>

<style>

#scroller1 img, #scroller2 img{
border:4px solid #7777aa;
}

</style>

</HEAD>
<BODY onload="initHS4()">
<h1>Horizontal Image Scroller 4</h1>

<center>

<DIV id="scroll_box" style="position:relative;width:600px;overflow:hidden;background-color:#ddddee;border:4px solid #bbbbcc;text-align:left" onmouseover="pause()" onmouseout="reStartHS4()">

<div id="scroller1" style="position:absolute;left:0px;top:0px"></div>
<div id="scroller2" style="position:absolute"></div>

</DIV>

</center>

</BODY>
</HTML>

 

lucy24




msg:4376811
 10:42 pm on Oct 19, 2011 (gmt 0)

The links (which incidentally I can't find-- but then again I can't find where all those named functions are getting called either) are opening in a new window because you are telling them to.

picWin=window.open{et cetera}

Everything that happens afterward happens in this new window.

What do you mean by open in the same window? Do you want the enlargements (I assume that's what we've got) to cover up part of the existing page, or do you want to go to a new page that consists entirely of the picture? If you don't want a popup, that pretty much wipes out the reason for having all that javascript in the first place.

rocknbil




msg:4377151
 4:28 pm on Oct 20, 2011 (gmt 0)

Best answer: this code is extremely old, find something that does the equivalent (or likely better) and replace it. And agreed, do you mean a "lightbox" effect by "in the same window"? A search for javascript lightbox will lead to many solutions and most of them are really easy to implement.

Fix it as is answer: there are a couple ways, but at first glance your new window is putting the code in a div id'ed as "display" (which is [might be] a bad idea since display is a CSS property, you should try to avoid names that may conflict with the DOM or scripting.)

So you could create this div "where you want it" in the document (which is unclear) like so

<div id="display-images"></div>

Then do this. Note I've just "commented out" the offending code and added my own after it so you can revert.

//picWin=window.open("","win1",winProps)
//picWin.document.write("<HTML>\n<HEAD>\n<TITLE><\/TITLE>\n")
//picWin.document.write("<\/HEAD>\n")
//picWin.document.write("<BODY style='background-color:black;margin-top:10px;margin-left:10px'>\n")
//picWin.document.write("<div id=\"display\">"+data+"<\/div>")
//picWin.document.write("\n<\/BODY>\n<\/HTML>")

var targ = document.getElementById('display-images');
if (targ) { targ.innerHTML = data; }
else { alert('No div to display images!'); }

This will actually improve things (a little), document.write is a pretty memory intensive way to add content.

fredfletcher




msg:4377348
 10:50 pm on Oct 20, 2011 (gmt 0)

I had a feeling it was OLD Code, what with jQuery and HTML5 coding nowadays, which is by far, much better. Yet, this was one of the few scripts I found, that could make a continuous scroll of images with no blank spots, as well as having the optional linking which is always nice, but not a requirement.

I will give everything a try, however my search continues to find a jQuery equivalent. Thank you very much, I appreciate it! I'm a patient man; I grow "cactus" as a hobby lol! Thanks again :)

rocknbil




msg:4377742
 5:47 pm on Oct 21, 2011 (gmt 0)

If you optimize this one, there's no reason to use JQuery. Let us know if that hack I suggested works.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved