Templates & Sprachen » Chat mobil ausblenden!

22.10.2018 15:29

Wolfgang
#1 Chat mobil ausblenden!

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

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge

Antworten

Beitrag melden

#2

22.10.2018 16:12 (zuletzt bearbeitet: 22.10.2018 16:17)

Mike48
#2 RE: Chat mobil ausblenden!

Mike48

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?

www.friends-of-xobor.de (621181 - V4 Template)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#3

22.10.2018 16:47 (zuletzt bearbeitet: 22.10.2018 16:50)

Mike48
#3 RE: Chat mobil ausblenden!

Mike48

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 
   */
  });
});
 

www.friends-of-xobor.de (621181 - V4 Template)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#4

22.10.2018 16:55 (zuletzt bearbeitet: 22.10.2018 16:55)

Mike48
#4 RE: Chat mobil ausblenden!

Mike48

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

www.friends-of-xobor.de (621181 - V4 Template)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#5

22.10.2018 17:30 (zuletzt bearbeitet: 22.10.2018 17:33)

Mike48
#5 RE: Chat mobil ausblenden!

Mike48

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>
 

www.friends-of-xobor.de (621181 - V4 Template)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#6

22.10.2018 20:38 (zuletzt bearbeitet: 22.10.2018 20:42)

Wolfgang
#6 RE: Chat mobil ausblenden!

Wolfgang

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

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge

Antworten

Beitrag melden

#7

22.10.2018 21:45

Mike48
#7 RE: Chat mobil ausblenden!

Mike48

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>
 