[thelist] content height / jquery mobile

DAVOUD TOHIDY dtohidy at hotmail.com
Wed May 15 08:08:46 CDT 2013


Hi There:

back to coding after a while I am coding a mobile site for my employer using html5 and jquery mobile

Content uses a menu containing two headings:
1-Services (contains several li elements)
2-Products (contains couple li elements)

The code uses same code as the "collapsible set with 5 sections" located at:
http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible-set.html

Jquery assigns a class of "ui-collapsible-collapsed" to the divs id="services" and id="products" when they are collapsed. 

If I set :
html, body {    
    height:100%;    
} 
.wrapper {
min-height: 100%;

Then the footer is at the bottom of the view port however there is a big gap between the menu and the footer when they are collapsed which is not pleasant especially in mobile devices.

When I remove the above css code there is the following problem:

1-Footer moves up close to the menu and body and html stretch to the view port's height.

I thought to solve this by adjusting the height for the div id="content" using javascript based on the content of the services and products links.

I am not sure if this is the correct approach since it seems that even if I can do the above then the issue will exist in some cases.

Questions:
1-What would you recommend to solve this issue? If java script then would it be possible to provide a solution please?

Since it uses jquery css file and some of my own so I did not add it. You can browse the above url.
I have added the code to jsfiddle for readability at: http://jsfiddle.net/Davoud/AZK7B/
I know the javascript that I have added has flaws and need to be fixed.

Logic is that:
I am using the class of "ui-collapsible-collapsed" of the divs id="services" id="products" to set the height for the div id="mycontent". So if there is this class then height 10em if not then 40em.

But the issue is that every time users clicks on the services link which causes the menu slid down and show the lists, jquery assigns the above class to the services div. So this class needs to be removed before replacing "notcollapsed" class with "collapsed" class.

2-Since it is going to be used for mobile devices should I use both onclick and touchstart events together (I want full functionality for both desktop and mobile users) and can I call them both events in the same element?

Thanks for your input.

Davoud


 		 	   		  


More information about the thelist mailing list