Beiträge von Diima

Diima · 19. Oktober 2017

Funktioniert einfach nur unglaublich gut!

Ich danke dir einfach unglaublich sehr! Und vor allem mein vollsten Respekt!

Gruß Dima

Diima · 18. Oktober 2017

Wuhu es geht Richtig cool!!!

Jetzt ist das Problem das es nur einseitige PDFs zu einem Bild macht. Habe gedacht ich kann das so lösen indem ich eine Variable anlege und diese durch eine While-Schleife jage und die hochzähle leider ist das glaub ich nicht richtig gewesen der Gedanke

Code

<canvas id="the-canvas" style="border: 1px solid black;"></canvas>
        <script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
        <script>
            var oReq = new XMLHttpRequest();
            oReq.open("GET", "Eingangsrechnungskontrolle.pdf", true);
            oReq.responseType = "arraybuffer";
            oReq.onload = function (oEvent) {
                PDFJS.getDocument({ data: oReq.response }).then(function getPdfHelloWorld(pdf) {
                    // Fetch the first page.
                    var zaehler = 1;
                    while(zaehler != 42){
                    pdf.getPage(zaehler).then(function getPageHelloWorld(page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        // Prepare canvas using PDF page dimensions.
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context.
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                
                    zaehler = zahler+1;
                    }
                });
            }
            oReq.send(null);
        </script>

Alles anzeigen

Diima · 17. Oktober 2017

Guten Abend,

ich habe das mal probiert. Leider klappt es nicht wirklich. Sobald ich eine vorhanden PDF anzeigen lasse wird weiterhin das ganze unter die PDF gemacht.

Da ich das ganze nicht hinkriege werde ich es jetzt einfach als Download anzeigen dann öffnet es sich immer alles lokal auf den PCs.

Werde aber weiter dran arbeiten vielleicht finde ich noch irgendwie eine Lösung.

Danke für deine Unterstützung. Wenn ich es hinkriege werde ich mal das hier reinstellen.

Gruß Diima

Diima · 15. Oktober 2017

Der HTML Teil ist genau gleich geblieben...

Und mein CSS-Teil habe ich so erweitert:

Code: CSS

.Support{
    padding: 1% 1% 1% 1%;
    background-image: url(#);
}

Diima · 15. Oktober 2017

Hey,

ja das stimmt ich habe es nur für Tests umbenannt gehabt und habe es dann hier eingetragen...

Das DropDown ist leider noch immer unter dem Object PDF.

Da wir aber im Betrieb fast nur IE11 nutzen sollte es da funktionieren...

Diima · 15. Oktober 2017

Ein wunderschönen guten Morgen,

ich habe jetzt das ganze Mal getestet.

Code: CSS - 1

 .SupportPDF{
    background: url(#);
}

Code: CSS - 2

.SupportPDF{
    background: url(../Cross/Support.pdf);
}

Ich habe beide Möglichkeiten getestet. Bei der ersten passiert gar nichts, alles bleibt wie es war.

Bei der zweiten erscheint einfach gar nichts nur mein Header und Footer...

Hab ich das falsch verstanden?

Ich habe mir auch den Beitrag angeschaut in dem Forum auf englisch... Dort steht ja man soll einen Transparenten Hintergrund drauf legen... Aber irgendwie klappt das auch nicht wirklich.

Gruß Diima

Diima · 14. Oktober 2017

Ich werde es mal heute Abend ausprobieren.

Sieht aber echt mega komisch aus und wieso das so geht, geht mir gerade noch nicht in mein Kopf.

Danke aber trotzdem schon mal

Diima · 13. Oktober 2017

Hier noch CSS (Musste einige Sachen wegschneiden damit ich das Posten kann):

CSS

a, .navbar-toggle,.dropdown-menu{
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; 
}
a:hover,
a:focus {
  color: darkgray;  
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.container,.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
    z-index: 5;
}
@media (min-width: 750px) { 
  .container {
    width: Auto;
  }
}
@media (min-width: 970px) {
  .container {
    width: Auto;
  }
}
@media (min-width: 1240px) { 
  .container {
    width: Auto; /*Die größe der Leiste */
    
  }
}
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.caret.right {
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-left: 4px solid;
  border-bottom: 4px solid transparent;
}
.dropdown {
  position: absolute;
  z-index: 3;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 9%;
  visibility: visible;
  padding: 5px 0;   
  margin: 2px 0 0;
  display: none;
  list-style: none;
  font-size: 14px;     
  background-color: #545454;
  border-radius: 0 0 0 4px;
  background-clip: padding-box;  
}
.dropdown-menu .dropdown-menu {    
  min-width: 160px;
  padding: 0;
  display: none;
  margin: 2px 0 0 40px;
  list-style: none;
  font-size: 14px;
  opacity: 0;
  background-color: #8a8a8a;
  border-radius: 0 0 0 4px;
  background-clip: padding-box;  
  z-index: 3;
}

@media (min-width: 1240px) { /* Ab dieser größe wird es eine andere Menüstruktur angezeigt*/
  .dropdown-menu {    
    top: 200%;
    left: 0;    
    visibility: hidden;
    float: left;
    display: block;
    min-width: 160px;
    padding: 5px 0;    
    opacity: 0;
  z-index: 3;
  }
  .dropdown-menu:before{
    content: "";
    position: absolute;
    top: -20px;
    left: 30%;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #545454 transparent; /* hier ist der kleine pfeil*/
  z-index: 3;
  }  

  .dropdown-menu .dropdown-menu {    
    top: -3px;
    left: 120%;
    display: block;
    float: left;
  z-index: 3;
    margin: 2px 0 0;
    visibility: hidden;
    opacity: 0;
  }
  .dropdown-menu .dropdown-menu:before{
    content: "";
    position: absolute;
    top: 5px;
    left: -20px;
    border-style: solid;
    border-width: 10px;
    border-color: transparent #8a8a8a transparent transparent;
  z-index: 3;
  }
  .dropdown:hover > .dropdown-menu {
    opacity: 1 ;
    top: 100% ;    
    visibility: visible ;
  z-index: 3;
  }
  .dropdown-menu .dropdown:hover > .dropdown-menu {
    opacity: 1;  
    top: -3px;
    left: 100%;
    padding: 5px 0;
    visibility: visible;
  z-index: 3;
  }
  .navbar-right .dropdown-menu {
    left: auto;
    right: 0;
  }  
  .navbar-right .dropdown-menu:before{
    content: "";
    position: absolute;
    top: -20px;
    left: auto;
    right: 30%;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #111 transparent;
  z-index: 3;
  } 
  .navbar {
    border-radius: 4px;
  }
  .navbar-header {
    float: left;
  }
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-left: 8.5%;
    margin-right: 1%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
  .navbar-toggle {
    display: none;
  }
  .navbar-nav {
    float: center;
    margin: 0 !important;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .navbar-nav.navbar-right:last-child {
    margin-right: -15px;
  }
  .navbar-right {
    float: right !important;
  }
    
    
  .navbar-nav > li > .dropdown-menu {
     margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
      width: inherit;
    text-align: center;
  }    
    
    
} 
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #111;
}
.dropdown-menu > li {
  position: relative;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  color: #fff;  
  line-height: 1.42857143;
  white-space: nowrap;
    
    cursor: pointer;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {      
  background: #111; /* beim drop down menü hovern*/
  color: #fff;
}
.open > .dropdown-menu {  
  display: block;
  opacity: 1;
}
.navbar {
    width: 100%; 
    font-size: 15px;  
    position: relative;
  background-color: #6d6d6d; /* background ganzer navi-leiste*/ 
}
.navbar-collapse {
  max-height: 400px;
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
  overflow-y: auto;
}

.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}
.navbar-brand {
  float: left;
  padding: 15px 15px;
  font-size:21px;
  line-height: 20px;
  height: 50px;
  color:#fff;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: none;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
.navbar-nav {
  margin: 7.5px -15px;
  list-style: none;
  padding-left: 0;
}
.navbar-nav > li {
  position: relative;
  display: block;
}
.navbar-nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  line-height: 20px;  
  overflow: hidden;
  text-align: center;
}

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
    width: inherit;
    text-align: center;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  background-color: transparent;
  color: #fff;
  -webkit-box-shadow: 0 -25px 0 #6a6a6a inset, 0 25px 0 #6a6a6a inset, 100px 0 0 #6a6a6a inset, -100px 0 0 #6a6a6a inset;
  -moz-box-shadow: 0 -25px 0 #6a6a6a inset, 0 25px 0 #6a6a6a inset, 100px 0 0 #6a6a6a inset, -100px 0 0 #6a6a6a inset;
  -ms-box-shadow: 0 -25px 0 #6a6a6a inset, 0 25px 0 #6a6a6a inset, 100px 0 0 #6a6a6a inset, -100px 0 0 #6a6a6a inset;
  box-shadow: 0 -25px 0 #6a6a6a inset, 0 25px 0 #6a6a6a inset, 100px 0 0 #6a6a6a inset, -100px 0 0 #6a6a6a inset;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #6a6a6a;
}
.navbar .navbar-toggle {
  border-color: #fff;  
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #6a6a6a;
  border-color: #6a6a6a;
}
.navbar .navbar-toggle .icon-bar {
  background-color: #fff;
}

.scaled{
    width:90%; 
    height: 100%;
}
.footer { 
  text-align: center;
  font-size: 15px;
  right: 0;
  left: 0;
  padding: 1rem;
  color: #ffffff; 
  bottom: auto;
  background-color: #6A6A6A;
  position:absolute;
  top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Alles anzeigen

Diima · 13. Oktober 2017

Sorry hast recht. Wer ich hiermit tun. Ich habe nur vorhin mit einem geredet der gemeint hat das liegt am IE11 das er irgendwie die zindex nicht richtig verarbeiten kann.

Trotzdem hier Code:

HTML

<!doctype html>
<html>
  <head>              
       <link rel="stylesheet" type="text/css" href="../css/style.css">
  </head>    
  <body>     
    <!-- Menü Include -->
    <!-- Seiteninhalt Responsive Menü
Erstellt: Dima
 -->

<!doctype html>
<html>
  <head>
    <title>Intranet</title>                                              
          <link rel="stylesheet" type="text/css" href="../css/reset.css">
          <link rel="stylesheet" type="text/css" href="../css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
           <link href="../CSS/icon.css" rel="stylesheet" type="text/css">
        <script src="../js/jquery.js"></script>
        <script src="../js/menu.js"></script>
  </head>    
  <body>
        <center><img class="scaled" src="../images/Header_Intranet_Black.png" alt="Testbild" /></center>
       <header class="container">
       <nav class="navbar">
           <div class="container-fluid">
               <div class="navbar-header"> 
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <a class="navbar-brand" href="../HauptD/index.php">Intranet</a>
               </div>    
               <div class="collapse navbar-collapse" id="menu">
                   <ul class="navbar-nav">
                       <li class="dropdown"><a href="#" class="dropdown-toggle">Ramsperger<b class="caret"></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="../InterneMitteilungen/InterneMitteilungen.php" type="application/pdf">Interne Mitteilungen</a></li>
                               <li><a href="../Aktuelles/aktuelles.php">Akutelles</a></li> 
                               <li><a href="../Aktuelles/Ansprechpersonen.php">Ansprechpartner</a></li>
                               <li><a href="../Aktuelles/Besprechungsraum.php">Termine Besprechungsraum</a></li>
                               <li><a href="../Sonstiges/Identifizierung_GwG.php">Identifizierung Geldwäsche-Gesetz</a></li>
                               <li><a href="../Sonstiges/Geldwaesche-Prozess.php">Geldwäsche-Prozess</a></li>
                               <li><a href="../Sonstiges/012016.php">Unfallregulierung</a></li> 
                               <li><a href="../Administration/filemanager.php">Administration</a></li> 
                               <li><a href="../Arbeitssicherheit_Gesundheitsschutz/AsGs.php">Arbeitssicherheit Gesundheitschutz</a></li>  
                           </ul>
                       </li>
                       <li class="dropdown"><a href="#" class="dropdown-toggle">CROSS-System<b class="caret"></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="../Cross/Support.php">HOTLINE - IS-Handel</a></li> 
                               <li><a href="../Cross/Eingangsrechnungskontrolle.php">Eingangsrechnungskontrolle</a></li> 
                               <li><a href="../Cross/Beschreibung_interne_GF_KD.php">Interne Geschäftsfälle KD</a></li>
                               <li><a href="../Cross/SalesHandbuch.php">Handbuch NW / GW</a></li>          
                               <li> <a href="../Cross/SKR51-ALL-interne_GeschaeftsfaelleNGW.php">Interne Geschäftsfälle NGW</a></li>           
                               <li><a href="../Cross/SMS_und_E-Mail.php">Benachrichtigung via SMS und E-Mail</a></li> 
                               <li> <a href="../Cross/ServiceHandbuch.php">Werkstattplaner Umsteiger</a> </li>    
                           </ul>
                       </li>
                   </ul>
               </div>
         </div>
         </nav>
      </header>
  </body>
</html>     
<!-- Seiteninhalt -->
      <object class="Support" data="../Cross/Support.pdf" type="application/pdf" ></object>

  </body>
</html>

Alles anzeigen

Vielleicht hat jemand eine Idee sonst werde ich mal umstrukturieren müssen.

Danke und Gruß

Diima

Diima · 12. Oktober 2017

Hallo zusammen,

ich programmiere gerade eine Intranet-Website für unser Unternehmen. Und eigentlich bin ich auch schon fertig nur ein Bug stört mich sehr.

Problem: Ich habe ein Dropdown-Menü was top funktioniert und responsiv ist. Öffne ich in Chrome oder Firefox mein Object bei dem eine PDF mit eingebettet ist, so kann das DropDown Menü ganz normal aufgemacht werden und man sieht alle unterpunkte. Mach ich das gleiche im IE11 so wird das gesamte Dropdown in den Hintergrund gelegt und ich kann keinen Punkt anklicken.

So sieht der Quellcode aus.

PHP

<!-- Seiteninhalt Cross Supoort
Erstellt: Dima
 -->
<!doctype html>
<html>
  <head>              
       <link rel="stylesheet" type="text/css" href="../css/style.css">
  </head>    
  <body>     
    <!-- Menü Include -->
    <?php
      include('../HauptD/menu.html');
    ?>
     <!-- Seiteninhalt -->
      <object class="Support" data="../Cross/Support.pdf" type="application/pdf" ></object>
    <!-- Footer Include -->
    <?php
      include('../HauptD/footer.html');
    ?>             
  </body>
</html>

Alles anzeigen

Natürlich habe ich mich informiert und schon seit Wochen auf der Fehlersuche aber leider wird überall nur gesagt das man den "z-index" anpassen sollte.

Das habe ich schon alles probiert aber leider ohne Erfolg. Man sieht nur das kleine Dreieck vom Dropdown im IE11 (siehe Dateianhänge) mehr aber auch nicht.

Ich hoffe mir kann irgendjemand helfen.

Mit freundlichen Grüßen

Diima

Beiträge von Diima

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen