edkiimrgnl
@edkiimrgnl
человек с невидимыми талантами.

Как заставить jquery работать внутри @media?

jquery не работает внутри media, помогите понять что сделать, чтобы работал.

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Новостное агенство</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link rel="stylesheet" href="styles500.css">
</head>
<body>
	<div id="black-bar">
		<div class="fixed-container">
			Самые <a href="#">свежие новости</a> в реальном времени
			<div id="datetime">21:18 29.06.2020</div>
		</div>
	</div>
	<header>
		<div class="fixed-container">
			<div id="bigscreen">
				<img id="logo" src="img/logo.png">
				<select id="city" size="1">
					<option>Москва</option>
				</select>
				<div id="datetime2"><small>29 июня, понедельник</small></div>
				<div id="datetime3"><small>21:18</small></div>
				<div id="weather"><small>+22&deg;C</small></div>
				<input id="find" type="text" placeholder="Поиск по сайту" name="find">
			</div>
			<div id="hamenu">
				<button class="c-hamburger c-hamburger-line">
					<span>menu</span>
				</button>
				<img class="img-svg" src="img/internet.svg">
				<span id="newsAgent">Новостное агенство</span>
				<input type="image" id="srch2" src="img/search.svg">
				<input class="srch3" type="search">
				<div id="aHaMenu" style="display: none;">
					<a href="#"><b>Главная</b></a><br>
					<hr>
					<a href="#"><b>Политика</b></a><br>
					<hr>
					<a href="#"><b>Общество</b></a><br>
					<hr>
					<a href="#"><b>Экономика</b></a><br>
					<hr>
					<a href="#"><b>В Мире</b></a><br>
					<hr>
					<a href="#"><b>Происшествия</b></a><br>
					<hr>
					<a href="#"><b>Спорт</b></a><br>
					<hr>
					<a href="#"><b>Наука</b></a><br>
					<hr>
					<a href="#"><b>Туризм</b></a><br>
				</div>
			</div>
			<div id="menu-container">
				<a href="#"><b>Главная</b></a>&nbsp;
				<a href="#"><b>Политика</b></a>&nbsp;
				<a href="#"><b>Общество</b></a>&nbsp;
				<a href="#"><b>Экономика</b></a>&nbsp;
				<a href="#"><b>В Мире</b></a>&nbsp;
				<a href="#"><b>Происшествия</b></a>&nbsp;
				<a href="#"><b>Спорт</b></a>&nbsp;
				<a href="#"><b>Наука</b></a>&nbsp;
				<a href="#"><b>Туризм</b></a>&nbsp;
			</div>
		</div>
	</header>
	<div id="central-container">
		<div class="fixed-container">
			<div id="column-left">
				<h2>Новости дня</h2>
				<div class="news-item">
					<div class="news-item-text">
						Кот Ахилл предсказал победу российской сборной над Египтом на ЧМ-2018
					</div>
					<div class="news-item-props">
						<a href="#">/ЧМ по футболу</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">17</div>
					</div>
				</div>
				<div class="news-item">
					<div class="news-item-text">
						«Нафтогаз»: суд разрешил заморозить активы «Газпрома» в Великобритании
					</div>
					<div class="news-item-props">
						<a href="#">/Политика</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">10</div>
					</div>
				</div>
				<div class="news-item">
					<div class="news-item-text">
						Минтранс предписал оборудовать общественный транспорт кондиционерами
					</div>
					<div class="news-item-props">
						<a href="#">/Транспорт</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">20</div>
					</div>
				</div>
				<div class="news-item">
					<div class="news-item-text">
						Летние кафе Москвы временно закроются из-за непогоды
					</div>
					<div class="news-item-props">
						<a href="#">/Погода</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">197</div>
					</div>
				</div>
				<div class="news-item">
					<div class="news-item-text">
						Комплексное благоустройство Щелковского шоссе завершится в июне
					</div>
					<div class="news-item-props">
						<a href="#">/Транспорт</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">17</div>
					</div>
				</div>
				<div class="news-item">
					<div class="news-item-text">
						В Москве назвали самое популярное мороженое у болельщиков ЧМ-2018
					</div>
					<div class="news-item-props">
						<a href="#">/ЧМ по футболу</a>
						<div class="news-time">10:45</div>
						<div class="news-comments-count">17</div>
					</div>
				</div>
				<button id="changeButton">Change!</button>
			</div> -->
			<!-- <div id="column-right">
				<img src="img/banner-1.png">
				<img src="img/banner-2.png">
			</div>
		</div>		
	</div>
	
	<script src="jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>


