Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Radio button text align
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
shpaque
26.11.2013, 13:48:19
Witam ponownie, teraz mam kolejny schodek. Nie działa text align komendą 
[HTML] pobierz, plaintext 
  1. preview.style.align=this.value;
[HTML] pobierz, plaintext
przy focusie...

[HTML] pobierz, plaintext 
  1. #preview
  2. {
  3.    color: #000000;
  4.    font-size: 13px;
  5.    font-family: Arial;
  6.    font-weight: normal;
  7.    font-style: normal;
  8.    text-align: center;
  9.    text-decoration: none;
  10.    overflow: hidden;
  11. }
[HTML] pobierz, plaintext


tak wygląda css, a tabelka tak:

[HTML] pobierz, plaintext 
  1. <table style="position:absolute;width:366px;height:150px;overflow:hidden;" id="table">
  2. <tr>
  3. <td style="background-color:#FFFFFF;background-image:url(images/paper.jpg);background-repeat:repeat;background-position:center center;text-align:center;vertical-align:middle;height:150px;"><div id="preview" style="display: inline"></div>
  4. <div id="preview1b" style="display: inline"></div>
  5. <div id="preview2"></div>
  6. <div id="preview3"></div>
  7. <div id="preview4"></div>
  8. <div id="preview5"></div>
  9. <div id="preview6"></div>
  10. <div id="preview7"></div></td>
  11. </tr>
  12. </table>
[HTML] pobierz, plaintext


może znów nie idzie bo jest w kodzie jQuery?
nospor
26.11.2013, 13:53:24
A od kiedy elementy mają styl ALIGN? Widziales gdzies taki? Bo ja nigdzie.
shpaque
26.11.2013, 13:58:41
ale czego elementy? to styl diva, a css czyta "text-align" czy nie..? Już sam nie wiem
nospor
26.11.2013, 14:00:31
Sam sobie przeczysz i w ogole tego nie widzisz :/

Sam wiesz, ze jest styl TEXT-ALIGN ale w js radosnie przypisujesz sobie ALIGN i wielce zdziwiony ze nie dziala. Nawet jak ci mowie, ze nie ma ALIGN to nadal nie widzisz roznicy miedze
TEXT-ALIGN
ALIGN

.......


Tak w czystym js przypisuje sie styl TEXT-ALIGN a nie ALIGN
http://www.w3schools.com/jsref/prop_style_textalign.asp
shpaque
26.11.2013, 14:20:41
ach o ten babol chodzi że nie "textAlign" tylko samo 'align" - ale to nei w tym rzecz - nie działa - zostało samo align bo już 100 sposoób szukałem zeby to ruszylo

tak więc jest: 
[HTML] pobierz, plaintext 
  1. preview.style.textAlign=this.value;
[HTML] pobierz, plaintext
- takl dla ścisłości - i nie rusza... Dlaczego?
nospor
26.11.2013, 14:23:37
To pokaz kod z poprawnym textAlign, co bym wiedzial, ze pracujemy na tym samym kodzie.

