Solved

why jquery doesn't work for firefox?

Posted on 2010-09-19
26
464 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
  • 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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 500 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

705 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now