How add another class to a javascript function

Question

here's my js:

function DoNav(theUrl) {
  document.location.href = theUrl;
}

here's my alternating color table code

while($i < $num) {
  if ($i % 2 == 0) {
    echo "<tr class='even' onclick=\"DoNav('physicianInfo.php');\">";
  }
  else {
    echo "<tr class='odd' onclick=\"DoNav('physicianInfo.php');\">";
  }
}

but I wanted to add a class="colorbox" when I click the row

class colorbox allows me to have an iframe modal: http://colorpowered.com/colorbox/

since my TR has a class for alternating colors, and I have a clickable row with javascript to open a link physicianInfo.php. How can I call colorbox (class="colorbox") inside the tr. can I have 2 class in 1?

I usually call the class via "a href"

Sample: <a class='colorbox' href="physicianInfo.php">

You've asked 18 previous questions. With respect, you should be formatting code correctly by now. We help newbies out by doing it for them, but after a couple of questions, you're expected to handle it yourself. To the right when you were asking your question there was this handy How to Format box. Worth a read, as is the information shown by the [?] just above the question area and the page it links to. — T.J. Crowder
– T.J. Crowder, Commented Jul 17, 2011 at 6:07
If you need to add a colorbox after rendering the page, you need to look here colorpowered.com/colorbox and likely do this.colorBox(.....) and not add a class that is not picked up by the plugin unless you re-init the plugin after adding the class — mplungjan
– mplungjan, Commented Jul 17, 2011 at 6:30
@mplungjan: I add 'this.colorbox({href:theURL}); but the colorbox effect did not work. Here's the JS: function DoNav(theUrl) { document.location.href = theUrl; this.colorbox({href:theUrl}); } — Arnold Porche Villaluz
– Arnold Porche Villaluz, Commented Jul 17, 2011 at 6:41
I have only a vague idea of what you are trying to achieve but I do see you are throwing seemingly random script around. You cannot change the location and have stuff do things on the same page since changing the location unloads the page. You need to change the location of the iframe if you have one — mplungjan
– mplungjan, Commented Jul 17, 2011 at 7:00

Clayton · Accepted Answer · 2011-07-17 07:56:20Z

2

You have to initialize the plugin properly, since you are adding the html dynamically after page load.

while($i < $num) {
    if ($i % 2 == 0) {
        echo "<tr class='even tr-colorbox' \">";
    } else {
        echo "<tr class='odd tr-colorbox' \">";
    }
}

$('.tr-colorbox').colorbox({href: 'physicianInfo.php', iframe: true});

Another option

function DoNav(theUrl) {
    $.colorbox({href: theUrl, iframe: true});
}

while($i < $num) {
    if ($i % 2 == 0) {
        echo "<tr class='even' onclick=\"DoNav('physicianInfo.php');\">";
    } else {
        echo "<tr class='odd' onclick=\"DoNav('physicianInfo.php');\">";
    }
}

edited Jul 17, 2011 at 7:56

answered Jul 17, 2011 at 7:04

Clayton

5,3701 gold badge20 silver badges15 bronze badges

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

5 Comments

Arnold Porche Villaluz Over a year ago

When user click on the row from the table. It opens the link "physicianInfo.php". BUT I want to have the colorbox effect using Example7: colorpowered.com/colorbox/core/example1/index.html under "Other Content Types" - Outside Webpage (Iframe) demo

Arnold Porche Villaluz Over a year ago

I tried your code: <script type="text/javascript"> $('.example7').colorbox({href: theUrl}); </script> and colorbox effect work for like less than a second and the link still opens in the same window now inside the colorbox ifrane

Clayton Over a year ago

@Arnold Porche Villaluz I've updated my answer to provide the behavior I believe you are after

Arnold Porche Villaluz Over a year ago

I tried your code: <script type="text/javascript"> $('.tr-colorbox').colorbox({href: 'physicianInfo'}); </script> and colorbox effect work for like less than a second and the link still opens in the same window not inside the colorbox iframe

Arnold Porche Villaluz Over a year ago

IT FINALLY WORK! WOOHOO! I'm referring to the other Option. Thanks Clayton!

vinceh · Accepted Answer · 2011-07-17 06:07:38Z

0

.addClass('colorbox')

would probably be the answer you want :)

answered Jul 17, 2011 at 6:07

vinceh

3,5101 gold badge23 silver badges24 bronze badges

4 Comments

Arnold Porche Villaluz Over a year ago

I added this inside javascript: <script type="text/javascript"> function DoNav(theUrl) { document.location.href = theUrl; .addClass('colorbox'); } </script> it didn't work

Arnold Porche Villaluz Over a year ago

i also tried to add another line inside the javascript: document.location.addClass('colorbox'); didn't work either

vinceh Over a year ago

You need to this.addClass('colorbox') in your Javascript. See if that works

Arnold Porche Villaluz Over a year ago

link works, but colorbox effect do not work. It only works with <a class='colorbox' hred="physicianInfo.php">

MAK Ripon · Accepted Answer · 2011-07-17 06:51:03Z

0

Probable solution:

in the doNav function get classes for the row
then append colorbox class with those.
then use javascript setAttribute method

The javascript function should be as follows

 function doNav(row,theUrl){
 // document.location.href = theUrl;
 var classes = row.getAttribute("class");
 classes+=" colorbox";
 row.setAttribute("class",classes); 
}

The full solution could be found here. I did this in jsfiddle for you.

But I am afraid that colorbox plugin will not react if you add classname (.colorbox) on the fly. It expect the class on document load.

answered Jul 17, 2011 at 6:51

MAK Ripon

1,0914 gold badges14 silver badges28 bronze badges

Collectives™ on Stack Overflow

How add another class to a javascript function

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related