Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dash issue + autoscroll logic 1

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
FR
Me again :)

Below is the code taken from this demo page :

I have two questions :

1. Why does the code throws errors when dashes are used in the div name? (ie: my-nav)

2. how should I modify the code so that the div scrolls down only when it reaches the very top of the page, thus giving the impression that it's fixed on the top of the page?

Code: 
<script type="text/javascript">

<!-- *********************************************************
     * You may use this code for free on any web page provided that 
     * these comment lines and the following credit remain in the code.
     * Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
     ********************************************************  -->
     

<!-- ********************************************************* -->

var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	var px = document.layers ? "" : "px";
	window[id + "_obj"] = el;
	if(d.layers)el.style=el;
	el.cx = el.sx = sx;el.cy = el.sy = sy;
	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

	el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/2;this.cy += (pY + this.sy - this.cy)/2;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 10);
	}
	return el;
}


JSFX_FloatDiv("navigation_curnav", 0, 0).floatIt();

</script>

Thanks :)
 
Sort by date Sort by votes
Hi

Sleidia said:
1. Why does the code throws errors when dashes are used in the div name? (ie: my-nav)
Click to expand...
Name ? You mean [tt]id[/tt], do you ? Well, the [tt]id[/tt] is a unique identifier and seems that it has to look like an identifier : composed from alphanumeric characters and underscore ( _ ), starting with letter or underscore.

This firstly applies for Explorer, because it permits stup... alternative reference :
Code: 
[gray]// DOM standard : works[/gray]
document.getElementById('identifier')

[gray]// Explorer : works[/gray]
identifier

[gray]// DOM standard : works[/gray]
document.getElementById('a-b')

[gray]// Explorer : no way to work, clash with the language syntax[/gray]
a-b
Probably to avoid the latest, the format of [tt]id[/tt]'s can not be random.

Feherke.
 
Upvote 0 Downvote
Thanks :)

But here ( ) they say that

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).
Click to expand...

I've heard of browsers not supporting the _ so I decided to use the -. Then I never encountered CSS errors but now I get JS errors! :(

I would hate to use uppercase characters :(


I
 
Upvote 0 Downvote
So, I guess you use uppercase characters? (crud!) :)
 
Upvote 0 Downvote
Hi

Sleidia said:
I guess you use uppercase characters?
Click to expand...
Why, said anyone that my source codes are human readable ? ;-)

I use only lowercase identifiers, no underscore, no dash. Although sometimes I include a few of them in codes posted on Tek-Tips.

Feherke.
 
Upvote 0 Downvote
OK, after a little bit or research, I found this :
> I would also avoid
> hyphens in ids, since you may later want to manipulate elements
> with JavaScript / ECMAScript using the id. The script may misinterpret
> the hyphen as a minus sign.

That's easy enough to work around, use the foo['my-id'] notation
rather than the foo.my-id notation.
Click to expand...

Since I do not want to rename all my divs (there are hundreds of them), can the trick described above be practically used on any circumstance? How could I apply this trick on the JS snippet above?
 
Upvote 0 Downvote
Hi

Just cut the $*!* off :
Code: 
[small]<script type="text/javascript">

    /*********************************************************
     * You may use this code for free on any web page provided that
     * these comment lines and the following credit remain in the code.
     * Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
     ********************************************************/
     

    /*********************************************************/

var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    var px = document.layers ? "" : "px";[/small]
    window[id[red].replace(/\W/g,'')[/red] + "_obj"] = el;
[small]    if(d.layers)el.style=el;
    el.cx = el.sx = sx;el.cy = el.sy = sy;
    el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

    el.floatIt=function()
    {
        var pX, pY;
        pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
        document.documentElement && document.documentElement.clientWidth ?
        document.documentElement.clientWidth : document.body.clientWidth;
        pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
        document.documentElement.scrollTop : document.body.scrollTop;
        if(this.sy<0)
        pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
        this.cx += (pX + this.sx - this.cx)/2;this.cy += (pY + this.sy - this.cy)/2;
        this.sP(this.cx, this.cy);[/small]
        setTimeout(this.id[red].replace(/\W/g,'')[/red] + "_obj.floatIt()", 10);
[small]    }
    return el;
}


JSFX_FloatDiv("navigation_curnav", 0, 0).floatIt();

</script>[/small]
By the way, you had HTML comment in the JavaScript code. I changed it to JavaScript comment.

Feherke.
 
Upvote 0 Downvote
Works great! But what /\W/g is for exactly?
 
Upvote 0 Downvote
Hi

Code: 
[red]regular expression delimiter[/red]
[red]|[/red]  [red]|[/red]
[red]/[/red][green]\W[/green][red]/[/red][blue]g[/blue]
 [green]^^[/green] [blue]^[/blue]
 [green]|[/green]  [blue]+- [b]g[/b]lobal flag = replace all occurances[/blue]
 [green]+- non-[b]w[/b]ord character = other than letter, digit, underscore[/green]
Place to learn regular expressions :
Feherke.
 
Upvote 0 Downvote
Sure, it's more powerful than a simple but limited replace('-', '') :)

But I don't get how the JS code can still find the div id in the document even after it has been stripped of its "-" :(

Anyway, I've edited the code to make it easily readable (to my eyes at least)

Code: 
function JSFX_FloatDiv(id, sx, sy) {

/*********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
********************************************************/

ns = (navigator.appName.indexOf("Netscape") != -1);
d = document;

var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";

window[id.replace(/\W/g,'') + "_obj"] = el;

    if(d.layers) el.style=el;
    
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP = function(x,y) {

        this.style.left=x+px;
        this.style.top=y+px;
        
        };

    el.floatIt = function() {
    
    var pX, pY;
    
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
    document.documentElement && document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth;
    
    pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop;
    
        if (this.sy<0) {
        
        pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
        
        }
        
    this.cx += (pX + this.sx - this.cx) / 2;
    this.cy += (pY + this.sy - this.cy) / 2;
    this.sP(this.cx, this.cy);
    
    setTimeout(this.id.replace(/\W/g,'') + "_obj.floatIt()", 10);

    }
    
return el;

}
 
Upvote 0 Downvote
Hi

Sleidia said:
But I don't get how the JS code can still find the div id in the document even after it has been stripped of its "-" :(
Click to expand...
Well, that modification is for that code only. If you look at this two references, will see that is not a direct reference to the [tt]div[/tt] :
Code: 
window[id + "_obj"]
this.id + "_obj"
At the beginning of the [tt]function[/tt] it creates a property of the [tt]window[/tt] object, which will be globally and uniformly accessible :
Code: 
window.navigation-curnav_obj
So later it references the [tt]div[/tt] through a pointer. If those two critical lines would contain hammered-in names like below, all the dash problem would not happen in this code's case :
Code: 
window['Sleidia'] = el;
setTimeout('Sleidia.floatIt()', 10);
Sleidia said:
Anyway, I've edited the code to make it easily readable (to my eyes at least)
Click to expand...
I would suggest to pick a frequently used indenting style and go with that. Personally I prefer K & R.

Feherke.
 
Upvote 0 Downvote
Thanks for the info :)

As for my indenting style, I think I will add it in Wikipedia ;)
 
Upvote 0 Downvote
Ok, I've (painfully) edited the code to my liking so that the navbar stays on the top during scrolling, but for the final touch, I'm stuck :(

I just need to make the navbar move only when it reaches the top limit of the inner window. But my neurons can't be of any help anymore :(

Well, the code below is self explanatory :

Code: 
<html>
<head>
<title>Float Menu</title>

<style>

body td{

font-family: Arial;
color: #ffffff;

}

</style>

</head>

<body bgcolor="#000000" text="#FFFFFF">

<center>
<table width="800" height="4444" border="1">
<tr valign="top">
<td width="150" background="images/bar.gif" valign="top">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <div id="div-top-left" style="position:relative">
    <table border="0" cellspacing="0" cellpadding="0" width="150" height="333" bgcolor="#ffffff">
    <tr>
    <td></td>
    </tr>
    </table>
    </div>


<script type="text/javascript">

function JSFX_FloatDiv(id, sx, sy) {

/*********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
********************************************************/

ns = (navigator.appName.indexOf("Netscape") != -1);
d = document;

var el = d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";

window[id.replace(/\W/g,'') + "_obj"] = el;

var offset_y_first = el.offsetTop;
var offset_y_temp = 0;

    if (d.layers) el.style = el;
    
el.cx = el.sx = sx;
el.cy = el.sy = sy;

el.sP = function(x,y) {

        this.style.left = x + px;
        this.style.top = y + px;

        };

    el.floatIt = function() {
    
    var pX, pY;
    
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
    document.documentElement && document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth;
    
    pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop;
    
        if (this.sy < 0) {
        
        pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
        
        }
        
        if(offset_y_first < 1) offset_y_first = this.offsetTop;
        if(pY > offset_y_first) offset_y_temp = offset_y_first;
        if(pY < offset_y_first) offset_y_temp = 0;
        
    window.status = offset_y_first + ' | ' + this.offsetTop + ' | ' + document.body.scrollTop; // for testing
     
    this.cx += (pX + this.sx - this.cx) / 2;
    this.cy += (pY + this.sy - this.cy - offset_y_temp) / 2;
    this.sP(this.cx, this.cy);
        
    setTimeout(this.id.replace(/\W/g,'') + "_obj.floatIt()", 10);

    }
   
return el;

}


JSFX_FloatDiv("div-top-left", 0, 0).floatIt();

</script>



</td>
<td width="650">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
The nav should move only after this text becomes invisible.<br>
And the nav shouldn't go above this text.
</td>

</tr>
</table>
</center>

</body>
</html>
 
Upvote 0 Downvote
You're right!

Except that the Quirksmode script doesn't show on IE6 and behaves differently on Opera.

The JSFX fuction is totally cross-browser/cross-OS, that's why I'll keep using this one.

Anyway, mission accomplished! :)
I would never have managed it without you. Thanks x 10000 ;)

Here is the final code tested on IE, FF2 and Opera9:

Code: 
<html>
<head>
<title>Float Menu</title>

<style>

body td{

font-family: Arial;
color: #ffffff;

}

</style>

</head>

<body bgcolor="#000000" text="#FFFFFF">

<center>
<table width="800" height="4444" border="0">
<tr valign="top">
<td width="150" background="images/bar.gif" valign="top">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>..............................


    <div id="div-top-left" style="position:relative">
    <table border="0" cellspacing="0" cellpadding="0" width="150" height="333" bgcolor="#ffffff">
    <tr>
    <td></td>
    </tr>
    </table>
    </div>


<script type="text/javascript">

function JSFX_FloatDiv(id, sx, sy) {

/*********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
********************************************************/

ns = (navigator.appName.indexOf("Netscape") != -1);
d = document;

var el = d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";

window[id.replace(/\W/g,'') + "_obj"] = el;

var offset_y_first = el.offsetTop;
var offset_y_temp = 0;

    if (d.layers) el.style = el;
    
el.cx = el.sx = sx;
el.cy = el.sy = sy;

el.sP = function(x,y) {

        this.style.left = x + px;
        this.style.top = y + px;

        };

    el.floatIt = function() {
    
    var pX, pY;
    
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
    document.documentElement && document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth;
    
    pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop;
    
        if (this.sy < 0) {
        
        pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
        
        }
     
    this.cx += (pX + this.sx - this.cx) / 2;
    
        if(offset_y_first < 1) offset_y_first = this.offsetTop;
        if(pY > offset_y_first) offset_y_temp = offset_y_first - sy;
        
        if(pY < offset_y_first) {
        
        offset_y_temp = 0 + sy;    

        this.cy =  offset_y_first - offset_y_first;
        
        } else {
        
        this.cy += (pY + this.sy - this.cy - offset_y_temp) / 2;
        
        }
    
    this.sP(this.cx, this.cy);
        
    setTimeout(this.id.replace(/\W/g,'') + "_obj.floatIt()", 10);

    }
   
return el;

}


JSFX_FloatDiv("div-top-left", 0, 20).floatIt();

</script>



</td>
<td width="650">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
..........................................................................................
</td>

</tr>
</table>
</center>

</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
599
JScannell
JScannell
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
125
JPSeo
JPSeo
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
168
edd92
edd92
Dirkster
  • Locked
  • Question
javascript widget works only on temp domain, not on main domain. directory path issue? 1
Replies
2
Views
139
Dirkster
Dirkster
BobMCT
  • Locked
  • Question
Guessing this might be an HTML &amp; javascript issue so I'll start here
Replies
1
Views
128
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top