How Can I Integrate these Two Scripts . . . ?

[Fluoresce]

I need your brains, guys.

 

I have a script on my site which expands and collapses div elements. This first part goes in the head element:

 

			function ToggleVis(elem, tohide) {
    			if (typeof(elem) != "object") {
        			elem = document.getElementById(elem);
    			}
    			if (typeof(tohide) != "object") {
       				tohide = document.getElementById(tohide);
    			}
    			if (tohide == null || tohide.style == null) {
        		return false;
    			}
    			if (tohide.style.display != 'none') {
        		tohide.style.display = 'none';
        		elem.innerHTML = 'Show store info +';
        		elem.value = 'Show store info +';
    			}
    			else {
        		tohide.style.display = '';
        		//(elem.innerHTML != null) ? elem.innerHTML = 'Hide store info -' : elem.value = 'Hide store info -';
        		elem.innerHTML = 'Hide store info -';
        		elem.value = 'Hide store info -';
    			}
		}

 

And this other part goes in the body element:

 

<a  href="#" onclick="ToggleVis(this, 'div_id'); return false;">Show store info +</a>


<div id="div_id" style="display: none">Content to be expanded and collapsed.</div>

 

When the anchor is clicked, the content in the div is expanded/collapsed.

 

I also have another script in my site's body element which copies text to clipboard:

 

			<script type="text/JavaScript">
			var clip = new ZeroClipboard.Client();
			clip.setText('CODE1');
			clip.glue('button');			
			clip.addEventListener('mouseOver', function(client) {
			document.getElementById("hoverpopup").style.visibility = "visible";
			} );
			clip.addEventListener( 'mouseOut', function(client) { 
			document.getElementById("hoverpopup").style.visibility = "hidden";
			} );
			clip.addEventListener( 'complete', function(client, text) {
			document.getElementById("hoverpopup").style.visibility = "hidden";
			window.open('http://www..com','','width=400,height=200');
			} );
			window.onresize = resize;
			function resize() {
				clip.reposition();
				}
		</script>

 

Is there a way of making the resize() function of the second script fire whenever a div is expanded or collapsed?

[Ken2k7]

First, you will need to put your second script (the one with clip) above ToggleVis function. As a general rule, I like to have JavaScript run at the bottom of the page, not in the head tag. So you should do that. Then in toggleVis function, call clip.reposition() or resize()

[Fluoresce]

First, you will need to put your second script (the one with clip) above ToggleVis function. As a general rule, I like to have JavaScript run at the bottom of the page, not in the head tag. So you should do that. Then in toggleVis function, call clip.reposition() or resize()

 

If I put the head part of the first script at the bottom of the page, beneath its body part, will it still work?

 

And how exactly do I call resize()? That was my question.

[Ken2k7]

Yes, it'll still work. It's just a function.

 

And you call it just like that - resize(). Don't know JavaScript?

[Fluoresce]

Yes, it'll still work. It's just a function.

 

And you call it just like that - resize(). Don't know JavaScript?

 

Thanks, Ken, but I don't think you understand me. I need it to be called only when someone expands or collapses a div. In other words, I need resize() to be called every time this is clicked:

 

<a  href="#" onclick="ToggleVis(this, 'div_id'); return false;">Show store info +</a>

 

Do you know how I can do this?

[Ken2k7]

Yes, read -

 

First, you will need to put your second script (the one with clip) above ToggleVis function. As a general rule, I like to have JavaScript run at the bottom of the page, not in the head tag. So you should do that. Then in toggleVis function, call clip.reposition() or resize()