Подгрузка html страницы в DIV

Serega555 · March 9, 2015

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

С права и с лева сайдбары ссылками, нужно что бы эти ссылки загружались в "div содержимым", без перезагрузки основной странницы

сайт без CMS на одном только html+css

http://s56.radikal.ru/i154/1108/19/5677ad77a23e.jpg

Rumlin · March 10, 2015

без перезагрузки основной странницы

Это фреймы https://ru.wikipedia.org/wiki/%D4%F0%E5%E9%EC_(HTML)

Инквизитор · March 10, 2015

С права и с лева

Щито?

нужно что бы эти ссылки загружались в "div содержимым", без перезагрузки основной странницы
сайт без CMS на одном только html+css

Если содержимое (и меню) статично - можно и на хтмл+ксс

Если содержимое заранее неизвестно (мало ли что вы туда натолкаете) - <iframe> спасет вас. Ну а яваскрипт спасет по-другому.

Как вам больше нравится?

Инквизитор · March 10, 2015

Если содержимое (и меню) статично - можно и на хтмл+ксс

Адский костылинг, но чисто для иллюстрации принципа. Копи, пасте, трай:

<!doctype html><html>
<head>
<style>
body {margin: 0;}
    * {box-shadow:0 0 10px red inset;}
	#left {width:100%; box-sizing:border-box; vertical-align:top; position:relative}
	#center {width:80%; box-sizing:border-box; height:100%; position:absolute; top:0;left:20%;}
	#right {width:25%;float:right;}
	.content1, .content2, .content3 {background-color:pink;display:none; width:75%;float:left;}
	#link1:checked + * + * + * + * + * + * .content1,
	#link2:checked + * + * + * + * .content2,
	#link3:checked + * + * .content3 {display:block;}
	#left input {display:none;}
	#left label {display:block; width:20%; cursor:pointer;}
	#left label:hover {text-decoration:underline;}
</style>
</head>
<body>
<header>
This is a header
</header>
<div id="left">
<input type="radio" name="selector" id="link1" checked></input><label for="link1">Link 1</label>
<input type="radio" name="selector" id="link2"></input><label for="link2">Link 2</label>
<input type="radio" name="selector" id="link3"></input><label for="link3">Link 3</label>
<div id="center"><!-- да, right и center внутри left -->
	<div class="content1">Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> </div>
	<div class="content2">Content 2 </div>
	<div class="content3">Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> </div>
	<div id="right"> Right 1 <br/> Right 2</div><!-- да, right внутри center -->
</div>	
</div>
</body>
</html>

Dennis · March 10, 2015

На аяксе это делется. Через JQuery - вообще элементарно. http://api.jquery.com/jquery.ajax/

Единственное условие - всё должно быть на одном домене.

Serega555 · March 10, 2015

Это фреймы https://ru.wikipedia.org/wiki/%D4%F0%E5%E9%EC_(HTML)

тоже хотел в сторону их смотреть, но потом вычитал что фреймами нынче не кто верстает

Serega555 · March 10, 2015

Адский костылинг, но чисто для иллюстрации принципа. Копи, пасте, трай:

<!doctype html><html>
<head>
<style>
body {margin: 0;}
    * {box-shadow:0 0 10px red inset;}
	#left {width:100%; box-sizing:border-box; vertical-align:top; position:relative}
	#center {width:80%; box-sizing:border-box; height:100%; position:absolute; top:0;left:20%;}
	#right {width:25%;float:right;}
	.content1, .content2, .content3 {background-color:pink;display:none; width:75%;float:left;}
	#link1:checked + * + * + * + * + * + * .content1,
	#link2:checked + * + * + * + * .content2,
	#link3:checked + * + * .content3 {display:block;}
	#left input {display:none;}
	#left label {display:block; width:20%; cursor:pointer;}
	#left label:hover {text-decoration:underline;}
</style>
</head>
<body>
<header>
This is a header
</header>
<div id="left">
<input type="radio" name="selector" id="link1" checked></input><label for="link1">Link 1</label>
<input type="radio" name="selector" id="link2"></input><label for="link2">Link 2</label>
<input type="radio" name="selector" id="link3"></input><label for="link3">Link 3</label>
<div id="center"><!-- да, right и center внутри left -->
	<div class="content1">Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> Content 1 <br/> </div>
	<div class="content2">Content 2 </div>
	<div class="content3">Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> Content 3 <br/> </div>
	<div id="right"> Right 1 <br/> Right 2</div><!-- да, right внутри center -->
</div>	
</div>
</body>
</html>

Спасибо за пример, буду разбираться как устроенно, без копи-паста, спасибо за наводку

Serega555 · March 10, 2015

