CODEWITHSUNDEEP
jqueryhtmlwidthhidedocument
Michael Schwartz
Michael Schwartz

Reputation: 8415

Document Width if A over B Then B is Hidden

http://jsbin.com/iZILATE/1/edit

I have buttons on my header in JQuery Mobile. I want to hide the heading (h1) only when the anchors are displayed over the heading element, either it be low resolution, or changing view from landscape to portrait for instance.

The HTML

<div class="header ui-bar-c" id="head1" data-role='header'>
    <div id="gentags" class="ui-btn-left">
        <a id="htmltag" data-role="button" data-inline="true" data-mini="true">&lt;&gt;&lt;/&gt;</a>
        <a id="csstag1" data-role="button" data-inline="true" data-mini="true">{}</a>
        <a id="colon" data-role="button" data-inline="true" data-mini="true">:</a>
        <a id="semicolon" data-role="button" data-inline="true" data-mini="true">;</a>
        <a id="csstag2" data-role="button" data-inline="true" data-mini="true">:;</a>
        <a id="jstag1" data-role="button" data-inline="true" data-mini="true">()</a>
        <a id="jstag2" data-role="button" data-inline="true" data-mini="true">("")</a>
        <a id="function" data-role="button" data-inline="true" data-mini="true">function(){}</a>
    </div>

    <h1>Text Website Name</h1>
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
</div>

Upvotes: 0

Views: 57

Answers (1)

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29241

The following script can be of help to guide you:

jQuery(function($) {
   $(window).bind('resize', function() {
      var $btns = $('#headbtns'),
      btnsWidth = $btns.width(),
      width     = $(window).width();
      if ((btnsWidth / width) > 0.3)
         $('.ui-title').hide();
   else
         $('.ui-title').show();
   });
});

Here we are detecting if the width of the buttons container is bigger than the 30% of the view-port width. By default, the header in jQuery mobile has 30% of margin in x-axis.

Although, it works as I explained it, but it will not precise to detect the collision of the buttons containers with the text in the header. To do that, it requires some dirty tricks...

Upvotes: 1

Related Questions