Важная информация
Показано с 1 по 3 из 3

Тема: Меняющийся a href=" " в зависимости от ширины экрана

  1. #1 Меняющийся a href=" " в зависимости от ширины экрана 
    Новичок
    Регистрация
    12.10.2016
    Сообщений
    2
    Сказал(а) спасибо
    0
    Поблагодарили 0 раз(а) в 0 сообщениях
    Доброго времени уважаемые форумчане

    Подскажите нужно на сайте (адаптивном) менять ссылку a href=" " в зависимости от ширины экрата

    Как пример :

    - на больших экранах должно быть a href="#primer1"
    - на маленьких (768px и меньше) экранах должно быть a href="#primer2"

    В css использую медиа запросы

    Подскажите как можно это полегче реализовать возможно js
     

  2. #2  
    Администратор Аватар для rovico
    Регистрация
    17.04.2014
    Адрес
    Ярославль
    Сообщений
    245
    Сказал(а) спасибо
    17
    Поблагодарили 287 раз(а) в 162 сообщениях
    Записей в блоге
    2
    чистым CSS сделать не получится, нужно делать JS. Можно попробовать так: https://jsfiddle.net/0dxfs0z4/

    HTML Code:
    1. <a href="#" id="screensize_relative" data-links='{"1280":"http://www.google.com","1024":"http://www.yandex.ru/","800":"http://vk.com","640":"https://jsfiddle.net"}' target="_blank">The href of this anchor is relative to screen Width</a>


    JavaScript Code:
    1. var selector = "#screensize_relative",
    2.  
    3.     $anchor = $(selector),
    4.     
    5.     links = $anchor.data('links'); // Это будет объект со ссылками, ключ-значение
    6.     
    7. //Обработка события изменения размера экрана
    8. window.onresize = function(event) {
    9.    var width  = $(window).width(), //Получаем ширину экрана
    10.    points = Object.getOwnPropertyNames(links),//Получить все размеры списком, упорядоченныим по возрастанию (640,800,1024 и тд)
    11.         lastPointIndex = points.length-1, //Получаем индекс последней точки
    12.         link = "#";
    13.     
    14.     if ( width < points[0] ){ //Если ширина экрана меньше самой маленькой величины из списка, то ставим ссылку из самой маленькой
    15.      link = links[points[0]];
    16.     } else if (width > points[lastPointIndex]) { //Если ширина экрана меньше самой Большой величины из списка, то ставим ссылку из самой большой
    17.      link = links[points[lastPointIndex]];
    18.     } else {
    19.       for ( var i = 0; i < lastPointIndex; i++ ){ //Если  ширина экрана находится в промежутке между любыми двумя величинами из списка, то берём меньшую из двух
    20. if ( width > points[i] && width <= points[i+1] ){
    21.          link = links[points[i]];
    22.         }
    23.       }
    24.     }
    25.     $anchor.attr("href",link); //Ставим атрибуту href полученное значение (выбранную ссылку)
    26. };
     

  3. 2 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (14.10.2016), Free Admin (13.10.2016)

  4. #3  
    Новичок
    Регистрация
    12.10.2016
    Сообщений
    2
    Сказал(а) спасибо
    0
    Поблагодарили 0 раз(а) в 0 сообщениях
    Большое спасибо буду пробовать
     

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Требуется разработать приложение "Виртуальный файловый сервер/клиент".
    от Аним в разделе Общие вопросы программирования
    Ответов: 7
    Последнее сообщение: 02.08.2016, 10:28
  2. Конвертер "Бэйсик" -> "Паскаль" (от Catstail).
    от Апострофф в разделе Разработки на VBA
    Ответов: 4
    Последнее сообщение: 27.04.2015, 18:27
  3. Конвертер "Бэйсик" -> "Паскаль" (от Catstail).
    от Апострофф в разделе Pascal
    Ответов: 0
    Последнее сообщение: 27.04.2015, 16:25
  4. Ответов: 0
    Последнее сообщение: 13.03.2013, 16:32
  5. Ответов: 4
    Последнее сообщение: 02.12.2011, 16:39
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •