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

Внимание! Для всех новых пользователей введена премодерация сообщений и тем.

(2 Страниц)
1
2
→

Вы не можете создать новую тему
Вы не можете ответить в тему

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

#1 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 02:25

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

Наверх of the page up there ^

Поблагодарили: 1

#2 Rumlin

Добрый волшебник

Группа: Старая гвардия
Сообщений: 42 268
Регистрация: 16 сентября 10
ГородHavana
Страна:

Отправлено 10 марта 2015 - 07:51

Serega555 сказал:

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

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

Я детей вообще то боюсь, милостивый мой государь, - шумливы, жестоки и себялюбивы, а коли дети правят державой? ©Юлиан Семёнов
Ничего не делается к лучшему © Борис Раушенбах
Люди, люди — это самое главное. Люди дороже даже денег. © Ф.М. Достоевский

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#3 Инквизитор

Vexilla regis prodeunt inferni

Группа: Модераторы
Сообщений: 18 162
Регистрация: 20 сентября 10
Страна:

Отправлено 10 марта 2015 - 07:54

Serega555 сказал:

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

Щито?

Serega555 сказал:

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

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

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

"Конец России хотели бы увидеть многие, но пока его удается только подержать за щекой…!" (с)

Наверх of the page up there ^

Поблагодарили: 1

#4 Инквизитор

Vexilla regis prodeunt inferni

Группа: Модераторы
Сообщений: 18 162
Регистрация: 20 сентября 10
Страна:

Отправлено 10 марта 2015 - 08:32

Инквизитор сказал:

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

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

Скрытый текст

<!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>

"Конец России хотели бы увидеть многие, но пока его удается только подержать за щекой…!" (с)

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#5 Dennis

Живу здесь

Группа: Активный участник
Сообщений: 5 006
Регистрация: 31 октября 10
ГородСевастополь
Страна:

Отправлено 10 марта 2015 - 09:05

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

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#6 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 09:59

Rumlin (10 марта 2015 - 07:51) писал:

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

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

Наверх of the page up there ^

Поблагодарили: 1

#7 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 10:01

Инквизитор (10 марта 2015 - 08:32) писал:

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

Скрытый текст

<!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>

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

Наверх of the page up there ^

Поблагодарили: 1

#8 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 11:02

что бы не плодить темы, задам тут, подскажите как лучше решить проблему,сразу извиняюсь за коряво-русский, только начал познавать вёрстку, и во многом не знаю как правильно описать вопросЕсть сайт в блочной разметки: блок в ну-три других блоков, при выборе ориентации телефон в дримвайвере увеличиваются в размере блоки меню по бокам,а блок по середине уменьшается, при планшетном чуть меньше, и при полном размере экрана отображается как нужно, как лучше прописать что бы корректно отображался сайт на любых экрана, извиняюсь что пишу не очень понятно, не могу описать грамотно, поэтому прикладываю скриншотыв 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;}

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

Наверх of the page up there ^

Поблагодарили: 1

#9 Happyhardcore

Продвинутый пользователь

Группа: Пoльзователь
Сообщений: 87
Регистрация: 10 марта 15
Страна:

Отправлено 10 марта 2015 - 12:20

Rumlin (10 марта 2015 - 07:51) писал:

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

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

Наверх of the page up there ^

Поблагодарили: 1

#10 Happyhardcore

Продвинутый пользователь

Группа: Пoльзователь
Сообщений: 87
Регистрация: 10 марта 15
Страна:

Отправлено 10 марта 2015 - 12:33

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

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#11 Инквизитор

Vexilla regis prodeunt inferni

Группа: Модераторы
Сообщений: 18 162
Регистрация: 20 сентября 10
Страна:

Отправлено 10 марта 2015 - 12:44

Dennis сказал:

Можно и так.

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

Serega555 сказал:

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

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

Happyhardcore сказал:

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

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

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

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

"Конец России хотели бы увидеть многие, но пока его удается только подержать за щекой…!" (с)

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#12 Пэтро

Рублю

Группа: Старая гвардия
Сообщений: 9 977
Регистрация: 15 сентября 10
ГородЛуговое
Страна:

Отправлено 10 марта 2015 - 12:45

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

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

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

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

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