No i pokaz gdzie wywolujesz to przypisanie, bo w tym kodzie tego nie widze. Skad mamy wiedizec czemu nie dziala, skoro wyrwales to przypisanie z kontekstu
shpaque
26.11.2013, 14:36:08 
[HTML] pobierz, plaintext 
  1. <link href="dark-hive/jquery.ui.all.css" rel="stylesheet" type="text/css">
  2. <link href="MiP_formularz.css" rel="stylesheet" type="text/css">
  3. <style type="text/css">
  4. #table
  5. {
  6.    border: 0px #C0C0C0 none;
  7.    background-color: transparent;
  8.    border-spacing: 0px;
  9. }
  10. #table td
  11. {
  12.    padding: 0px 0px 0px 0px;
  13. }
  14. #table td div
  15. {
  16.    white-space: nowrap;
  17. }
  18. #line1
  19. {
  20.    border: 1px #A9A9A9 solid;
  21.    background-color: #FFFFFF;
  22.    color :#000000;
  23.    font-family: Arial;
  24.    font-size: 13px;
  25.    text-align: left;
  26.    vertical-align: middle;
  27. }
  28. #line2
  29. {
  30.    border: 1px #A9A9A9 solid;
  31.    background-color: #FFFFFF;
  32.    color :#000000;
  33.    font-family: Arial;
  34.    font-size: 13px;
  35.    text-align: left;
  36.    vertical-align: middle;
  37. }
  38. #line3
  39. {
  40.    border: 1px #A9A9A9 solid;
  41.    background-color: #FFFFFF;
  42.    color :#000000;
  43.    font-family: Arial;
  44.    font-size: 13px;
  45.    text-align: left;
  46.    vertical-align: middle;
  47. }
  48. #line4
  49. {
  50.    border: 1px #A9A9A9 solid;
  51.    background-color: #FFFFFF;
  52.    color :#000000;
  53.    font-family: Arial;
  54.    font-size: 13px;
  55.    text-align: left;
  56.    vertical-align: middle;
  57. }
  58. #line5
  59. {
  60.    border: 1px #A9A9A9 solid;
  61.    background-color: #FFFFFF;
  62.    color :#000000;
  63.    font-family: Arial;
  64.    font-size: 13px;
  65.    text-align: left;
  66.    vertical-align: middle;
  67. }
  68. #line6
  69. {
  70.    border: 1px #A9A9A9 solid;
  71.    background-color: #FFFFFF;
  72.    color :#000000;
  73.    font-family: Arial;
  74.    font-size: 13px;
  75.    text-align: left;
  76.    vertical-align: middle;
  77. }
  78. #line7
  79. {
  80.    border: 1px #A9A9A9 solid;
  81.    background-color: #FFFFFF;
  82.    color :#000000;
  83.    font-family: Arial;
  84.    font-size: 13px;
  85.    text-align: left;
  86.    vertical-align: middle;
  87. }
  88. #preview
  89. {
  90.    display: inline;
  91. }
  92. #line1right
  93. {
  94.    position: absolute;
  95.    left: 509px;
  96.    top: 102px;
  97.    z-index: 30;
  98. }
  99. #line1left
  100. {
  101.    position: absolute;
  102.    left: 450px;
  103.    top: 100px;
  104.    z-index: 28;
  105. }
  106. #line1center
  107. {
  108.    position: absolute;
  109.    left: 477px;
  110.    top: 100px;
  111.    z-index: 29;
  112. }
  113. </style>
  114. <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  115. <script type="text/javascript" src="jquery.ui.core.min.js"></script>
  116. <script type="text/javascript" src="jquery.ui.widget.min.js"></script>
  117. <script type="text/javascript" src="jquery.ui.button.min.js"></script>
  118. <script type="text/javascript">
  119. $(document).ready(function()
  120. {
  121.    $("#wielkosc1").button();
  122.    $("#wielkosc2").button();
  123.    $("#wielkosc3").button();
  124.    $("#wielkosc4").button();
  125.    $("#wielkosc5").button();
  126.    $("#line1bold").button();
  127.    $("#line1italic").button();
  128.    $("#line1underline").button();
  129.    $("#print").button();
  130.    $("#line1bbold").button();
  131.    $("#line1bitalic").button();
  132.    $("#line1bunderline").button();
  133.    $("#line2bold").button();
  134.    $("#line2italic").button();
  135.    $("#line2underline").button();
  136.    $("#line3bold").button();
  137.    $("#line3italic").button();
  138.    $("#line3underline").button();
  139.    $("#line4bold").button();
  140.    $("#line4italic").button();
  141.    $("#line4underline").button();
  142.    $("#line5bold").button();
  143.    $("#line5italic").button();
  144.    $("#line5underline").button();
  145.    $("#line6bold").button();
  146.    $("#line6italic").button();
  147.    $("#line6underline").button();
  148.    $("#line7bold").button();
  149.    $("#line7italic").button();
  150.    $("#line7underline").button();
  151. });
  152. </script>
  153. <script>
  154. $(function(){
  155. $('#line1').keyup(function(){
  156.     $('#preview').html($('#line1').val());
  157. });
  158. });
  159. $(function(){
  160. $('#line1b').keyup(function(){
  161.     $('#preview1b').html($('#line1b').val());
  162. });
  163. });
  164. $(function(){
  165. $('#line2').keyup(function(){
  166.     $('#preview2').html($('#line2').val());
  167. });
  168. });
  169. $(function(){
  170. $('#line3').keyup(function(){
  171.     $('#preview3').html($('#line3').val());
  172. });
  173. });
  174. $(function(){
  175. $('#line4').keyup(function(){
  176.     $('#preview4').html($('#line4').val());
  177. });
  178. });
  179. $(function(){
  180. $('#line5').keyup(function(){
  181.     $('#preview5').html($('#line5').val());
  182. });
  183. });
  184. $(function(){
  185. $('#line6').keyup(function(){
  186.     $('#preview6').html($('#line6').val());
  187. });
  188. });
  189. $(function(){
  190. $('#line7').keyup(function(){
  191.     $('#preview7').html($('#line7').val());
  192. });
  193. });
  194. </script>
  195. <style>
  196. #preview
  197. {
  198.    color: #000000;
  199.    font-size: 13px;
  200.    font-family: Arial;
  201.    font-weight: normal;
  202.    font-style: normal;
  203.    text-align: center;
  204.    text-decoration: none;
  205.    overflow: hidden;
  206. }
  207. </style>
  208. </head>
  209. <body>
  210.    <div id="container">
  211.       <div id="wb_form">
  212.          <form name="form" method="post" action="" enctype="multipart/form-data" accept-charset="UTF-8" id="form">
  213.             <input type="radio" id="line1left" onfocus="preview.style.textAlign=this.value;return false;" name="line1" value="left">
  214.             <input type="radio" id="line1center" onfocus="preview.style.textAlign=this.value;return false;" name="line1" value="center" checked="">
  215.             <input type="radio" id="line1right" onfocus="preview.style.textAlign=this.value;return false;" name="line1" value="right">
  216.              <table id="table">
  217.                <tr>
  218.                   <td id="wb_uid42"><div id="preview"></div>
  219.                      <div id="preview1b"></div>
  220.                      <div id="preview2"></div>
  221.                      <div id="preview3"></div>
  222.                      <div id="preview4"></div>
  223.                      <div id="preview5"></div>
  224.                      <div id="preview6"></div>
  225.                      <div id="preview7"></div></td>
  226.                </tr>
  227.             </table>
  228.             <input type="button" id="print" onclick="window.print();return false;" name="print" value="wydrukuj podgląd">
  229.          </form>
  230.       </div>
  231.    </div>
  232. </body>
  233. </html>
[HTML] pobierz, plaintext



trochę musiałem okroić ale jest
nospor
26.11.2013, 14:45:20
Nigdzie nie widze, bys deklarowal obiekt/zmienną preview wiec niby czemu ma ci dzialac?

Zainteresuj sie FIREBUG dla FIREFOX to tak glupie bledy bedziesz mial podane na tacy.
shpaque
26.11.2013, 14:48:12
196 i 218
nospor
26.11.2013, 14:49:50
Linie co podales to jest kod CSS i HTML ktory ma sie nijak do kodu js, wktorym uzywasz niezdefiniowanej zmiennej preview....

shpaque
26.11.2013, 14:52:46
213-215 - tu jest
nospor
26.11.2013, 14:56:34
Tam jest odwolanie do zmiennej preview, ktorej poraz kolejny ci tlumacze, nigdzie nie zdefiniowales....
shpaque
26.11.2013, 15:01:09
to zapytam tak: dlaczego w całym kodzie wszystko chodzi na poleceniu "onfocus"... i tak dalej analogicznie, a tu muszę definiować zmienną?

całośc do podejrzenia na: http://smusic.nazwa.pl/_test/mip/


na validatorze w3schools dałem taki sam kod: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.  
  7. <div id="p1">This is some text.</div>
  8. <br>
  9.  
  10. <input type="radio" onfocus="p1.style.textAlign='center'">Align text
  11.  
  12. </body>
  13. </html>
[HTML] pobierz, plaintext
i wszystko hula jak trzeba i nie trzeba definiować zmiennej

no właśnie i tutaj zaczynają się schody bo z jakiegoś powodu u mnie to nie działa...

JUŻ MAM POSTĘP!
Nie działa tylko w div'ach inline - w takim razie jak można to obejść?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.