DIV'yi CSS ve JavaScript'te görünmez yapın

Question

Ekranı hiçbiri olarak göstermediğim ve gizlenmeyecek görünürlük ayarlayarak bir DIV etiketini JavaScript'te görünmez hale getirmeyi başardım.

.invisible { 
    display: none; 
    visibility: hidden; 
} 

Ekran hiçbiri DIV kutusu boş sağlayacaktır ve görünürlük Görünmüyorsa sağlayacaktır gizli: Aynı zamanda bu sınıfın ile elde edilebilir. Bu yöntemdeki sorun, ekranı ayarladığınızda kaydırılabilir DIV'leri veya taşma içeriğiyle tekstüre ettiğimde: yok, bazı tarayıcılar bu öğeler için kaydırma konumunu unutacaklardır. Görüntüleme özelliğini kullanmadan DIV görünmez hale getirmenin daha iyi bir yolu var mı? Kaydırma pozisyonunu ve mümkünse böyle bir kaydı kaydetmek için JavaScript kullanmamayı tercih ederim.

DÜZENLEME:

.invisible { 
    visibility: hidden; 
    position: absolute; 
    top: -9999px; 
} 

.visible { 
    visibility: visible; 
    position: static; 
} 

Ben sol çalıştı: Ben sizin yardımınızla bunu çözmek başardı

, şu uygulanan -9999px, ancak bu IE'de dikey kaydırma çubuğunu genişletir .. Ayrıca textarea'mı başka bir DIV'ye de ekledim ve görünür/görünmez stillere uygulandım çünkü textarea kaydırma pozisyonunu kaybedecek. Bunu iPhone'umda Chrome, Firefox, IE ve Safari'de test ettim. Sadece bir not, textarea sarılı DIV FF yardım etmedi ve kaydırma çubuğu hala sıfırlama. Ama kaydırılabilir DIV'ler şimdi gayet iyi. Yardım ettiğin için teşekkür ederim!

Answer 1

Bu muhtemelen çalışacaktır:

.invisible { 
    position: absolute; 
    left: -9999px; 
} 

DÜZENLEME: İşlerin yok ederek diğer yollarını keşfetmeye HTML5 Demirbaş kodunda common helpers bir göz alacaktı.

Answer 2

Öğenin görünmez olmasını, ancak oluşturulmasını istiyorsanız, yalnızca visibility:hidden'u kullanabilirsiniz. display:none tamamen kaldırır ve bahsettiğiniz kaydırma davranışına neden olur.

Answer 3

JQuery hide() yöntemini kullanabilirsiniz. $ ('# DivID'). Hide(); veya $ ('. DivClass'). hide();

Answer 4

Düzenleme, görüntüleme: hiçbiri, oluşturma ağacından ve bu netherworld limbodan tamamen çıkar. Artık iyi tanımlanmış boyutları veya pozisyonu yok.

Kaydırma konumu için bir yer tutucusuna ihtiyacınız varsa, bir yer tutucu öğesi kullanmanızı öneririm. Bazı sıfır yükseklik DIV veya belki de <a name="something""></a> çalışırdı.

Answer 5

Sabit yükseklik ve genişlik kullanıyorum (yükseklik: 0; genişlik: 0;). Kenarlıkları, dolguları ve kenar boşluklarını ortadan kaldırmayı unutmayın.

Answer 6

Çözüme ulaşmak için jQuery'u kullanabilirsiniz.

$('#my_element').show() 
$('#my_element').hide() 

Ve siz div görünmez olur ve onun hala sayfasında mevcut olduğunu istiyorsanız, o zaman verimli hile kullanabilirsiniz: tamamen div göstermek/gizlemek isterseniz, sonra u kullanabilirsiniz

$('#my_element').css('opacity', '0.0'); // invisible Maximum 
$('#my_element').css('opacity', '1.0'); // visible maximum