?
Solved

why jquery doesn't work for firefox?

Posted on 2010-09-19
26
Medium Priority
?
475 Views
Last Modified: 2012-05-10
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
Comment
Question by:njgroup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 11
  • 3
26 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33712421
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
 
LVL 22

Expert Comment

by:kadaba
ID: 33713733
how about $('#products_spliter').height(div_right_height) without any px.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33714091
Why without px? Does jQuery add it for you?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 22

Expert Comment

by:kadaba
ID: 33714103
http://api.jquery.com/height/

The height() does not need the px but css("height") needs px.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33714112
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
 
LVL 22

Expert Comment

by:kadaba
ID: 33714122
yes agreed.
0
 

Author Comment

by:njgroup
ID: 33716450
either I put +"px" or I don't, its not working for firefox
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33716505
so we need the whole picture.
0
 

Author Comment

by:njgroup
ID: 33722086
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33722720
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
 

Author Comment

by:njgroup
ID: 33723216
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33723291
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
 

Author Comment

by:njgroup
ID: 33723523
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
 

Author Comment

by:njgroup
ID: 33723525
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
 

Author Comment

by:njgroup
ID: 33723547
by the way, I did try it in google chrome too, it's not working neither!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33725470
so some script kills the rest. Please look in the fx console
0
 

Author Comment

by:njgroup
ID: 33726130
I dont see anything not familiar, can you have a look please?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33726162
Can you alert to see if the BIND command works at all?
0
 

Author Comment

by:njgroup
ID: 33729479
how to alert Bind?

sorry, I didn't get you clearly
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33731823
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33731904
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
 

Author Comment

by:njgroup
ID: 33735373
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33735588
You need to add the same to the event that loads the right div to execute after the load
0
 

Author Comment

by:njgroup
ID: 33739592
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 33740935
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
 

Author Comment

by:njgroup
ID: 33752232
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

Featured Post

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question