что бы не плодить темы, задам тут, подскажите как лучше решить проблему,сразу извиняюсь за коряво-русский, только начал познавать вёрстку, и во многом не знаю как правильно описать вопросЕсть сайт в блочной разметки: блок в ну-три других блоков, при выборе ориентации телефон в дримвайвере увеличиваются в размере блоки меню по бокам,а блок по середине уменьшается, при планшетном чуть меньше, и при полном размере экрана отображается как нужно, как лучше прописать что бы корректно отображался сайт на любых экрана, извиняюсь что пишу не очень понятно, не могу описать грамотно, поэтому прикладываю скриншотыв css был такой код:Общий блок

#container {    background:#70E2FF;    width: 80%;    height:1080px;    margin: 0 auto;    min-width:480px;    max-width:2666px;}

#menu_left {    background:#C4C4C4;    float:left;    width:180px;    height:860px;}#menu_right {    background:#C4C4C4;    float:right;    width:180px;    height:860px;Левая и права сторона

Посоветовали поставить в % ширину, вот что получилось

#menu_left {    background:#C4C4C4;    float:left;    width:14%;    height:870px;}#menu_right {    background:#C4C4C4;    float:right;    width:14%;    height:870px;}

но теперь текст при трансформации экрана браузера съезжает из левого и правого края, как лучше прописать в стилях для текста что бы он бы привязан к размеру экрана

Happyhardcore · March 10, 2015

Это фреймы https://ru.wikipedia.org/wiki/%D4%F0%E5%E9%EC_(HTML)

Фреймы это зло.

Современные браузеры по рекомендации w3c от них потихоньку отказываются.

Happyhardcore · March 10, 2015

jQurey(function($){

$('#left_aside, #right_aside').find('a').click(function(e){

e.preventDefault();

var href = $.trim($(this).attr('href')).replace('#', '');

$('#main_content').load('/' + href + '.html');

});

как не трудно догадаться, файлы с подгружвемым контентом имеют вид имени с расширением html,

а ссылки в асайдах как анкоры с такимиже именами

пример:

<a href="#content_01">имя ссылки</a>

файл имеет имя content_01.html

Инквизитор · March 10, 2015

На аяксе это делется. Через JQuery - вообще элементарно. http://api.jquery.com/jquery.ajax/
Единственное условие - всё должно быть на одном домене.

Можно и так.

Просто есть ситуации, когда нельзя заюзать ни фреймворк, ни собственный жабкоскрипт, ни даже фрейм, а порой и хтмл ограничен. Пример навскидку - ЖЖ. И еще туева хуча всяких хитрожопых платформ.

Спасибо за пример, буду разбираться как устроенно, без копи-паста, спасибо за наводку

Могу описать, там больше натоптано для позиционирования элементов, чем по сути )

Rumlin (10 Март 2015 - 07:51) писал:
Это фреймы https://ru.wikipedia...%E5%E9%EC_(HTML)

Фреймы это зло.
Современные браузеры по рекомендации w3c от них потихоньку отказываются.

Это не зло, а инструмент, все зависит от того, как им воспользоваться. Сеошники их очень не любят, да. Но верстальщики сеошников не любят еще больше ;)

Кстати, именно фреймами там делать необязательно. Фреймсет действительно неудобная штука. Но вот затолкать один-единственный iframe и гадить в него вполне нормально.

Пэтро · March 10, 2015

Небольшие советики.

Если у вас нет денег на дизайнера и хостинг, то делайте сайт в минималистском стиле. Просто тупой текст без картинок и "кнопок".

Если есть немного денег, купите хостинг с PHP-MYSQL и залейте туда какую-нибудь CMS типа Drupal-Joomla-Wordpress. Дальше все интуитивно понятно.

При желании я могу накатить Drupal на свой сервер и дать логин пароль.

Оно вам надо этот HTML ? Фотографируйте лучше.

Пэтро · March 10, 2015

На аяксе это делется. Через JQuery - вообще элементарно. http://api.jquery.com/jquery.ajax/
Единственное условие - всё должно быть на одном домене.

Человеку который не знает HTML впарить Jquery..... :facepalm:

Быстрее и эффективней будет создать 1-2-n html страниц. Просто менять содержимое.

Инквизитор · March 10, 2015

в дримвайвере

Первое и главное правило верстальщика: в жопу дримвайвер и прочие подобные продукты. Гаже ихнего результат выдает только МС Офис.

Если в упомянутом месте все уже и так забито, то потом править ХТМЛ и КСС в ручном режиме.

