<commit_before><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/ebur.png">
    <link rel="stylesheet" href="../../assets/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/vendor/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/themes/prism-okaidia.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/plugins/line-numbers/prism-line-numbers.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/plugins/command-line/prism-command-line.css">
    <link rel="stylesheet" href="../../assets/style/main.css">
    <title>javascript prevent a dropdown menu from falling out of the window</title>
</head>
<body class="arcticle">
<div class="article_bg"></div>
<div class="container">
    <h2>javascript prevent a dropdown menu from falling out of the window</h2>
    <p class="date">created: 20170825</p>
    <h3><a href="../../index.html#index" class="index">back</a></h3>
    <h4>The problem</h4>
    <img src="../../assets/img/articles/js-menu.png" alt="" class="img-responsive">
    <p class="example">related css</p>
    <pre><code class="language-less line-numbers">.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}</code></pre>
    <h4>Solution</h4>
    <p class="example">javascript</p>
    <pre><code class="language-javascript line-numbers">$(document).ready(function () {
    $(".dropdown").on("click", function() {
        setTimeout(function() {
            var d = $(".open").find(".dropdown-menu");
            if ((d.offset().left + d.width()) > $(window).width()) {
                d.addClass("offscreen-menu")
            }
        }, 1)
    })<commit_msg>changed: article->javascript prevent a dropdown...<commit_after><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/ebur.png">
    <link rel="stylesheet" href="../../assets/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/vendor/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/themes/prism-okaidia.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/plugins/line-numbers/prism-line-numbers.css">
    <link rel="stylesheet" href="../../assets/vendor/prism/plugins/command-line/prism-command-line.css">
    <link rel="stylesheet" href="../../assets/style/main.css">
    <title>javascript prevent a dropdown menu from falling out of the window</title>
</head>
<body class="arcticle">
<div class="article_bg"></div>
<div class="container">
    <h2>javascript prevent a dropdown menu from falling out of the window</h2>
    <p class="date">created: 20170825</p>
    <h3><a href="../../index.html#index" class="index">back</a></h3>
    <h4>problem</h4>
    <img src="../../assets/img/articles/js-menu.png" alt="" class="img-responsive">
    <p class="example">related css</p>
    <pre><code class="language-less line-numbers">.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}</code></pre>
    <h4>Solution</h4>
    <p class="example">javascript</p>
    <pre><code class="language-javascript line-numbers">$(document).ready(function () {
    $(".dropdown").on("click", function() {
        setTimeout(function() {
            var d = $(".open").find(".dropdown-menu");
            if ((d.offset().left + d.width()) > $(window).width()) {
                d.addClass("offscreen-menu")
            }
        }, 1)
    })
{'fraction_non_alphanumeric': 0.21139749349728068, 'fraction_numerical': 0.015133601324190116, 'mean_word_length': 3.40625, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 94, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3232509', 'n_tokens_mistral': 1398, 'n_tokens_neox': 1337, 'n_words': 237}