Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2013, 11:36
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Не давать div выходить за края страницы
Пишу скриптик что бы при наведении на миниатюру изображения, выводилось это же изображение более крупным планом. Выводит хорошо, но если миниатюра находиться рядом с "краем" браузера, то половина изображения выходит "за рамки" страницы, можно ли как то "общим кодом" объяснить скрипту, что если изображение не влезло в браузер, то необходимо его подвинуть, или придётся прописывать отдельно для каждого?
Попробовал привести пример кода, но плохо вышло(
<style type="text/css">

/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> 
Иначе увеличительне будет работать в IE6 */

.ienlarger {
	float: left;
	clear: none; /* Можно установить left или right по необходимости */
	padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
	padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}

.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
 	position:relative;
}

.ienlarger .pos img {
	border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
	margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}

.ienlarger a .pos {  /* Для большого изображения и названия */
 	position: absolute;
	display:none;   
	color: #FFCC00; /* Текст названия */
 	text-decoration: none;    
 	font-family: Arial, Helvetica, sans-serif; 
	font-size: 13px; /* Размер шрифта названия */
	background-color: #000000;    
	font-weight: bold; 
	padding-top: 10px; 
	padding-right: 10px;
	padding-bottom: 13px;  
	padding-left: 10px;    
}

.ienlarger .pos img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
	width: 1000px; /* Вводим нужный размер миниатюры здесь */
	height : auto; 
}

.ienlarger a:hover .pos { 
	display:block;
  position: absolute;
  top: 200px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
	left: 0px; /* Большое изображение выскакивает влево на 90px от миниатюры */
  padding-top: 10px; 
	padding-right: 10px;
	padding-bottom: 13px;  
	padding-left: 10px;
	z-index: 100;
	
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}

.resize_thumb {
	width: 150px; /* Вводим нужный размер миниатюры здесь */
	height : auto; 
  padding: 30px; /* Ширина паспарту */
  background: #f0f0f0; /* Цвет фона  паспарту */
  border: 2px solid #666; /* Параметры рамки */   
}
</style>

<div class="ienlarger"><a 
href="#nogo"><img 
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcThb0vi7n4OdT42MLsE2m6HlO9YNri5jfE_K9JSxhNlSlCRQVd98A'" alt="'Name'" 
class="resize_thumb" /><div class="pos">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcThb0vi7n4OdT42MLsE2m6HlO9YNri5jfE_K9JSxhNlSlCRQVd98A" 
alt="large" /><br />
    name</div></a></div>
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2013, 11:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от Гробовщик
можно ли как то "общим кодом" объяснить скрипту, что если изображение не влезло в браузер, то необходимо его подвинуть
Можно.
Нужно
- узнать "начальную координату" того ДИВа на странице
- узнать его размеры
- узнать размеры странички
- изменить "начальную координату" если его размеры не помещаются на страничке
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2013, 13:54
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

ksa,
А можно ли как то отнять left? Я сделал так:
//определить ширину видимой области браузера 
var all = $(window).width();
//определить координаты выпадающего меню относительно окна
var left = $(this).siblings().offset().left; 
//найти ширину меню
var width = $(this).siblings().outerWidth(true);
// теперь простыми математическими расчетами можно определить выходит ли правый край меню за пределы видимой области,
var offset = all - (left + width); 
if (offset<0){
$(this).siblings().offset().left-offset; //А как отнять offset от left не знаю
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2013, 13:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от Гробовщик
А можно ли как то отнять left?
Так к этому все и сведется в итоге...
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2013, 13:58
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

ksa,
В итоге к этому и свелось) Как отнять то?
Ответить с цитированием
  #6 (permalink)  
Старый 11.10.2013, 14:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от Гробовщик
Как отнять то?
Аааа, вона че!

Ты собираешся двигать элемент... Это можно сделать только с элементами с position отличным от static.
Т.о. у этих элементов в стилях есть свойства top, left, right и bottom... Вот меняя те свойства ЦСС и нужно "двигать" элемент.
Только не забывай указывать единицы измерения!
Ответить с цитированием
  #7 (permalink)  
Старый 11.10.2013, 14:07
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

ksa,
Так нормально?
$(this).siblings().offset(function(index,oldvalue){
         x=new Object();
         x.left=oldvalue.left+offset;
         return x;
      });
Ответить с цитированием
  #8 (permalink)  
Старый 11.10.2013, 14:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Сообщение от Гробовщик
Так нормально?
Это к автору...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
В div не подгружается контент с другой страницы ms_AmneZia Общие вопросы Javascript 18 03.07.2013 17:23
вывести html код страницы в div djonA Общие вопросы Javascript 3 13.05.2013 20:01
Выезжающие\уезжающие div при загрузке страницы goodkot Элементы интерфейса 1 28.09.2012 08:58
При прокрутке страницы div залазит на футер. Как поправить? DonaldDrug jQuery 8 27.03.2012 02:15
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59