how to add a css class in javascript to be used onload

Question

I am trying to load a popup lightbox window when the page is initially opened. I can get it to work on a click but I cannot get the code right to add a class in the script. I am using 'Lightbox' from within HTML Kickstart.

The link that works looks like this: <a class="lightbox" href="#bbc">BBC</a> This works perfectly. Basically how do I get that to work automatically on page load.

My attempt at the script:

<script type="text/javascript">
    function load() {
        var target = location.href = "#bbc";
        target.className = "lightbox";
    }
</script>

<body onload="load()"> ? developer.mozilla.org/it/learn/javascript — Niccolò Campolungo
– Niccolò Campolungo, Commented May 28, 2013 at 10:30
possible duplicate of How to call function on page load in JS? — Felix Kling
– Felix Kling, Commented May 28, 2013 at 10:43
This question is similar to: How to call function on page load in JS?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — winner_joiner
– winner_joiner, Commented Nov 12, 2024 at 6:44

MMM · Accepted Answer · 2013-05-28 10:41:31Z

1

So I assume you want to add a class to that anchor tag:

$(function () {
    $("a[href=#bbc]").addClass("lightbox");
});

Using $(function() {…}) is the same as using the ready() function (in JQuery). I would recommend running the code after the DOM is ready rather the "on load".

answered May 28, 2013 at 10:41

MMM

7,3402 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pradip Kharbuja · Accepted Answer · 2013-05-28 10:34:25Z

0

you need to call the load() function on the onLoad event of <body> tag.

<body onLoad="load()">

edited May 28, 2013 at 10:34

Pradip Kharbuja

3,5686 gold badges31 silver badges50 bronze badges

answered May 28, 2013 at 10:31

Pavan Kumar K

1,3849 silver badges15 bronze badges

Comments

Pebbl · Accepted Answer · 2013-05-28 10:50:35Z

The way I read this question — ignoring the title — is that the user is trying to trigger the lightbox on load. Whilst this may be a wrong assumption, the way to trigger a link using javascript is to use the .click() method:

window.onload = function(){
  var i, list = document.getElementsByTagName('a');
  for ( i=0; i<list.length; i++ ) {
    /// this will only work for links with only a class name of lightbox.
    /// you could look into using getElementsByClassName or something similar.
    /// I use getElementsByTagName because I know how supported it is.
    if ( list[i].className == 'lightbox' ) {
      list[i].click();
    }
  }
};

The above code would support multiple lightbox links in a page, which might not be desired, so it may be best just to add an id to the link you wish to target and then use:

window.onload = function(){
  document.getElementById('clickonload').click();
};

<a id="clickonload" class="lightbox" href="#bbc">BBC</a>

You may find however, that in reading the documentation for whatever lightbox plugin you are using, that there is a command you can use from JavaScript, rather than clicking a target link.

FLX · Accepted Answer · 2013-05-28 11:47:58Z

0

$(window).load(function () {
    var target = location.href = "#bbc";
    target.className = "lightbox";
});

edited May 28, 2013 at 11:47

answered May 28, 2013 at 10:31

FLX

2,6804 gold badges30 silver badges60 bronze badges

5 Comments

Pradip Kharbuja Over a year ago

I think OP wants using JavaScript not jQuery.

Pradip Kharbuja Over a year ago

@user2428069 : But I think using jQuery will much easier than core JavaScript

JJJ Over a year ago

@PradipKharbuja HTML Kickstart is a jQuery library so it's fair to assume the OP can use a jQuery solution. And please don't use code formatting for something that isn't code.

FLX Over a year ago

Sorry if he must not use jQuery, i always forgot to check if it needed. But my solution should work.

Felix Kling Over a year ago

Why do you define the function load inside the event handler and call it immediately? Just put the two lines of code directly in the event handler. No need to define a second function.

Collectives™ on Stack Overflow

how to add a css class in javascript to be used onload

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related