Проблема с 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> |
Вместо последний части -
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>
|
Цитата:
|
Не совсем понял какие стили нужны после второго нажатия. Возможно нужно заменить это:
$el.attr("style", "");
На это
$el.attr("style", "border:5px solid black; width:100px;height:100px;background:#539127");
|
да нужны первоначальные стили <div>. а подругому кроме как явно задать стили,нельзя получать их из <div>?и текст который находитса в <div>.Тоесть все первоначальные параметры самого <div> стили и текст.
|
Можно суда div до и div после, со всей нужней информацией?
|
Вот это div до
<div id="id5" style="border:5px solid black; width:100px ;height:100px;background:#539127" onclick="Flip">Что-то</div> А после нажатия стили меняютса на указанные во Flip
color:"#539127",
content: 'новый текст'
|
а ище вопрос,пробовал подгребать стили из xml документа,но не хочет их воспринимать тоесть вместо
color:"#539127",
content: 'новый текст'
пробовал вытаскивать стили из xml документа но флип их невоспринял.можно как-то зделать парсинг стилей из xml? и ище допустим имеетса несколько <div> для которых нужно использовать Flip получаетса что для каждого отдельного <div> нужно использовать отдельный флип?Тогда если я хочу все стили которые будут использоватса во Flip задавать явно(ну явно заберать из xml),а не с помощью функции,так как что-бы забирать с помощью функции нужны какието одинаковые теги в xml что-ли.Неподскажите ище можно ли как-то зделать 1 Flip для нескольких <div> сразу? |
<?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'
});
|
в 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 документа? |
1) - "и зачем вот это?зачем добавлять созданный элемент типа стиль в head?", - Затем чтобы, было куда добавлять стили, без него, тоже самое что прост написать css без тега style в head.
2) Нарисовать ? Добавить классы которые в xml к элементам. 3) Объяснить код? Первая часть загружает документ через AJAX, вторая часть, создает тег style, проходит по полученному XML документу, и каждый класс добавляет в тег style. 4)Как использовать с flip? Никак =) В обще без понятия что является проблемой. Вот пример как бы поступил я, если у меня есть div с двумя состояниями: 1)класс before, текст - "Как жить без проблем?" 2)класс after, текст - "Всегда поступать как правильно, а не как легче".
.before {
background:Yellow;
color:White;
}
.after {
background:White;
color:Yellow;
}
<div id="content" class="before">Как жить без проблем?</div>
$("#content").flip({
direction:'lr',
content:'Всегда поступать как правильно, а не как лечге',
onEnd: function() {
$(this).attr("class", "after");
}
});
П.С. Правильным поступком я щитаю, изучение javascript вместо того чтобы нагружать других своей работой. |
Не являлось проблемой пропарсить xml.Я это делаю не для работы и за это ничево не получаю,я тренируюсь.
Проблемой являетса то што если у меня есть 10 флипов допустим,то я немогу нормально функцией получать из xml текст стили и тому подобное что-бы в дальнейшем при удалении нескольких или добавлении нескольких <div> не нужно было залазить в код |
| Часовой пояс GMT +3, время: 11:26. |