Script error

JavaScript
1

Hi

I know nothing about js scripts…

I used FF Browser Console and it found in a script I use for popups the following:

TypeError: this.getAttribute(…) is null Barcelona.html:113:9

<script type="text/javascript">
(function() {
   'use strict';

function init(){
   var mywindow;

var lnk=document.getElementsByTagName('a');
for(var c=0;c<lnk.length;c++) {
   lnk[c].onclick=function() {
   if(document.body.offsetWidth < 890 ) {
    return;
 }
if(mywindow) {
   mywindow.close();
 }
if(this.className.match('popup')) {
   var w=this.getAttribute('data-dimensions').split(',')[0];
   var h=this.getAttribute('data-dimensions').split(',')[1];
   var l=(screen.width-w)/2;
   var t=(screen.height-h)/2;
   var features='width='+w+',height='+h+',left='+l+',top='+t+',scrollbars=1';

   mywindow=window.open(this.href,'newwindow',features);
   mywindow.focus();
   return false;
    }
   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

})();

What’s the cure. please?

2

instead of this.getAttribute('data-dimensions') use this.dataset.dimensions

although it might be more straightforward to split the data attribute itself by defining width/height separately.

<div data-width="10" data-height="20"></div>

var w = this.dataset.width;
var h = this.dataset.height;
1 Like
3

Hi thanks

the html I have at the momemnt looks like this

<a class="popup" data-dimensions="600,600" href="IberoBavaroMap.html">Map</a>
<span class="fromeuro">From &#36;188</span>
<a class="popup look-inside" data-dimensions="700,800" href="IberoBavaro.html">Look inside</a>

If I understood the above I delete the 2 lines

var w=this.getAttribute('data-dimensions').split(',')[0];
   var h=this.getAttribute('data-dimensions').split(',')[1];

and instead put in

   var w=this.dataset.dimensions('data-dimensions').split(',')[0];
       var h=this.dataset.dimensions('data-dimensions').split(',')[1];
4

No. Instead you put in:

var w=this.dataset.dimensions.split(',')[0];
var h=this.dataset.dimensions.split(',')[1];
1 Like
5

though still it makes more sense to use two separate data attributes. that also makes it clear which of the values is the height and which the width (in your current setup this only becomes clear when you know the JavaScript code).

6

hi megazoid

from your post what do I have to do to the html?

If I have to change it, I have over 200 changes…

the dimensions at the mom are set in the html

7

but if you only look at the HTML code, you cannot tell whether the first value is the width or the height.

8

I understand.

But right now what I need is to get rid of the error and have as little work as possible changing what needs to be changed.

The script is easy, The html will need over 200 changes. So, is there a way of not touching the html, and if not what do I need to do?

9

only in the short run.

decent editors can do a bulk replace across files.

what we have shown you to do.

1 Like
10

Sorry but I got confused as I got about 3 different codes to change the script but none to change the html

megazoid suggested

var w=this.dataset.dimensions.split(',')[0];
var h=this.dataset.dimensions.split(',')[1];

you suggested

<div data-width="10" data-height="20"></div>

var w = this.dataset.width;
var h = this.dataset.height;

I take it that from yours I would need to replace the 2 lines with JUST the last 2 lines above, AND that in html I would need to change

<a class="popup" data-dimensions="600,600" href="IberoBavaroMap.html">Map</a>

to what exactly?

<div data-width="600" data-height="600"></div>

how does it call the script from that code?

Sorry, but I am lost… (as usual!)

11

not exactly like that. all you would have to replace is

data-dimensions="600,600"

with

data-width="600" data-height="600"

that <div> was merely an example since you didn’t post any HTML at that point.

1 Like
12

Right! Thanks

i will change a test page and see what comes out of it

How do you suggest I change the code in 6 pages with about 40 instances each?

All I can think of is Notepad++ with the search and replace, but Im laways afraid something might go wrong. is there a better way?

13

make backups.

even better, use version control (e.g. git).

1 Like
14

Now, you’re speaking Chinese to me!

What’s that?

15
1 Like
16

Thanks

Free, I hope…

17

of course.

18

While you’re on and on a similar subject

The code above controls popups. Originally, they were a normal html page with just a small central column. Later, because some visitors arrived directly at those poges by googling, I added sidebars which are not visible in the popups but that look not too good… in full size.

http://pintotours.net/Europe/Spain/Barcelona.html Press any of the buttons in central column

So, i decided to create new full html pages to replace the popups,

http://pintotours.net/Americas/DomRepublic/Punta.php Again press the buttons in the central column

but… I would like to find a way of using the new full pages to be used as the old popups, i.e. only the central part (#box4) would show when accessed from the main page, as the two pages above.

How can that be done, preferably in html/css?

EDIT

I wonder if the easiest way would be to have 2 stylesheets?

But then how does the server know if the page is being calld from the full url, or from a internal link?

Or would the current script do the job with an alteration or two?
Set width of the popup; a left and top offset to get rid of the header; and leave height auto ?

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.