Grafik beim Upload

Fragen zu JavaScript.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Grafik beim Upload

Beitragvon mobby » So 18. Jan 2009, 02:11

Moin,
ich habe mal eine Fragen an die Kenner von JS.
Ich lasse über ein Frontend Bilder hochladen. Wenn mal auch Hochladen klickt, soll wärend des Uploads eine Grafik angezeigt werden, ähnlich wie bei Lightbox.
Bis jetzt habe ich

Code: Alles auswählen

function set_wait(obj) {
  obj.value="Bitte warten...!";
  obj.disabled=true;
} 
und

Code: Alles auswählen

<input type="submit" onClick="set_wait(this)" value="Hochladen">
Hat jemand einen Tipp, wie ich eine Grafik anzeigen lassen kann, die Mitten auf dem Bildschirm zu sehen ist?
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

ThomasGoebe

Beitragvon ThomasGoebe » So 18. Jan 2009, 14:11

Hallo Mobby!

Ich missbrauche dafür gern das Jquery PlugIn blockui (http://malsup.com/jquery/block/). Beim onclick Ereignis des Buttons wird blockui ausgelöst und nach dem Neuladen der Seite (was ja beim Upload passiert), ist es dann wieder verschwunden.

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » So 18. Jan 2009, 16:31

Moin,
hast du mal ein Beispiel, wie das eingebaut wird?
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » So 18. Jan 2009, 18:21

Moin,
habe es jetzt so gelöst:

In der CSS:
Code: Alles auswählen
#upload{
position:fixed; top:150px; left:305px;right:305px;
height:360px;
background: url(images/overlay.png) repeat;
}

#upload p {
position:fixed; top:300px; left:395px;right:395px;
height:60px;
padding:10px 5px 5px 60px;
background: #fff url(images/loading.gif) no-repeat;
background-position:10px;
font-weight:bold;
}
Und im HTML
Code: Alles auswählen
<div id="upload" style="display:none"><p>Bitte warten.
Daten werden geladen.</p></div>

<p style="float:left;"><input type="submit" value="Bilder hochladen" onclick="this.form.submit=1;document.getElementById('upload').style.display='block';return true" />
</p>
Im FF geht es supi, nur im IE zeigt er keine Animation des gif´s
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

deemes

Beitragvon deemes » Mo 19. Jan 2009, 11:00

Über das CSS solltest Du noch mal drüber schauen. :) left & right zusammen macht keinen Sinn. Da wird immer die letzte Eigenschaft interpretiert. position:fixed funktioniert nicht in IE, was auch das Versagen in demselben erklären dürfte.

Ich würde es, wie von TgO vorgeschlagen, mit jQuery machen. Hier ist noch ein Mini-Plugin, aber BlockUI hat mich auch überzeugt. :)

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Mo 19. Jan 2009, 11:21

Moin,
stimmt, da muss noch gebastelt werden. Leider komme ich mit dem BlockUI garnicht klar. Verstehe nicht, wie ich das einbauen soll ;-)
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

Liquid
Senior Member
Beiträge: 1172
Registriert: Do 8. Jan 2004, 12:31
Wohnort: Karlsruhe

Beitragvon Liquid » Mo 19. Jan 2009, 11:34

Ich habs mir jetzt auch gerade mal angesehen und das sieht wirklcih sehr gediegen aus.

Die Einbindung sollte eigentlich relativ problemlos funktionieren.
Zum einen brauchst du die jQuery Libary welche die grundlegenden Funktionen bereitstellt.
Dann bracuhst du natürlich das BlockUI Plugin (sprich du bindest 2 JS Dateien ein, jQuery+BlockUI Plugin), danach kannst du die BlockUI Funktionen wie in den Demos verwenden.

Hoffe ich hab nix falsches gesagt, werde es aber gleich mal selber ausprobieren. ;-)
Gruß Liquid

deemes

Beitragvon deemes » Mo 19. Jan 2009, 11:37

Zunächst musst Du natürlich die jQuery-Lib einbinden. Ich mach das der Einfachheit immer über die Google-API:

