3 html страницы

Dark19 · September 9, 2014

Здравствуйте! Необходимо сделать 3 HTML страницы:
• Главное окно
• Lobby
• My profile
Последовательность загрузки:
1. Главное окно
https://www.dropbox.com/s/iv0dl4pms1gvnbo/1.jpg?dl=0

2. После загрузки главного окна загружается вкладка Lobby
https://www.dropbox.com/s/yolcrdfhk36b5w1/2.jpg?dl=0

3. После загрузки Lobby загружается цветной фон
https://www.dropbox.com/s/zxbvwa4vdvjpx7v/3.jpg?dl=0

Описание Lobby:
• Lobby - это просто графика, в этой вкладке должна работать только кнопка MENU.
• По клику на кнопке MENU, меню открывается / закрывается.
https://www.dropbox.com/s/v3exqtxmevg2d53/4.jpg?dl=0

• В меню нужно, чтобы работал первый пункт (My Profile).
• По клику на My Profile загружается, или становится активной, если уже загружена, вкладка My profile.
https://www.dropbox.com/s/y7m908tr2lbm04a/5.jpg?dl=0

Описание My profile:
• My profile – это сверстанная форма.
• Кнопка ON/OFF – это визуализация checkbox’a (on – checked, off – unchecked)
• По нажатию на кнопку SEND MESSAGE TO OTHER WINDOWS, все окна, кроме My profile, должны получить сообщение ‘Message for all’.
• По нажатию на кнопку SEND MESSAGE TO LOBBY, окно Lobby должно получить сообщение ‘Message for Lobby’.
• Когда окно получает сообщение, оно должно вывести в консоль свой URL и полученное сообщение.
• По нажатию на кнопку X или CLOSE вкладка My Profile закрывается и активной становится вкладка Lobby.

Подскажите просто как правильно это все сделать? Спасибо.

Veseloff · September 10, 2014

Не понимаю в чём проблема. Надо взять и сделать. В чём именно вопрос?

Dark19 · September 10, 2014

Не понимаю в чём проблема. Надо взять и сделать. В чём именно вопрос?

Я не знаю как подгружать эти страницы и менять фон, javascript'ом как-то?

Sergik+ · September 10, 2014

Не понимаю в чём проблема. Надо взять и сделать. В чём именно вопрос?
Я не знаю как подгружать эти страницы и менять фон, javascript'ом как-то?

http://htmlbook.ru/content/ssylka-na-novoe-okno

Switch74 · September 10, 2014

подгружать можно через jquery $.post или load если хочется без jquery то нужно будет писать функцию по работе ajax или придумывать другой способ подгрузки например используя фрэймы.

способов через js сменить фон много для определенных элементов по разному, например:

document.getElementById('element').style.background = "red";

Veseloff · September 10, 2014

Я не знаю как подгружать эти страницы и менять фон, javascript'ом как-то?

Да, можете джаваскриптом.

Dark19 · September 10, 2014

подгружать можно через jquery $.post или load если хочется без jquery то нужно будет писать функцию по работе ajax или придумывать другой способ подгрузки например используя фрэймы.
способов через js сменить фон много для определенных элементов по разному, например:
document.getElementById('element').style.background = "red";

Я подгрузил страницу так:

$("document").ready(function(){    $( "body" ).load( "http://testrab/lobby.html");});

как мне теперь выровнять ее чтобы было как на второй картинке?

Switch74 · September 10, 2014

ну я не вижу что вы подгрузили и как оно получилось

подозреваю, что вам нужно меню выровнять по левому краю и скорее всего его лучше не в body грузить, а в блок, который выровнен по центру уже

Dark19 · September 10, 2014

ну я не вижу что вы подгрузили и как оно получилось
подозреваю, что вам нужно меню выровнять по левому краю и скорее всего его лучше не в body грузить, а в блок, который выровнен по центру уже

У меня есть такой html 1 стр:

<!DOCTYPE html><html><head>    <title></title>    <link rel="stylesheet" href="/css/style.css"/>    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>    <script src="/js/main.js"></script></head><body><div id="center"></div></body></html>

вот 2 стр:

<body><div id="tab"><img src="img/lobby.jpg"></div></body>

и вот css:

body{    background: url("/img/bg.jpg") no-repeat 50% 50% fixed;    max-width: 1920px;    max-height: 1080px;    margin: 0 auto;}#tab img{    display: block;    margin: 0 auto;}

как картинку с 2 стр. выровнять чтобы она была на любом экране по центру 1 стр.?

Switch74 · September 11, 2014

1. чисто теоретически, думаю вам нужно убрать в 2 стр. body

2. я так понимаю у вас картинка имеет фиксированный размер, способов много. Для выравнивания например можно выбрать что-нибудь из этого

Dark19 · September 11, 2014

1. чисто теоретически, думаю вам нужно убрать в 2 стр. body
2. я так понимаю у вас картинка имеет фиксированный размер, способов много. Для выравнивания например можно выбрать что-нибудь из этого

Я решил проблему с помощью js:

alignCenter($("#center"));        // вызов функции при ресайзе окна        $(window).resize(function() {            alignCenter($("#center"));        });        // функция центрирования элемента        function alignCenter(elem) {            elem.css({                // вычисление координат left и top                left: ($(window).width() - elem.width()) / 2 + 'px',                top: ($(window).height() - elem.height()) / 2 + 'px'            })        }

но теперь нужно сделать, чтобы после того как полностью загрузилась 1 стр. вместо нее начала загружаться 2 стр.

Edited September 11, 2014 by Dark19

Switch74 · September 11, 2014

добавьте в конце страницы, которая у вас подгружается скрипт, который будет подгружать следующую

Dark19 · September 11, 2014

добавьте в конце страницы, которая у вас подгружается скрипт, который будет подгружать следующую

подскажите как сделать так, чтобы по клику на id="menu" откривались пункты меню, а по второму клику прятались? Вот мой код, но он не работает(

<div id="menu">        <ul class="button">            <li><a href="/"></a></li>            <li><a href="/"></a></li>            <li><a href="/"></a></li>            <li><a href="/">gfhgfh</a></li>            <li><a href="/">gfhgf</a></li>            <li><a href="/">gfhg</a></li>            <li><a href="/">gfh</a></li>            <li><a href="/">gfhg</a></li>        </ul>    </div>

$(function() {        function init_menu() {            $('#menu').hide();            $('.button').click(function() {$(this).next().slideToggle('normal');});        }        init_menu();    });

coolhtml · September 11, 2014

http://jsfiddle.net/351vcadn/

Подключай jquery не выше 1.8.3

Dark19 · September 12, 2014

http://jsfiddle.net/351vcadn/
Подключай jquery не выше 1.8.3

так не работает переход по ссылкам

coolhtml · September 12, 2014

http://jsfiddle.net/351vcadn/1/

Dark19 · September 12, 2014

http://jsfiddle.net/351vcadn/1/

Спасибо, работает.

Так уже все сделал, только не знаю как вот это реализовать:

1)по нажатию на кнопку SEND MESSAGE TO OTHER WINDOWS, все окна, кроме My profile, должны получить сообщение ‘Message for all’.

2)по нажатию на кнопку SEND MESSAGE TO LOBBY, окно Lobby должно получить сообщение ‘Message for Lobby’.

3)когда окно получает сообщение, оно должно вывести в консоль свой URL и полученное сообщение

Edited September 12, 2014 by Dark19

Sign In

3 html страницы

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information