что бы не плодить темы, задам тут, подскажите как лучше решить проблему,сразу извиняюсь за коряво-русский, только начал познавать вёрстку, и во многом не знаю как правильно описать вопросЕсть сайт в блочной разметки: блок в ну-три других блоков, при выборе ориентации телефон в дримвайвере увеличиваются в размере блоки меню по бокам,а блок по середине уменьшается, при планшетном чуть меньше, и при полном размере экрана отображается как нужно, как лучше прописать что бы корректно отображался сайт на любых экрана, извиняюсь что пишу не очень понятно, не могу описать грамотно, поэтому прикладываю скриншотыв css был такой код:Общий блок

смотрите:

Вот это - контейнер, он занимает 80% ширины родителя.

#container { background:#70E2FF; width: 80%; height:1080px; margin: 0 auto; min-width:480px; max-width:2666px;}

вот это - боковые панели, их ширина 180 пикселей.

#menu_left { background:#C4C4C4; float:left; width:180px; height:860px;}#menu_right { background:#C4C4C4; float:right; width:180px; height:860px;

при изменении ширины окна браузера они не меняют ширины. И при достижении стандартной ширины экрана телефона (к примеру, 480 пикселей) боковые панели займут из них 360, оставив всего 120 на содержимое.

При таких раскладах используют два подхода:

1) задают достаточно большую минимальную ширину содержимого, и пусть юзер скроллит по горизонтали

2) используют адаптивный (responsive) дизайн, который меняется в зависимости от ширины экрана, и добавляют стили для разных значений ширины (гуглите css media queries)

В последнем варианте:

#menu_left { background:#C4C4C4; float:left; width:14%; height:870px;}#menu_right { background:#C4C4C4; float:right; width:14%; height:870px;}

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

Happyhardcore · March 10, 2015

что бы не плодить темы, задам тут, подскажите как лучше решить проблему,сразу извиняюсь за коряво-русский, только начал познавать вёрстку, и во многом не знаю как правильно описать вопросЕсть сайт в блочной разметки: блок в ну-три других блоков, при выборе ориентации телефон в дримвайвере увеличиваются в размере блоки меню по бокам,а блок по середине уменьшается, при планшетном чуть меньше, и при полном размере экрана отображается как нужно, как лучше прописать что бы корректно отображался сайт на любых экрана, извиняюсь что пишу не очень понятно, не могу описать грамотно

Верстаете вначале сайт для декстопа.

к примеру ширина сайта 1280px

после пишите добавочные стили для планшета 1024px(а желательно еще меньше) с помощью тега медиа.

В плоть до того что оба асайда будут только с одной стороны и урезаная ширина основного контента.

будет что-то в этом роде

/* a media queries for window sizes */

@media only screen and (max-width:1280px){

#fixed_top_field .inner,

#header_image div,

#content_inner,

#page_footer_inner{

width:1024px;

}

#fixed_top_field {

background-position:30% 0;

}

и т.д

....

}

Инквизитор · March 10, 2015

Вот вам грубый, но рабочий пример вышеупомянутого адаптивного дизайна:

<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style>
* {box-shadow: 0 0 10px red inset;}
body {margin:0}
.wrapper {position:relative;}
.left {position:absolute; left:0; top:0; width:200px;}
.right {position:absolute; right:0; top:0;  width:200px;}
.center {margin:0 200px;}
.icon {width:20px; height:20px; display:none;}
.rmenu {display:inline;}
.h2, .h3 {display:none;}

@media screen and (min-width:480px) and (max-width:1024px) {
	* {box-shadow: 0 0 10px green inset;}
	.right {width:32px;}
	.center {margin:0 32px 0 200px;}
	.icon {display:inline-block;}
	.rmenu, .h1 {display:none;}
	.h2 {display:inline;}
}

@media screen and  (max-width:480px) {
	* {box-shadow: 0 0 10px blue inset;}
	.right, .left {width:auto; position:static;}
	.center {margin:0;}
	.icon {display:inline-block;}
	.h1 {display:none;}
	.h3 {display:inline;}
}
</style>
</head>
<body>
<header>
<b>
	<span class="h1">Компьютер</span>
	<span class="h2">Айпад</span>
	<span class="h3">Айфон</span>
</b>
</header>
<div class="wrapper">
	<div class="left">Здесь левое меню</div>
	<div class="center">Здесь<br/>содержимое</div>
	<div class="right">
		<div class="icon">1</div><span class="rmenu">Это правое меню 1</span><br/>
		<div class="icon">2</div><span class="rmenu">Это правое меню 2</span><br/>
		<div class="icon">3</div><span class="rmenu">Это правое меню 3</span><br/>
	</div>
</div>
</body>
</html>

Сохраните это как файл .html, откройте в браузере и поизменяйте ширину окна. При ширине свыше 1024 пиксела все будет красным, от 480 - до 1024 зеленым, а ниже 480 - синим. В "зеленом" виде ("под айпад") правое меню вместо текста станет цифрами (типа иконки :-) ), в "синем" виде ("под айфон") левое меню станет верхним, а правое - нижним.

Serega555 · March 10, 2015

Небольшие советики.

Если у вас нет денег на дизайнера и хостинг, то делайте сайт в минималистском стиле. Просто тупой текст без картинок и "кнопок".

Если есть немного денег, купите хостинг с PHP-MYSQL и залейте туда какую-нибудь CMS типа Drupal-Joomla-Wordpress. Дальше все интуитивно понятно.

При желании я могу накатить Drupal на свой сервер и дать логин пароль.

Оно вам надо этот HTML ? Фотографируйте лучше.

Есть сайт и есть уже как почти 2года хостинг, изучения верстки это как хобби в свободное от работы время, хочется попробовать научится и иногда в будущем делать маленькие сайты визитки как возможный доход, ставить акцент на изучения JS в планах нету, поэтому и написал в первом посте что сайт только на html-css даже до html5 не добрался, просто стало интересно как делается подобное решение подгрузи в див страниц html

Dennis · March 10, 2015

Человеку который не знает HTML впарить Jquery.....

Быстрее и эффективней будет создать 1-2-n html страниц. Просто менять содержимое.

Человек просил "без перезагрузки основной странницы". Можно iframe и соотв traget использовать вместо ajax/jQuery

Serega555 · March 10, 2015

Могу описать, там больше натоптано для позиционирования элементов, чем по сути )

Кстати, именно фреймами там делать необязательно. Фреймсет действительно неудобная штука. Но вот затолкать один-единственный iframe и гадить в него вполне нормально.

Если можно опишите пожалуйста более поподробней, что бы по легче было к пониманию

Serega555 · March 10, 2015

Инквизитор

Первое и главное правило верстальщика: в жопу дримвайвер и прочие подобные продукты. Гаже ихнего результат выдает только МС Офис.

А где порекомендуете? блакнот конечно круто:) но это маст хев)

Happyhardcore · March 10, 2015

А где порекомендуете? блакнот конечно круто:) но это маст хев)

Notepad++ наше все с необходимыми плагинами - аля Emmet, XML tools.

Для верстки HTML писем не заменим dreamweaver.

И да, все ручками, ибо только так получается аккуратный и красивый HTML.

Инквизитор · March 10, 2015

Для верстки HTML писем не заменим dreamweaver.

...потому что хтмл-письма - одноразовая штука )

Notepad++ наше все с необходимыми плагинами

Угу. Или ВебШторм, но это для тру-девелоперов, т.к. слишком умный, гад.

Ну и девелоперские плагины к браузерам, конечно. Файрбаг маст хэв.

Инквизитор · March 10, 2015

Если можно опишите пожалуйста более поподробней, что бы по легче было к пониманию

Все весьма просто.

1. Весь контент физически находится в коде страницы. Кликая по левому меню вы просто меняете display:none на display:block у соответствующего блока с нужным куском контента.

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

3. радиокнопки спрятаны с помощью display:none. А клик мышкой отрабатывают label, связанные с соответствующими им радиокнопками атрибутом for. Эти label с помощью cursor:pointer и text-decoration:underline симулируют внешний вид обычных ссылок.

4. самое некрасивое - вот это вот:

#link1:checked + * + * + * + * + * + * .content1,
#link2:checked + * + * + * + * .content2,
#link3:checked + * + * .content3 {display:block;}

конструкция A + B в css означает "B следует непосредственно за A". не вложен в него, а за ним.

соответственно, конструкция #link1:checked + * + * + * + * + * + * .content1 {...} означает "применить стиль ... к элементу с классом .content1, вложенному в элемент любого типа (*), находящийся через 5 элементов любого типа (* + * + * + * + *) после радиокнопки c ID = link1, находящейся в состоянии checked.

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

По-уродски, конечно, и требует, чтобы контент принадлежал тому же родительскому элементу, что и радиокнопки, или его потомку. И неудобно когда пунктов меню много. И если контент сразу весь в странице, то она может долго грузиться. И если впихнуть что-нибудь между всем этим, понадобится пересчитать все эти звездочки.

Но зато работает в условиях идиотских ограничений, что встречается не так уж редко.

Happyhardcore · March 10, 2015

Ну и девелоперские плагины к браузерам, конечно. Файрбаг маст хэв.

http://clip2net.com/s/3dW5Hsy

встроенный родной в лисе, почти ничем не отличается от фаербага.

Но я тоже привык именно к фаербагу, он уже как родной что ли.

Инквизитор · March 10, 2015

встроенный родной в лисе, почти ничем не отличается от фаербага.

Бесит он меня почему-то )

Плюс к файрбагу есть куча модулей, от подсветки изменений в CSS до специальных под всякие платформы и языки.

Подгрузка html страницы в DIV

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

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