Jump to content

Help with simple function!

- - - - -
Started by dbk, Jul 27 2010 12:13 PM

This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1
dbk
Posted 27 July 2010 - 12:13 PM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Hi

Well.. as you will see I'm totally new in JavaScript, and I'm trying to put the following (that works fine) into a function:

<script>var current_row;</script>

    <div class="row_content" onclick="window.open('other_page.php); this.className='row_content_click'; if(current_row) current_row.className='row_content'; current_row=this;">

Now I would like to make a function so I will be able to reuse it.

This Is my own try that don't work:
<script>

function control_row(){

    var current_row;

    this.className='row_content_click';

    if(current_row) {

        current_row.className='row_content';

    } else {

        current_row=this;

    }

}

</script>

<div class="row_content" onclick="control_row()">

How it should work:
  • set a default class in the <div> tag.
  • if the row is clicked change the class.
  • if a other row is clicked change back to default class.

And.. please comment the function so I can understand what's happening!

#2
dbk
Posted 27 July 2010 - 12:48 PM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Ok.. I got this far with a working code (with help):

<script>
var current_row;

function control_row(tr)
{
    tr.className='row_content_click';
    if(current_row) {
        current_row.className='row_content';
    }
        current_row=tr;
}

</script>
<div class="row_content" onclick="control_row(this);">

But.. When the same object is clicked again the class assigned by the click is remowed:confused:

#3
InitVI
Posted 27 July 2010 - 04:20 PM

InitVI

    Newbie

  • Members
  • PipPip
  • 11 posts
Its because that function is setup as a toggle.

It doesn't realize whats being clicked.

To disable that toggle for classes set with "row_content_click" you need something like this:

var current_row;

function control_row(tr){
    if(tr.className == 'row_content'){
		tr.className='row_content_click';
		current_row.className='row_content';
	}
    if(tr.className != 'row_content_click') {
        current_row.className='row_content';
    }
        current_row=tr;
}

#4
dbk
Posted 28 July 2010 - 06:20 AM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Hi InitVI

Unfortunately I can't make your script work!

I must also admit that I don't quite know where to start :confused:

#5
InitVI
Posted 28 July 2010 - 06:53 AM

InitVI

    Newbie

  • Members
  • PipPip
  • 11 posts
Oops sorry i didnt test it.

This should work:

JS:
var current_row = true;

function control_row(tr){
    
    if(tr.className == 'row_content'){
		tr.className='row_content_click';
                current_row.className='row_content';
     }
    
    current_row=tr;
        
}

This is the html code i used to test it.

<html>
<head>
<script>
var current_row = true;

function control_row(tr){
    
    if(tr.className == 'row_content'){
		tr.className='row_content_click';
                current_row.className='row_content';
     }
    
    current_row=tr;
        
}
</script>
<style>
.row_content {
color:red;
]
.row_content_click {
color:blue;
]
</style>
</head>
<body>
<div class="row_content" onclick="control_row(this)">Test1</div>
<div class="row_content" onclick="control_row(this)">Test2</div>
<div class="row_content" onclick="control_row(this)">Test3</div>
</body>
</html>

Hope that all works.

#6
dbk
Posted 28 July 2010 - 07:04 AM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Hi InitVI

It works just beautiful :thumbup:

If you don't mind I would appreciate if you could explain how it works!!
I get a little confused about the variable that is put in front of the " .className " in the if statement. And also why the " current_row=tr " is places in the end of the function?

#7
InitVI
Posted 28 July 2010 - 07:12 AM

InitVI

    Newbie

  • Members
  • PipPip
  • 11 posts
Pretty much when the control_row is run the if statements checks to make sure the class of the clicked div is "row_content" (prevents the div from being unselected if reclicked), if it is it changes the class to "row_content_click" and then changes the old currently clicked row back to "row_content".

The tr variable basically identifies the div clicked.So javascript knows which div to change.

"current_row=tr;" is so that it knows what the currently clicked div is so it can change it back to default when another div is clicked.

Hope that describes whats going on. Anymore questions just ask.

#8
dbk
Posted 28 July 2010 - 07:25 AM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Very fine description, now I understand :) - Thanks a lot!!!

#9
dbk
Posted 28 July 2010 - 12:34 PM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Hi again

I made a little add on to the function, I want to set one row as selected when the page loads, which gets the " id='preset' " and I use the " document.getElementById('preset') " to change if a row is clicked.
It works fine in Chrome and Firefox but not in IE8 !!!! Anyone has a idea why???

var clicked_row = true;


function control_row(tr) {

    if(tr.className == 'row_content' || tr.Id == 'preset'){

		document.getElementById('preset').setAttribute('class', 'row_content'); //Change if one row is preset

                tr.className='row_content_click';

                clicked_row.className='row_content';

    }

    clicked_row=tr;

}

</script>

    <div id='preset' class='row_content_click' onclick="control_row(this);">Hallo</div>

    <div class='row_content' onclick="control_row(this);">Bob</div>

    <div class='row_content' onclick="control_row(this);">Your the man!!!</div>

#10
InitVI
Posted 28 July 2010 - 01:24 PM

InitVI

    Newbie

  • Members
  • PipPip
  • 11 posts
I think its a problem with setAttribute in IE.

Try changing 
document.getElementById('preset').setAttribute('class', 'row_content');
to 
document.getElementById('preset').className = 'row_content';

Hope that helps.

#11
dbk
Posted 29 July 2010 - 11:36 AM

dbk

    Newbie

  • Members
  • PipPip
  • 13 posts
Only one thing to say to you InitVI:

Your the man! :thumbup:

Thanks a lot!

#12
wim DC
Posted 29 July 2010 - 12:25 PM

wim DC

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 2,084 posts
You might have to add both attributes "class" and "classname" to be compatible in all 3 browsers.. I've had issues with "classname" in FF
Back to JavaScript and CSS




  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → JavaScript and CSS
IPB skins by Skinbox