problem with main page when opening new window

Ice · #1 Jul 18th, 2007, 17:33

Hello,

im very new to webdesign and this is my first go with javascript.
i managed to create rollover image link that opens a page in a new, smaller window:

<a href="" onClick="window.open('newpage.html','mywindow','wi dth=400,height=200')" onmouseover="MM_swapImage('Image1','','mypic.gif', 1)" onmouseout="MM_swapImgRestore()"><img src="mypic2.gif" name="Image1" width="56" height="27" border="0" id="Image1" /></a>

The window opens fine, BUT: the main page, where the link is placed, scrolls back up to the top.... Is this normal? i used a tutorial to create the code, (but had to mix contents of different chapters to get what i wanted). And the problem doesnt occure on the tutorial page, when clicking the example. (so i think there must be a way, somehow....)
is there something wrong with my code? or do i have to add another line to prevent the page from scrolling back up?
im pretty helpless at the moment. can someone help me?

spinal007 · #2 Jul 18th, 2007, 19:06

That's because you left out the href="" attribute, so the links points to the top of the current page.

Add the code in red to your link and the browser won't actually follow the link.

<a href="" onClick="window.open('newpage.html','mywindow','wi dth=400,height=200'); return false;" onmouseover="MM_swapImage('Image1','','mypic.gif', 1)" onmouseout="MM_swapImgRestore()"><img src="mypic2.gif" name="Image1" width="56" height="27" border="0" id="Image1" /></a>

pa007 · #3 Jul 19th, 2007, 00:10

I hope you aren't leaving your code like this. Everything should be external and using a class in any links you want to poup and getElementsByTagName this is easy to achieve. And why not use css for your rollover?

This is a bit obtrusive for me and there is no fall back. At the very least put the popup link in as the href as well. This way the link has not lost all of its functionality if JS is off (a searchbot for example).

Pete.

spinal007 · #4 Jul 19th, 2007, 01:08

Quote:

Originally Posted by pa007

I hope you aren't leaving your code like this. Everything should be external and using a class in any links you want to poup and getElementsByTagName this is easy to achieve. And why not use css for your rollover?

This is a bit obtrusive for me and there is no fall back. At the very least put the popup link in as the href as well. This way the link has not lost all of its functionality if JS is off (a searchbot for example).

YThat might be a little too heavy for a beginner Pete... LOL

Ice · #5 Jul 19th, 2007, 01:13

thanks spinal.

i filled the link into the href=

Ice · #6 Jul 19th, 2007, 01:15

oops, what happened to the rest of the post...?:

thanks spinal.

i filled the link into the href="" aswell.

and thanks again, just wanted to say, i dont even understand half of the post

dont understand this:

"Everything should be external and using a class in any links you want to poup and getElementsByTagName this is easy to achieve."

ill try to find out how to create a rollover with css, though.

pa 007: what do you mean you find it obtrusive? to open a new window? its only for a small player, that lets the user hear a preview of a tune. and i couldnt figure out another way to do this.

thanks anyway.

esther

pa007 · #7 Jul 19th, 2007, 01:38

Sorry, I should have given more of an example. I'm going to bed now but I'll post up some code in the morning. If you're clever about it you can create a function and that creates the popup behaviour then all you have to do is add a class to the link you want to 'pop up' (class="blah"). You just 'grab' that element/class using the DOM (Document Object Model). I'll post more in the morning but if you do it this way even when JavaScript is switched off everything still works, also your pages are nice and light (almost as if there is no JS) and you can reuse functions across your site (just like css).

Pete.

pa007 · #8 Jul 19th, 2007, 09:46

Opening a new window and I think JavaScript is the best way to do it. It just depends how you go about it. It we do all the JS in a different file and link it to the main page that means you aren't bloating your page with unnecessary code. It is considered inefficient and poor practice to use inline CSS so likewisae we shouldn't be using inline JavaScript. We don't even need inline event handers which is brilliant really. So using the same hooks that we use to apply CSS we can give some JS functionality. You will write these links as if they are normal none popup links.

We have these links:

Code: Select all

<a href="www.site.com/music.html">Listen to a preview</a>
<a href="www.site.com/music.html">Listen to a preview</a>
<a href="www.site.com/music.html">Listen to a preview</a>
<a href="www.site.com/music.html">Listen to a preview</a>

Now the only thing we need to do to these is add a class to them. We'll use class="popup"

Like so:

Code: Select all

<a href="www.site.com/music.html" class="popup">Listen to a preview</a>
<a href="www.site.com/music.html" class="popup">Listen to a preview</a>
<a href="www.site.com/music.html" class="popup">Listen to a preview</a>
<a href="www.site.com/music.html" class="popup">Listen to a preview</a>

So now we just need to add in a link to our external JS file and we won't need to touch the html again unless its to make other links popups by adding the class "popup".

This bit of html will reference our external JS file:

Code: Select all

<script type="text/JavaScript" src="popUp.js"></script>

So now our html is ready to go we will sort out the JS.

Here is out JS code, I'll talk you through it in a moment:

Code: Select all

window.onload = function() {
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    if (links[i].className == "popup") {
      links[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;  
      }
    }
  }
}

function popUp(winURL) {
  window.open(winURL,"popup","width=600,height=400");
}

Now this code goes into a seprate file. You can use an html editor and open a new .js file then save it in there or you can use notepad or any text editor and just save it as popUp.js which matches the link in our html. This is all possible because of the DOM but we want to make sure the whole page (including all of thos links) is loaded before we start so that is what the window.onload is for. The it all starts we are checking first that the browser supports getElementsByTagName if it doesn't it will stop then ('!' means not in JS). If it does support it then it continues (checking whether or not a browser supports a particular method or property is a good habit to get into sometimes browsers lie about what they are but they can't lie about what they support). After this we create an array of all links in the page. An array is just a list of links that is saved for later use, they have many uses. Next we will make sure that only links with the class "popup" execute this behaviour when the link is clicked. The final thing is to pass the href value of the link to the popUp function and make sure that the link doesn't follow its href (return false). We also create the popUp function, you can change the dimensions to suit you.

You may not have understood a word of this but it can be a starting point. I would encourage you to learn about the DOM and unobtrusive JS. By unobtrusive we mean the sort of JS you have seen here. You take a page that works perfectly and alter it functionality. This way if JS is switched off then although some functionality may be lost everything still works.

Try this out see if it works. This in combination with CSS rolovers will reduce you code massively as you won't need any inline code just a class or two.

Any questions then just ask.

Pete.

pa007 · #9 Jul 19th, 2007, 10:00

The css rollevrs are simple and though ti isn't JS I'll post it here since it may be of some use to you.

If it was just text you would use:

Code: Select all

a {
color: #000;
text-decoration: none;
}

a:hover {
color: #333;
border-bottom: #333 solid 1px;
}

The sam econcept applies if you are using images. The only difference is we use the background image property and have to remove the text from the html via css. The HTML document wouldn't actually change for these two examples.

Image replacement:

Code: Select all

a {
display: block;
width: 100px;
height: 30px;
text-indent: -9999px;
text-decoration: none;
background: #fff url('image.gif') 0 0 no-repeat;
}

a:hover {
background: #fff url('image_hover.gif') 0 0 no-repeat;
}

I'll explain. The display block just makes sure that we can set its size properly, as we have removed the text using text-indent: -9999px; there is nothing in the box so it would normally just collapse. We have set its dimensions so it stays the right size which will make our background image visible. The second part just changes the BG image.

The best method is to use a single image which has both states (link and hover) in it perhaps side by side. This way you can simply change the BG position on the a:hover. This will make the rollover seamless. I can give more info on this if you would like but I don't want to overload you. There a few tutorials knocking about on CSS Rollovers and BG position ones specifically.

Pete.

Ice · #10 Jul 19th, 2007, 11:18

oh WOW,

thanks a lot!!!! that should help sorting that link problem.

..... there is so much to learn...., its good to know there are people around who are willing to help so generousely.

thanks

esther

spinal007 · #11 Jul 19th, 2007, 12:35

* all hail to Pete *

Ice · #12 Jul 19th, 2007, 17:02

yeah....
but, im still having some trouble.

two things:

1. ive got a few different rollover buttons on the page. when i insert the css code for a hover button, all of them change to the same one, the listen button - of course.... how can i get them to appear only where they are supposed to be? and leave the rest of the buttons with different images?

2. when i click the listen link (a text button at the mo), i dont get a new window. it just opens in the same page like a normal link, although i created a new js file with the js code in it and linked it to the html page with this code:

<script type="text/JavaScript" src="popUp.js"></script>

i dont get it....

spinal007 · #13 Jul 19th, 2007, 17:05

Is this online? It's easier to help when we can actually see it for ourselves...

pa007 · #14 Jul 19th, 2007, 17:12

Did you add a class="popup" to you links?

And for the rollover. Use a class again. That way the css will only apply to elements with that combination of element and class.

Post some code so we can take a look. I had the JS working before so its probably easy to fix.

Pete.

Ice · #15 Jul 20th, 2007, 07:55

ok, i tried it in a seperate file and got the js to work....!? tried it again in the page and it didnt work (link opens in the same page)...!?????

could it be that the code clashes with something else in the head section? but appart from the js script code and the css rollover style (both used for the rollover button) there are only the css styles for the text on the page (i know, use css external.... but this shouldnt cause any problems, right?)

(my head section)

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title of page</title>
<style type="text/css">
<!--
body {
    background-attachment: fixed;
    background-image: url(BGandLogo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #CC0000;
    background-color: #000000;
}
.style4 {
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #8c0a00;
    line-height: 0px;

.style5 {
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #8c0a00;
}

-->
</style>

<script type="text/JavaScript" src="popUp.js"></script>

<style type="text/css">
<!--
#btnListen {
display: block;
width: 56px;
height: 27px;
text-indent: -9999px;
text-decoration: none;
background: transparent url('listen-silver.gif') 0 0 no-repeat;
}

#btnListen:hover {
background: transparent url('listen-gold.gif') 0 0 no-repeat;
}
-->
</style>
</head>

and just in case:
the code i put into a new test file, where the popup works properly

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/JavaScript" src="popUp.js"></script>

<style type="text/css">
<!--
#btnListen {
display: block;
width: 100px;
height: 30px;
text-indent: -9999px;
text-decoration: none;
background: #fff url('listen-silver.gif') 0 0 no-repeat;
}

#btnListen:hover {
background: #fff url('listen-gold.gif') 0 0 no-repeat;
}
-->
</style>

</head>

and yes, i added class="popup"

Code: Select all

<a href="www.site.com/music.html" class="popup" id="btnListen"></a>

pa007 · #16 Jul 20th, 2007, 08:58

Well I've had the JS working in page and if it works when its called from and external file then it should work when its in the html file. It could have been clashing with something or you may have called it incorrectly.

I never use styles withinh the page so I could be wrong but I think that those comments are your problem. The styles are within a comment so I don't think it will work. Remove  and see what happens.

If you want to use the JS in your page (which you shouldn't) then post the code you used to link to the JS and I'll check it.

Pete.

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
problem with main page when opening new window