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

Перейти к содержимому

Внимание! Для всех новых пользователей введена премодерация сообщений и тем.
  • (2 Страниц)
  • +
  • 1
  • 2
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

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

#1 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 13 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь
  • Страна:  

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

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

Изображение


#2 Пользователь офлайн   Rumlin 

  • Добрый волшебник
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 24 859
  • Регистрация: 16 Сентябрь 10
  • Сказали спасибо раз:
  • ГородHavana
  • Страна:  

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

Просмотр сообщенияSerega555 сказал:

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

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


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


Какой ты любопытный.

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

#3 Пользователь офлайн   Инквизитор 

  • Vexilla regis prodeunt inferni
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Модераторы
  • Сообщений: 10 775
  • Регистрация: 20 Сентябрь 10
  • Сказали спасибо раз:

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

Просмотр сообщенияSerega555 сказал:

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

Щито?

Просмотр сообщенияSerega555 сказал:

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


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

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

Форум скатывается в сраный аванет?

#4 Пользователь офлайн   Инквизитор 

  • Vexilla regis prodeunt inferni
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Модераторы
  • Сообщений: 10 775
  • Регистрация: 20 Сентябрь 10
  • Сказали спасибо раз:

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

Просмотр сообщенияИнквизитор сказал:

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


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

Форум скатывается в сраный аванет?

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

#5 Пользователь офлайн   Dennis 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Активный участник
  • Сообщений: 1 287
  • Регистрация: 31 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь

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

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


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

#6 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 13 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь
  • Страна:  

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

Просмотр сообщенияRumlin (10 Март 2015 - 07:51) писал:


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


#7 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 13 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь
  • Страна:  

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

Просмотр сообщенияИнквизитор (10 Март 2015 - 08:32) писал:

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


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


#8 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 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;}
но теперь текст при трансформации экрана браузера съезжает из левого и правого края, как лучше прописать в стилях для текста что бы он бы привязан к размеру экранаПрикрепленное изображение: 6241af325515.jpgПрикрепленное изображение: 26be746573b4.jpgПрикрепленное изображение: 15db3c690590.jpgПрикрепленное изображение: Снимок.PNG


#9 Пользователь офлайн   lenur 

  • Продвинутый пользователь
  • PipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Пoльзователь
  • Сообщений: 32
  • Регистрация: 17 Сентябрь 14
  • Сказали спасибо раз:
  • ГородСаки
  • Страна:  

Отправлено 10 Март 2015 - 11:33

http://api.jquery.com/load/


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

#10 Пользователь офлайн   Happyhardcore 

  • Продвинутый пользователь
  • PipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Пoльзователь
  • Сообщений: 87
  • Регистрация: 10 Март 15
  • Сказали спасибо раз:
  • Страна:  

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

Просмотр сообщенияRumlin (10 Март 2015 - 07:51) писал:



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


#11 Пользователь офлайн   Happyhardcore 

  • Продвинутый пользователь
  • PipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: П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


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

#12 Пользователь офлайн   Инквизитор 

  • Vexilla regis prodeunt inferni
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Модераторы
  • Сообщений: 10 775
  • Регистрация: 20 Сентябрь 10
  • Сказали спасибо раз:

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

Просмотр сообщенияDennis сказал:

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


Можно и так.

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

Просмотр сообщенияSerega555 сказал:

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

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


Просмотр сообщенияHappyhardcore сказал:

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

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

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

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

Форум скатывается в сраный аванет?

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

#13 Пользователь офлайн   Пэтро 

  • Рублю
  • PipPipPipPipPip
  • Перейти к галерее
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 4 237
  • Регистрация: 15 Сентябрь 10
  • Сказали спасибо раз:
  • ГородЛуговое
  • Страна:  

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

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

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


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

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


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

Подключаем Оптический гигабитный интернет в Луговом, Строгановке, Денисовке, Битаке, Гурзуфской, Лермонтова, Куйбышева.
+79787647406

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

#14 Пользователь офлайн   Пэтро 

  • Рублю
  • PipPipPipPipPip
  • Перейти к галерее
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 4 237
  • Регистрация: 15 Сентябрь 10
  • Сказали спасибо раз:
  • ГородЛуговое
  • Страна:  

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

Просмотр сообщенияDennis (10 Март 2015 - 09:05) писал:

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


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


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

Подключаем Оптический гигабитный интернет в Луговом, Строгановке, Денисовке, Битаке, Гурзуфской, Лермонтова, Куйбышева.
+79787647406

#15 Пользователь офлайн   Инквизитор 

  • Vexilla regis prodeunt inferni
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Модераторы
  • Сообщений: 10 775
  • Регистрация: 20 Сентябрь 10
  • Сказали спасибо раз:

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

Просмотр сообщенияSerega555 сказал:

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

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

Просмотр сообщенияSerega555 сказал:

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


смотрите:

Вот это - контейнер, он занимает 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;}

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

Форум скатывается в сраный аванет?

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

#16 Пользователь офлайн   Happyhardcore 

  • Продвинутый пользователь
  • PipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: П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;
}

и т.д
....

}


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

#17 Пользователь офлайн   Инквизитор 

  • Vexilla regis prodeunt inferni
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Модераторы
  • Сообщений: 10 775
  • Регистрация: 20 Сентябрь 10
  • Сказали спасибо раз:

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

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

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


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

Форум скатывается в сраный аванет?

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

#18 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 13 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь
  • Страна:  

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

Просмотр сообщенияПэтро (10 Март 2015 - 12:45) писал:

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

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


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

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


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


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


#19 Пользователь офлайн   Dennis 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Активный участник
  • Сообщений: 1 287
  • Регистрация: 31 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь

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

Просмотр сообщенияПэтро (10 Март 2015 - 12:49) писал:

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


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

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


#20 Пользователь офлайн   Serega555 

  • Живу здесь
  • PipPipPipPipPip
  • Вставить ник
  • Цитировать
  • Раскрыть информацию
  • Группа: Старая гвардия
  • Сообщений: 856
  • Регистрация: 13 Октябрь 10
  • Сказали спасибо раз:
  • ГородСимферополь
  • Страна:  

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

Просмотр сообщенияИнквизитор (10 Март 2015 - 12:44) писал:



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


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

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


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


  • (2 Страниц)
  • +
  • 1
  • 2
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

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