Chat mobil ausblenden!

22.10.2018 15:29
#1
avatar
User

Hallo zusammen,
meine Gedanke war, den Foren-Chat nur für mobile Endgeräte auszublenden,
finde aber keine funktionierende Lösung!

1. Nehme ich die Class ".disconneced" und ".connected", lässt sich der Chat über die normale CSS ausblenden!
2. Mit dem folgenden Script, mit dem ich auch andere Funktionen ausblende, kann ich den Chat nicht ausblenden!

Wo liegt der Fehler?
Wer kann da helfen?
Oder gibt es einen besseren Weg den Chat mobil auszublenden?

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
 
function isMobile(){
return navigator.userAgent.match(/(iPhone|iPod|iPad|blackberry|android|Kindle|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|fennec|Nintendo Wii|symbian|series60|bada)/i);
}
 
if(isMobile()){
$('.disconnected,.connected').css('display','none')
}
 
});
 



Habe noch eine andere Möglichkeit im Internet gefunden:
Ist das sinnvoll?
Funktioniert wohl nicht auf jedem Endgerät!

1
2
3
4
5
6
7
8
 
$(document).ready(function(){
 
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
//mobil!
} else {
//nicht mobil!
}
});
 






Wer weiss weiter?
Gruß Wolfgang


 Antworten

 Beitrag melden
22.10.2018 16:12
avatar  Mike48
#2
avatar
User

Was soll da ausgeblendet werden?
In der mobilen Ansicht muss ich den Chat übers Menü anwählen, da finde ich keine bewegliche Box wie in beim Desktop.

Wenn man den Chat eröffnet hat minimiert, dann ist unten rechts eine kleine Box mit der Anzahl Beiträgen.
Die soll aber doch bestimmt nicht weg, oder?


 Antworten

 Beitrag melden
22.10.2018 16:47
avatar  Mike48
#3
avatar
User

Oder JS statt jQurey verwenden um auf des Ladeende der Seite zu warten. Dann ist jQuery geladen und kann verwendet werden.

1
2
3
4
5
6
7
 
document.addEventListener('DOMContentLoaded', function ( ) {
console.info('DOM is ready');
/*
* hier den Code mit jQuery einsetzen
*/
});
});
 


 Antworten

 Beitrag melden
22.10.2018 16:55
avatar  Mike48
#4
avatar
User

Ich finde die Klassen disconnected und connected nicht auf anhieb in der mobilen Ansicht.
Was sollen die bewirken?


 Antworten

 Beitrag melden
22.10.2018 17:30
avatar  Mike48
#5
avatar
User

Ich habe es wohl falsch verstanden.
Du meinst Desktop auf mobilen Geräten, und da den Chat ausblenden.

Hiermit wird die Chatbox unten rechts ausgeblendet.
Habe ich in der Kopfzeile getestet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
$(document).ready(function(){
 
function isMobile(){
return navigator.userAgent.match(/(iPhone|iPod|iPad|blackberry|android|Kindle|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|fennec|Nintendo Wii|symbian|series60|bada)/i);
}
 
if(isMobile()){
console.log("ist mobile")
$('#xChatBase').hide();
}else{
console.log("ist nicht mobile")
}
 
});
</script>
 


 Antworten

 Beitrag melden
22.10.2018 20:38
#6
avatar
User

Hallo Mike,
besten Dank!

Den Ansatz mit "userAgent" hatte ich verfolgt und auch "!important" eingesetzt, aber keine "class" und keine "ID" wollte den Chat bei mir ausblenden!
Vielleicht liegt es am veränderten Template!
Funktioniert komischerweise nur über die CSS!

Frank hat mich hier unterstützt.
Auch hier: Entwickler-Talk

1. Bei Einstellung der Breite unter "768px" wird der Chat dann auch in Tablets angezeigt!
2. Benutzt man "max-device-width", ist die Einstellung der Breite unabhängig von der "viewport-Einstellung"
3. Komischerweise funktioniert es bei mir nur mit ".disconnected{display:none !important}"

1
2
3
 
@media all and (max-device-width: 760px){
.disconnected{display:none !important}
}
 





Gruß
Wolfgang


 Antworten

 Beitrag melden
22.10.2018 21:45
avatar  Mike48
#7
avatar
User

Die Klasse disconnected finde ich nur im IE.

Im IE funktioniert aber auch mein Script.
Es gibt aber scheinbar einen Unterschied zwischen eingeloggt und eingeloggt.

Für Gäste ist die id xChatGuests zuständig.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
$(document).ready(function(){

function isMobile(){
return navigator.userAgent.match(/(iPhone|iPod|iPad|blackberry|android|Kindle|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|fennec|Nintendo Wii|symbian|series60|bada)/i);
}

if(isMobile()){
console.log("ist mobile")
$('#xChatBase, #xChatGuests').hide();
}else{
console.log("ist nicht mobile")
}

});
</script>
 


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!