@media all and (max-width: 501px) and (min-width: 320px) {
    #bigscreen {
        display: none;
    }

    #menu-container {
        display: none;
    }
	.fixed-container {
		max-width: auto;
		padding: 0;
	}
	#black-bar {
		font-size: 12px;
	}
	
	#datetime {
		display: none;
	}

    .c-hamburger {
        display: block;
        position: relative;
        right: 0;
        top: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 46px;
        height: 46px;
        font-size: 0;
        border: none;
        box-shadow: none;
        cursor: pointer;
    }

    .c-hamburger:focus {
        outline: none;
    }

    .c-hamburger span {
        display: block;
        position: absolute;
        top: 21px;
        left: 8px;
        right: 8px;
        height: 4px;
        background: #000;
    }

    .c-hamburger span::before, .c-hamburger span::after {
        display: block;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 4px;
        background: #000;
        content: "";
    }

    .c-hamburger span::before {
        top: -10px;
    }

    .c-hamburger span::after {
        bottom: -10px;
    }

    /* .c-hamburger-line {
        background: #91919f; 
    } */

    .c-hamburger-line span {
        transition: background 0s 0.3s;
    }

    .c-hamburger-line span::before, .c-hamburger-line span::after {
        transition-duration: 0.3s, 0.3s;
        transition-delay: 0.3s, 0s;
    }

    .c-hamburger-line span::before {
        transition-property: top, transform;
    }

    .c-hamburger-line span::after {
        transition-property: bottom, transform;
    }

    /* .c-hamburger-line.is-active {
        background: #91919f;
    } */

    .c-hamburger-line.is-active span {
        background: none;
    }

    .c-hamburger-line.is-active span::before {
        top: 0;
        transform: rotate(-45deg);
    }

    .c-hamburger-line.is-active span::after {
        bottom: 0;
        transform: rotate(45deg);
    }

    .c-hamburger-line.is-active span::before, .c-hamburger-line.is-active span::after {
        transition-delay: 0s, 0.3s;
    }

    #hamenu   {
        width: 350px;
        background: #fff;
        left: 0;
        top: 0;
        bottom: 0;
        transition: all ease 1s;
        z-index: 9999;
        display: block;
    }

    #aHaMenu {
        display: inline-block;
        width: 310px;
        padding: 20px;
    }

        #aHaMenu a {
            text-decoration: none;
            color: #000;
        }

    .img-svg {
        width: 30px;
        position: absolute;
        margin-left: 70px;
        margin-top: -38px;
        fill: #1f83c4;
    }

    #newsAgent {
        position: absolute;
        margin-left: 120px;
        margin-top: -31px;
        font-weight: bolder;
    }

    #srch2 {
        width: 19px;
        position: absolute;
        margin-left: 311px;
        margin-top: -33px;
    }

    .srch3 {
        position: absolute;
        padding: 0 20px;
        top: 8px;
        right: 15px;
        border: none;
        border-radius: 20px;
        height: 30px;
        width: 220px;
        background-color: #f3f3f3;
        outline: none;
        display: none;
    }

}


//open burger
$(function() {
    $('.c-hamburger').on('click', function() {
        $(this).toggleClass('is-active');
        $('#aHaMenu').slideToggle(400);
    });
});
//swap svg to inline svg
$('img.img-svg').each(function(){
    var $img = $(this);
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');
    $.get(imgURL, function(data) {
      var $svg = $(data).find('svg');
      if(typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass+' replaced-svg');
      }
      $svg = $svg.removeAttr('xmlns:a');
      if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
        $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
      }
      $img.replaceWith($svg);
    }, 'xml');
  });

  $(function() {
      $('#srch2').on('click', function() {
          $('.srch3').animate({width: 'toggle'});
      });
      $('.srch3').focusout(function() {
        $(this).animate({width: 'toggle'});
    });
  });
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Stalker_RED
@Stalker_RED
@media это правило каскадной таблицы стилей. Javascript не работает не только внутри @media, а вообще внутри любого места css.

Опишите, что вы хотите сделать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы