Gå til innhold

[Løst] Trykk på knappen for å vise teksten

CasterAnd

Anbefalte innlegg

CasterAnd

CasterAnd

Skrevet
Skrevet

Jeg kom over en side hvor man kan trykke på en knapp. Når du trykket på den knappen, kom det opp "loading...." i en liten boks, og så kom det "done!". Dette var et eksempel på en "loading"-boks, og jeg fikk tak i koden og prøvde den ut. Den fungerte helt topp, bortsett fra at delen hvor "done" skulle vises, der kunne man ikke ha HTML. Finnes det slike bokser som man kan benytte seg av HTML hele veien? HTML-koden (som jeg fant på internett) er lagt som vedlegg.

 

- CasterAnd

loadingdotdotdot.html

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
CasterAnd

CasterAnd

Skrevet
  • Forfatter
Skrevet

Forstod ikke heeeeelt hva du mente, som sagt er jeg litt på trynet, men kort sagt: Jeg må

skrive noe i HTML i "ferdig!"-modulen. I begynnelsesmodulen ("Klikk på oppdater!") kan man skrive i HTML, p.g.a. at den er konfigurert slik i CSS-delen. Jeg prøvde å endre dette, men da fikk jeg plutselig to bokser...

Lenke til kommentar
CasterAnd

CasterAnd

Skrevet
  • Forfatter
Skrevet

Kan du poste kjeldekoden, og ein god beskrivelse på korleis du vil ha dét? Lettare å fortelje kva du eventuelt gjer feil då :)

Her er koden:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Loadingdotdotdot Example</title>


<style>

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 500px; margin: 0 auto 50px; }
h1 { margin: 30px 0 10px 0; font-weight: normal; font-size: 22px; }
p { margin: 0 0 8px 0; }
#randomArea { margin: 0 0 20px 0; border: 1px solid #ccc; height: 300px; height: 100px; padding: 10px; }

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2'></script>





<script type='text/javascript'>
(function($) {

   $.Loadingdotdotdot = function(el, options) {

       var base = this;

       base.$el = $(el);

       base.$el.data("Loadingdotdotdot", base);

       base.dotItUp = function($element, maxDots) {
           if ($element.text().length == maxDots) {
               $element.text("");
           } else {
               $element.append(".");
           }
       };

       base.stopInterval = function() {    
           clearInterval(base.theInterval);
       };

       base.init = function() {

           if ( typeof( speed ) === "undefined" || speed === null ) speed = 300;
           if ( typeof( maxDots ) === "undefined" || maxDots === null ) maxDots = 3;

           base.speed = speed;
           base.maxDots = maxDots;

           base.options = $.extend({},$.Loadingdotdotdot.defaultOptions, options);

           base.$el.html("<span>Laster oppdateringer<em></em></span>");

           base.$dots = base.$el.find("em");
           base.$loadingText = base.$el.find("span");

           base.$el.css("position", "relative");
           base.$loadingText.css({
               "position": "absolute",
               "top": (base.$el.outerHeight() / 2) - (base.$loadingText.outerHeight() / 2),
               "left": (base.$el.width() / 2) - (base.$loadingText.width() / 2)
           });

           base.theInterval = setInterval(base.dotItUp, base.options.speed, base.$dots, base.options.maxDots);

       };

       base.init();

   };

   $.Loadingdotdotdot.defaultOptions = {
       speed: 300,
       maxDots: 3
   };

   $.fn.Loadingdotdotdot = function(options) {

       if (typeof(options) == "string") {
           var safeGuard = $(this).data('Loadingdotdotdot');
		if (safeGuard) {
			safeGuard.stopInterval();
		}
       } else { 
           return this.each(function(){
               (new $.Loadingdotdotdot(this, options));
           });
       } 

   };

})(jQuery);</script>


<script type='text/javascript'>

$(function() {


$("button").click(function() {


$("#randomArea").Loadingdotdotdot({

"speed": 400,
                   "maxDots": 4
               });


// just for demo

setTimeout(function() { $("#randomArea").html 
("Ferdig!"); $("#randomArea").Loadingdotdotdot("Stop"); }, 5000);

           });

       });
   </script>
</head>

<body>


<div id="page-wrap">



	<div id="randomArea">
	  <p>Klikk oppdater!</p>
	</div>

<button>    Oppdater!   </button>
</div>

 

:hmm: 10 ganger enklere å lese den her enn i notisblokk :hmm:

Lenke til kommentar
Thomas.

Thomas.

Skrevet
Skrevet

Det er bare å skrive HTML det :)

 

For eksempel

html('<p style="font-size:30px;">Ferdig!</p>')

 

Eller hvis du vil vise det et annet sted på siden (annen div) så endrer du #randomArea til den diven.

$("#hei").html('<p style="font-size:30px;">Ferdig!</p>')

Lenke til kommentar
  • 2 uker senere...
CasterAnd

CasterAnd

Skrevet
  • Forfatter
Skrevet

Skal teste det så fort jeg får tid:D Skal ha et bilde i slutten der, men det funket ikke med det første:(

 

Men hu hei, nå må jeg se å komme i gang med oppgaven om datamaskinens historie! Jeg tenker alt for mye på "tragedien" i spotify free...

Lenke til kommentar
Occi

Occi

Skrevet
Skrevet

:hmm: 10 ganger enklere å lese den her enn i notisblokk :hmm:

 

Om du bruker notisblokka til Windows så anbefaler jeg deg å prøve ut noe som hjelper deg mer på vei med highlighting osv. Om du ikke har lyst å hive deg ut i større prosjekter som f. eks Netbeans er ypperlig for, i alle fall prøv Notepad++ som er et godt alternativ om du ikke driver med større prosjekter!

 

Det er heller uvanlig å kode noe i en editor som ikke har highlighting, vil jeg nå påstå :p Gir deg selv bare mer unødvendig arbeid.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...