• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

why jquery doesn't work for firefox?

hi, I wrote this code to change something when a height of some div tag is changed
but this code is working ok with internet explorer, but not in firefox,

here is my code:

 
$("#products_right_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            if (div_right_height > div_left_height)
                $('#products_spliter').css('height', div_right_height);
            else
                $('#products_spliter').css('height', div_left_height);
        });
        $("#products_left_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            if (div_right_height > div_left_height)
                $('#products_spliter').css('height', div_right_height);
            else
                $('#products_spliter').css('height', div_left_height);
        });

Open in new window


so any idea what shall I do to make it working in firefox?
0
njgroup
Asked:
njgroup
  • 12
  • 11
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
Please show a working example including doctype and remember to add "px" to css - especially for Fx

$('#products_spliter').css('height', div_right_height+"px");
0
 
kadabaCommented:
how about $('#products_spliter').height(div_right_height) without any px.
0
 
Michel PlungjanIT ExpertCommented:
Why without px? Does jQuery add it for you?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
kadabaCommented:
http://api.jquery.com/height/

The height() does not need the px but css("height") needs px.
0
 
Michel PlungjanIT ExpertCommented:
because:

.height( value )
value An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).

 
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
0
 
kadabaCommented:
yes agreed.
0
 
njgroupAuthor Commented:
either I put +"px" or I don't, its not working for firefox
0
 
Michel PlungjanIT ExpertCommented:
so we need the whole picture.
0
 
njgroupAuthor Commented:
ok, where is the page published in my demo website:

http://isecutech.net/

now, there is treeview, please try to expand the tree until it has more height of left side content, you will see the middle line increase with height, so if left div (the tree view div) has height more than right one, then the middle div (which has line separator would take the height of left side div and vice versa is correct.

this is now working in ie, but not in firefox, so any idea what to do?
0
 
Michel PlungjanIT ExpertCommented:
Yeah, that should work,

only reason it might not is if the value returned are not correct.

I suggest:

1. change css('height',div_left_height) to .height(div_left_height) like suggested by Kadaba
2. alert(div_left_height) or better: show it in some debug span on the page

Also make sure to validate your page

For example
  background-color:#fff Transparent;
should be

background-color:#fff;
or
background-color: transparent;
which is default anyway


 
0
 
njgroupAuthor Commented:
I did it so, the same problem still ¿ontinues!

so what shall I do?

here is my code:



$("#products_right_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            if (div_right_height > div_left_height)
                $('#products_spliter').height(div_right_height); //$('#products_spliter').css('height', div_right_height);
            else
                $('#products_spliter').height(div_left_height); ;// $('#products_spliter').css('height', div_left_height);
        });
        $("#products_left_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            if (div_right_height > div_left_height)
                $('#products_spliter').height(div_right_height); //$('#products_spliter').css('height', div_right_height);
            else
                $('#products_spliter').height(div_left_height); ; // $('#products_spliter').css('height', div_left_height);
        });

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Please try

$("#products_right_div").bind("resize", function() {
  var div_right_height = $("#products_right_div").height();
  var div_left_height = $("#products_left_div").height();
alert("right div:"+div_right_height+" > "+div_left_height+":"+(div_right_height > div_left_height));
  if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
  else $('#products_spliter').height(div_left_height);
});
$("#products_left_div").bind("resize", function() {
  var div_right_height = $("#products_right_div").height();
  var div_left_height = $("#products_left_div").height();
alert("left div:"+div_right_height+" > "+div_left_height+":"+(div_right_height > div_left_height));
  if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
  else $('#products_spliter').height(div_left_height);
});


or better:

