Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2013, 14:22
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

Проблема с Flip
Все работает отлично хорошо.Вот только сама прокрутка происходит по центру экрана.Тоесть не там где изначально создан этот <div id="flipBox"> а выше на экране.Неподскажите почему?

<!DOCTYPE html>
<html>
 
<head>
 
  
 
  
 
<meta  charset="utf-8" />
    <title>Test</title>
     
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>

  
<script type="text/javascript">

function Flip(){
jQuery(document).ready(function(){


jQuery("#flipBox").flip({
	direction:"rl",
	color:"#539127",
	
	content: 'новый текст'

});
});
}

</script>

</script>
 
</head>
<body>
<form onsubmit="return false">


    <div id="divi">
    <div id="queston"></div>
    </div>
    <button id='send' name='send' onclick='checkAnswer()' >Проверить</button>
    <button id="id1" type='reset'>Стереть Ответы</button>
    <button id="id2" type='reset'>Начать тест заново</button>
    <button id="id3"  onclick="TrueAnswer()" >Показать правильный ответ</button>
    <div><input style="width:200px; height:50px" type="text" id="output" readonly></input></div>
	
	

</form>
 
 <div id="id4" onclick = "text()" style="border:5px solid black; width:100px ;height:100px">Здесь ваш текст</div>
 <div id="animation" style="width:100px;height:100px;background:Black;color:White;text-align:center;" onclick="animate()" >Word</div>
 
<div id="flipBox" style="border:5px solid black; width:100px ;height:100px" onclick="Flip()">
	Будем кувыркаться!
</div>

</body>
 
</html>


Но а если я делаю вот так
function Flip(){
$(document).ready(function(){
$("#id5").flip({
	direction:"rl",
	color:"#539127",
	speed: 100,
	content: 'новый текст'

});
});
}
<body>
 

<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip()">Что-то</div>
</body>

То все работает отлично и крутитса <div> в томже месте.Почему действие одно и тоже а выполняетса немного по другому?
И подскажите пожалуста.Как при повторном нажатии стили возвращались на первоначальные.Тоесть что-бы при повторном нажатии стили были не которые я указал здесь
color:"#539127",
	
	content: 'новый текст'

А стили и текст которые были здесь
<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip()">Что-то</div>

Последний раз редактировалось Vasy, 10.04.2013 в 14:50.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2013, 20:13
Аспирант
Отправить личное сообщение для Ervin Посмотреть профиль Найти все сообщения от Ervin
 
Регистрация: 19.03.2013
Сообщений: 84

Вместо последний части -
function Flip(){
   var $el = $("#id5");
   
   $el.flip({
	direction:"rl",
	color:"#539127",
	speed: 100,
	content: 'новый текст',
        onEnd: function() {
           var $el = $("#id5");
           
           $el.bind("click", function() {
               var $el = $(this);
               
               $el.attr("style", "");
               $el.unbind("click");
            });
        }
   });
}
<body>
 

<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip">Что-то</div>
</body>

Последний раз редактировалось Ervin, 10.04.2013 в 20:16.
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2013, 14:56
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

Сообщение от Ervin Посмотреть сообщение
Вместо последний части -
function Flip(){
   var $el = $("#id5");
   
   $el.flip({
	direction:"rl",
	color:"#539127",
	speed: 100,
	content: 'новый текст',
        onEnd: function() {
           var $el = $("#id5");
           
           $el.bind("click", function() {
               var $el = $(this);
               
               $el.attr("style", "");
               $el.unbind("click");
            });
        }
   });
}
<body>
 

<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip">Что-то</div>
</body>
Ну оно не совсем хорошо работает=))вернее совсем плохо,при повторном нажатии остаётса только фон а все остальные параметры меняютса.
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2013, 15:54
Аспирант
Отправить личное сообщение для Ervin Посмотреть профиль Найти все сообщения от Ervin
 
Регистрация: 19.03.2013
Сообщений: 84

Не совсем понял какие стили нужны после второго нажатия. Возможно нужно заменить это:
$el.attr("style", "");


На это
$el.attr("style", "border:5px solid black; width:100px;height:100px;background:#539127");
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2013, 20:39
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

да нужны первоначальные стили <div>. а подругому кроме как явно задать стили,нельзя получать их из <div>?и текст который находитса в <div>.Тоесть все первоначальные параметры самого <div> стили и текст.
Ответить с цитированием
  #6 (permalink)  
