Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2013, 17:21
Интересующийся
Отправить личное сообщение для Sam L Посмотреть профиль Найти все сообщения от Sam L
 
Регистрация: 14.02.2013
Сообщений: 15

Подскажите, плиз, с изменением src для img внутри figure!
<section id="boxes"> 
    <div class="two-up">
        <div class="wrapper">	
	    <figure>
                <img src="./img/bt_desktop.png">
                <img src="./img/desktop.jpg">
   	     </figure>
             <p>1Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
											
     <div class="wrapper">
           <figure> 
		<img src="./img/bt_tablet.png">
         	<img src="./img/tablet.jpg">
           </figure>
           <p>2Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </div>
										
     <div class="wrapper">
     	  <figure>
              <img src="./img/bt_smartphone.png">
              <img src="./img/smart.jpg">
          </figure>
          <p>3Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </div> 
</div>
</section>

Figure повторяется три раза, при клике, например, на первую из figure нужно изменить на src="./img/bt_desktop_hi" для первого img.

Если меняю figure на div (button 0), прописываю классы и скриптом меняю, то все работает:
$(document).ready(function() {
   $("#button0").click (function(){
        var a = $(this);
        var div = a.parents("#container");
		if (!$(this).hasClass("active0")) {
			$(this).addClass("active0");
		}
	$("#button1").removeClass("active1");
	$("#button2").removeClass("active2");
    div.animate({height:'1024', width: '1280'});

	});

НО, ломается верстка - дивы не зумятся (с figure все ок), сайт сверстан так, что все элементы уменьшаются, при изменении размера окна браузера.

Подскажите, плиз, решение для img src и figure!
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2013, 17:24
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

хорошо бы в действии увидеть что там ломается
на вскидку попробуйте клик повесить так
$(document).on("click", "#button", function(){... });
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2013, 17:52
Интересующийся
Отправить личное сообщение для Sam L Посмотреть профиль Найти все сообщения от Sam L
 
Регистрация: 14.02.2013
Сообщений: 15

Сорри, в песочнице при сохранении эррор (при этом просматривается нормально ). Исходники все тут http://zalil.ru/34490180.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2013, 18:26
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Sam L,
1.
ВОТ так должен выглядить head
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Index</title>
<link href="./css/main.css" rel="stylesheet" type="text/css">
<link href="./css/style_buttons.css" rel="stylesheet" type="text/css">  
<link href="./css/main(1).css" rel="stylesheet" type="text/css"> 


<script src="./js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">/*<![CDATA[*/var Liferay={Browser:
//code...
</script>
	
	
   //code..
	<script src="./js/main.js" type="text/javascript"></script>
    <script src="./js/scripts.js" type="text/javascript"></script>
	</head>


2. в файле script.js нужно закрыть коментарий
$(document).ready(function () {
        $('#button0').click(function () {
            $(this).hide()
        })
    }
);



/*$(document).ready(function() {// начало
   $("#button0").click (function(){
        var a = $(this);
        var div = a.parents("#container");
		if (!$(this).hasClass("active0")) {
			$(this).addClass("active0");
		}
	$("#button1").removeClass("active1");
	$("#button2").removeClass("active2");
    div.animate({height:'1024', width: '1280'});

	});
	

	$("#button1").click (function(){
        var a = $(this);
        var div = a.parents("#container");
		if (!$(this).hasClass("active1")) {
			$(this).addClass("active1");
		}
    $("#button0").removeClass("active0");
	$("#button2").removeClass("active2");
    div.animate({height:'768', width: '1024'});

	});

	$("#button2").click (function(){
        var a = $(this);
        var div = a.parents("#container");
		if (!$(this).hasClass("active2")) {
			$(this).addClass("active2");
		}
    $("#button0").removeClass("active0");
	$("#button1").removeClass("active1");
    div.animate({height:'480', width: '800'});
	});
});
// а где конец?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 07.05.2013 в 19:01.
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2013, 19:14
Интересующийся
Отправить личное сообщение для Sam L Посмотреть профиль Найти все сообщения от Sam L
 
Регистрация: 14.02.2013
Сообщений: 15

Спасиб, заработало. Но другой трабл - исчезает div="content",если изменить аттрибут src у картинки...
$(document).ready(function() {
    $("#button0").bind("click", function() {
        $(this).attr("src","/img/bt_tablet_hi.png");
    });
});
.
Ответить с цитированием
  #6 (permalink)  
Старый 07.05.2013, 19:19
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Sam L, открываете консоль и смотрите ошибки, если не получается разобраться то текст ошибок в студию)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 07.05.2013, 19:23
Интересующийся
Отправить личное сообщение для Sam L Посмотреть профиль Найти все сообщения от Sam L
 
Регистрация: 14.02.2013
Сообщений: 15

в том то и дело, что ошибки в консоли - Failed to load resource относятся к combo и typekit. больше ошибок нет, ну или я не вижу..
Ответить с цитированием
  #8 (permalink)  
Старый 07.05.2013, 19:32
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Цитата:
combo и typekit
это что?)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #9 (permalink)  
Старый 16.05.2013, 19:21
Интересующийся
Отправить личное сообщение для Sam L Посмотреть профиль Найти все сообщения от Sam L
 
Регистрация: 14.02.2013
Сообщений: 15

Все, ошибки все убраны, сорри, за молчание. Картинки меняются по клику. Сделал так:
$("#button0").bind("click", function () {
        var a = $(this);
        var div = a.parents("body");
        div.animate({width: '1024'}, 1000);
        $('#desktop').attr('src', 'img/bt_desktop_hi.png');
        $('#tablet').attr('src', 'img/bt_tablet.png');
        $('#smart').attr('src', 'img/bt_smartphone.png');

    });
,

Но столкнулся с другой бедой - задача состоит в том, чтобы сымитировать изменение размера окна (т.е. сейчас, если окно браузера уменьшить, например, ширину на 770 - весь контент подвижен - из 4 столбцов становится 2, навигация сползает вниз...). Т.е. нужно при клике на button0 отобразить контент как при изменении размера окна браузера на 700... div.animate({width: 'х'}, 1000); просто сжимает все содержимое - все 4 столбца, просто уменьшены...

Направьте в правильную сторону, как это реализовать!
Нужен добрый пинок....
Ответить с цитированием
  #10 (permalink)  
Старый 16.05.2013, 19:27
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от Sam L
<figure>
<img src="./img/bt_desktop.png">
<img src="./img/desktop.jpg">
</figure>
<p>1Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
я конечно извиняюсь, а для чего сия конструкция ? чтоб была ?
какую семантическую нагрузку она несёт? -никакую. и мало того нарушает правила. так зачем ? чтоб было всего и побольше?
да и всю разметку свою пересмотрите со стороны семантичности

Последний раз редактировалось dmitriymar, 16.05.2013 в 19:56.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите технологию для реализации. sektor-sumy Общие вопросы Javascript 3 11.04.2013 23:49
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 16:52
Подскажите простое решение для слайдера Netherlandman Общие вопросы Javascript 10 13.11.2010 09:32
Изменение img src при hover на другом img -- как? adelante jQuery 2 14.04.2010 08:12