Code: Alles auswählen

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
   /* <![CDATA[ */
   google.load("jquery", "1.2.6");
   /* ]]> */
</script>
Wenn Du das nicht magst, kannst Du Dir eine aktuelle Version von Googlecode oder von http://jquery.com/ runterladen und Seitenintern verlinken.

Jetzt brauchst Du noch das Plugin. Bei Dir auf den Webspace laden und nach dem Obigen Code einbinden.

Jetzt kannst Du per onsubmit einfach blockUI aufrufen.

Code: Alles auswählen

<form action="..." method="..." onsubmit="$.blockUI({ message: '<h1>[img]busy.gif[/img] Just a moment...</h1>' });return true;">[...]
Ungetestet, aber sollte so laufen.

ThomasGoebe

Beitragvon ThomasGoebe » Mo 19. Jan 2009, 19:44

Ich schließe mich meinen Vorrednern an und möchte es noch leicht erweitern:

1. Jquery einbinden
2. blockui einbinden (und ggf. Pfade in BlockUi anpassen, ich weiss gerade nicht genau, ob das bei BlockUi nötig ist oder über CSS geregelt wird)
3. gib Deinem Submit Button eine ID (z.B. id="formSubmit") -> machts leichter zu "finden"
4. eine eigene JS-Datei (z.B. scripts.js) erstellen und einbinden, darin dann

Code: Alles auswählen

  $(document).ready(function() {
    $('#formSubmit'').click(function() {
      $.blockUI({ message: '<h1>[img]busy.gif[/img] Just a moment...</h1>' })
    });
  });
M.E. ist es gut, auch bei kleinen Dingen JS aus dem HTML Markup rauszuhalten. Genau da hilft JQuery (und sicher auch andere Libs). Du musst das Element, welches ein Ereignis auslösen soll nur "identifizieren" und kannst dann getrennt vom HTML das JS erstellen und eben auch pflegen.

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Mo 19. Jan 2009, 20:01

Moin,
vielen Dank für eure Tipps. Werde sie mir gleich mal reinziehen.
Das sind genau die Dinge, die in die community gehören...
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Mo 19. Jan 2009, 21:45

Moin,
irgenwie nix...
Ich habe
Code: Alles auswählen
<script type="text/javascript" src="http://www.domain.de/include/js/jquery.blockUI.js?v2.12"></script>
<script type="text/javascript" src="http://www.domain/include/js/jquery-1.3.js"></script>
<script type="text/javascript" src="http://www.domain/include/js/js.js"></script>
und dann
Code: Alles auswählen
<input type="submit" id="formSubmit" value="Daten senden" />
in der js.js ist drin
Code: Alles auswählen
$(document).ready(function() {
$('#formSubmit').click(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: '.5',
color: '#fff'
} });

setTimeout($.unblockUI, 2000);
});
});
Aber wie gesagt, er macht nix. Hab auch schon in den anderen js geschaut, aber nix gefunden.
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

ThomasGoebe

Beitragvon ThomasGoebe » Mo 19. Jan 2009, 21:53

Hallo mobby!

Die Reihenfolge ist wichtig:

1. Jquery einbinden
2. blockui einbinden
3. eigene js

Du hast 1 und 2 vertauscht.

Übrigens:
Das unblockui kannst Du Dir eigentlich sparen, da ja die Seite nach dem Upload neu geladen wird.

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Mo 19. Jan 2009, 22:23

Moin,
ne, daran auch nicht. Dachte evt. an der lightbox, aber auch nicht.
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

deemes

Beitragvon deemes » Mo 19. Jan 2009, 23:04

Die Reihenfolge ist auf jeden Fall wichtig. Einen anderen Fehler sehe ich jetzt auch nicht. Wird keine JS-Fehlermeldung geworfen?

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Mo 19. Jan 2009, 23:23

Moin,
nö, es läd normal und fertig. Ich muss morgen mal in ruhe schauen bzw. einfach noch mal von vorn machen. Vielleicht klappt es dann ;-)
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)


Zurück zu „JavaScript“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste