Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Закрытие блока при клике в любом месте

Приветствую! Не подскажете как новичку решить проблему?
Есть блок:

Код Javascript
1
2
3
4
5
6
7
8
9
<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block'"></a>
</div>
                
                
     <div id="divwin4">
           <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
                Текст который открывается             
     </div>

Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"?
Ответ: maximamus, у вас не может быть больше одного body, на все остальные блоки навешивайте событие, так же как и показано в примере, только id меняйте

Добавлено через 5 минут
maximamus, если вы хотите, что бы при клике на body закрывалось, одно из нескольких окон ( смотря какой открыто ), то добавьте всем класс, и функцию поменяйте на

Код Javascript
1
2
3
4
function hide(selector) {
    var elements = document.querySelectorAll(selector);
    for(var i = 0; i < elements.length; i++ ) elements[i].style.display = 'none';
}
Код HTML5
1
2
3
4
5
6
7
8
9
10
<body onclick=' hide(".hidden"); '>
     <div id="divwin4" class='hidden'>
         <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
         Текст который открывается             
     </div>
     <div id="divwin2" class='hidden'>
         <div id="closeButton2" onclick="document.getElementById('divwin2').style.display='none'">Х</div>
         Текст который открывается             
     </div>
</body>
Есть еще пара способов оптимизировать это, прописывать не инлайново стиль, а добавлять нужный класс, тогда не понадобиться цикл, но это уже если оч надо)
Вопрос: Закрытие блока по нажатию в любом месте

Приветствую! Не подскажете как новичку решить проблему?
Есть блок:

<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block'"></a>
</div>
                
                
     <div id="divwin4">
           <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
                Текст который открывается             
     </div>



Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"?
Ответ: рони,
Ну для полного счастья обернуть всё в анонимную функцию
(function() { ... }());
=============
Иначе есть древний велосипед, чтимый начинающими:
<!DOCTYPE>
<html>
<head>
<style>
#closeButton,
a {
  cursor:pointer;
}
#closeButton{
 display:inline-block;
 float:right;
 margin-right:12px;
 margin-top:-12px;
}
#divwin4 {
  padding:12px;
 border:red solid 1px;
 border-radius:12px;
}
</style>
<script>
window.onload=function(){
  document.body.onclick=function(){
     if(µ) {µ =false; return;}
     document.getElementById('divwin4').style.display="none"
  }
}
</script>
</head>
<body style="min-height:400px">



<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block';µ=true">Открыть</a>
</div>
                
                
     <div id="divwin4" style="display:none" onclick="µ=true">
           <span id="closeButton" onclick="document.getElementById('divwin4').style.display='none';µ=true;">Х</span>
                Текст который открывается             
     </div>




</body>
</html>
Вопрос: Внутри разворачивающегося по клику DIVа не работают ссылки

Здравствуйте! Пожалуйста, помогите!

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

HTML:

<div class="view-source">
<a href="#"><h4>КЛИКАБЕЛЬНЫЙ ТЕКСТ ССЫЛКИ №1</h4></a>
<div class="hide">
Содержание DIVа, разворачивающееся (и сворачивающееся) по клику на текст ссылки. Причем внутри этого DIV-а ссылки <a href="http://javascript.ru">НЕ РАБОТАЮТ</a> (браузер НЕ переходит по ссылке, а просто СВОРАЧИВАЕТ развернутый DIV).
</div>
</div>

<div class="view-source">
<a href="#"><h4>КЛИКАБЕЛЬНЫЙ ТЕКСТ ССЫЛКИ №2</h4></a>
<div class="hide">
Содержание DIVа, разворачивающееся (и сворачивающееся) по клику на текст ссылки. Причем внутри этого DIV-а ссылки <a href="http://javascript.ru">НЕ РАБОТАЮТ</a> (браузер НЕ переходит по ссылке, а просто СВОРАЧИВАЕТ развернутый DIV).
</div>
</div>


JavaScript

<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>


Live-demo проблемы здесь:

(нажмите по кнопке "Последние поступления каменных панно и мозаики" внизу - развернется DIV с каталогом мозаики и ссылками, ни одна из ссылок не работает - вместо перехода по ссылке происходит тупо СВОРАЧИВАНИЕ развернутого DIVа

Пожалуйста, помогите сделать так, чтобы ссылки РАБОТАЛИ, а не просто сворачивали DIV.

Заранее СПАСИБО!
Ответ: Большое СПАСИБО за помощь!
Вопрос: Появление элемента по клику на кнопку и скрытие элемента по клику на любое место body

Задача стоит такая. Нужно сделать так, чтобы по клику на button class="helper" наш div id = "helper_list" появлялся на экране(по умолчанию он display:none), и после этого по клику на 'document' div id = "helper_list" исчезал.
Вот что делаю я.
Код HTML5
1
2
3
4
5
<body>
<div id = "helper_list">
</div>
<button type="button" class="helper"></button>
</body>
Код Javascript
1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('.helper').on('click', function(){
        $('#helper_list').css('display' , 'block');
    });
    $(document).on('click', function(){
        $('#helper_list').css('display' , 'none');
    });
});
Проблема.
Проблема состоит вот в чем когда я кликаю на '.helper' наш div id = "helper_list" ДЕЙСТВИТЕЛЬНО становится display:block, НО из-за того что на элемент 'document' ТАКЖЕ поставлено событие click по которому происходит уже СКРЫТИЕ элемента у нас как бы мгновенно и сразу происходит и открытие элемента и его скрытие. А нам нужно чтобы было так -> сначала мы нажали на '.helper' произошло открытие div id = "helper_list" -> мы на него посмотрели -> кликнули на элемент 'document' и произошло скрытие div id = "helper_list". Вот это то мне сделать и не удается. Подскажите как можно решить эту проблему, буду рад любым подсказкам и предложениям. Заранее спасибо!
Ответ:
Код Javascript
1
2
3
4
$('.helper').on('click', function(e){
    e.stopPropagation();
    $('#helper_list').css('display' , 'block');
});
Добавлено через 8 минут
P.S. Кстати, показать/скрыть можно более коротким способом:
Код Javascript
1
2
$('#helper_list').hide(); // скрыть 
$('#helper_list').show(); // показать
Вопрос: Кнопка,таймер

Доброго времени суток!
Обращаюсь за помощью к знающим людям.После нескольких месяцев проб и ошибок,понял что без знания сам не осилю.
Этот вопрос уже проскакивал,но решение заканчивалось тем что все все поняли разобрались а конкретного решения нигде так и не увидел.Поскольку не знаю языков программирования.
Вопрос простой для вас и состоит вот в чем:

Есть таймер,кнопка или ссылка - после клика по кнопке перекидывает на нужный нам ресурс - при этом включается отсчет времени заданный на таймере. Решение это есть и оно работает.
Проблема в другом:как запустить на страничке 2-3- и более таких таймеров.

Что нужно изменить в дублирующих таймерах? Как сделать что бы кнопки стояли с таймером в одной строчке?Пробовал изменять id таймера и прочие значения. Но ничего путного не получается.Понял что без специалистов не смогу это сделать.Может можно выделить те значения которые будут изменены в дублирующих таймерах.Поскольку не знаю что и где изменить.Скрипт прилагаю.
Спасибо.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<style>
  .st{background-color:blue; 
      color:white;}
  .sp{background-color:red; 
      color:white;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#00000">
<tr><td><div class="st" id="tm">00:00:11</div></td></tr></table> 
<script><!--
     var s=00 //секунды
     var m=03 //минуты
     var h=00 //часы
     var r=0; var tt=0;
    function T()
    {s-=1;
     if(s<0) s=59,m-=1;
     if(m<0) m=59,h-=1;   
     if(h<0) h=23     
     if(s+m+h==0)T3()       
     s = s+"";
     m = m+"";
     h = h+""; 
     if (s.length<2) s = "0"+s;
     if (m.length<2) m = "0"+m;
     if (h.length<2) h = "0"+h;
     tm.innerHTML=h+":"+m+":"+s }        
    function Pusk()
        {if(!r){r=1;T2()}}
    function T2() 
        {if(s+m+h==0)s=11,m=00,h=00;
        tt=setInterval("T()",1000)
        tm.className="sp"} // включает красную рамку           
    function T3()
        {clearInterval(tt);r=0
        tm.className="st"} // включает синию рамку                
    function Sl()
    {window.open('https://www.yandex.ua','_blank','toolbar=1,location=1, status=1, menubar=1,scrollbars=1,resizable=1')}
--></script>
 
<input type="button" value="старт" onclick="Pusk(),Sl()" >  
<input type="button" value="стоп"  onclick="T3()">
</body>
</html>
Ответ:
Сообщение от vipservise
Вопрос стоял так:
после клика по кнопке перекидывает на нужный нам ресурс - при этом включается отсчет времени заданный на таймере
При клике по кнопке или ссылке включается определенный таймер, а не все таймеры как в вашем случае.
Проверьте сами то что вы сбросили
Простите но если вы не видите
Javascript
1
2
3
4
timer1.start(function() {
 
  alert('Первый стоп!')
});
В конце кода на jsfiddle который собсно запускает таймер то вы совсем тугой, вам просто надо поставить обработчик click на нужную вам кнопку и туда засунуть этот запускающий код в котором alert() выполняет функцию того что должно выполняться после окончания тикания, удачи вам, вы бы лучше почитали чего нежели так общаться с людьми которые вам дали ответ на блюдичке, а вы еще и не довольны, я просто в шоке. Если вам это не дано то не дано и нечего тут требовать, никто никому ничего не должен, а стаким хамством помогать вам никто не будет.

Добавлено через 2 минуты
Сообщение от vipservise
а не все таймеры как в вашем случае.
Опять же по клику на кнопке вызываете не все 3 таймера, а только один. У человека который вам помог просто три вызова идет.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
timer1.start(function() {
 
  alert('Первый стоп!')
});
timer2.start(function() {
 
  alert('Второй стоп!')
});
timer3.start(function() {
 
  alert('Третий стоп!')
});
Вы даже не хотите в никнуть в код, а он прост как дважды два.

Добавлено через 6 минут

Держите ленивая вы задница короче. Тут jquery используется как переписать click на чистый js думаю нагуглите.
Вопрос: Пауза видео Youtube при нажатии на любое место

На сайте скрипт iframe видео youtube.

<iframe id="iframe" src="http://www.youtube.com/embed/*****?autoplay=1&autohide=1&rel=0" frameborder="0" allowfullscreen=""></iframe>


Как сделать так, что при нажатии на кнопку (class="button") видео ставилось на паузу?

Спасибо!
Ответ:
Вопрос: Скрыть и показать кнопку по клику

Задача скрывать кнопку по клику на нее и показывать ее же по клику на другой элемент страницы или просто по любому месту страницы. Скрывать по клику вопросов нет, а вот вернуть ее по клику в любой области, задачка...

JS код
Javascript
1
2
3
4
5
$(document).ready(function(){
    $(".enter-data").click(function(){
        $(this).hide();
    });
});
Ответ: Сам додумал ответ.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
    
    $('.enter-data').on('click', function(e){
        $(this).css({
            display: 'none'
        });
        var hidden = true;
 
        e.preventDefault();
 
        $(document).bind('click.myEvent', function(e){
            console.log($(e.target))
            if (!(hidden) && $(e.target) != $('.enter-data') && $(e.target).closest('#show-info').length == 0) {
                $('.enter-data').css({display: 'block'});
                $(document).unbind('click.myEvent');
            };
            
            hidden = false;
        })
    }) 
});
Вопрос: Исключить событие клика по дочернему элементу. .not() :not не помогают

При клике на ссылку открывается блок. Напирмер #block1 в этом блоке разумеется есть множество элементов, ссылки картинки, теги p
При клике на любое место документа, нужно скрыть этот блок #block1, но если кликать по #block1 то он НЕ должен скрыться.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
//скрывает блок при клике в любом месте, но так же скрывает и при клике на сам блок
$('html').on('click', function() {
        if($('#block1').is(':visible'))  $('#block1').css('display','none');
 
 
    })
 
//то же самое, хотя ожидаю что not() исключит из набора #block1 но нет
 $('html').not('#block1').on('click', function() {
        if($('#block1').is(':visible'))  $('#block1').css('display','none');
 
 
    })
Ответ: о_О пасибо пасибо)
Вопрос: При клике - подтягивать данные в нужные поля

Доброго времени суток!
Код не мой. Пытаюсь его прожевать (так как в JS новичок).
Прошу вашей помощи, так как за сутки осилить его не смог.
Это попытка организовать вывод городов по первым буквам. Данный скрипт работает но нуждается в небольшой доработке
Есть страница index.php
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script type="text/javascript">
var suggest_count = 0;
var input_initial_value = '';
var suggest_selected = 0;
 
$(window).load(function(){
    // читаем ввод с клавиатуры
    $("#search_box").keyup(function(I){
        // определяем какие действия нужно делать при нажатии на клавиатуру
        switch(I.keyCode) {
            // игнорируем нажатия на эти клавишы
            case 13:  // enter
            case 27:  // escape
            case 38:  // стрелка вверх
            case 40:  // стрелка вниз
            break;
 
            default:
                // производим поиск только при вводе более 2х символов
                if($(this).val().length>2){
 
                    input_initial_value = $(this).val();
                    // производим AJAX запрос к /ajax/ajax.php, передаем ему GET query, в который мы помещаем наш запрос
                    $.get("get_city1.php", { "query":$(this).val() },function(data){
                        //php скрипт возвращает нам строку, ее надо распарсить в массив.
                        // возвращаемые данные: ['test','test 1','test 2','test 3']
                        var list = eval("("+data+")");
                        suggest_count = list.length;
                        if(suggest_count > 0){
                            // перед показом слоя подсказки, его обнуляем
                            $("#search_advice_wrapper").html("").show();
                            for(var i in list){
                                if(list[i] != ''){
                                    // добавляем слою позиции
                                    $('#search_advice_wrapper').append('<div class="advice_variant">'+list[i]+'</div>');
                                }
                            }
                        }
                    }, 'html');
                }
            break;
        }
    });
 
    //считываем нажатие клавишь, уже после вывода подсказки
    $("#search_box").keydown(function(I){
        switch(I.keyCode) {
            // по нажатию клавишь прячем подсказку
            case 13: // enter
            case 27: // escape
                $('#search_advice_wrapper').hide();
                return false;
            break;
            // делаем переход по подсказке стрелочками клавиатуры
            case 38: // стрелка вверх
            case 40: // стрелка вниз
                I.preventDefault();
                if(suggest_count){
                    //делаем выделение пунктов в слое, переход по стрелочкам
                    key_activate( I.keyCode-39 );
                }
            break;
        }
    });
 
    // делаем обработку клика по подсказке
    $('.advice_variant').live('click',function(){
        // ставим текст в input поиска
        $('#search_box').val($(this).text());
        // прячем слой подсказки
        $('#search_advice_wrapper').fadeOut(350).html('');
    });
 
    // если кликаем в любом месте сайта, нужно спрятать подсказку
    $('html').click(function(){
        $('#search_advice_wrapper').hide();
    });
    // если кликаем на поле input и есть пункты подсказки, то показываем скрытый слой
    $('#search_box').click(function(event){
        //alert(suggest_count);
        if(suggest_count)
            $('#search_advice_wrapper').show();
        event.stopPropagation();
    });
});
 
function key_activate(n){
    $('#search_advice_wrapper div').eq(suggest_selected-1).removeClass('active');
 
    if(n == 1 && suggest_selected < suggest_count){
        suggest_selected++;
    }else if(n == -1 && suggest_selected > 0){
        suggest_selected--;
    }
 
    if( suggest_selected > 0){
        $('#search_advice_wrapper div').eq(suggest_selected-1).addClass('active');
        $("#search_box").val( $('#search_advice_wrapper div').eq(suggest_selected-1).text() );
    } else {
        $("#search_box").val( input_initial_value );
    }
}
При вводе первых букв делается запрос в get_city1.php
Код PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php header('Content-Type: text/html; charset=UTF-8');
include('db_fns.php');
db_connect();
if(!empty($_GET['query'])){
    $query = (string)$_GET['query'];
    $array = array();
    
    $query = mysql_query("SELECT title_ru, region_id FROM _cities WHERE title_ru LIKE '".$query."%' order by title_ru LIMIT 20");
    
    while($row = mysql_fetch_array($query))
    {
        $array[] = $row['title_ru'];
    }
    
    echo "['".implode("','", $array)."']";
}
exit();
Результат запихивается в
Код HTML5
1
<div id="search_advice_wrapper"></div>
Вопрос 1. Как вывести не только title_ru ,а и region_id(как пример)?
Вопрос 2. Как сделать так, что бы при клике по предложенному варианту (например "Москва (регион 1)" в
определенные инпуты (возможно скрытые) подтягивались значения title_ru и region_id?
Что-то воде
Код HTML5
1
2
<input type="hidden" id="title_ru" value="вот тут значение title_ru"/>
<input type="hidden" id="region_id" value="вот тут значение region_id"/>
Понимаю что это нужно делать через онклик, но не понимаю как=(
Смилуйтесь, подскажите.
Ответ:
массив в php скрипте пропустите через функцию json_encode
Я же написал что в php
Вопрос: Как закрыть окно кликнув в любое другое место экрана?

При клике на ссылку у меня выводиться окно, и если второй раз кликаю на ссылку - окно закрывается. Это реализовано с помощью classList.toggle

Теперь стоит задача: чтобы пользователь, когда открыл окно, захотев его закрыть кликнул в любое место экрана (кроме самого окна) - и окно исчезло

Вот сам
Ответ:
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .page-header {
      position: relative;
    }
    
    .contact_form {
      position: absolute;
      top: 80px;
      right: 150px;
      width: 520px;
      padding: 15px 0;
      background-color: #fff;
      border-radius: 10px; 
      box-shadow: 1px 1px 9px rgba(0,0,0, .5);
      visibility: hidden;
    }
    
    .visible {
      visibility: visible;
    }
  </style>
</head>
<body>
  <header class="page-header">
    <form class="contact_form" action="contact-form.php" method="post">
      <p>
        <label for="name">Имя:</label>
        <input type="text"  name="name" placeholder="Введите ваше имя" required />
      </p>
      <p>
        <label for="email">Email:</label>
        <input type="email" name="email" placeholder="Введите электронный адрес" required />
        <span class="form_hint">Правильный формат "name@something.com"</span>
      </p>
      <p>
        <label for="message">Текст сообщения:</label>
        <textarea name="message" cols="40" rows="6" required ></textarea>
      </p>
      <input name="bezspama" type="text" style="display:none" value="" />
      <p>
        <button class="contact_form-submit" type="submit">Отправить сообщение</button>
      </p>
    </form>

    <div class="page-header__top">
      <div class="page-header__contacts">
        <a class="page-header__question" href="#">
          <i class="fa fa-comments"></i>Задать вопрос 
        </a>
      </div>
    </div>   
  </header>
  
  <script>
    var question = document.querySelector(".page-header__question");
    var contactForm = document.querySelector(".contact_form");

    question.addEventListener("click", function(event) {
      event.preventDefault();
      event.stopPropagation();
      
      contactForm.classList.add("visible");

      document.addEventListener("click", hide);
    });

    function hide(event) {
      if ( contactForm.contains(event.target) )
        return;

      contactForm.classList.remove("visible");

      document.removeEventListener("click", hide);
    }
  </script>
</body>
</html>