Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Inhalte am Smartphone richtig verstecken
#1
Moin,

hat jemand eine Idee wie man einen Inhalt am Smartphone so versteckt, dass dieser nicht nur nicht sichtbar ist, sondern auch nicht ausgeführt wird.

Beispiel:

Ich habe dieses Tutorial gestern mal mit einem PDF in einem Iframe versehen, was ja prima geht und ich habe das Iframe auch am Smartphone ausgeblendet und anstelle dessen einen Link zum PDF gesetzt, denn am Smartphone kann man kein PDF im Iframe anzeigen lassen (das wird dann gar nicht dargestellt):

http://www.mobirise-tutorials.com/Formul...mular.html

... allerdings erkennt das Smartphone im Iframe, dass dort ein PDF geladen wird (auch wenn es via CSS versteckt wurde) und bietet entsprechend sogleich die installierten PDF-Reader an, was ich gerne verhindern würde. Diese sollen erst nach Klick auf den extra hierfür gesetzten Link angeboten werden.


.jpg  Screenshot_Samsung.jpg (Größe: 264,11 KB / Downloads: 11)


Meine jetzige CSS:

Code:
@media (min-width: 992px) {
  #zeigeLink {
    display: none;
  }
}
#myFrame {
  width: 90%;
  margin-bottom: 50px;
}
@media (max-width: 991px) {
  #myFrame {
    display: none;
    margin-bottom: 0px;
  }
}

meine jetzige Anzeige:

Code:
<p id="zeigeLink"><a href="http://www.mobirise-tutorials.com/Formular/PDF/Formular-Code.pdf" target="_blank" class="text-primary"><span class="mbri-mobile mbr-iconfont mbr-iconfont-btn"></span>Hier klicken um die PDF-Datei am Handy und mobilen Gerät zu betrachten</a>.</p></div>

<div class="row justify-content-center">
    <iframe id="myFrame" src="./PDF/Formular-Code.pdf" height="500"></iframe>
</div>

... auch die Bootstrap-Classes bewirken nichts anderes als meine CSS:

https://getbootstrap.com/docs/4.0/utilit...g-elements
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Hallo Tommy
hast du schon eine Abfrage im Script auf was für einem Betriebssystem/ Gerät die Seite gerade geladen wird?

Das wäre Schritt eins.
Code:
var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPod|iPad/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {
        return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
    }
};

Zweiter Schritt: Per JS Quellcode entsprechend ändern lassen. Diese funktion muss getriggert werden über das 1. Script die Abfrage des Betriebssystems/ Gerätes.

function detectDevice() {
    var result = 'No mobile device';
    if (isMobile.any()) {
        delIframe();
    }
    alert(result);
         
};
Code:
<script>
function delIframe() {
  var myobj = document.getElementById("myFrame");
  myobj.remove();
}
</script>

Dem Body tag mußt du nun noch die Function anhängen

Code:
<body onload="detectDevice()">
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Ich habe da mal zu Nof-resposiv-zeiten was gebaut.
Ist wahrscheinlich ähnlich Andys Idee
Hier in dem Fall ging es darum, das irgendwas auf einem Phone nicht mit fixed-cover angezeigt werden soll.
Wenn Du draus schlau wirst - gut.
Wenn nicht, muss ich nochmal drüber nachdenken

<script>

var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iPhone: function () {
return navigator.userAgent.match(/iPhone|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
}
};

function detectDevice() {
var iScreenBreite=0;
iScreenBreite = $(window).width();

if ( isMobile.iPhone() )
{
$('#IDParallax1').css('background-attachment', 'scroll');
$('#IDParallax2').css('background-attachment', 'scroll');

}
else
{

$('#IDParallax1').css('background-attachment', 'fixed');
$('#IDParallax1').css('backface-visibility', 'hidden');
$('#IDParallax2').css('background-attachment', 'fixed');
$('#IDParallax2').css('backface-visibility', 'hidden');

}

};

$(window).load(function () {
detectDevice ();
});
</script>
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
danke Euch - das ist mir etwas kompliziert und so auch nicht mit Mobirise umsetzbar, denn man kommt in MObirise weder an die HTML noch an die BODY Tags.

Entweder finde ich noch eine ganz einfache Lösung oder ich lasse es so, denn die Leute sind ja mit dem PC unterwegs wenn sie so etwas einbauen und mein Tutorial lesen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Na das ist in Mobirise ohne Probleme umsetzbar. Das einzigste nach dem publizieren musst du die Ergänzung am Body Tag im Editor machen.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Andy,

danke Dir. Das man HTML-Seiten händisch modifizieren kann ist mir schon klar :D

Alles was ich in Mobirise schreibe, muss aber für jeden über die Software auch einfach nachstellbar sein und nicht mit irgendwelchen Tricks - man kann ja nicht nach jedem Publizieren alles wieder händisch ändern. Es gibt Projekte, die publiziere ich 10 oder 20 mal am Tag :eek:

Ich habe hier etwas früh um Hilfe gebeten, denn ich glaube ich will es so lassen. Denn es ist ja "normal", dass diese Meldung am Handy erscheint und mit einem Fingerdruck ist sie ja auch wieder geschlossen.

Dennoch vielen Dank für Eure Mühe thumbs up


P.S.:

Ich könnte ja auch eine Seite speziell für das Handy machen, denn die Erkennung eines mobilen Gerätes habe ich ja schon hier vor 10 Jahren oder so hier beschrieben Smiling

http://www.nof-tutorials.com/Smartphone/

... ich dachte nur es gäbe eventuell eine CSS-Lösung, die ich nicht kenne.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!