Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2014, 21:30
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

не растягивается рамка!
доброво всем)
работаю в google chrom столкнулся с хреновой прорисовкой рамки дива

https://drive.google.com/file/d/0Bz5...ew?usp=sharing

причем если дивов[value_progect] больше 2х то рамка дергается, при появление инпутов, если больше 3-х, как в данном случае, то не стирается старая часть рамки!

ПРИЧЕМ В IE ВСЕ РАБОТАЕТ ПЛАВНО!


создание дивов
function create_project(data_project,Middle){
project_div=$('<center class="project"></center>').appendTo(Middle);
$('<div class="name_project">'+data_project.Name_project+'</div>')
.appendTo(project_div).toggle(
function(){edit_project()},
function(){cancel_project()}
);


$('<div class="value_progect"><div class="name_value_progect">Q mcr(mT)</div> <input class="mysql" name="Q_mcr" value='+1+'></div>').appendTo(project_div);
$('<div class="value_progect"><div class="name_value_progect">Q mcr(mT)</div> <input class="mysql" name="Q_mcr" value='+1+'></div>').appendTo(project_div);
$('<div class="value_progect"><div class="name_value_progect">Q mcr(mT)</div> <input class="mysql" name="Q_mcr" value='+1+'></div>').appendTo(project_div);
$('<div class="value_progect"><div class="name_value_progect">Q mcr(mT)</div> <input class="mysql" name="Q_mcr" value='+1+'></div>').appendTo(project_div);


анимация
function edit_project(){
$(".hole").hide("slow",
function(){
		$(".value_progect").show("slow",
	function(){
			$(".value_progect")
			.find(".mysql")
			.show("slow");
		})
	});



}

function cancel_project(){

$(".value_progect").find(".mysql").hide("slow",
	function(){
			$(".value_progect").hide("slow",
			function(){
				$(".hole").show("slow");
				})
		})
	};


css
.value_progect{display:none;width:550px}
.name_value_progect {text-align:left;width:400px;display:inline-block}
.value_progect input{display:none;width:100px;}

Последний раз редактировалось monax_111, 02.11.2014 в 21:32.
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2014, 21:41
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
а вы в курсе как работает toggle ?
да вроде) я конечно иногда использую метод тыка, но редко))
возможно я чего то о нем не знаю?
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2014, 21:57
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
ммммм....
http://jquery-docs.ru/events/toggle/
я конечно не эксперт, но документацию по jqeary пару раз читал!!!
там два вызова есть! один с функциями(мой случай), другой со скоростью(http://jquery-docs.ru/effects/toggle/)!!!!

Последний раз редактировалось monax_111, 02.11.2014 в 22:01.
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2014, 22:14
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
или ты предлагаешь заменить все hide и show на toggle???
можешь чуть яснее написать?
да и потом в описании сказано, что toggle использует методы show и hide так что по сути это одно и то же!
Ответить с цитированием
  #5 (permalink)  
Старый 02.11.2014, 22:16
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
не читайте на ночь старых сказок
я не понимаю, что ты имеешь в виду(
ты как то околесицей прошел толком ничего и не сказав(((
Ответить с цитированием
  #6 (permalink)  
Старый 02.11.2014, 22:30
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
toggle c кликами давно неработает -- оставлено только работа с видимостью элементов.

что делает ваш код одному вам известно - но навернякка его можно сократить.
ээээээ... спасибо за совет, но вопрос стоял не в сокращении кода, а в отрисовки рамки, в конкретном случае, метод toggle работает так как надо мне)

если у тебя есть конкретные предложения, с радостью послушаю, а пока что за 4 сообщения ты не на шаг не помог мне с проблемой! не обижайся только

Последний раз редактировалось monax_111, 02.11.2014 в 22:44.
Ответить с цитированием
  #7 (permalink)  
Старый 02.11.2014, 22:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,664

monax_111,
ок не буду вам мешать.
Ответить с цитированием
  #8 (permalink)  
Старый 02.11.2014, 23:44
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

Сообщение от рони Посмотреть сообщение
monax_111,
ок не буду вам мешать.
не поленился
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
		<meta charset="utf-8">
		
		<script language="javascript" type="text/javascript" src="/librarys/jquery-1.11.1.js"></script>
			<style type="text/css">
.project{z-index:2;padding:2px;margin-bottom:20px;padding:20px;border-color:SkyBlue; border-style:ridge; border-radius:5px; border-width: 5px;}
.hole{z-index:2;display:inline-block; vertical-align:top;padding:2px; margin-left:20px;margin-bottom:20px; width:250px;border-color:SkyBlue; border-style:ridge; border-radius:5px; border-width: 5px;}	

.value_progect{display:none;width:550px}
.name_value_progect {text-align:left;width:400px;display:inline-block;height:22px}
.value_progect input{display:none;width:100px;}
  </style>	
</head>

	<body>
		<center class="project"><div class="name_project">Демо Версия 4</div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div>
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div>
			<input class="mysql" name="Q_mcr" value="1"></div>
			<div class="value_progect">
				<div class="name_value_progect">Q mcr(mT)</div> 
			<input class="mysql" name="Q_mcr" value="1"></div>
		</center>
		<div class="hole">GREEN-1/23<div class="trap">БВ3-1</div><div class="trap">АВ1-2</div><div class="trap">АЧ3-2</div></div><div class="hole">Ерохинская<div class="trap">АВ2</div><div class="trap">БВ3</div><div class="trap">Pz</div></div><div class="hole">РИФ<div class="trap">AB-1</div><div class="trap">БВ2</div><div class="trap">АЧ3-2</div><div class="trap">ЮВ1</div></div><div class="hole">OPENOIL<div class="trap">AB3-2</div><div class="trap">PZ</div></div></div>
		
		<script type="text/javascript">
			function edit_project(){
				$(".hole:not(.hole:last)").hide("slow")
				$(".hole:last").hide("slow",
				function(){
					$(".value_progect:not(.value_progect:last)").show("slow")
					$(".value_progect:last").show(5000,
					function(){
						$(".value_progect").find(".mysql").show("slow");
					})
				});
			}
			

			$(document).ready(function () {
				$('.project').click(
				function(){edit_project()}
				);
				
				
				
			})
			
		</script>
	</body>
	</html>

Последний раз редактировалось monax_111, 02.11.2014 в 23:47.
Ответить с цитированием
  #9 (permalink)  
Старый 02.11.2014, 23:49
Аспирант
Отправить личное сообщение для monax_111 Посмотреть профиль Найти все сообщения от monax_111
 
Регистрация: 28.12.2012
Сообщений: 34

проблема все та же, при появлении последнего div рамка тупит и не хочет перерисовываться!
Ответить с цитированием
  #10 (permalink)  
Старый 03.11.2014, 00:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,664

monax_111,
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style type="text/css">
        .project {
            z-index: 2;
            padding: 2px;
            margin-bottom: 20px;
            padding: 20px;
            border-color: SkyBlue;
            border-style: ridge;
            border-radius: 5px;
            border-width: 5px;
        }
        .hole {
            z-index: 2;
            display: inline-block;
            vertical-align: top;
            padding: 2px;
            margin-left: 20px;
            margin-bottom: 20px;
            width: 250px;
            border-color: SkyBlue;
            border-style: ridge;
            border-radius: 5px;
            border-width: 5px;
        }
        .value_progect {
            display: none;
            width: 550px
        }
        .name_value_progect {
            text-align: left;
            width: 400px;
            display: inline-block;
            height: 22px
        }
        .value_progect input {
            display: none;
            width: 100px;
        }
    </style>
</head>

<body>
    <center class="project">
        <div class="name_project">Демо Версия 4</div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
        <div class="value_progect">
            <div class="name_value_progect">Q mcr(mT)</div>
            <input class="mysql" name="Q_mcr" value="1">
        </div>
    </center>
    <div class="hole">GREEN-1/23
        <div class="trap">БВ3-1</div>
        <div class="trap">АВ1-2</div>
        <div class="trap">АЧ3-2</div>
    </div>
    <div class="hole">Ерохинская
        <div class="trap">АВ2</div>
        <div class="trap">БВ3</div>
        <div class="trap">Pz</div>
    </div>
    <div class="hole">РИФ
        <div class="trap">AB-1</div>
        <div class="trap">БВ2</div>
        <div class="trap">АЧ3-2</div>
        <div class="trap">ЮВ1</div>
    </div>
    <div class="hole">OPENOIL
        <div class="trap">AB3-2</div>
        <div class="trap">PZ</div>
    </div>


    <script type="text/javascript">
        function edit_project() {
            $(".hole:not(.hole:last)").hide("slow");
            $(".hole:last").hide("slow",
                function() {
                    $(".value_progect:not(.value_progect:last)").show("slow");
                    $(".value_progect:last").show(5000,
                        function() {
                            $(".value_progect").find(".mysql").show("slow");
                        })
                });
        }


        $(document).ready(function() {
            $('.project').click(
                function() {
                    edit_project()
                }
            );
        })
    </script>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Баг в хроме (рамка у спрайтов) Царь Леонид (X)HTML/CSS 8 18.04.2014 11:48
Ссылка + картинка + трехцветная рамка + IE greatilya (X)HTML/CSS 7 08.09.2011 07:58
Рамка вокруг изображения Aiden Элементы интерфейса 1 20.11.2009 13:49
Рамка дял фотографии LZD Общие вопросы Javascript 4 12.02.2009 20:49
Рамка у кнопок в MSIE Гость Internet Explorer 0 11.08.2008 09:23