Подключаем Оптический гигабитный интернет в Симферополе и районе.
+79787647406
http://lugovoe.su

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#13 Пэтро

Рублю

Группа: Старая гвардия
Сообщений: 9 977
Регистрация: 15 сентября 10
ГородЛуговое
Страна:

Отправлено 10 марта 2015 - 12:49

Dennis (10 марта 2015 - 09:05) писал:

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

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

Подключаем Оптический гигабитный интернет в Симферополе и районе.
+79787647406
http://lugovoe.su

Наверх of the page up there ^

Поблагодарили: 1

#14 Инквизитор

Vexilla regis prodeunt inferni

Группа: Модераторы
Сообщений: 18 162
Регистрация: 20 сентября 10
Страна:

Отправлено 10 марта 2015 - 12:59

Serega555 сказал:

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

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

Serega555 сказал:

смотрите:

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

Serega555 сказал:

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

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

Serega555 сказал:

#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)

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

Serega555 сказал:

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

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

"Конец России хотели бы увидеть многие, но пока его удается только подержать за щекой…!" (с)

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#15 Happyhardcore

Продвинутый пользователь

Группа: Пoльзователь
Сообщений: 87
Регистрация: 10 марта 15
Страна:

Отправлено 10 марта 2015 - 13:09

Serega555 (10 марта 2015 - 11:02) писал:

Верстаете вначале сайт для декстопа.
к примеру ширина сайта 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;
}

и т.д
....

}

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#16 Инквизитор

Vexilla regis prodeunt inferni

Группа: Модераторы
Сообщений: 18 162
Регистрация: 20 сентября 10
Страна:

Отправлено 10 марта 2015 - 13:23

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

Скрытый текст

<!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 - синим. В "зеленом" виде ("под айпад") правое меню вместо текста станет цифрами (типа иконки :-)

), в "синем" виде ("под айфон") левое меню станет верхним, а правое - нижним.

"Конец России хотели бы увидеть многие, но пока его удается только подержать за щекой…!" (с)

Наверх of the page up there ^

Поблагодарили: 1

Serega555

#17 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 16:22

Пэтро (10 марта 2015 - 12:45) писал:

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

Наверх of the page up there ^

Поблагодарили: 1

#18 Dennis

Живу здесь

Группа: Активный участник
Сообщений: 5 006
Регистрация: 31 октября 10
ГородСевастополь
Страна:

Отправлено 10 марта 2015 - 16:33

Пэтро (10 марта 2015 - 12:49) писал:

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

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

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

Наверх of the page up there ^

Поблагодарили: 1

#19 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 16:39

Инквизитор (10 марта 2015 - 12:44) писал:

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

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

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

Наверх of the page up there ^

Поблагодарили: 1

#20 Serega555

Живу здесь

Группа: Старая гвардия
Сообщений: 872
Регистрация: 13 октября 10
ГородСимферополь
Страна:

Отправлено 10 марта 2015 - 17:09

Инквизитор

Цитата

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

А где порекомендуете? блакнот конечно круто

но это маст хев)

Наверх of the page up there ^

Поблагодарили: 1

Поделиться темой:

(2 Страниц)
1
2
→

Вы не можете создать новую тему
Вы не можете ответить в тему

Симферопольский Форум: Подгрузка html страницы в DIV - Симферопольский Форум

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

#1 Serega555

#2 Rumlin

#3 Инквизитор

#4 Инквизитор

#5 Dennis

#6 Serega555

#7 Serega555

#8 Serega555

#9 Happyhardcore

#10 Happyhardcore

#11 Инквизитор

#12 Пэтро

#13 Пэтро

#14 Инквизитор

#15 Happyhardcore

#16 Инквизитор

#17 Serega555

#18 Dennis

#19 Serega555

#20 Serega555

Поделиться темой:

1 человек читают эту тему
0 пользователей, 1 гостей, 0 скрытых пользователей

Удалить сообщение

Внешний вид

Статистика работы системы

Симферопольский Форум: Подгрузка html страницы в DIV - Симферопольский Форум

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

Поделиться темой:

1 человек читают эту тему 0 пользователей, 1 гостей, 0 скрытых пользователей

Удалить сообщение

Внешний вид

Статистика работы системы

1 человек читают эту тему
0 пользователей, 1 гостей, 0 скрытых пользователей