Seite 1 von 1

Grafik beim Upload

Verfasst: So 18. Jan 2009, 02:11
von mobby
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?

Verfasst: So 18. Jan 2009, 14:11
von ThomasGoebe
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.

Verfasst: So 18. Jan 2009, 16:31
von mobby
Moin,
hast du mal ein Beispiel, wie das eingebaut wird?

Verfasst: So 18. Jan 2009, 18:21
von mobby
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

Verfasst: Mo 19. Jan 2009, 11:00
von deemes
Ü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. :)

Verfasst: Mo 19. Jan 2009, 11:21
von mobby
Moin,
stimmt, da muss noch gebastelt werden. Leider komme ich mit dem BlockUI garnicht klar. Verstehe nicht, wie ich das einbauen soll ;-)

Verfasst: Mo 19. Jan 2009, 11:34
von Liquid
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. ;-)

Verfasst: Mo 19. Jan 2009, 11:37
von deemes
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.

Verfasst: Mo 19. Jan 2009, 19:44
von ThomasGoebe
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.

Verfasst: Mo 19. Jan 2009, 20:01
von mobby
Moin,
vielen Dank für eure Tipps. Werde sie mir gleich mal reinziehen.
Das sind genau die Dinge, die in die community gehören...

Verfasst: Mo 19. Jan 2009, 21:45
von mobby
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.

Verfasst: Mo 19. Jan 2009, 21:53
von ThomasGoebe
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.

Verfasst: Mo 19. Jan 2009, 22:23
von mobby
Moin,
ne, daran auch nicht. Dachte evt. an der lightbox, aber auch nicht.

Verfasst: Mo 19. Jan 2009, 23:04
von deemes
Die Reihenfolge ist auf jeden Fall wichtig. Einen anderen Fehler sehe ich jetzt auch nicht. Wird keine JS-Fehlermeldung geworfen?

Verfasst: Mo 19. Jan 2009, 23:23
von mobby
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 ;-)