ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

🔒 Как создать левый фрейм в новой версии без фреймов?

 

49
Ден @Dezmond1988
В моём старом чате был левый фрейм в нем были смайлы. Его создать было просто, но теперь, я так понял, можно создать фрейм через "Администрация" - "Шаблоны" - "Чат внутри". Разбирался долго, но так и не понял. Подскажите, пожалуйста, как это сделать.

20090
Dimitry @Dimitry
Теперь система безфреймовая и можно делать чат блоками, смотри как сделаны другие блоки в чате внутри

6703
Андрей @ZloVeЩиЙ
html and css же!!!

4619
Web3r @Web3r
Перед <div id="topdiv"> добавить <div id="sidediv">...</div>, далее в style.css:
#sidediv {
position: absolute;
width: 80px;
top: 0;
bottom: 0;
}

Затем для #topdiv, #gamediv, #leftdiv, #privatdiv, #bottomdiv изменить значение (в style) left:0 на left: 80px;

1007
BETEPAH @BETEPAH
Web3r пишет:

Перед <div id="topdiv"> добавить <div id="sidediv">...</div>, далее в style.css:
#sidediv {
position: absolute;
width: 80px;
top: 0;
bottom: 0;
}

Затем для #topdiv, #gamediv, #leftdiv, #privatdiv, #bottomdiv изменить значение (в style) left:0 на left: 80px;

А смайлы вставляются через ифрейм скриптом
document.getElementById('sidediv').innerHTML = '<iframe src="index.php?inc=smile&table=1-50-0&frame=1&cat=fav&' + yourkey + '" style="width:140px; height:100%; border:0;"></iframe>'
Про настройки таблицы table=1-50-0 написано в админке, в разделе со смайлами. Стили фрейма style="width:140px; height:100%; border:0;" по своему усмотрению.

Отредактировано BETEPAH - 10.05.2013
49
Ден @Dezmond1988
Спасибо! Но я хочу сделать вот так

Какие размеры менять в коде?

Отредактировано Dezmond1988 - 11.05.2013
424
ishkiniaev @ishkiniaev
Dezmond1988 пишет:

Спасибо! Но я хочу сделать вот так
**********
Какие размеры менять в коде?

тоже самое, только ширину задай какую хочешь

7094
Dim @Render
Достаточно просто вникнуть в систему абсолютного позиционирования блоков, на самом деле в какой-то степени она даже проще в понятливости вёрстки, чем более сложные построения блоков.
В чате внутри основной див с сообщениями нужно просто сдвинуть немного правее, а слева от него поместить тот самый див, в котором буду смайлы.
Наверное как-то так, но не проверял, да и выше уже дали готовые ответы так же...
<div id=smilediv style="position:absolute; overflow-y:scroll; padding-left:10px; left:0px; width:100px; top:45px; bottom:55px; border:1px gray solid;">смайлы...</div>
<!-- LEFT FRAME -->
<div id=leftdiv class=header-body style="position:absolute; overflow-y:scroll; left:105px; right:295px; top:45px; bottom:55px; border:1px gray solid;">
Загрузка ...
</div>

49
Ден @Dezmond1988
Так сделаем проще!
Вот код "Чат внутри":
<!DOCTYPE html>
<html>
<head>
<title>%title%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script><!--
%scripts%
// --></script>
</head>
<body class=chat-body scroll="no" style="margin:0px; padding:0px; overflow:hidden;" onload="loadframes();">

<!-- HIDDEN FRAME -->
<iframe name=hidden width=0 height=0 style="display:none;"></iframe>
<iframe name=left width=0 height=0 style="display:none;"></iframe>

<!--LEFT FRAME -->
<div id="sidediv">Смайлы:
<script>document.getElementById('sidediv').innerHTML = '<iframe src="index.php?inc=smile&table=1-50-0&frame=1&cat=fav&' + yourkey + '" style="width:110px; height:100%; border:0;"></iframe>'</script>
</div>

<!-- TOP FRAME -->
<div id=topdiv class=top-body style="position:absolute; height:40px; left:110px; right:0px; top:0px; padding-left:10px; border:1px gray solid;">

</div>

<!-- GAME FRAME -->
<div id=gamediv class=header-body style="position:absolute; height:60px; left:110px; right:295px; top:45px; display:none; z-index:1; border:1px gray solid;">
<iframe name=gameframe src=start.html style="position:absolute; width:100%; height:100%; border:0px;"></iframe>
</div>

<!-- LEFT FRAME -->
<div id=leftdiv class=header-body style="position:absolute; width=80px; overflow-y:scroll; padding-left:10px; left:110px; right:295px; top:45px; bottom:65px; border:1px gray solid;">
Загрузка ...
</div>

<!-- PRIVAT FRAME -->
<div id=privatdiv class=header-body style="position:absolute; overflow-y:scroll; height:70px; left:110px; right:295px; bottom:65px; display:none; padding-left:10px; border:1px gray solid;">

