Jump to content

Angela

User
  • Posts

    48
  • Joined

  • Last visited

Everything posted by Angela

  1. Вот пожалуйста это статья написана как руководство к действию, а не как переведенный справочник. Я не нарушаю правила, меня бесит чье бы то ни было задроство и занудство и вообще это сейчас модно P/S rus Перепостите последнюю ссылку sorrow он обязательно должен это послушать и добавьте мое любимое: "айм сорри сорров!"
  2. rus, я все валидно и семантически правильно в вопросе написала... Для понятливых пользователей и непонятливых модеров. Не хотите помогать не надо, но и вые.... ся тоже смысла не имеет. P/S Не была здесь наверное полтора года, дизайн сменили, а ответы в стиле sorrow которому я тоже неоднократно писала про охуе...ое занудство и понты.
  3. Ребята, вы издеваетесь? Ок, а если мне нужно будет, чтобы при наведении курсора картинка еще немного "шевелилась"? Мне тоже в стилях все понапрописывать? Если серьезно, просто хотелось бы понять алгоритм подключения (и настройки) той или иной библиотеки jQuery на сайт, для добавления разных приятных мелочей/красивостей. P/S Можно ткнуть носом в правильный мануал по jQuery на русском. PP/S Такие талмуды читать нет времени
  4. Здравствуйте уважаемые форумчане! Есть небольшие иконки (ч/б) с изображением контактов и такие же цветные. Нужно чтобы при наведении курсора мыши на иконку одно изображение, заменялось другим. Реализовать наверное проще на jQuery (предполагаю) ну на css точно не нужно ) P/S Сайт работает на Joomla 2.5
  5. Здравствуйте уважаемые форумчане! Подскажите пжлста, как на главной странице вывести в одном div три других div, но не в столбик на всю ширину, а в строчку? (см.скрин). Через стили не хочет. В этом диве лежат счетчики, я не знаю где формируется вывод этих дивов, в каком файле Joomla? Ну проще говоря я хочу просто тупо вставить туда таблицу в три колонки (вместо 3 дивов) и в каждой ячейке будет находится код счетчика, соответственно если счетчик добавится, его легко туда будет положить.
  6. Switch74, благодарю Вас! Как раз это и нужно, а фон стоит на месте. P/S А где плюсики то ставить?
  7. Здравствуйте уважаемые форумчане! Кажется сто лет здесь не была и наверное поэтому при верстке простого макета столкнулась с такой проблемой. Необходимо чтобы ячейка таблицы имела фиксированную высоту, не повторяющийся фон и еще текст находящийся в ней скроллировался. Я почитала в справочнике про свойство background-attachment и написала такой стиль: #centr { background-image: url(../images/content.gif); background-repeat: no-repeat; background-attachment: fixed; } Вот код страницы: <html> <head> <title>Магазин цветов</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <table width="1000" height="876" border="0" cellpadding="0" cellspacing="0" id="site"> <tr> <td colspan="3" id="logo"> </td> </tr> <tr> <td id="left_menu"> </td> <!--content --> <td colspan="2" id="centr"><div id="content"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br> </p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br> </p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p></div></td> <!--end_content --> </tr> <tr> <td colspan="2" id="left_bottom">banner</td> <td id="bg_bottom">opisanie</td> </tr> <tr> <td colspan="3" id="footer">footer</td> </tr> <tr> <td> <img src="images/spacer.gif" width="190" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="89" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="721" height="1" alt=""></td> </tr> </table> </body> </html> И css файла: /* CSS reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* end css reset */ #logo { height: 175px; background-image: url(../images/logo.gif); background-repeat: no-repeat; } #site { margin: 0 auto; } #left_menu { background-image: url(../images/left_menu.gif); background-repeat: no-repeat; height: 190px; width: 610px; } #centr { background-image: url(../images/content.gif); background-repeat: no-repeat; background-attachment: fixed; } #content { height: 610px; } #left_bottom { background-image: url(../images/left_bottom.gif); background-repeat: no-repeat; background-position: left top; height: 67px; width: 279px; } #bg_bottom { background-image: url(../images/bg_bottom.gif); background-repeat: repeat-x; height: 67px; width: 15px; } #footer { background-image: url(../images/footer.gif); background-repeat: no-repeat; height: 23px; width: 1000px; }
  8. Разница в объеме информации наверное. В коде вышеупомянутого примера есть абсолютные ссылки codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="500" height="300" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" /> Что то здесь подгружается наверное?
  9. Здравствуйте! Вот наткнулась на эту тему в поисках ответа. Все ссылки изучила А если нужно просмотреть flash на сайте на локальной машине, без подключения к интернету? И хотелось бы чтобы flash был не "голый", а в обрамлении... с кнопками плэй, громкостью и т.д.?
  10. Да кто спорит и с мужчинами самое главное то же самое... psywalker, Держу карандаш и записываю первые десять
  11. Попробуем почитать, бесплатно же да и качество нормальное. Из аннотации: А вот это по моему точно для новичков: "css 10 минут на урок" Р. Уикли и тож с озона.
  12. Здравствуйте! Заказала с пол года назад в озоне книгу "Настольная книга по css готовые примеры и шаблоны" С. Каллихан. На обороте реклама других книг из серии с названием "Школа web-мастерства" и там как раз этот дзенгарден. Что не понравилось в настольной книге-бумага кошмарного качества (газета правда 1980 г. выпуска). По поводу содержания судить не берусь
  13. LunatiK, Ой... получилось! До меня не сразу дошло... Намекнули бы про контекстный селектор ) #element { width: 600px; height: 800px; } #cse-search-results iframe { width: 600px; height: 800px; } Мужчины, ... нет слов P/S Плюсиков нет на форуме... (
  14. yopopt, работает только когда сайт про индексируется часть результатов поиска видно не будет
  15. Здравствуйте! Функция поиска с возможностью вывода результатов на своем сайте вешь очень полезная. Вот решила ее сделать. Проблема - подгружаемый (откуда то с гугла) iframe с результатами имеет ширину большую чем размер одной из колонок, сайт у меня фиксированной ширины. Гугл для создания такого поиска предлагает 2 варианта кода: Код формы <form action="" id="cse-search-box"> <div> <input type="hidden" name="cx" value="_" /> <input type="hidden" name="cof" value="_" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Поиск" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box〈=ru"></script> Код результатов поиска <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 600; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> Вот (вроде как) строчка с размером ифрейма: var googleSearchFrameWidth = 600; Изменение значения ничего не дает. Грузится ифрейм шириной 755px и мой сайт от этого прёт
  16. s0rr0w, Great Rash, Justnewone, Veseloff, hAhol, 3ABAPKA, и даже psywalker! Благодарю Вас за участие в обсуждении проблемы!
  17. sOrrOw, Вы серьезно? Ну я конечно как начинающий! верстальщик, не имею права подвергать Ваши профессиональные способности и знания сомнению... Так, что если это написал неумный человек... то просто просьба посоветовать - Что лучше? Конкретно. Без воды и желательно инструкция по установке как в случае со "Светлым Ящиком2" которую я скачала вместе с ним. Поймите, то что Вам кажется до ужаса простым, начинающему - сложно. Так вот и я, сначала взяла толстую книгу по html 4.0, потом начала копаться в сети и набрела на ресурс htmlbook.ru Здесь все просто с примерам и понятно и вообще здорово! (об этом я кстати уже писала) Так почему же! Почему же на форуме такая вот... байда? По моему я говорю понятные и очевидные вещи и не надо пожалуйста мои слова выворачивать наизнанку. З.Ы. Я не возмущаюсь. Эмоциональные мысли=ИМХО! Не происходит изменение прозрачности. Могу выслать Вам архив со скриптом для проверки работы
  18. Не а... не прокатывает Да я то ладно, глобальные модераторы! советуют "копать" не там где надо.
  19. Great Rash, Вы случайно не это место имеете в виду?: Element.setOpacity = function(element, value){ element= $(element); if (value == 1){ Element.setStyle(element, { opacity: (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.9999 : null }); if(/MSIE/.test(navigator.userAgent)) Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); } else { if(value < 0.00001) value = 0; Element.setStyle(element, {opacity: value}); if(/MSIE/.test(navigator.userAgent)) Element.setStyle(element, { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity='+value*100+')' }); } } Если это, то значение 0.9999 я меняла..., но прозрачная становится сама картинка, а не фон. Все это код только файла effects.js в других трех opacity нет
  20. Ясно Если позволите продолжаю на тему Light Box2 Как мне посоветовали я посмотрела css: #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* Min-Width */ .lbWidth { /* most browsers */ position: absolute; top: 0px; left: 0px; width: 100%; min-width: 790px; } * html .lbContent { /* IE6 */ margin-left: -790px; position:relative; } * html .lbMinWidth { /* IE6 */ padding-left: 790px; } /* Clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ За этот черный фон, отвечает идентификатор #overlay только вот opacity с ним не работает... (в мозилле и в опере) а цвет фона меняется... И фон В общем то не сплошной черный а немного прозрачный, значит где то значение все таки есть
  21. В формате форума я ... Участник ) написано ведь. А можно так и написать - Женщина?
  22. sOrrOw, Sorry P/S Ну, что Вы такой злопамятный... женщинам свойственны импульсивные высказывания Вы не знали? Так я искала в коде СКРИПТА а вот в сисс нет
  23. Здравствуйте уважаемые форумчане! Хотелось бы настроить прозрачность темного фона между изображением галереи и сайтом. Знаю, что нужно изменить значение... функции? аргумента? opacity от 0 до 1. Умолчальное 0.9 Вот код файла effects.js, если кто знает ткните пожалуйста пальцем // Copyright © 2005 Thomas Fuchs (http://script.aculo.us, [url="http://mir.aculo.us)"]http://mir.aculo.us)[/url] // Contributors: // Justin Palmer (http://encytemedia.com/) // Mark Pilgrim (http://diveintomark.org/) // Martin Bialasinki // // See scriptaculous.js for full license. /* ————- element ext ————-- */ // converts rgb() and #xxx to #xxxxxx format, // returns self (or first argument) if not convertable String.prototype.parseColor = function() { var color = '#'; if(this.slice(0,4) == 'rgb(') { var cols = this.slice(4,this.length-1).split(','); var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3); } else { if(this.slice(0,1) == '#') { if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); if(this.length==7) color = this.toLowerCase(); } } return(color.length==7 ? color : (arguments[0] || this)); } Element.collectTextNodes = function(element) { return $A($(element).childNodes).collect( function(node) { return (node.nodeType==3 ? node.nodeValue : (node.hasChildNodes() ? Element.collectTextNodes(node) : '')); }).flatten().join(''); } Element.collectTextNodesIgnoreClass = function(element, className) { return $A($(element).childNodes).collect( function(node) { return (node.nodeType==3 ? node.nodeValue : ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? Element.collectTextNodes(node) : '')); }).flatten().join(''); } Element.setStyle = function(element, style) { element = $(element); for(k in style) element.style[k.camelize()] = style[k]; } Element.setContentZoom = function(element, percent) { Element.setStyle(element, {fontSize: (percent/100) + 'em'}); if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); } Element.getOpacity = function(element){ var opacity; if (opacity = Element.getStyle(element, 'opacity')) return parseFloat(opacity); if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/)) if(opacity[1]) return parseFloat(opacity[1]) / 100; return 1.0; } Element.setOpacity = function(element, value){ element= $(element); if (value == 1){ Element.setStyle(element, { opacity: (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.9999 : null }); if(/MSIE/.test(navigator.userAgent)) Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); } else { if(value < 0.00001) value = 0; Element.setStyle(element, {opacity: value}); if(/MSIE/.test(navigator.userAgent)) Element.setStyle(element, { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity='+value*100+')' }); } } Element.getInlineOpacity = function(element){ return $(element).style.opacity || ''; } Element.childrenWithClassName = function(element, className) { return $A($(element).getElementsByTagName('*')).select( function© { return Element.hasClassName(c, className) }); } Array.prototype.call = function() { var args = arguments; this.each(function(f){ f.apply(this, args) }); } /*————————————————————————--*/ var Effect = { tagifyText: function(element) { var tagifyStyle = 'position:relative'; if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1'; element = $(element); $A(element.childNodes).each( function(child) { if(child.nodeType==3) { child.nodeValue.toArray().each( function(character) { element.insertBefore( Builder.node('span',{style: tagifyStyle}, character == ' ' ? String.fromCharCode(160) : character), child); }); Element.remove(child); } }); }, multiple: function(element, effect) { var elements; if(((typeof element == 'object') || (typeof element == 'function')) && (element.length)) elements = element; else elements = $(element).childNodes; var options = Object.extend({ speed: 0.1, delay: 0.0 }, arguments[2] || {}); var masterDelay = options.delay; $A(elements).each( function(element, index) { new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay })); }); }, PAIRS: { 'slide': ['SlideDown','SlideUp'], 'blind': ['BlindDown','BlindUp'], 'appear': ['Appear','Fade'] }, toggle: function(element, effect) { element = $(element); effect = (effect || 'appear').toLowerCase(); var options = Object.extend({ queue: { position:'end', scope:(element.id || 'global') } }, arguments[2] || {}); Effect[Element.visible(element) ? Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options); } }; var Effect2 = Effect; // deprecated /* ————- transitions ————- */ Effect.Transitions = {} Effect.Transitions.linear = function(pos) { return pos; } Effect.Transitions.sinoidal = function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; } Effect.Transitions.reverse = function(pos) { return 1-pos; } Effect.Transitions.flicker = function(pos) { return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; } Effect.Transitions.wobble = function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; } Effect.Transitions.pulse = function(pos) { return (Math.floor(pos*10) % 2 == 0 ? (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10))); } Effect.Transitions.none = function(pos) { return 0; } Effect.Transitions.full = function(pos) { return 1; } /* ————- core effects ————- */ Effect.ScopedQueue = Class.create(); Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { initialize: function() { this.effects = []; this.interval = null; }, _each: function(iterator) { this.effects._each(iterator); }, add: function(effect) { var timestamp = new Date().getTime(); var position = (typeof effect.options.queue == 'string') ? effect.options.queue : effect.options.queue.position; switch(position) { case 'front': // move unstarted effects after this effect this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) { e.startOn += effect.finishOn; e.finishOn += effect.finishOn; }); break; case 'end': // start effect after last queued effect has finished timestamp = this.effects.pluck('finishOn').max() || timestamp; break; } effect.startOn += timestamp; effect.finishOn += timestamp; this.effects.push(effect); if(!this.interval) this.interval = setInterval(this.loop.bind(this), 40); }, remove: function(effect) { this.effects = this.effects.reject(function(e) { return e==effect }); if(this.effects.length == 0) { clearInterval(this.interval); this.interval = null; } }, loop: function() { var timePos = new Date().getTime(); this.effects.invoke('loop', timePos); } }); Effect.Queues = { instances: $H(), get: function(queueName) { if(typeof queueName != 'string') return queueName; if(!this.instances[queueName]) this.instances[queueName] = new Effect.ScopedQueue(); return this.instances[queueName]; } } Effect.Queue = Effect.Queues.get('global'); Effect.DefaultOptions = { transition: Effect.Transitions.sinoidal, duration: 1.0, // seconds fps: 25.0, // max. 25fps due to Effect.Queue implementation sync: false, // true for combining from: 0.0, to: 1.0, delay: 0.0, queue: 'parallel' } Effect.Base = function() {}; Effect.Base.prototype = { position: null, start: function(options) { this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); this.currentFrame = 0; this.state = 'idle'; this.startOn = this.options.delay*1000; this.finishOn = this.startOn + (this.options.duration*1000); this.event('beforeStart'); if(!this.options.sync) Effect.Queues.get(typeof this.options.queue == 'string' ? 'global' : this.options.queue.scope).add(this); }, loop: function(timePos) { if(timePos >= this.startOn) { if(timePos >= this.finishOn) { this.render(1.0); this.cancel(); this.event('beforeFinish'); if(this.finish) this.finish(); this.event('afterFinish'); return; } var pos = (timePos - this.startOn) / (this.finishOn - this.startOn); var frame = Math.round(pos * this.options.fps * this.options.duration); if(frame > this.currentFrame) { this.render(pos); this.currentFrame = frame; } } }, render: function(pos) { if(this.state == 'idle') { this.state = 'running'; this.event('beforeSetup'); if(this.setup) this.setup(); this.event('afterSetup'); } if(this.state == 'running') { if(this.options.transition) pos = this.options.transition(pos); pos *= (this.options.to-this.options.from); pos += this.options.from; this.position = pos; this.event('beforeUpdate'); if(this.update) this.update(pos); this.event('afterUpdate'); } }, cancel: function() { if(!this.options.sync) Effect.Queues.get(typeof this.options.queue == 'string' ? 'global' : this.options.queue.scope).remove(this); this.state = 'finished'; }, event: function(eventName) { if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); if(this.options[eventName]) this.options[eventName](this); }, inspect: function() { return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>'; } } Effect.Parallel = Class.create(); Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { initialize: function(effects) { this.effects = effects || []; this.start(arguments[1]); }, update: function(position) { this.effects.invoke('render', position); }, finish: function(position) { this.effects.each( function(effect) { effect.render(1.0); effect.cancel(); effect.event('beforeFinish'); if(effect.finish) effect.finish(position); effect.event('afterFinish'); }); } }); Effect.Opacity = Class.create(); Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); // make this work on IE on elements without 'layout' if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout)) Element.setStyle(this.element, {zoom: 1}); var options = Object.extend({ from: Element.getOpacity(this.element) || 0.0, to: 1.0 }, arguments[1] || {}); this.start(options); }, update: function(position) { Element.setOpacity(this.element, position); } }); Effect.Move = Class.create(); Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); var options = Object.extend({ x: 0, y: 0, mode: 'relative' }, arguments[1] || {}); this.start(options); }, setup: function() { // Bug in Opera: Opera returns the "real" position of a static element or // relative element that does not have top/left explicitly set. // ==> Always set top and left for position relative elements in your stylesheets // (to 0 if you do not need them) Element.makePositioned(this.element); this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0'); this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0'); if(this.options.mode == 'absolute') { // absolute movement, so we need to calc deltaX and deltaY this.options.x = this.options.x - this.originalLeft; this.options.y = this.options.y - this.originalTop; } }, update: function(position) { Element.setStyle(this.element, { left: this.options.x * position + this.originalLeft + 'px', top: this.options.y * position + this.originalTop + 'px' }); } }); // for backwards compatibility Effect.MoveBy = function(element, toTop, toLeft) { return new Effect.Move(element, Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); }; Effect.Scale = Class.create(); Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { initialize: function(element, percent) { this.element = $(element) var options = Object.extend({ scaleX: true, scaleY: true, scaleContent: true, scaleFromCenter: false, scaleMode: 'box', // 'box' or 'contents' or {} with provided values scaleFrom: 100.0, scaleTo: percent }, arguments[2] || {}); this.start(options); }, setup: function() { this.restoreAfterFinish = this.options.restoreAfterFinish || false; this.elementPositioning = Element.getStyle(this.element,'position'); this.originalStyle = {}; ['top','left','width','height','fontSize'].each( function(k) { this.originalStyle[k] = this.element.style[k]; }.bind(this)); this.originalTop = this.element.offsetTop; this.originalLeft = this.element.offsetLeft; var fontSize = Element.getStyle(this.element,'font-size') || '100%'; ['em','px','%'].each( function(fontSizeType) { if(fontSize.indexOf(fontSizeType)>0) { this.fontSize = parseFloat(fontSize); this.fontSizeType = fontSizeType; } }.bind(this)); this.factor = (this.options.scaleTo - this.options.scaleFrom)/100; this.dims = null; if(this.options.scaleMode=='box') this.dims = [this.element.offsetHeight, this.element.offsetWidth]; if(/^content/.test(this.options.scaleMode)) this.dims = [this.element.scrollHeight, this.element.scrollWidth]; if(!this.dims) this.dims = [this.options.scaleMode.originalHeight, this.options.scaleMode.originalWidth]; }, update: function(position) { var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position); if(this.options.scaleContent && this.fontSize) Element.setStyle(this.element, {fontSize: this.fontSize * currentScale + this.fontSizeType }); this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale); }, finish: function(position) { if (this.restoreAfterFinish) Element.setStyle(this.element, this.originalStyle); }, setDimensions: function(height, width) { var d = {}; if(this.options.scaleX) d.width = width + 'px'; if(this.options.scaleY) d.height = height + 'px'; if(this.options.scaleFromCenter) { var topd = (height - this.dims[0])/2; var leftd = (width - this.dims[1])/2; if(this.elementPositioning == 'absolute') { if(this.options.scaleY) d.top = this.originalTop-topd + 'px'; if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px'; } else { if(this.options.scaleY) d.top = -topd + 'px'; if(this.options.scaleX) d.left = -leftd + 'px'; } } Element.setStyle(this.element, d); } }); Effect.Highlight = Class.create(); Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); this.start(options); }, setup: function() { // Prevent executing on elements not in the layout flow if(Element.getStyle(this.element, 'display')=='none') { this.cancel(); return; } // Disable background image during the effect this.oldStyle = { backgroundImage: Element.getStyle(this.element, 'background-image') }; Element.setStyle(this.element, {backgroundImage: 'none'}); if(!this.options.endcolor) this.options.endcolor = Element.getStyle(this.element, 'background-color').parseColor('#ffffff'); if(!this.options.restorecolor) this.options.restorecolor = Element.getStyle(this.element, 'background-color'); // init color calculations this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this)); this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this)); }, update: function(position) { Element.setStyle(this.element,{backgroundColor: $R(0,2).inject('#',function(m,v,i){ return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); }, finish: function() { Element.setStyle(this.element, Object.extend(this.oldStyle, { backgroundColor: this.options.restorecolor })); } }); Effect.ScrollTo = Class.create(); Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); this.start(arguments[1] || {}); }, setup: function() { Position.prepare(); var offsets = Position.cumulativeOffset(this.element); if(this.options.offset) offsets[1] += this.options.offset; var max = window.innerHeight ? window.height - window.innerHeight : document.body.scrollHeight - (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight); this.scrollStart = Position.deltaY; this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart; }, update: function(position) { Position.prepare(); window.scrollTo(Position.deltaX, this.scrollStart + (position*this.delta)); } }); /* ————- combination effects ————- */ Effect.Fade = function(element) { var oldOpacity = Element.getInlineOpacity(element); var options = Object.extend({ from: Element.getOpacity(element) || 1.0, to: 0.0, afterFinishInternal: function(effect) { with(Element) { if(effect.options.to!=0) return; hide(effect.element); setStyle(effect.element, {opacity: oldOpacity}); }} }, arguments[1] || {}); return new Effect.Opacity(element,options); } Effect.Appear = function(element) { var options = Object.extend({ from: (Element.getStyle(element, 'display') == 'none' ? 0.0 : Element.getOpacity(element) || 0.0), to: 1.0, beforeSetup: function(effect) { with(Element) { setOpacity(effect.element, effect.options.from); show(effect.element); }} }, arguments[1] || {}); return new Effect.Opacity(element,options); } Effect.Puff = function(element) { element = $(element); var oldStyle = { opacity: Element.getInlineOpacity(element), position: Element.getStyle(element, 'position') }; return new Effect.Parallel( [ new Effect.Scale(element, 200, { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], Object.extend({ duration: 1.0, beforeSetupInternal: function(effect) { with(Element) { setStyle(effect.effects[0].element, {position: 'absolute'}); }}, afterFinishInternal: function(effect) { with(Element) { hide(effect.effects[0].element); setStyle(effect.effects[0].element, oldStyle); }} }, arguments[1] || {}) ); } Effect.BlindUp = function(element) { element = $(element); Element.makeClipping(element); return new Effect.Scale(element, 0, Object.extend({ scaleContent: false, scaleX: false, restoreAfterFinish: true, afterFinishInternal: function(effect) { with(Element) { [hide, undoClipping].call(effect.element); }} }, arguments[1] || {}) ); } Effect.BlindDown = function(element) { element = $(element); var oldHeight = Element.getStyle(element, 'height'); var elementDimensions = Element.getDimensions(element); return new Effect.Scale(element, 100, Object.extend({ scaleContent: false, scaleX: false, scaleFrom: 0, scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, afterSetup: function(effect) { with(Element) { makeClipping(effect.element); setStyle(effect.element, {height: '0px'}); show(effect.element); }}, afterFinishInternal: function(effect) { with(Element) { undoClipping(effect.element); setStyle(effect.element, {height: oldHeight}); }} }, arguments[1] || {}) ); } Effect.SwitchOff = function(element) { element = $(element); var oldOpacity = Element.getInlineOpacity(element); return new Effect.Appear(element, { duration: 0.4, from: 0, transition: Effect.Transitions.flicker, afterFinishInternal: function(effect) { new Effect.Scale(effect.element, 1, { duration: 0.3, scaleFromCenter: true, scaleX: false, scaleContent: false, restoreAfterFinish: true, beforeSetup: function(effect) { with(Element) { [makePositioned,makeClipping].call(effect.element); }}, afterFinishInternal: function(effect) { with(Element) { [hide,undoClipping,undoPositioned].call(effect.element); setStyle(effect.element, {opacity: oldOpacity}); }} }) } }); } Effect.DropOut = function(element) { element = $(element); var oldStyle = { top: Element.getStyle(element, 'top'), left: Element.getStyle(element, 'left'), opacity: Element.getInlineOpacity(element) }; return new Effect.Parallel( [ new Effect.Move(element, {x: 0, y: 100, sync: true }), new Effect.Opacity(element, { sync: true, to: 0.0 }) ], Object.extend( { duration: 0.5, beforeSetup: function(effect) { with(Element) { makePositioned(effect.effects[0].element); }}, afterFinishInternal: function(effect) { with(Element) { [hide, undoPositioned].call(effect.effects[0].element); setStyle(effect.effects[0].element, oldStyle); }} }, arguments[1] || {})); } Effect.Shake = function(element) { element = $(element); var oldStyle = { top: Element.getStyle(element, 'top'), left: Element.getStyle(element, 'left') }; return new Effect.Move(element, { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) { undoPositioned(effect.element); setStyle(effect.element, oldStyle); }}}) }}) }}) }}) }}) }}); } Effect.SlideDown = function(element) { element = $(element); Element.cleanWhitespace(element); // SlideDown need to have the content of the element wrapped in a container element with fixed height! var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom'); var elementDimensions = Element.getDimensions(element); return new Effect.Scale(element, 100, Object.extend({ scaleContent: false, scaleX: false, scaleFrom: 0, scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, afterSetup: function(effect) { with(Element) { makePositioned(effect.element); makePositioned(effect.element.firstChild); if(window.opera) setStyle(effect.element, {top: ''}); makeClipping(effect.element); setStyle(effect.element, {height: '0px'}); show(element); }}, afterUpdateInternal: function(effect) { with(Element) { setStyle(effect.element.firstChild, {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px' }); }}, afterFinishInternal: function(effect) { with(Element) { undoClipping(effect.element); undoPositioned(effect.element.firstChild); undoPositioned(effect.element); setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }} }, arguments[1] || {}) ); } Effect.SlideUp = function(element) { element = $(element); Element.cleanWhitespace(element); var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom'); return new Effect.Scale(element, 0, Object.extend({ scaleContent: false, scaleX: false, scaleMode: 'box', scaleFrom: 100, restoreAfterFinish: true, beforeStartInternal: function(effect) { with(Element) { makePositioned(effect.element); makePositioned(effect.element.firstChild); if(window.opera) setStyle(effect.element, {top: ''}); makeClipping(effect.element); show(element); }}, afterUpdateInternal: function(effect) { with(Element) { setStyle(effect.element.firstChild, {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px' }); }}, afterFinishInternal: function(effect) { with(Element) { [hide, undoClipping].call(effect.element); undoPositioned(effect.element.firstChild); undoPositioned(effect.element); setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }} }, arguments[1] || {}) ); } // Bug in opera makes the TD containing this element expand for a instance after finish Effect.Squish = function(element) { return new Effect.Scale(element, window.opera ? 1 : 0, { restoreAfterFinish: true, beforeSetup: function(effect) { with(Element) { makeClipping(effect.element); }}, afterFinishInternal: function(effect) { with(Element) { hide(effect.element); undoClipping(effect.element); }} }); } Effect.Grow = function(element) { element = $(element); var options = Object.extend({ direction: 'center', moveTransistion: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.full }, arguments[1] || {}); var oldStyle = { top: element.style.top, left: element.style.left, height: element.style.height, width: element.style.width, opacity: Element.getInlineOpacity(element) }; var dims = Element.getDimensions(element); var initialMoveX, initialMoveY; var moveX, moveY; switch (options.direction) { case 'top-left': initialMoveX = initialMoveY = moveX = moveY = 0; break; case 'top-right': initialMoveX = dims.width; initialMoveY = moveY = 0; moveX = -dims.width; break; case 'bottom-left': initialMoveX = moveX = 0; initialMoveY = dims.height; moveY = -dims.height; break; case 'bottom-right': initialMoveX = dims.width; initialMoveY = dims.height; moveX = -dims.width; moveY = -dims.height; break; case 'center': initialMoveX = dims.width / 2; initialMoveY = dims.height / 2; moveX = -dims.width / 2; moveY = -dims.height / 2; break; } return new Effect.Move(element, { x: initialMoveX, y: initialMoveY, duration: 0.01, beforeSetup: function(effect) { with(Element) { hide(effect.element); makeClipping(effect.element); makePositioned(effect.element); }}, afterFinishInternal: function(effect) { new Effect.Parallel( [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), new Effect.Scale(effect.element, 100, { scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) ], Object.extend({ beforeSetup: function(effect) { with(Element) { setStyle(effect.effects[0].element, {height: '0px'}); show(effect.effects[0].element); }}, afterFinishInternal: function(effect) { with(Element) { [undoClipping, undoPositioned].call(effect.effects[0].element); setStyle(effect.effects[0].element, oldStyle); }} }, options) ) } }); } Effect.Shrink = function(element) { element = $(element); var options = Object.extend({ direction: 'center', moveTransistion: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.none }, arguments[1] || {}); var oldStyle = { top: element.style.top, left: element.style.left, height: element.style.height, width: element.style.width, opacity: Element.getInlineOpacity(element) }; var dims = Element.getDimensions(element); var moveX, moveY; switch (options.direction) { case 'top-left': moveX = moveY = 0; break; case 'top-right': moveX = dims.width; moveY = 0; break; case 'bottom-left': moveX = 0; moveY = dims.height; break; case 'bottom-right': moveX = dims.width; moveY = dims.height; break; case 'center': moveX = dims.width / 2; moveY = dims.height / 2; break; } return new Effect.Parallel( [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }) ], Object.extend({ beforeStartInternal: function(effect) { with(Element) { [makePositioned, makeClipping].call(effect.effects[0].element) }}, afterFinishInternal: function(effect) { with(Element) { [hide, undoClipping, undoPositioned].call(effect.effects[0].element); setStyle(effect.effects[0].element, oldStyle); }} }, options) ); } Effect.Pulsate = function(element) { element = $(element); var options = arguments[1] || {}; var oldOpacity = Element.getInlineOpacity(element); var transition = options.transition || Effect.Transitions.sinoidal; var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) }; reverser.bind(transition); return new Effect.Opacity(element, Object.extend(Object.extend({ duration: 3.0, from: 0, afterFinishInternal: function(effect) { Element.setStyle(effect.element, {opacity: oldOpacity}); } }, options), {transition: reverser})); } Effect.Fold = function(element) { element = $(element); var oldStyle = { top: element.style.top, left: element.style.left, width: element.style.width, height: element.style.height }; Element.makeClipping(element); return new Effect.Scale(element, 5, Object.extend({ scaleContent: false, scaleX: false, afterFinishInternal: function(effect) { new Effect.Scale(element, 1, { scaleContent: false, scaleY: false, afterFinishInternal: function(effect) { with(Element) { [hide, undoClipping].call(effect.element); setStyle(effect.element, oldStyle); }} }); }}, arguments[1] || {})); } Проблема, что очень много значений какое из них выбрать?
  24. Ну что здесь еще добавить... исчерпывающий ответ. Пасиб Игорь! P/S Я своему предыдущему купила куртку (800$) а он ушел...
  25. Мужчины банзай! Ну собственно говоря из названия темы все предельно ясно и все таки... подруга скинула ссылку, мол посмотри. Посмотрела Как в одном анекдоте: А в чем подвох? P/S Кстати там есть курс про Joomla 1.5... Один из администраторов форума, а именно Дмитрий Волотко совершенно точно мне написал здесь про Joomla...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy