Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Ищу скрипт оформления краткой новости

Обсуждение темы Ищу скрипт оформления краткой новости в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Помогите найти скрипт или способ, чтобы при наведении на картинку в краткой новости появлялся хинт с кратким описанием новости? Картинка выводится стандартным методом ...


Закрытая тема
 
Опции темы
Старый 04.09.2012, 23:17   #1
Помогите найти скрипт или способ, чтобы при наведении на картинку в краткой новости появлялся хинт с кратким описанием новости?
Картинка выводится стандартным методом DLE (thumb)
Примерно как на картинке!
http://s017.radikal.ru/i432/1209/ab/1ece20c05c70.jpg
 
Старый 04.09.2012, 23:17
Ссылки
Старый 05.09.2012, 06:18   #2
самый простой способ: сделать картинку и описание в одном контейнере
<div class="thumb_container"><img class="thumb"/><div class="description></div></div>
а в стилях кроме всего остального прописать:
.description {display:none}
.thumb_container:hover .description {display:block;}

По этому принципу создаются выпадающие меню без использования скриптов.
 
Старый 05.09.2012, 17:07   #3
Поясняю от лица, JohnJ
<div class="thumb_container"><img class="thumb"/><div class="description></div></div>

<div class="description>Коммент</div> - тут между тегами пишите что угодно. просто при наведении у вас будет резко все это появлятся ... а чтобы сделать все плавно нужно либо на JS написать время появление div, либо воспользоваться CSS3 (что разумеется логичнее)
 
Этот пользователь сказал спасибо maxefect за это полезное сообщение:
sega (12.09.2012)
Старый 11.09.2012, 15:51   #4
Цитата:
Сообщение от maxefect Посмотреть сообщение
. просто при наведении у вас будет резко все это появлятся ... )
Счасте появится после
PHP код:
-webkit-transition0.5s;
-
moz-transition0.5s;
-
o-transition0.5s;
transition0.5s
и без скриптов. ну а IE 7-8.... давай, до свидания!
 
Этот пользователь сказал спасибо vladendark за это полезное сообщение:
sega (12.09.2012)
Старый 11.09.2012, 16:10   #5
если кто-то пользуется ie-7, ie-8, то значит они любят резкие переходы и т.п. Не стоит их лишать такой возможности
 
Старый 11.09.2012, 17:22   #6
Вроде всё просто, а у меня не работает!
<div class="thumb_container"><img class="thumb"/><div class="description></div></div> Надо же в каждой новости писать?

Как я понял это не совсем то, что нужно!
У меня в новостях уже есть краткое описание, но его просто не видно в блоке ниже картинки (картинка в размер блока)
height: 200px;
overflow: hidden;
Вот! А надо при наведении на картинку или может на сам блок, появлялся хинт не обрезаной краткой новостью.
По типу модуля "быстрый просмотр полной новости из краткой" (я его переделал в просмотр краткой новости из краткой-обрезаной)! Я его пока и использую, но с ним не удобно!

Не знаю как ещё объяснить!
Посмотрите! Маленький монитор под каждой новостью http://stopani.ru

Кнопка работает так:
<a href="#" onclick="show_full('{news-id}'); return false;">

Если поменять на <a href="#" onmouseover="show_full('{news-id}'); return false;">
То приходится всё время закрывать окно
А как сделать onmouseout ума не хватает.
 
Старый 11.09.2012, 23:47   #7
Посмотрите пример. http://jsfiddle.net/JohnJ/9bFSa/2/
Там я удалил из первого тега <a> onmouseover и назначил класс "show_fast".
Затем в скрипте сделал следующее
Код:
 $(document).ready(function () {
            $('a.show_fast').mouseenter(function () {
                show_full($(this).data('id'));
            }).mouseleave(function () {
                hide_full();
            });
        })
Т.е. на каждый элемент <a> навешал события через скрипт: одно событие вызывает функцию показа окна, другое - функцию скрытия.
Естественно, что ajax-запрос я сэмулировал, как и формирование окна. Поэтому в примере - просто скрываю его. На приведённом в пример сайте происходит нечто похожее:
Код:
$('#show_full_aj').dialog('close');$('#show_full_aj').remove();$('#show_full_bf').remove();
Пробуйте.
 
Старый 12.09.2012, 00:26   #8
Не получается!

Вот мой код
Код:
<script type="text/javascript">
<!--
function show_full(id) {
$(function(){
        $.ajax({
            type: "POST",
            url: dle_root+"engine/modules/show_full.php",
            data: "id="+id,
            dataType: "xml",
            success: function(xml) {
                $('div#show_full_aj').remove();
                $('#show_full_bf').remove();
            jQuery(xml).find('site').each(
                    function()
                    {
                    title = jQuery(this).find('title').text(),
                    desc = jQuery(this).find('des').text();
                     rate = jQuery(this).find('rate').text();
                $('body').append("<div  id=\"show_full_aj\"   style=\"overflow:  auto;padding:3px!important;\"></div><div  onmouseout=\"$('#show_full_aj').dialog('close');$('#show_full_aj').remove();$('#show_full_bf').remove();\"  id=\"show_full_bf\"  style=\"position:fixed;top:1px;width:100%;height:100%;background:#000;opacity:  0.8;filter:  alpha(opacity=80);\"><br></div>");

                    $('#show_full_aj').dialog({
                    draggable: false,
                    
                    zIndex: 900,
                    width: 520,
                    height: 400,
    
                    
                    buttons:  [   {         text: "Закрыть",         click: function() {  $('#show_full_aj').remove();$('#show_full_bf').remove();$(this).dialog("close");  }   }],
                    close: function(event, ui) { $('div#show_full_aj').remove();$('#show_full_bf').remove(); },
                      title: title,
                    autoOpen: true
            });  
                      $('.ui-dialog-buttonset').html('<p align="left">'+rate+'</p>');            
                      $('.ui-dialog').css({position:'fixed',top:$(window).height()/2-280});  
                                           $('#show_full_aj').html( desc);        
               });      
                    
            }
            
        });
    });
}
//-->
</script>
Что надо изменить?

Последний раз редактировалось sega; 12.09.2012 в 00:28..
 
Старый 12.09.2012, 00:42   #9
добавить ниже функцию скрытия окна (например, hide_full) и вызывать её в нужное время.
 
Этот пользователь сказал спасибо JohnJ за это полезное сообщение:
sega (12.09.2012)
Старый 12.09.2012, 00:42
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Новости хостинга КОМТЕТ! komtet Платный хостинг 0 07.08.2014 10:17
Руководства по стилю оформления ALEXSTAR Кальянная 10 22.07.2011 19:28
ищем талантливого дизайнера для оформления веб-сайта gmyuriy Вакансии 0 20.05.2009 22:46
Ищу дизайнера для оформления и создания сайта nata68 Вакансии 4 09.05.2006 16:36
новости в формате Rss-каналов!!! Apach HTML, CSS, JavaScript 4 07.02.2006 10:16


Текущее время: 19:28. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум