javascript and css problem

[avibitton]

Hi

 

i have a problem with javascript , im working on mobile orientation . so what i need to do its when its 90 degrees so show #div1 and hide #div2 and one changing again to 0 hide div1 and show div 2

that part of the code:

 

<script>

makeWeatherSided = function(){

myOrientation = window.orientation==90 || window.orientation==-90 ? 0 : 1;

var temp = myOrientation;

if( myOrientation){

$("#naming").removeClass("naming_sided");

$("#drop2").removeClass("drop_sided");

$("#drop").removeClass("drop_sided");

 

}

else {

$("#drop2").removeClass("drop_sided");

$("#drop").addClass("drop_sided");

$("#drop2").addClass("drop_sided");

$("#naming").addClass("naming_sided");

}

</script>

 

but from reason which i dont know , when im trying to hide the div drop2 .side_drop(thats the css when onside), so can someone help me with this?

 

another quastion i have ,my css of the div when onside look like that :

.small #drop2.drop_sided{

 

width: 430px;

height: 178px;

min-width:300px;

text-align:right;

background-color:#413839;

margin:0px auto;

border:1px solid orange;

margin-top:-214px;

display:none;

 

}

if i want to do action on this css how do i use it in jquery or javascript? , i tried to do something like :

$(" .small #drop2.drop_sided").fadeOut("slow");(didnt work of course) but i guess i cant use all this long name of css object , so how i can use the name of the css object in this case?

 

THX Avi .

[Adam]

Devices sometimes use landscape as the default orientation. That means 0 degrees on one device could be portrait, and on others 0 degrees is landscape. Some devices also allow you to turn the phone upside down which introduces a 180 degree orientation value. window.orientation is therefore very inconsistent. You're far better off avoiding trying to compensate for all these differences, and just working out the portrait/landscape orientation for yourself.

 

For example:

 

function getOrientation() {
    if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
        return 'landscape';
    }
    return 'portrait';
}

 

Using that, your code would become:

 

if (getOrientation() == 'landscape') {
    $("#naming").removeClass("naming_sided");
    $("#drop2").removeClass("drop_sided");
    $("#drop").removeClass("drop_sided");
} else {
    $("#drop2").removeClass("drop_sided");
    $("#drop").addClass("drop_sided");
    $("#drop2").addClass("drop_sided");
    $("#naming").addClass("naming_sided");
}

 

I don't really understand your actual question though. Not sure about the second either?

[avibitton]

thx for the answer , i did manage to solve problem 1 , and i think also might number 2 problem , what i meant in number 2 , its how to use subclasses , for example i have div thats his id : wrap

so for mobile css it will be .small #wrap , but since i need to do css for the sided(90 ) so i need to another subclass so it would be : .small #wrap .sided  . the sided subclass will be used only for the orientation of 90 . so what i asked its how to use this long id with its subclasses in jquery , should it will be like this :$(.small #warp.sided).dosomething(); if no, can you guide me how to use the id with its own subclasses.?

thx for your help .

 

Avi,

[Adam]

Sounds like you need to look into "responsive CSS".