$("#products_right_div").bind("resize", function() {
  var div_right_height = $("#products_right_div").height();
  var div_left_height = $("#products_left_div").height();
$("#someDebugSpan").html("right div:"+div_right_height+" > "+div_left_height+":"+(div_right_height > div_left_height));
  if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
  else $('#products_spliter').height(div_left_height);
});
$("#products_left_div").bind("resize", function() {
  var div_right_height = $("#products_right_div").height();
  var div_left_height = $("#products_left_div").height();
$("#someDebugSpan").html("left div:"+div_right_height+" > "+div_left_height+":"+(div_right_height > div_left_height));
  if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
  else $('#products_spliter').height(div_left_height);
});

and add a span somewhere

Open in new window

0
 
njgroupAuthor Commented:
thanks mplungjan,

I did try your second code, I have created span, the strange thing that I get the result of jquery line code which filling the html for span in ie only

$("#products_debug_span").html("left div:" + div_right_height + " > " + div_left_height + ":" + (div_right_height > div_left_height));

but not in firefox, it looks like the code stops working in some point above this line! but I dont know where!

I have re-published the code again, kindly, check it in: http://isecutech.net/
0
 
njgroupAuthor Commented:
the used code is:

$("#products_right_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            $("#products_debug_span").html("right div:" + div_right_height + " > " + div_left_height + ":" + (div_right_height > div_left_height));
            if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
            else $('#products_spliter').height(div_left_height);
        });
        $("#products_left_div").bind("resize", function() {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            $("#products_debug_span").html("left div:" + div_right_height + " > " + div_left_height + ":" + (div_right_height > div_left_height));
            if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
            else $('#products_spliter').height(div_left_height);
        });

Open in new window

0
 
njgroupAuthor Commented:
by the way, I did try it in google chrome too, it's not working neither!
0
 
Michel PlungjanIT ExpertCommented:
so some script kills the rest. Please look in the fx console
0
 
njgroupAuthor Commented:
I dont see anything not familiar, can you have a look please?
0
 
Michel PlungjanIT ExpertCommented:
Can you alert to see if the BIND command works at all?
0
 
njgroupAuthor Commented:
how to alert Bind?

sorry, I didn't get you clearly
0
 
Michel PlungjanIT ExpertCommented:
Solved!

Fx does not support the resize event for divs. Only window.

I changed to click instead and it almost worked. I will move it now to the end of the animate instead
0
 
Michel PlungjanIT ExpertCommented:
Here I think for the left menu.

<script language="javascript" type="text/javascript">
        function AfterClientToggle(node)
        {
            var div_right_height = $("#products_right_div").height();
            var div_left_height = $("#products_left_div").height();
            if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
            else $('#products_spliter').height(div_left_height);
        });

        }
    </script>
   
    <rad:RadTreeView
        ID="RadTreeView1"
        runat="server"
        AfterClientToggle="AfterClientToggle"/>
0
 
njgroupAuthor Commented:
thanks very much, I was thinking of this, but what if left div becomes more height than the right one?

there is no event for left div?!! because the function AfterClientToggle will be triggered only when client toggle the tree, and how if I load html content in left div which has more height?

0
 
Michel PlungjanIT ExpertCommented:
You need to add the same to the event that loads the right div to execute after the load
0
 
njgroupAuthor Commented:
I did not understand it clearly, you mean I have to add load event to the right div?

if so, it would be executed only one time when its loaded, and then I am just changing innerHTML property
0
 
Michel PlungjanIT ExpertCommented:
No I mean you have to find an event that you can add the resize code to. The telerik had one. Now you need a similar one for the ajax. A possible alternative is to start a monitor onclick and size the splitter while the divs change
0
 
njgroupAuthor Commented:
yes, I did it

I found two events for telerik treeview, one for node click (which responsible for changing the left div content), and the after finishing from tree expand (called, on animation end) which gives me the new height of right div,

and for both events, I have coded one small function of these lines:

  var div_right_height = $("#products_right_div").height();
  var div_left_height = $("#products_left_div").height();
  if (div_right_height > div_left_height) $('#products_spliter').height(div_right_height);
  else $('#products_spliter').height(div_left_height);

where the function is called by both events

thanks :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 12
  • 11
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now