0

Please help me figure out what I'm doing wrong. I spent a lot of time to search for solutions, but could not find it. I am trying to add functionality Demo in the sub-theme Bootstrap. Added script to theme subtheme/js/script.js

(function ($, Drupal, window, document, undefined) {
    $(document).ready(function(){
        $(".b-left-side__pointer").click(function(){
           if ($(".switch").hasClass('b-container__left-side')) {
                $(".switch").removeClass('b-container__left-side').addClass('b-container-block-left');
            } else {$(".switch").removeClass('b-container-block-left').addClass('b-container__left-side');
                }        
        });
    });
})(jQuery, Drupal, this, this.document);

Added styles to theme subtheme/css/subtheme_style.css

.b-container__left-side {
  position: absolute;
  top: 52px;
  left: -300px;
  height: calc(100% - 52px);
  height: -moz-calc(100% - 52px);
  width: 300px;
  z-index: 1006;
  display: block;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.b-container-block-left {
  width: 300px;
  float: left;
  height: 97vh;
  margin-top: 0;
  border: none;
  background: #fff;
}

.b-left-side {
  height: 100%;
  overflow: auto;
}

.b-left-side__pointer:hover {
  cursor: pointer;
}

.b-left-side__pointer {
  position: absolute;
  bottom: 20px;
  left: 300px;
  width: 25px;
  height: 90px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  z-index: -1;
}

.b-left-side__pointer p {
  transform: rotate(-90deg);
  transform-origin: left top 0;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top 0;
  margin: 80px 0 0 0;
  font-family: WWF;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

Added to the end of the subtheme file subtheme/templates/page.tpl.php (the file is copied from a folder of Bootstrap theme themes/bootstrap/templates/system/page.tpl.php)

<?php if (!empty($page['l_sidebar'])): ?><!-- /#Left sidebar -->
    <div class="switch b-container__left-side">
      <div class="b-left-side">
        <?php print render($page['l_sidebar']); ?>
      </div>
      <div id="b-left-side__pointer" class="b-left-side__pointer">
        <p>Block</p>
      </div>
    </div>
<?php endif; ?>

Add to subthemes info file the following lines:

regions[l_sidebar] = 'Left sidebar'
stylesheets[all][] = css/subtheme_style.css
scripts[] = js/script.js

The subject area "Block" appeared but it does not respond on clicking.

  • What does your browser's console log say? Have you examined class b-left-side__pointer in the browser's dev tools to determine if the click event is properly bound? – cilefen Jul 12 '16 at 3:40
  • My browser's console log is empty. When I click on "pointer" region it shifted to the right, its contents become visible. But for some reason he is not over top of the content, and at the bottom "after" another regions. And second click to hide block on the "pointer" is impossible it not active. – makbuk Jul 12 '16 at 7:27
  • I update Demo , the problem looks like this. – makbuk Jul 12 '16 at 7:50
0

Please set z-index to solve it.

.b-left-side__pointer {
  z-index: 1;
}

Also, I have some advices for your code.

  1. make use of Drupal behaviors instead of $(document).read()
  2. use jQuery.once() to prevent event binding multiple times, it would happen if your page contains ajax.
  3. use jQuery.toggleClass() to simplify the complexity of logic.
(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.sub_theme = {
        attach: function(context, settings) {
            $(".b-container__left-side", context).once('b-left-side', function() {
                $(".b-left-side__pointer", this).click(function(){
                    $(this).toggleClass('show');
                });
            });
        }
    }

})(jQuery, Drupal, this, this.document);

You need to change your CSS and also class name on HTML. I can't give opinion with that due to lack of information of your requirement.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.