Форум

monax_111 · #1 (**permalink**) 02.11.2014, 22:30

доброво всем)
работаю в 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 · #2 (**permalink**) 02.11.2014, 22:41

Сообщение от рони

monax_111,
а вы в курсе как работает toggle ?

да вроде) я конечно иногда использую метод тыка, но редко))
возможно я чего то о нем не знаю?

monax_111 · #3 (**permalink**) 02.11.2014, 22:57

Сообщение от рони

monax_111,

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

monax_111 · #4 (**permalink**) 02.11.2014, 23:14

Сообщение от рони

monax_111,

или ты предлагаешь заменить все hide и show на toggle???
можешь чуть яснее написать?
да и потом в описании сказано, что toggle использует методы show и hide так что по сути это одно и то же!

monax_111 · #5 (**permalink**) 02.11.2014, 23:16

Сообщение от рони

monax_111,
не читайте на ночь старых сказок

я не понимаю, что ты имеешь в виду(
ты как то околесицей прошел толком ничего и не сказав(((

monax_111 · #6 (**permalink**) 02.11.2014, 23:30

Сообщение от рони

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

что делает ваш код одному вам известно - но навернякка его можно сократить.

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

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

рони · #7 (**permalink**) 02.11.2014, 23:49

monax_111,
ок не буду вам мешать.

monax_111 · #8 (**permalink**) 03.11.2014, 00:44

Сообщение от рони

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 · #9 (**permalink**) 03.11.2014, 00:49

проблема все та же, при появлении последнего div рамка тупит и не хочет перерисовываться!

рони · #10 (**permalink**) 03.11.2014, 01:11

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>

Форум

Справочник

Discord чат

Курсы javascript