Старый 12.04.2013, 16:42
Аспирант
Отправить личное сообщение для Ervin Посмотреть профиль Найти все сообщения от Ervin
 
Регистрация: 19.03.2013
Сообщений: 84

Можно суда div до и div после, со всей нужней информацией?
Ответить с цитированием
  #7 (permalink)  
Старый 15.04.2013, 02:45
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

Вот это div до
<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip">Что-то</div>

А после нажатия стили меняютса на указанные во Flip
color:"#539127",

    content: 'новый текст'
Ответить с цитированием
  #8 (permalink)  
Старый 17.04.2013, 11:05
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

а ище вопрос,пробовал подгребать стили из xml документа,но не хочет их воспринимать тоесть вместо
color:"#539127",
 
    content: 'новый текст'

пробовал вытаскивать стили из xml документа но флип их невоспринял.можно как-то зделать парсинг стилей из xml?

и ище допустим имеетса несколько <div> для которых нужно использовать Flip получаетса что для каждого отдельного <div> нужно использовать отдельный флип?Тогда если я хочу все стили которые будут использоватса во Flip задавать явно(ну явно заберать из xml),а не с помощью функции,так как что-бы забирать с помощью функции нужны какието одинаковые теги в xml что-ли.Неподскажите ище можно ли как-то зделать 1 Flip для нескольких <div> сразу?

Последний раз редактировалось Vasy, 17.04.2013 в 13:58.
Ответить с цитированием
  #9 (permalink)  
Старый 17.04.2013, 14:30
Аспирант
Отправить личное сообщение для Ervin Посмотреть профиль Найти все сообщения от Ervin
 
Регистрация: 19.03.2013
Сообщений: 84

<?xml version="1.0" encoding="UTF-8" ?>
<style>
   <class1><selector>p</selector><rule>color:Yellow</rule></class1>
</style>


var pullStyles = (function() {
	var xmlFile = {};

	function loadXML() {
		var xml = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

		xml.onreadystatechange = function() {
			if(xml.readyState === 4) {
				xmlFile = xml.responseXML;

				displayXML();
			}
		}

		xml.open("GET", "coolstuff.xml", true);

		xml.send();
	}

	function displayXML() {
		var styleEl = document.createElement("style"),
			styleObject = "",
			children = xmlFile.documentElement.childNodes,
			textMode = (typeof  children[0].textContent !== "undefined") ? "textContent" : "text",
			ruleMode = "";

		styleEl.type = "text/css";

		document.getElementsByTagName("head")[0].appendChild(styleEl);

		styleObject = document.styleSheets.item(0);

		ruleMode = (styleObject.addRule) ? "addRule" : "insertRule";

		for(var i = 0, leng = children.length; i < leng; i++) {
			if(children[i].nodeType === 1) {
				if(ruleMode === "addRule") {
					styleObject.addRule(children[i].childNodes[0][textMode], children[i].childNodes[1][textMode]);
				}
				else {
					styleObject.insertRule(children[i].childNodes[0][textMode] + "{" + children[i].childNodes[1][textMode] + "}", 0);
				}
			}
		}
	}

	return loadXML;
})();


Вот скрипт. Проблема в том что, я совершенно не понимаю зачем стили держать в xml?

Для того чтобы применить флип к нескольким элементам -
$("#flipbox, #flipbox2").flip({
	direction:'tb',
	content:'this is my new content'
});
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2013, 14:35
Профессор
Отправить личное сообщение для Vasy Посмотреть профиль Найти все сообщения от Vasy
 
Регистрация: 09.02.2013
Сообщений: 165

в xml держать стили и все такое для того что-бы можно было менять стили не входя в код и не рыская по нему..

а не могли бы обьяснить что здесь происходит
for(var i = 0, leng = children.length; i < leng; i++) {
            if(children[i].nodeType === 1) {
                if(ruleMode === "addRule") {
                    styleObject.addRule(children[i].childNodes[0][textMode], children[i].childNodes[1][textMode]);
                }
                else {
                    styleObject.insertRule(children[i].childNodes[0][textMode] + "{" + children[i].childNodes[1][textMode] + "}", 0);
                }
            }
        }

получаетса вы прохоите по всем детям <style>,а что дальше?

и зачем вот это?зачем добавлять созданный элемент типа стиль в head?
document.getElementsByTagName("head")[0].appendChild(styleEl);


и да ну получил я из xml а как на страницу то нарисовать его?

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

Я так понимаю это просто парсинг xml документа?

Последний раз редактировалось Vasy, 17.04.2013 в 14:51.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47