</div>
<script><!--
/* Показываем фрейм привата если включен */
var leftdiv_bottom;
function do_privat() {
var obj1 = document.getElementById("leftdiv");
var obj2 = document.getElementById("privatdiv");
if (!leftdiv_bottom) leftdiv_bottom = parseInt(obj1.style.bottom);
if (privatok == 1) {
obj1.style.bottom = (parseInt(obj1.style.bottom) + parseInt(obj2.style.height)) + 5 + "px";
obj2.style.display = "block";
} else {
obj1.style.bottom = leftdiv_bottom + "px";
obj2.style.display = "none";
}
}
do_privat()
// --></script>

<!-- USERS FRAME -->
<div id=usersdiv class=users-body style='position:absolute; overflow-y:auto; width:270px; top:45px; right:0px; bottom:65px; padding:10px; border:1px gray solid;'>
<center>
<script>
/* Форма для перехода по комнатам (видна если есть комнаты) */
if(parent.rooms.length>1) {
document.write("<select class=ok name=selectroom onchange=\"parent.setmyroom(this.value);\">");
for(var i=0;i<parent.rooms.length;i++) {if(i==parent.myroom) sel="selected"; else sel="";
document.write("<option value="+i+" "+sel+">"+parent.rooms[i][0]+" (0)");
}
document.write("</select><br><br>");
}
</script>
<div id=cams>
<div id=mywebcam style="display:none;">&nbsp;</div>
</div>
</center>
<div>
Всего в чате: <b><span id=count>0</span></b>
<select style='float:right;' name=setstatus onchange="parent.gettime=new Date().getTime();parent.setstatus(this.value);">
<option value=0>На связи
<option value=1>Отошел
<option value=2>Занят
<option value=3>Вконтакте
<option value=4>Курю
<option value=5>Гамаю
<option value=6>Оффлайн
<option value=7>в Ахуе
<option value=8>Люблю
<option value=9>Музыка
<option value=10>В инете
<option value=11>Хуёво
<option value=12>Злой
<option value=13>Уроки
<option value=14>Обидили
<option value=15>В дУше
<option value=16>Читаю
<option value=17>Принимаю пищу
<option value=18>Работу работаю
<option value=19>Готовлю
<option value=20>Болею
<option value=21>В творчестве
<option value=22>Пылесошу
<option value=23>Мегарадостный))))
<option value=24>В ярости!!!!!
<option value=25>Отдыхаю!!!!
<option value=26>Играю на гитаре
<option value=27>Перебухал и сдох
<option value=28>Ищу мужа/жену
<script>if(webcam) document.write("<option value=98>вещаю публично");</script>
<script>if(webcam) document.write("<option value=99>вещаю приватно");</script>
</select>
</div>
<div id=users></div><br>

</div>

