#1

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Ich versuche den Google Kalender in Bootstrap einzubinden,was mir nur teilweise gelingt. Habt ihr eine Idee, wo ich noch ansetzen kann?

http://www.duhlendorf.com/termine/terminkalender/

Im Hochkantformat auf dem iPhone sieht es schit aus. Besser wäre die automatische Darstellung des Kalenders als Termine, wie es hier erklärt wird, wo ich aber nicht weiterkomme.

https://profromgo.com/blog/google-calendar-responsive/

Screenshot2017-02-1908.48.25.png

 

 

Ich verwende den Code (css):

[code]
/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/code]

HTML Absatz:

[code]

<div class="responsive-iframe-container">

<iframe .......................</iframe>

</div>

[/code]


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#2

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Wenn Du zwei verschiedene Ansichten darstellen willst, dann nimmst Du halt den Code, den Du am Desktop angezeigt haben willst und stellst unter "Sichtbarkeit" auf "Nur Desktop" und den Code, den Du am Smartphone angezeigt haben willst mit "Sichtbarkeit" auf "Nur Smartphone"...


Gruss

Walti

#3

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#4

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Sorry, wusste ich nicht...   :O

Für seinen Wunsch bräuchte er ja die normale Monatsdarstellung des Kalenders für den Desktop und die Agenda-Darstellung für das Smartphone.


Gruss

Walti

#5

Alain_D

Forum-Topsponsor  (370 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.brv-breitensport.de

#6

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Da hat's ja noch viiiiel mehr Möglichkeiten...!!!    :-) :D


Gruss

Walti

#7

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

@Alain:

Oh, pardon! :O Du hast natürlich vollkommen Recht. Dies ist meiner Aufmerksamkeit tatsächlich völlig entgangen, da mein persönlicher Fokus wie bekannt ja zu 99 % auf der Pro Web Linie liegt.

Thomas möge mir bitte verzeihen ... I)


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#8

Alain_D

Forum-Topsponsor  (370 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.brv-breitensport.de

Zitat von: Volker W.

...da mein persönlicher Fokus wie bekannt ja zu 99 % auf der Pro Web Linie liegt.

off Topic

@ Volker,

immer, wenn du dich zum Thema ProWeb äußerst, oftmals sogar nur beiläufig, muss ich an einen Klassiker meiner Jugend denken und innerlich schmunzeln:

"Wir befinden uns im Jahre 2017 n.Chr… Eine unbeugsame Gemeinschaft aus Galliern, Helvetiern und Stammesangehörigen am Oceanus Germanicus hört nicht auf, dem Eindringling Widerstand zu leisten. Und das Leben ist nicht leicht für den Administrator…"

 

#9

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

<offtopic>

Gratulation, Alain...

...der ist gut...!   ;-)    *grins*

 

</offtopic>


Gruss

Walti


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »webchaot« (19.02.2017, 18:14)
#10

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Zitat von: Alain_D

Und das Leben ist nicht leicht für den Administrator…

Yepp, genau so ist es! Und im Jahre 4 n. NG muß auch endlich mal was passieren.

Off-Topic Ende


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#11

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Zitat von: webchaot

..... stellst unter "Sichtbarkeit" auf "Nur Desktop" und den Code, den Du am Smartphone angezeigt haben willst mit "Sichtbarkeit" auf "Nur Smartphone"...

Danke für den Tipp. Das hat Thomas ja auch eingebaut, total übersehen. Funktioniert jetzt.

www.duhlendorf.com


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#12

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Wahrscheinlich hatte ich Deine Frage falsch verstanden, denn ich dachte, dass Du es anders wolltest.

Nun hast Du ja hier http://www.duhlendorf.com/termine/terminkalender/ am Desktop und am Smartphone dieselbe Ansicht, aber responsive ist das nicht... ;-)


Gruss

Walti

#13

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Danke für den Hinweis. Den Unterschied mit den Ansichten habe ich ja nun hinbekommen. Aber warum das ganze nicht 100% responsiv ist, begreife ich nicht? 

Habt ihr ne Idee, was da am Code noch falsch ist?


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#14

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

@Alain: Vielen Dank für deinen Post und Screenshot.

@Volker: kein Problem, du kannst j anicht jede einstellung aus dem FF kennen, erst recht wenn du Pro Web verwendest.

@Klaus: Welche Ansicht? Du bietest eine Datei zum Download an, mehr nicht.

By the Way:

1
2
3
4
5
<ul>
<li><a href="..." target="_blank"><strong>Terminkalender ...</strong></a></li>
<strong></strong>
<li>...</li>
</ul>

Ich vermute, dass du den BBCode falsch verwendest.


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#15

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

@Thomas:

Er verwendet diese beiden Ansichten...

1
2
3
4
5
6
7
8
9
10
<div class="visible-lg">
<span id="664617a7210feac07"></span>
<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?src=webmaster%40duhlendorf.com&ctz=Europe/Berlin" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div></div>
<div class="hidden-lg">
<span id="664617a7210feb608"></span>
<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=webmaster%40duhlendorf.com&ctz=Europe/Berlin" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div></div>

 

 

@Klaus:

Versuche es mal mit dem Google Code ohne Drucken und ohne Tabs...


Gruss

Walti

#16

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Sorry Thomas und Walti,

hatte gerade parallel experimentiert und die Kalender ausgeblendet.


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »Merlin2504« (20.02.2017, 08:55)
#17

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Na dann werde ich wohl besser pausieren...   ;-)


Gruss

Walti

#18

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Nach vielem experimentieren habe ich jetzt folgende Codes. Das Einzigste was mir jetzt auffällt, bei der Hochkant-Handy-Ansicht muss ich die Höhe noch definieren.

Wo muss ich das eintragen? In die css oder im HTML Absatz?

http://www.duhlendorf.com/termine/terminkalender/

 

css
.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
 
.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

  

html absatz auf Desktop größer als 1200 px anzeigen
<div class="responsive-iframe-container"> <iframe src="https://calendar.google.com/calendar/embed?src=webmaster%40duhlendorf.com&ctz=Europe/Berlin"></iframe> </div>

 

html absatz auf Desktop größer als 1200 px verstecken
<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=webmaster%40duhlendorf.com&ctz=Europe/Berlin"></iframe>
</div>

 


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Merlin2504« (20.02.2017, 10:01)
#19

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Ich versteh' nicht ganz was Du jetzt mit der Höhe willst...?

Wahrscheinlich meinst Du die Tatsache, dass Du eine 16:9 Einstellung hast, weil Du diesen Code möglicherweise auch für das iFramen von Videos nutzt...?

 

P.S.

Was hat es eigentlich mit

1
2
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed

am Hut, denn dazu gibt's bei Dir ja keinen Container...?


Gruss

Walti

#20

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Anweisungen für eine neue Klasse anzulegen ist im Übrigen unnötig zusätzliches CSS, denn ähnliche Klassen liefert Bootstrap von Haus aus mit, siehe hier.


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#21

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Viieeelllen Dank Thomas !!!!

Das es so einfach geht, das war mir  (und vielen anderen) nicht bewusst. Habe jetzt die Codes eingefügt und es funktioniert.

Habe gleich alle Videos, Blätterkataloge und den Kalender korrigiert. In der Sidebar überlege ich nur noch ob ich doch wieder weglasse, da er im Hochkant auf dem Handy nicht so schön aussieht.

Demnächst teste ich die Codes auch für Bildergalerien von JAlbum.smile_16.png

 

16:9 für Videos und 4:3 für den Kalender
<!-- 16:9-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
 
<!-- 4:3-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

 


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

1123 Aufrufe | 21 Beiträge