Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Графический элемент, при нажатии на кнопку 
:(
    Опции темы
NetFlame
Дата 11.7.2007, 10:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
Здравствуйте!

Как сделать быстрое появление графического элемента с текстом ( к примеру, как на этом форуме ) в центре экрана при нажатии на кнопку?

Заранее спасибо!

Это сообщение отредактировал(а) NetFlame - 11.7.2007, 10:19
PM MAIL WWW ICQ   Вверх
Mymik
Дата 11.7.2007, 11:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78
Кидаешь этот код на страницу так чтобы он загружался. И когда код браузер при загрузке дойдет до этих строк, то он загружает это изображение.
Код

   var oImage = new Image();
   oImage.src = "<указываешь адрес на изображение>";



--------------------
ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru 
HomaPage ::  http://localhost/

:to_become_senile  :this
PM MAIL WWW ICQ   Вверх
pythonwin
Дата 11.7.2007, 12:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36
ты хочешь чтобы рисунок создавался на стороне клиента?


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
GZep
Дата 11.7.2007, 12:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
ну просто надо сделать прозрачный div. потом при нажатии на кнопку через javascript его перенести его в центр и сделать не прозрачным.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
NetFlame
Дата 11.7.2007, 12:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
После того, как посетитель нажимает на кнопку, начинают выполняться PHP функции. А выполняются они долго. И во время их выполнения, должна появится картинка "Пожалуйста, подождите. Это может занять несколько секунд". После того, как PHP функции выполнились, загружается новая страница ( с отчетом ), и картинка исчезает.
PM MAIL WWW ICQ   Вверх
GZep
Дата 11.7.2007, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
это аякс запрос к пхп скрипту + то что я написал выше.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
NetFlame
Дата 11.7.2007, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
Ну из поста я понял только ajax, а примера нету? Как выглядит этот "запрос"?
PM MAIL WWW ICQ   Вверх
NetFlame
Дата 12.7.2007, 10:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
Я реализовал это с помощью ява-скрипта:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#PicDiv {display: none};
</style>
</head>

<script language="JavaScript" type="text/javascript">
<!--
function showContent()
{
document.getElementById("PicDiv").style.display = "block";
}
// -->
</script>

<body>

....

<div id="picDiv" style="position: absolute; left: 600px; top: 600px; width: 150px; height: 150px; z-index: 1; display: none;"><table class="bodyline" border="0" cellpadding="0" cellspacing="0" height="150" width="150"><tr class="bgcolor1"><td align="center" valign="middle"><img src="images/load.gif" id="picDivImg"><br /><br />Пожалуйста,подождите.<br />Обработка информации<br />может занять<br />несколько минут!</td></tr></table></div>

....

<form>
....
<input type="submit" value="Послать" onClick = "showContent();">
</form>

....
<body>
</html>




В IE отлично работает, а вот в Опере почему-то вообще окошко не появляется.. Почему?
PM MAIL WWW ICQ   Вверх
GZep
Дата 12.7.2007, 19:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
NetFlame, у тебя и css прописана невидимость блока... и в атрибутах самого diva'a тоже прописано. Короче посмотри готовые варианты (например как этот див работает на этом форуме) и не ломай голову, все-равно лучше не сделаешь.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
NetFlame
Дата 12.7.2007, 19:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
Легко сказать, посмотреть как этот див работает на этом форуме... Тут миллион этих .JS, тем более вряд ли что-то поймёшь тут

Код

var _0="?",_1="&",_2="\n",_3="string",_4="FORM",_5="POST",_6="GET",_7="url_too_long",_8="JsHttpRequest=",_9="no_headers",_A="SCRIPT",_B="JavaScript",_C="none",_D="absolute",_E="hidden",_F='object',_G='string',_H='function',_I='number',_J='undefined',_K='^d([0-9]*)$',_L='p_all',_M='Post_area',_N='Post_Form',_O='code',_P='_',_Q="#0#",_R='boolean',_S='GET',_T='edit_title',_U='s_pages_1',_V='s_pages_2',_W='Post',_X='7.21   ',_Y='postcolor',_Z="post_scroll",_a="px",_b='Legends',_c="Post_area",_d=" ",_e='symbols',_f=".\n",_g='you_have_used',_h='symbols_ostalos',_i="input_for_opera",_j="true",_k="preview",_l="mutliact",_m="allbox",_n="checkbox",_o="fmobj.msgid_",_p=".checked = true;",_q='el',_r='none',_s='post_popup',_t='mouseout',_u='block',_v="on",_w="function",_x="click",_y="character",_z='\n',_00="undefined",_01="mouseover",_02="mouseout",_03='align_left',_04='" title="',_05='" /></a><img src="',_06='align_right',_07='list',_08='list_element',_09='podcherknutuy',_0A='zacherknutuy',_0B='moved_element',_0C='/none.gif" alt=" " class="fatopsep" /><a onclick="return false;" href="javascript: void(0);"><img src="',_0D='fast_key',_0E='</b><img src="images/fa_OK.gif" alt="" /></a></span><br />',_0F=': Ctrl+Enter"><b>',_0G='/fa_send.gif" alt="" /></a>&nbsp;&nbsp;</span><span class="nobr"><a tabindex="53" href="javascript:sendForm(\'preview\');"><b>',_0H='</b><img src="',_0I='/fa_preview.gif" alt="" /></a>&nbsp;&nbsp;</span><br />',_0J="ToolMenu_ChildPlatform_",_0K="visible",_0L="style='width:100%'",_0M="</a></li>\n",_0N="http://",_0O='prodoljit?',_0P='enter_descr',_0Q='submit',_0R="\n[/quote]",_0S="    ",_0T="translit",_0U="&nbsp;",_0V="</span>",_0W="[/color]",_0X="[/size]",_0Y="[/font]",_0Z="[code=",_0a="\\n",_0b='/style_images/2/ratings/',_0c='post-ratings-',_0d='rating_';
function JsHttpRequest(){var A=this;A.onreadystatechange=null;A.readyState=0;A.responseText=null;A.responseXML=null;A.status=200;A.statusText="OK";A.responseJS=null;A.caching=false;A.loader=null;A.session_name="PHPSESSID";A._ldObj=null;A._reqHeaders=[];A._openArgs=null;A._errors={inv_form_el:"Invalid FORM element detected: name=%, tag=%",must_be_single_el:"If used, <form> must be a single HTML element in the list.",js_invalid:"JavaScript code generated by backend is invalid!\n%",url_too_long:"Cannot use so long query with GET request (URL is larger than % bytes)",unk_loader:"Unknown loader: %",no_loaders:"No loaders registered at all, please check JsHttpRequest.LOADERS array",no_loader_matched:"Cannot find a loader which may process the request. Notices are:\n%",no_headers:"Method setRequestHeader() cannot work together with the % loader."};A.abort=function(){with(this){if(_ldObj&&_ldObj.abort){_ldObj.abort()};_cleanup();if(readyState==0){return};if(readyState==1&&!_ldObj){readyState=0;return};_changeReadyState(4,true)}};A.open=function(B,C,D,E,F){with(this){try{if(document.location.search.match(new RegExp("[&?]"+session_name+"=([^&?]*)"))||document.cookie.match(new RegExp("(?:;|^)\\s*"+session_name+"=([^;]*)"))){C+=(C.indexOf( _0)>=0? _1: _0)+session_name+"="+this.escape(RegExp.$1)}}catch(e){};_openArgs={method:(B||"").toUpperCase(),url:C,asyncFlag:D,username:E!=null?E:"",password:F!=null?F:""};_ldObj=null;_changeReadyState(1,true);return true}};A.send=function®{if(!this.readyState){return};this._changeReadyState(1,true);this._ldObj=null;var G=[],H=[];if(!this._hash2query(R,null,G,H)){return};var   и т.д....


Это сообщение отредактировал(а) NetFlame - 13.7.2007, 09:19
PM MAIL WWW ICQ   Вверх
GZep
Дата 12.7.2007, 21:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
измени, плиз свое сообщение, я понял smile вот напишу экзамен и сам посмотрю дл тебя.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
NetFlame
Дата 13.7.2007, 09:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 316
Регистрация: 8.3.2006
Где: Москва

Репутация: нет
Всего: нет
спасибо  smile 
PM MAIL WWW ICQ   Вверх
GZep
Дата 13.7.2007, 20:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
вот винградовская табличка "пожалуйста подождите"
Код

<span style="display: none;" id="ajax_w"><b>Загрузка. Пожалуйста,<br />подождите...</b><br /><br /><img src="http://forum.vingrad.ru/style_images/2/l_ajax.gif" alt=""/></span>

(из разметки страницы взял smile )

Разбирать javascript винграда - проще удавиться, проверял smile 

Да это и не надо, так как для аякса лучше использовать это. Или что-то наподобии этого.

Добавлено через 3 минуты и 44 секунды
Цитата(NetFlame @  12.7.2007,  10:58 Найти цитируемый пост)
<script language="JavaScript" type="text/javascript">
<!--
function showContent()
{
document.getElementById("PicDiv").style.display = "block";
}
// -->
</script>

для этого используем функцию toggle(). Взять ее и посмотреть что она делает можно здесь.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0552 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.