Magical Sailor Fuku

the only constant is change
http://pipian.com/msf3/forums/

Javascript help :O

http://pipian.com/msf3/forums/viewtopic.php?f=2&t=9926

Page 1 of 1

Javascript help :O

PostPosted: Sun Mar 04, 2007 4:40 am
by Mitera Nikkou
Right, so... I need to open up a new window, but target="_blank" won't work, and I don't if I can use open() to target the new array with the links in it. You see, I made a manual slideshow where each image in the slideshow is synched with a certain link... I just don't know how to get a new window to open up and display the corresponding link to the correspending image in the slideshow. I had hoped that target="_blank" would work, but it just opens a blank window. :?

The reason why I want to open up a new window instead of using the same one, is because the slideshow resets its position when you go back, and I'd rather that anyone using the slideshow doesn't have to find their way back to where they had been.

PostPosted: Sun Mar 04, 2007 4:44 am
by xeno
I'm learning Html at the moment but heres the site in which I am learning it from, my uncle said it has EVERYTHING you would want to know or not want to know about PC related things http://W3.org
but I barely know how to navigate the place....sorry...

PostPosted: Sun Mar 04, 2007 1:14 pm
by Beyond
In html:
Code: Select all
<a href="images/my_image.jpg" target="_blank">my_image.jpg in a new window</a>


In Javascript:
Code: Select all
...
<HEAD>
<script language="JavaScript">
function popup(URL) {
    window.open(URL,"my_popup","width=500, height=350, scrollbars=no, menubar=no, location=no, resizable=no");
}
</script>
</HEAD>
...
<a href="javascript:popup('images/my_image.jpg')">my_image.jpg in a new window</a>
...
<!-- Other way -->
<a href="#" onclick="popup('images/my_image.jpg')">my_image.jpg in a new window</a>
...


In javascript you get to control the window more (size, bars, etc).

PostPosted: Sun Mar 04, 2007 1:21 pm
by Selena Aninikkou
DOM 0 allows for a way for child windows to access their parents, but I can't entirely remember what that is right now. Also, I don't know if it'd work if tabs were used in place of windows.

PostPosted: Sun Mar 04, 2007 1:31 pm
by Beyond
Yes, it works with tabs too.

Code: Select all
<!-- In the parent -->
<script language="JavaScript">
function popup(URL) {
    var my_popup = window.open(URL,"my_popup","width=500, height=350, scrollbars=no, menubar=no, location=no, resizable=no");
    /* You access the popup with a variable */
    my_popup.document.writeln("<h1>Hey, I am writing inside the popup!</h1>");
}
</script>

<!-- In the popup -->
<script language="JavaScript">
function writeOnParent() {
    /* There is a variable parent you can use to call the parent window */
    parent.document.writeln("<h1>Hey, I am writing in the parent window!</h1>");
}
</script>

PostPosted: Sun Mar 04, 2007 2:59 pm
by Mitera Nikkou
I'm not sure if those will work with what I have... Since I don't really understand it. As I said, target="_blank" doesn't work. Here, I'll show you what I put together below. How I have it makes it so that whatever image in the slideshow that I click on, it brings up the corresponding image. So, if I click on the second image in myPix, it'll send me to the second address in myURL. I need something that will open something in a new window based on which address is activated when an image in the slideshow is chosen. I reckon that there's probably a small bit of code that would do that, but I don't know of it. Or at least I don't know enough about Javascript to figure it out. I was surprised that I figured this arrangement out, so each image would be a different link.

Code: Select all
<script type="text/javascript" language="Javascript">
<!--
myPix = new Array("1","2","3")
myURL = new Array("1","2","3")
thisPic = 0
imgCt = myPix.length - 1

function chgSlide(direction) {
if (document.images) {
thisPic = thisPic + direction
if (thisPic > imgCt) {
thisPic = 0
}
if (thisPic < 0) {
thisPic = imgCt
}
document.myPicture.src=myPix[thisPic]
}
}
function newLocation() {
document.location.href = "http://www." + myURL[thisPic]
}
//-->
</script>
</head>
<body>
<center>
<table width="400" height="240" cellspacing="0" cellpadding="0" border="0" valign="middle">
<tr height="40">
<td colspan="2">
&nbsp;
</td>
</tr>
<tr width="100%" height="160" align="center">
<td width="50%">
<a href="javascript:newLocation()">
<img src="1" name="myPicture">
</a>
</td>
<td width="50%">
&nbsp;
</td>
</tr>
<tr width="100%" height="40" align="center">
<td width="50%">
<h3>
<a href="javascript:chgSlide(-1)"> << This-a-way </a>
</h3>
</td>
<td width="50%">
<h3>
<a href="javascript:chgSlide(1)"> That-a-way >> </a>
</h3>
</td>
</tr>
</table>

PostPosted: Sun Mar 04, 2007 3:46 pm
by Beyond
2 ways of doing the same thing:

By JavaScript popup:
Code: Select all
<html>
<head>
<script type="text/javascript" language="Javascript">
<!--
/* .jpg anyone? */
myPix = new Array("1.jpg","2.jpg","3.jpg");
/* You don't need 2 arrays with the same thing */
/* myURL = new Array("1","2","3"); */
thisPic = 0;
imgCt = myPix.length - 1;

function chgSlide(direction) {
    if (document.images) {
        thisPic = thisPic + direction
        if (thisPic > imgCt) {
            thisPic = 0
        }
        if (thisPic < 0) {
           thisPic = imgCt
        }
        document.myPicture.src=myPix[thisPic]
    }
}
function newLocation() {
    /*
     * You were changing the page location, you weren't creating a popup.
    document.location.href = "http://www." + myURL[thisPic];
    */
    window.open(myPix[thisPic], "desu", "width=500, height=500 scrollbars=no, menubar=no, location=no, resizable=no");
}
//-->
</script>
</head>
<body>
<center>
<table width="400" height="240" cellspacing="0" cellpadding="0" border="0" valign="middle">
<tr height="40">
<td colspan="2">
&nbsp;
</td>
</tr>
<tr width="100%" height="160" align="center">
<td width="50%">
<a href="javascript:newLocation()">
<img name="myPicture">
</a>
</td>
<td width="50%">
&nbsp;
</td>
</tr>
<tr width="100%" height="40" align="center">
<td width="50%">
<h3>
<a href="javascript:chgSlide(-1)"> << This-a-way </a>
</h3>
</td>
<td width="50%">
<h3>
<a href="javascript:chgSlide(1)"> That-a-way >> </a>
</h3>
</td>
</tr>
</table>
</body>
</html>


By HTML blank target:
Code: Select all
<html>
<head>
<script type="text/javascript" language="Javascript">
<!--
myPix = new Array("1.jpg","2.jpg","3.jpg");
/* Two of the same thing */
/* myURL = new Array("1","2","3"); */
thisPic = 0;
imgCt = myPix.length - 1;

function chgSlide(direction) {
    if (document.images) {
        thisPic = thisPic + direction
        if (thisPic > imgCt) {
            thisPic = 0
        }
        if (thisPic < 0) {
           thisPic = imgCt
        }
        document.myPicture.src = myPix[thisPic];
        document.getElementById("desu").href = myPix[thisPic];
    }
}
/*
 * I am commenting the function.
function newLocation() {
    document.location.href = "http://www." + myURL[thisPic];
}
 */
//-->
</script>
</head>
<body>
<center>
<table width="400" height="240" cellspacing="0" cellpadding="0" border="0" valign="middle">
<tr height="40">
<td colspan="2">
&nbsp;
</td>
</tr>
<tr width="100%" height="160" align="center">
<td width="50%">

<!--////// LOOK HERE CAREFULLY, I ADDED AN ID AND TARGET _BLANK ///// -->
<a id="desu" href="#" target="_blank">

<img name="myPicture">
</a>
</td>
<td width="50%">
&nbsp;
</td>
</tr>
<tr width="100%" height="40" align="center">
<td width="50%">
<h3>
<a href="javascript:chgSlide(-1)"> << This-a-way </a>
</h3>
</td>
<td width="50%">
<h3>
<a href="javascript:chgSlide(1)"> That-a-way >> </a>
</h3>
</td>
</tr>
</table>
</body>
</html>


I would rather the javascript popup since you can control width and height...

PostPosted: Sun Mar 04, 2007 4:03 pm
by Mitera Nikkou
I'll try to digest that until I understand... Might take a bit. ^_^;

PostPosted: Mon Mar 05, 2007 1:19 pm
by Selena Aninikkou
You know that the name attribute is depricated, right? You're not supposed to use it, except on forms...

PostPosted: Mon Mar 05, 2007 2:21 pm
by Mitera Nikkou
I think I used names in the forms... Well, the mechanics of my project seem to be working, so now it's on to aesthetics. Time to learn a little CSS. Which, after I took a brief look, doesn't look all that hard to start off with. When I'm done, I'll show everyone. :O

PostPosted: Mon Mar 05, 2007 11:46 pm
by Beyond
Selena Aninikkou wrote:You know that the name attribute is depricated, right? You're not supposed to use it, except on forms...


yep, Selena is right.

Use getElementById instead after giving some id at your element.
All times are UTC - 5 hours
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/