Динамически загружаемый текст разрезается пополам - PullRequest
Новая
       7

Динамически загружаемый текст разрезается пополам

3 голосов
/ 06 октября 2011

Вместо того, чтобы пытаться описать это, я должен просто показать вам. Корейский текст загружается Ajax, когда страница готова. Английские варианты справа также загружаются таким образом, но они в порядке. Единственное различие, которое я вижу, состоит в том, что они являются DIV, тогда как корейский находится в SPAN, но мне нужно, чтобы он позволил изменить размер содержимого и в то же время оставаться в одном и том же месте. Я не смог добиться этого должным образом, когда он отображается как блок или даже с плавающей точкой слева. Кто-нибудь когда-либо испытывал это раньше?

enter image description here

Это CSS для SPAN #base, и он содержит SPAN #basewrap, который является контейнером 

#base
{
background-color: #B8BFCD;
font-size: 35.5pt;
padding: 29px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid;
}
#basewrap
{
width: 591px;
text-align: center;
position: relative;
left: -25%;
top: 51px;
height: 113px;
}


<div style="z-index:100;" id="baselabel"><span class="eng">Korean</span><span                                        class="kor">한국어 단어</span>
<div class="ttslink" onclick="$(&quot;#please&quot;).text(&quot;please be patient!&quo         t;).css(&quot;color&quot;,&quot;green&quot;).fadeIn(300).delay(1400).fadeOut(300);var kor =   $(&quot;#base&quot;).text();var tts = window.open(&quot;http://text-to- speech.imtranslator.net/speech.asp? url=WMfl&amp;dir=ko&amp;text=&quot;+kor,&quot;mywindow&quot;,&quot;location=no,status=no,scr ollbars=no,width=0,height=0&quot;);">
<img alt="korean audio" src="speaker.png"></div></div>
<span id="basewrap"><span id="base">목욕 수건</span></span>

А это код JQuery, который выполняет динамическую загрузку, группы слов извлекаются из MySQL с помощью скрипта PHP и отправляются обратно как JSON 

var getset = function (){
$("#qcount").text("/" + qcount);
$("#wincount").text(wincount); 
var percent = parseFloat(wincount/qcount*100).toFixed(0);
if (isNaN(percent)){percent = 0};
$("#percent").text("(" + percent + "%)");
$.ajax({
    type: "POST",
    url: "gamescript.php",
    data: "correct="+correct+"&win="+win+"&id="+baseid,
    success: function(json){
        var r = eval(json);
        if (r.length < 4){alert("there are no new words left! Reloading     page");location.reload();};
        $("#base").html(r[0]["korean"]).data("id", r[0]["id"]);
        random($("#option"));
        $(".option").each(function(){
            $(this).mouseover(function(){
            if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css({'background-color' : "#E5E8EE"});
            }).mouseout(function(){
                if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css("background-color", "#B7BECC");
            })
        });

        $("#option1").html(r[0]["english"]).data("id", r[0]["id"]).css("background- color","#B7BECC");
        $("#option2").html(r[1]["english"]).data("id", r[1]["id"]).css("background-color","#B7BECC");
        $("#option3").html(r[2]["english"]).data("id", r[2]["id"]).css("background-color","#B7BECC");
        $("#option4").html(r[3]["english"]).data("id", r[3]["id"]).css("background-color","#B7BECC");
        loading = 0;
        },
    error: function(){alert("error")}
});
}

Ответы [ 2 ]

1 голос
/ 09 октября 2011

Это решение, использующее div вместо span, который автоматически изменяет размер содержимого, а оболочка остается там, где он находится

http://jsfiddle.net/peter/2aLwB/

0 голосов
/ 09 октября 2011

спасибо, я на самом деле исправил проблему, превратив все значки в спрайты, потому что было изображение, превышающее промежуток, которое приводило к тому, что оно испортилось, теперь, когда все спрайты имеют заранее определенные размеры, все в порядке. Оглядываясь назад, я мог бы, вероятно, исправить это, просто указав размеры изображения в первую очередь. но это лучше со всех сторон:)

...