<!-- CHAT FRAME -->
<div id=bottomdiv class=bottom-body style='position:absolute; width:100%; height:60px; left:110px; bottom:0px; padding-left:10px; border:1px gray solid;'>
<form action='index.php?inc=write' method=post target="hidden" name="fmsg" enctype="multipart/form-data" onsubmit="return parent.msg_send();" onreset="return parent.msg_reset();">
<input type=hidden name=text value=''>
<input type=hidden name=trans value=0>
<script>
document.write("<input type=hidden name=nick value="+parent.mynick+">");
document.write("<input type=hidden name=id value="+parent.myid+">");
document.write("<select name=cmd class=text>");
document.write("<option value=''>-=cказать=-");
document.write("<option value='/privat '>приватно");
document.write("<option value='/privat2 '>приват окно");
document.write("<option value='/me '>сообщение");
document.write("<option value='/call '>вызвать");
if(parent.alerter[parent.mynick]) document.write("<option value='/alert '>алерт-вызов");
if(parent.clearer[parent.mynick]) document.write("<option value='/clear '>очистить");
if(parent.reloader[parent.mynick]) document.write("<option value='/reload '>перезагрузить");
if(parent.ignorer[parent.mynick]) document.write("<option value='/ignore '>полный игнор");
if(parent.admin==1) {
document.write("<option value=''>-=модерация=-");
document.write("<option value='/kill '>удалить");
document.write("<option value='/kick '>выпнуть");
document.write("<option value='/windows '>закидать окнами");
document.write("<option value='/warn '>предупредить");
}
document.write("</select>");
</script>
<input type=text title='Очистить поле' onclick='tonick.value="";if(cmd) cmd.value="";' class=ok name=tonick size=10 style='cursor:hand;' readonly>
<input type=button onclick='document.fmsg.text0.value=parent.go(-1);' value='<<' class=ok>
<input type=button onclick='document.fmsg.text0.value=parent.go(1);' value='>>' class=ok>
<input type=checkbox name=autotext title="Автоответчик - Укажите текст в поле.">
<input type=text class=text name=text0 size=80 maxlength=500>
<input type=button onclick="document.fmsg.text0.value='';document.fmsg.text0.focus();" value='X' class=ok >
<input type=submit class=ok value=Отправить>
<br>
<a href=trans.html title=Транслит onclick="parent.wo(this.href,'Транслит','200','450','yes');return false" target=translit>Транслит</a>
<input type=checkbox onclick="fmsg.trans.value=1; if(!this.checked) fmsg.trans.value=0;">
<a href=# onclick="parent.russ();return false" title='На русскую раскладку'>RU</a>
<a href=# onclick="parent.wo('index.php?inc=smile&'+parent.yourkey,'smile','200','450','yes');return false" target=smile title=Смайлы>Смайлы</a>
<a href=# onclick="parent.wo('index.php?inc=top100','top100','600','400','yes');return false" target=top100 title=Top100>Топ100</a>
<a href=# onclick="parent.wo('help.html','help','500','300','yes');return false" target=help title=Помощь>Помощь</a>
<a href=# onclick="parent.wo('prav.html','prav','500','300','yes');return false" target=help title=Помощь>Правила</a>
<a href=# onclick="parent.wo('index.php?inc=set&'+parent.yourkey,'setting','600','300','yes');return false" target=setting title=Настройки>Настройки</a>
<a href=# onclick="parent.wo('index.php?inc=admin&'+parent.yourkey,'admin','600','300','yes');return false" target=admin title=Админка><script>if(parent.admin==1) document.write('Админка');</script></a>
<a href=# onclick="parent.openhistory();return false" title='История ваших сообщений'>История</a>
<a href=# onclick="parent.startgame(); return false;" title='Викторина - угадывание слов'>Викторина</a>
<a href=# onclick="parent.wo('index.php?inc=love&'+parent.yourkey,'love','600','300','yes'); return false;" title='Сыграть свадьбу'>Моя семья</a>
<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','600','300','yes');return false" target=post title='Почта' id=idpost>Почта(<script>document.write(parent.post);</script>)</a>
<script>if(parent.post>0) {parent.focus();alert("У вас новая почта!");}</script>
<a href=# onclick='parent.loadframes();' title='Обновить окно сообщений'>Обновить</a>
<a href=# onclick="parent.location.href='exit.html?'+parent.yourkey;" title='Выйти из чата'>Выход</a>
<script>if(parent.loadfile_on>0) document.write("<input type=file name=loadfile size=1 class=text>");</script><input type="checkbox" id="sound" onclick="playSound(1); if(!this.checked) playSound(0);" title="http://alexanderost.pochta.ru/sndMsgSent.wav" /><label for="sound">вкл/выкл звук</label>
<script language="javascript" type="text/javascript">
<!--
function playSound(v) {
if(v == 1) { parent.symbols[2]='<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" filename="http://alexanderost.pochta.ru/sndMsg.wav" src="http://alexanderost.pochta.ru/sndMsgSent.wav" width="0" height="0" autostart="true"></embed>'+"»"+"<p style='margin-top:5px; border:1px dashed #999999;'><font color=0000ff></font>";
parent.symbols[4]='<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" filename="http://alexanderost.pochta.ru/sndMsg.wav " src="http://alexanderost.pochta.ru/sndMsgSent.wav" width="0" height="0" autostart="true"></embed>'+"<font color=red>»</font>"+"<p style='margin-top:5px; border:1px dashed #bac90b;'>"; }
if(v == 0) { parent.symbols[2]="<p style='border:1px dashed #ffff00;'>";
parent.symbols[4]="<p style='border:1px dashed #ff00ff;'>"; } }
//-->
</script>
<input type="button" class="ok" name="" value="Вкл/выкл приват" onclick="parent.privatok^=1;parent.do_privat();parent.loadframes();"/>
</form>
</div>

<!-- END BODY -->
</body>
</html>

Согласно ему получается вот так:

А надо, вот так:


Я пытался эксперементировать с размерами. Но ничего не получается.
Левый блок находит на нижний (и получается, что смайлы перемешаны с ссылками из нижнего блока

Отредактировано Dezmond1988 - 11.05.2013
424
ishkiniaev @ishkiniaev
непонятно что ты требуешь. тупо полоски?

49
Ден @Dezmond1988
нет. Вот так. Выделю разными цветами

а не так

20090
Dimitry @Dimitry
для блока надо указать
top: 60px; bottom:60px;

49
Ден @Dezmond1988
Воо. Спасибо! Теперь все нормально

424
ishkiniaev @ishkiniaev
так нарисовать надо было сделать в самом начале)

49
Ден @Dezmond1988
Так я вроде разборчиво нарисовал


В закрытой теме нельзя отправлять сообщения.