SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting style in firefox??

    i have this code that sets the style left to X_pos and the style top to Y_pos both ie and firefox can see what X_pos is and what Y_pos is yet only ie sets the style to it firefox does not

    Code:
    //sets b.left to X_pos
    b=(document.layers)?g:g.style;b.left=X_pos;f=false;
    //sets b.top to Y_pos
    b=(document.layers)?g:g.style;b.top=Y_pos;f=false;
    //ie returns the same thing for X_pos as for left but firefox returns the correct number for X_pos but left returns as 0
    alert('X_pos= '+X_pos+' left= '+b.left+' Y_pos= '+Y_pos+' top= '+b.top);
    so i am assuming tha this is not the correct way to set it in forefox....can someone please tell me how?
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    left and top corresponds to this, this is what im changing

    HTML Code:
    <div id="diamonds" style="position:absolute; left:0px; top:0px; width:130px; height:255px; z-index:1; visibility: hidden;">
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where is the rest of the code?

    I am assuming that you are implementing an event handler. If that is the case then you should use clientX and clientY, they are supported in everything but NS 4.x, which doesn't really matter since its an archaic browser that no one should be using at this point anyway.

    Another point is that to reference event properties in IE you will need to use window.event.clientX, for the rest I think you can just use event.clientX. I would use document.all in my if condition to check for IE and let the else condition evaluate to the action to take for all other browsers.

    Below is a sample of code that I wrote for an alert Div that I created.

    Code:
    if(window.event){	// then browser is IE				
         alertDiv.style.top = window.event.clientY + 'px';   // IE Event Model has event as a global object not a parameter
         alertDiv.style.left = window.event.clientX + 'px';	// passed to the event handler.  Must reference with 'window.'
    } else {
         alertDiv.style.top = event.clientY + 'px'; // Mozilla passes a new event object as a parameter to the event handler
         alertDiv.style.left = event.clientX + 'px'; // and does not reference the object as a child of the window object.						
    }

  4. #4
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in IE it works perfectly how it is, i didnt show the rest of the code bc both IE and FF see what X_pos is, its just that IE sets the style.left to X_pos and FF does not ...heres the entire function

    Code:
    function P7_autoLayers() { 
    
     var g,b,k,f,args=P7_autoLayers.arguments;
     if(!document.p7setc) {p7c=new Array();document.p7setc=true;}
     for(k=0; k<p7c.length; k++) {
    // w = MM_findObj(args[1]);
     //alert(p7c[k]+','+args[1]);
     //if(p7c[k] != args[1]){
     for(HH=0;HH<=8;HH++){
     if(p7c[k] == noHide[HH]){
     //alert(noHide[HH]);
     p7c[k] = 'bob';
     }}
      if((g=MM_findObj(p7c[k]))!=null) {
       //alert(p7c[k]);
       b=(document.layers)?g:g.style;b.visibility="hidden";}}
     for(k=0; k<args.length; k++) {
      if((g=MM_findObj(args[k])) != null) {
       b=(document.layers)?g:g.style;b.visibility="visible";f=false;
       //////////////////////////////////////////////
       //////////////////////////////////////////////
       /////////set position/////////////////////////
       
      // marginLeft = document.body.style.margin-left;
       //alert(marginLeft);
      //	docTop = document.body.style.marginTop = 12;
     	//docLeft = document.body.style.marginLeft = 12;
    	
    	if(parseInt(document.body.style.marginLeft)) {
    		docLeft = parseInt(document.body.style.marginLeft);
    	}else{
    		docLeft = document.body.leftMargin;
    	}
    	if(parseInt(document.body.style.marginTop)) {
    		docTop = parseInt(document.body.style.marginTop);
    	}else{
    		docTop = document.body.topMargin;
    	}
    	//docTop = document.body.topMargin;
     	
    	//alert('top='+docTop+' '+'left='+docLeft);
    	//alert(parseInt(document.body.style.marginLeft));
      	w = MM_findObj(args[1]);
        //alert(w);
        X_pos = findPosX(w);//+Number(docLeft);//+10;
    	//alert(w.offsetHeight);
    	Y_pos = findPosY(w)+Number(w.offsetHeight);//+Number(docTop);//+33;
    	//Y_pos += 200;
    	//X_pos = 400;
    	drop_width = b.width;
    	d_w = drop_width.split('p');
    	drop_width = d_w[0];
    	//alert(drop_width);
    	right_side = Number(X_pos)+Number(drop_width);
    	///////////get doc width and hieght////////////
    	//opera Netscape 6 Netscape 4x Mozilla 
    	if (window.innerWidth || window.innerHeight){ 
    		docwidth = window.innerWidth; 
    		docheight = window.innerHeight; 
    	} 
    	//IE Mozilla 
    	if (document.body.clientWidth || document.body.clientHeight){ 
    		docwidth = document.body.clientWidth; 
    		docheight = document.body.clientHeight; 
    	} 
    	//alert(docwidth);
    	//////////////////////////////////////////////
    	if(right_side>docwidth){
    		over = Number(drop_width) - Number(w.offsetWidth);
    		X_pos -= over;
    	}
    	// SET THE STYLES
    	//b=(document.layers)?g:g.style;b.left=X_pos;f=false;
    	//b=(document.layers)?g:g.style;b.top=Y_pos;f=false;
    	b.left=X_pos;
    	b.top=Y_pos;
    	//alert(b);
    	//alert('X_pos= '+X_pos+' left= '+b.left+' Y_pos= '+Y_pos+' top= '+b.top);
    	/*
        b=(document.layers)?g:g.style;b.left=470;f=false;
    	b=(document.layers)?g:g.style;b.top=470;f=false;
    	*/
    	///////////////////////////////////////////
    	///////////////////////////////////////////
    	///////////////////////////////////////////
       for(j=0;j<p7c.length;j++) {
        if(args[k]==p7c[j]) {f=true;}}
      if(!f) {p7c[p7c.length++]=args[k];}}}
    }
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by halfasleeps
    Code:
    function P7_autoLayers() { 
    
     var g,b,k,f,args=P7_autoLayers.arguments;
     if(!document.p7setc) {p7c=new Array();document.p7setc=true;}
     for(k=0; k<p7c.length; k++) {
    // w = MM_findObj(args[1]);
     //alert(p7c[k]+','+args[1]);
     //if(p7c[k] != args[1]){
     for(HH=0;HH<=8;HH++){
     if(p7c[k] == noHide[HH]){
     //alert(noHide[HH]);
     p7c[k] = 'bob';
     }}
      if((g=MM_findObj(p7c[k]))!=null) {
       //alert(p7c[k]);
       b=(document.layers)?g:g.style;b.visibility="hidden";}}
     for(k=0; k<args.length; k++) {
      if((g=MM_findObj(args[k])) != null) {
       b=(document.layers)?g:g.style;b.visibility="visible";f=false;
       //////////////////////////////////////////////
       //////////////////////////////////////////////
       /////////set position/////////////////////////
       
      // marginLeft = document.body.style.margin-left;
       //alert(marginLeft);
      //	docTop = document.body.style.marginTop = 12;
     	//docLeft = document.body.style.marginLeft = 12;
    	
    	if(parseInt(document.body.style.marginLeft)) {
    		docLeft = parseInt(document.body.style.marginLeft);
    	}else{
    		docLeft = document.body.leftMargin;
    	}
    	if(parseInt(document.body.style.marginTop)) {
    		docTop = parseInt(document.body.style.marginTop);
    	}else{
    		docTop = document.body.topMargin;
    	}
    	//docTop = document.body.topMargin;
     	
    	//alert('top='+docTop+' '+'left='+docLeft);
    	//alert(parseInt(document.body.style.marginLeft));
      	w = MM_findObj(args[1]);
        //alert(w);
        X_pos = findPosX(w);//+Number(docLeft);//+10;
    	//alert(w.offsetHeight);
    	Y_pos = findPosY(w)+Number(w.offsetHeight);//+Number(docTop);//+33;
    	//Y_pos += 200;
    	//X_pos = 400;
    	drop_width = b.width;
    	d_w = drop_width.split('p');
    	drop_width = d_w[0];
    	//alert(drop_width);
    	right_side = Number(X_pos)+Number(drop_width);
    	///////////get doc width and hieght////////////
    	//opera Netscape 6 Netscape 4x Mozilla 
    	if (window.innerWidth || window.innerHeight){ 
    		docwidth = window.innerWidth; 
    		docheight = window.innerHeight; 
    	} 
    	//IE Mozilla 
    	if (document.body.clientWidth || document.body.clientHeight){ 
    		docwidth = document.body.clientWidth; 
    		docheight = document.body.clientHeight; 
    	} 
    	//alert(docwidth);
    	//////////////////////////////////////////////
    	if(right_side>docwidth){
    		over = Number(drop_width) - Number(w.offsetWidth);
    		X_pos -= over;
    	}
    	// SET THE STYLES
    	//b=(document.layers)?g:g.style;b.left=X_pos;f=false;
    	//b=(document.layers)?g:g.style;b.top=Y_pos;f=false;
    	b.left=X_pos;
    	b.top=Y_pos;
    	//alert(b);
    	//alert('X_pos= '+X_pos+' left= '+b.left+' Y_pos= '+Y_pos+' top= '+b.top);
    	/*
        b=(document.layers)?g:g.style;b.left=470;f=false;
    	b=(document.layers)?g:g.style;b.top=470;f=false;
    	*/
    	///////////////////////////////////////////
    	///////////////////////////////////////////
    	///////////////////////////////////////////
       for(j=0;j<p7c.length;j++) {
        if(args[k]==p7c[j]) {f=true;}}
      if(!f) {p7c[p7c.length++]=args[k];}}}
    }
    Is that code also supposed to be readable by humans?
    Quote Originally Posted by codecrazy
    Code:
    if(window.event){	// then browser is IE				
         alertDiv.style.top = window.event.clientY + 'px';   // IE Event Model has event as a global object not a parameter
         alertDiv.style.left = window.event.clientX + 'px';	// passed to the event handler.  Must reference with 'window.'
    } else {
         alertDiv.style.top = event.clientY + 'px'; // Mozilla passes a new event object as a parameter to the event handler
         alertDiv.style.left = event.clientX + 'px'; // and does not reference the object as a child of the window object.						
    }
    No need to repeat code:
    Code:
    if(!oEvent) var oEvent = window.event;
    alertDiv.style.top = oEvent.clientY + "px";
    alertDiv.style.left = oEvent.clientX + "px";

  6. #6
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Is that code also supposed to be readable by humans?

    thats why i didnt show it in my first post


    i tried this:
    Code:
    clientY = Y_pos; //set clientX and clientY to
    clientX = X_pos; //X_pos and Y_pos 
    if(!oEvent) var oEvent = window.event;
    QQ = MM_findObj(args[0]); //the first argument is the div tag with the styles
    QQ.style.top = oEvent.clientY;
    QQ.style.left = oEvent.clientX;
    with that IE stull kinda works but its not as accurate as it was before and FF still doesnt do anything
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know really what you wanna do, or what args[0] is.

    You could always check whats wrong with your code using the JavaScript console in Firefox. It will tell you exactly where the error is, and it will even highlight the line where it wrent wrong. Tada!

  8. #8
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to put this in way more simpler terms b is the actual css style declaration object

    if i do this
    b.left=255;
    b.top=255;
    alert(b.top);


    IE says : 255px
    FF says : 0px

    theres no error tho either way.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  9. #9
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    solved!!!

    b.left = 255 + "px";
    b.top = 255 + "px";


    works in both IE and FF thanks guys!!!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •