Форум

Vasy · #1 (**permalink**) 15.03.2013, 15:25

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

Я не совсем силун в разбивке страницы.И когда рылся в инете как это зделать нашол только тег который отрисовует какойто край

<div></div>

ну или любой другой конструкции
я пытался создать

<div></div>

с заданой высотой шириной цветом и вставить ево между создание радиобаттонов но у меня неполучилось а получилось что тогда все создавалось дволь этой линии..

Помогите пожалуста правильно все разбить.

<html>

<head>



<meta charset="utf-8" />
	<title>Test</title>
	
<script type="text/javascript" src="jquery.js"></script>
	<script src="script.js" type="text/javascript"></script>

<script type="text/javascript">

							
var answer={}

		$(document).ready(function(){
			$.ajax({
				type: "GET",  
				url: "test.xml", 
				dataType: "xml", 
				success: vasa	
	 			
		});
		
	
		var button2 = document.getElementById("id1");
		button2.style.display='none';
		function vasa(xml) { 
				attemptsanswer=$(xml).find('attemptsanswer')[0].textContent; 
					
				 textanswer=$(xml).find('textanswer')[0].textContent;
				$('.cont2').append(''+textanswer+'');
				
				
				 textanswer=$(xml).find('textanswer')[1].textContent;
				$('.cont2').append(''+textanswer+'');
		        question=$(xml).find('question')[0].textContent;
				$('.cont1').append('<p><label><h4>'+question+'</h4></label></p>');
				question1=$(xml).find('question1')[0].textContent;
				$('.bond1').append('<p><label><h4>'+question1+'</h4></label></p>');
				TextButton=$(xml).find('TextButton')[0].textContent;
				$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				TextButton=$(xml).find('TextButton')[1].textContent;
				$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				TextButton=$(xml).find('TextButton')[2].textContent;
				$('.lolki1').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
				
				ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;

				
				var answers = $(xml).find('answer');
				
 
             		        answers.each(function(index){
									
                                var a = this.textContent;
								
								
                                var rating = +this.getAttribute('rating');
								
									var inputs = document.getElementsByTagName('input');
										if(inputs.length<2)
											{	
											
                                $('.cont').append('<input   name="group1"  type="radio">');
								            }
											else
											{
								$('.bond').append('<input   name="group2"  type="radio">');
										   }
                                answer[index] = rating;

				

				
 
                });
				
				
				
				
			
				var div = document.getElementById('id')
				var decoration = xml.querySelector('style');
				div.style.border = decoration.getAttribute('border');
				div.style.width = decoration.getAttribute('width'); 
				div.style.height = decoration.getAttribute('hight');
				div.style.padding = decoration.getAttribute('padding');
				//div.style.margin = decoration.getAttribute('margin');
				div.style.position = decoration.getAttribute('position');
				
				
			//	var p = document.getElementById('id1')
			//	var decoration = xml.querySelector('buttonstyle');
			//	p.style.position = decoration.getAttribute('position');
			//	p.style.width = decoration.getAttribute('width'); 
			//	p.style.height = decoration.getAttribute('hight');
			//	p.style.margin-left = decoration.getAttribute('marginleft');
			//	p.style.margin = decoration.getAttribute('margin');

		}
	
				
	 			
		});
		
		
			
				
	 			
		
			

												
var pressed=0;
					//	var button2 = document.getElementById("id1");
							//button2.style.display='none';
function checkAnswer() {
var error = false;
			
					   
            var inputs = document.getElementsByTagName('input');
            for(var i = 0; i < inputs.length ; i++){
               var checked = inputs[i].checked;
              var right = answer[i] == 1;			 			 
               if (checked !== right){
               error=true;
               break;
			   
               }
        }
								
					if(pressed<attemptsanswer)
							{
					
					  i = ++pressed;
								
									
                       }
					   else
					   {		
							
							pressed=0;
							var button = document.getElementById("button");
							button.style.display='none';
							var button1 = document.getElementById("id2");
							button1.style.display='none';
							var button2 = document.getElementById("id1");
							button2.style.display='';
							button2.onclick = function(event){							
							button.style.display='';
							button1.style.display='';
							button2.style.display='none';
							}
						

					   }
        output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
		
        return false;
		
		
    }
	
	
       
      
       
   

</script>

</head>
<body>


<form  onsubmit="return checkAnswer()">
	
	 
	 <table>
	 <div  class='cont2' style="margin-left:180px"></div>
	 <div id="id">	 
	 
	 
	 
	 
	 <hr>
	
	 <div  class='cont1' ></div>

	 <div align="center"   class='cont' ></div>
	 
	 <hr> 
	 <div class="bond1"></div>
	 <div align="center" class='bond'></div>
	 <hr>
	
	</div>
	</table>
	 
    <p style="margin-top:430px"><button id="button" type="submit"  ><div  class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>

    <p><textarea id="output" readonly></textarea></p>

</form>



</body>

</html>

jsgeek · #2 (**permalink**) 15.03.2013, 17:11

используй css свойство border

Цитата:

Я не совсем силун в разбивке страницы.

???. Так зачем в JS лезть если не знаешь хотя бы основ верстки?

Vasy · #3 (**permalink**) 15.03.2013, 17:19

я пробовал border проблема в том что бордер обрисовует какбы вокруг элемента либо же по его краю,а мне эо не совсем подходит.

И азы я знаю,но не углублялся.

И толькочто возникла ище одна проблемка.когда допустим страница не полностью развернута,при прокрутке сраници,не страница двигаетса а вот это

<p style="margin-top:430px"><button id="button" type="submit"  ><div  class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>

    <p><textarea id="output" readonly></textarea></p>

как это предотвратить?Если делаю вот так

<p style="margin-top:430px position:fixed"><button id="button" type="submit"  ><div  class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>

    <p style="margin-top:430px position:fixed"><textarea id="output" readonly></textarea></p>

То эти кнопки создаютса какбы за рамкой сверху страници.что с этим зделать?что бы при прокрутке страници когда она не на весь экран открыта все оставалось на месте?

jsgeek · #4 (**permalink**) 15.03.2013, 17:22

Сорри за критику, но если бы ты знал азы, то так бы не сделал:

<table>
	 <div  class='cont2' style="margin-left:180px"></div>
	 <div id="id">	 
	 <hr>
	 <div  class='cont1' ></div>
	 <div align="center"   class='cont' ></div>
	 <hr> 
	 <div class="bond1"></div>
	 <div align="center" class='bond'></div>
	 <hr>
	</div>
</table>

Vasy · #5 (**permalink**) 15.03.2013, 17:24

jsgeek,
Критика всегда уместна,без критики я бы думал что все круто.Не подскажеш как это сделать по другому(коректнее)?

rgl · #6 (**permalink**) 15.03.2013, 17:39

Vasy,
В тэг table непосредственно можно помещать только небольшое количество тэгов, как, напр. thead, tfoot, tbody, caption, но главное - tr (список не полный). Ни div ни hr непосредственно в table вставлять нельзя (но наверно можно в td и th)

Vasy · #7 (**permalink**) 15.03.2013, 17:48

я уже убрал table
Но всеже кто-то покажет как это все делать коректно?

Vasy · #8 (**permalink**) 15.03.2013, 18:14

скажите так будет корректно?

<body>


<form  onsubmit="return checkAnswer()">
	
	 
	 
<tr>
<td>
	 <div id="id">	 
	 
	 <div  class='cont2' style="margin-left:156px"></div>
	 
	 
	 <hr>
	
	 <div  class='cont1' ></div>
	

	 <div align="center"   class='cont' ></div>
	
	 <hr> 
	 <div class="bond1"></div>
	 <div align="center" class='bond'></div>
	 <hr>
	
	</div>
	</td>
	<td>
	<p style=" left:15px;position:relative"><button id="button" type="submit"  ><div  class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>

    <p style=" ;left:15px;position:relative"><textarea id="output" readonly></textarea></p>
	</td>
</tr>	

	
	 
    

</form>



</body>

rgl · #9 (**permalink**) 15.03.2013, 18:23

http://www.intuit.ru/department/inte...sics/10/4.html
Пример 7

Форум

Справочник

Discord чат

Курсы javascript