0

Hi so I've made a sidebar and have used some javascript to auto update its width relative to its parent but now I want to auto remove the affix completely whenever the window goes below 750px (which I think is the tablet breakpoint in bootstrap).

I found this code on another page but I can't get it to work on my page (btw I don't have a great knowledge of java coding) 

<script>
if ($(.container).first().innerWidth() > 750)
    $(#sidebar).affix({})
</script>

This is my site

    <div class="container">
                    <div class="row">
            <div class="col-sm-3">
                <div id="sidebar">
                    <div class="row">
                        <div class="about text-center page-header">
                            <img src="images/me.jpg" class="img-circle" width="100px">
                            <h3>Indiana Porter</h3>
                            <small>Subtitle</small>
                        </div>
                        <div class="posts page-header">
                            <h4 style="padding-left:15px;"><strong>Recent Posts</strong></h4>
                            <div id="posts">
                                <ul class="nav nav-tabs nav-stacked">
                                    <li class="active"><a href="#310320161" class="page-scroll">Back to the future day</a></li>
                                    <li><a href="#310320162" class="page-scroll">How about something spacey</a></li>
                                    <li><a href="#310320163" class="page-scroll">A little bit of compositing</a></li>
                                </ul>
                            </div>
                            <br>
                        </div>
                        <div class="col-md-12 text-center">
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#feedback">Email me</button>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-sm-9">



                <div class="row" id="310320161">
                    <div class="col-md-12 page-header">
                        <p><img src="images/bttf.jpg" class="img-responsive"></p>
                        <h2>Back to the future day<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                        <h3>Files</h3>
                        <p><div class="well well-sm">
                            <div class="row text-center">
                                <a href="files/310320161/BTTF.aep"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-file" aria-hidden="true"></span></h2>BTTF.aep</div></a>
                                <a href="files/310320161/delorian.jpg"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></h2>Delorian.jpg</div></a>
                                <a href=""><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span></h2>BTTF.zip</div></a>
                            </div>
                        </div></p>
                    </div>
                </div>



                <div class="row" id="310320162">
                    <div class="col-md-12 page-header">
                    <p><img src="images/spacey.jpg" class="img-responsive"></p>
                        <h2>Post 2<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                    </div>
                </div>



                <div class="row" id="310320163">
                    <div class="col-md-12 page-header">
                    <p><img src="images/compositing.jpg" class="img-responsive"></p>
                        <h2>Post 3<br><small>31/01/2016</small></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p>
                    </div>
                </div>



            </div>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    $(function() {
    var $sidebar = $('div[data-spy="affix"]');
        resize = function() { $sidebar.width($sidebar.parent().width()); };
    $(window).resize(resize); 
   resize();
});
</script>
  </body>
</html>

Sorry It's a bit messy, could someone please tell me what I'm doing wrong. Affixing things is turning out to be a nightmare haha

user2072017
  • 91
  • 1
  • 4
  • 12

2 Answers2

2

UPDATE

Since you're using the Bootstrap Affix, one way you can remove that functionality is by removing the attribute data-spy. And since you want to observe the width of .container, you can call the positionSidebar function with the setInterval function. It creates a loop that it's triggered after specific intervals of time (in miliseconds):

function positionSidebar() {
    if ($('.container').first().innerWidth() > 750) {
        $('#sidebar').affix({});
    } else {
        $('#sidebar').removeAttr('data-spy');
    }
}

setInterval(positionSidebar, 300);

Oh, I need to warn you that this is Javascript and it's a different programming language different from Java. Take care to not misuse the names.

Miguel Trabajo
  • 437
  • 3
  • 11
  • I just tried it but no luck :( would it have anything to do with the fact that I'm using data-spy="affix" instead of class="affix" ? I'm using that for the other java code I got that re sizes it relative to its parent – user2072017 Mar 31 '16 at 04:35
  • Yes. You should choose between using Bootstrap with data- attributes or javascript for consistency. But in that case, you can use `$('#sidebar').removeAttr('data-spy')` or `$('#sidebar').attr('data-spy', '')`. – Miguel Trabajo Mar 31 '16 at 04:48
  • Awesome that works great! I also had to change the minimum size to 700 instead of 750 because of the padding and margins weren't being included. Is there any way to make this script run every time the screen in re-sized like the other script? For changing orientation and stuff on mobiles. – user2072017 Mar 31 '16 at 05:04
  • You can make it run every time by using the function `setInterval(myResizeFunction, 300)`. The second argument of this function is the time in miliseconds it will be repeated. – Miguel Trabajo Mar 31 '16 at 05:11
  • Sorry could you show me where to put the code for that, I don't understand java enough to do it myself :) – user2072017 Mar 31 '16 at 05:33
-1

I faced this issue today. I needed to disable the affix on screens smaller than 1000px and I came up with this solution. I hope it will help others

 $("ElementWithAffixClass").on('affixed.bs.affix', function () {
          if($(window).width() < 999)
           {
             $(this).removeClass('affix');
             return;
           }
   }

I have used Bootstrap affix event "affixed.bs.affix" which fires after fixed positioning is added to the element. You can also use "affix.bs.affix" which fires before fixed positioning is added to the element.

Mubi
  • 54
  • 1
  • 8