sidebar menu appears with every click on the main menu item before it disappears

47 views
Skip to first unread message

Behee Trimble

unread,
Mar 28, 2015, 7:08:23 PM3/28/15
to django...@googlegroups.com
Please help me to detect this problem: sidebar menu appears with every click on the main menu item.

I inherited a Django app and I am trying to learn it. However, since this is a real app and in use I do not have much time to investigate in details. I really appreciate your help. I include only the few templates and I am hoping some one is experienced enough to see the problem by looking at these few templates.

All the other templates are including the base.html, see below please:

base.html
========
<!DOCTYPE html>
{% load add_utility %}

<html class="no-js" lang="en">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Quo - {% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="/static/Quo3/css/foundation.css" />
        <link rel="stylesheet" href="/static/Quo3/css/style.css" />
        <link rel="stylesheet" href="/static/Quo3/css/font-awesome.css" />
        <link rel="stylesheet" href="/static/Quo3/css/cropper.css" />
        <script src="/static/Quo3/js/vendor/modernizr.js"></script>
        <script src="/static/Quo3/js/share.min.js"></script>
        <script src="/static/Quo3/js/vendor/jquery.js"></script>
        <script src="/static/Quo3/js/ajaxupload.js"></script>
        <script src="/static/Quo3/js/cropper.min.js"></script>
        <script src="/static/Quo3/js/toastr.min.js"></script>



        <link rel="icon" type="image/png" href="/static/Quo3/img/quo_favicon.png" />


        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-55718101-1', 'auto');
            ga('send', 'pageview');
        </script>
    </head>
    <body>
        <!--TOP NAV BAR-->
        <div class="contain-to-grid sticky">
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <a href="/"><img class="tbar" src="/static/Quo3/img/quo_logo_white.png"/></a>
                    </li>

                    <li class="toggle-topbar"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
<!-- LEFT NAV SECTION -->
                    <ul class="left">
                        <li class="divider"></li>
<li><a href="#menu" class="menu-icon menu-link">MENU&nbsp&nbsp&nbsp<i class="fa fa-navicon fa-15x"></i></a></li>
                        <li class="name">
                            <h1><a href="/"><i class="fa fa-home fa-15x"></i></a></h1>
                        </li>
                        <li class="name">
                            <h1><a onClick="history.go(-1);return true;"><i class="fa fa-angle-left fa-15x"></i></a></h1>
                        </li>
                    </ul>
<!-- END LEFT NAV SECTION -->

                    <!-- RIGHT NAV SECTION -->
                    <ul class="right">
                        <li class="has-form">
                            <a href="/yourfeed/" class="button radius">Followed Topics</a>
                        </li>
                        <li class="has-form mright">
                            <div class="row collapse">
                                <form action="/search" method="get" id="searchform">
                                    <div class="large-10 small-9 columns searchbar">
                                        <input type="text" placeholder="Search" class="no-border" name="q">
                                    </div>
                                    <div class="large-2 small-3 columns searchbar">
                                            <input type="submit" class="button fa searchbutton" value="&#xf002">
                                        {% csrf_token %}
                                    </div>
                                </form>
                            </div>
                        </li>

                        <!-- HELP -->
                        <!-- L2/PMO%20and%20QA/L3/Quo%20Documents/L4/Quo%20Basic%20Training -->
                        <li class="right">
                            <a href="/L2/PMO%20and%20QA/L3/Quo%20Documents/L4/Quo%20Basic%20Training"><i class="fa fa-question-circle fa-15x"></i></a>
                        </li>
                        <!-- END HELP -->

                    </ul>
                    <!-- END RIGHT NAV SECTION -->
                </section>


            </nav>
        </div>
        <!--END TOP NAV-->


        <!--OFF CANVAS SIDE NAV-->
        <nav id="menu" class="offnav" role="navigation">
            {% block quicknav %}{% endblock %}
            <ul style="width: 100%; height: 400px; overflow: auto" class="offnav-list">
                {% get_visible_departments user as deps %}
                {% for dep in deps %}
                    <li><a href="/L1/{{dep}}"> {{dep}} ></a></li>
                {% endfor %}
            </ul>


            <ul class="off-canvas-list actbut">
                {% block addstuff %}{% endblock %}
                <div class="navdivider"></div>
                <li><a href="logout"><i class="fa logout fa-lg"></i>Logout</a></li>
            </ul>
        </nav>
        <!--END OFF CANVAS SIDE NAV-->

        {% block content %}{% endblock %}


        <script src="/static/Quo3/js/foundation/foundation.js"></script>
        <script src="/static/Quo3/js/foundation/foundation.topbar.js"></script>
        <script src="/static/Quo3/js/bigSlide.js"></script>
        <script>
            $(document).ready(function() {
                $('.menu-link').bigSlide();
            });
        </script>
        <script src="/static/Quo3/js/foundation/foundation.equalizer.js"></script>
        <script src="/static/Quo3/js/foundation/foundation.reveal.js"></script>
        <script src="/static/Quo3/js/foundation/foundation.accordion.js"></script>
        <script src="/static/Quo3/js/foundation/foundation.tooltip.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>


index_zero.html
============
{% extends "base.html" %}

{% block title %}
    Home
{% endblock %}

{% block quicknav %}
    <ul class="offnav-list">
        <li><label>Quick Nav<i class="fa fa-times right menu-link"></i></label></li>
        <ul class="offnav-list bcrumbs">
            <li><a href="/">Home ></a></li>
        </ul>
        <div class="navdivider"></div>
    </ul>
{% endblock %}

{% block content %}

    <!-- CATEGORY LINK TILES -->
    <div class="row addtop">
        <div class="small-12 columns">
            {% for obj in objects %}
                <dl class="panel projects">
                    <a href="{{ obj.get_absolute_url }}"><i class="fa"></i>{{ obj.title }}
                        <img src="/static/Quo3/img/{{ obj.title }}.jpg" id="panelimage"/>
                    </a>
                </dl>
            {% endfor %}
        </div>
    </div>
    <!-- END CATEGORY LINK TILES -->
{% endblock %}

=================
I myself am trying to cache the images to make sure is not the bad performance involved. Other than that I am suspicious to the ajax calls but it is hard for me to touch it without breaking the app!!

Thanks very much for you help.

Behee Trimble

unread,
Mar 29, 2015, 11:13:13 AM3/29/15
to django...@googlegroups.com
Any body out there to give me a clue about my problem? Please?

Mike Dewhirst

unread,
Mar 29, 2015, 6:16:04 PM3/29/15
to django...@googlegroups.com
On 30/03/2015 2:13 AM, Behee Trimble wrote:
> Any body out there to give me a clue about my problem? Please?
>
>
> On Saturday, March 28, 2015 at 7:08:23 PM UTC-4, Behee Trimble wrote:
>
> Please help me to detect this problem: sidebar menu appears with
> every click on the main menu item.
>
> I inherited a Django app and I am trying to learn it. However, since
> this is a real app and in use I do not have much time to investigate
> in details. I really appreciate your help. I include only the few
> templates and I am hoping some one is experienced enough to see the
> problem by looking at these few templates.

I am not experienced enough to help but I can feel your sense of
frustration. Trying to learn Django by inspecting an existing project is
a daunting task. This is what I think you should do:

a. Copy the entire project to your local dev machine [1]

b. Chop out parts and put them back until you identify the sidebar menu.

c. Search for the code involved and try to see why it is being called
multiple times.


[1] Install the same version of Django on your local machine. To get
that info: on the production machine get a console and launch python.
Then at the prompt ...

>>>import django
>>>django.get_version()

Getting the project across, ought to be easy. Work through (at least)
the installation parts of the documentation/tutorial.
https://docs.djangoproject.com/en/1.7/ (use the same version as in
production rather than 1.7)

Using the Django developer's webserver, you can insert print statements
wherever you like in the code and see the results. It also identifies
syntax errors immediately and displays error tracebacks.

Enjoy

Mike
> <http://www.google-analytics.com/analytics.js>','ga');
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-users...@googlegroups.com
> <mailto:django-users...@googlegroups.com>.
> To post to this group, send email to django...@googlegroups.com
> <mailto:django...@googlegroups.com>.
> Visit this group at http://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/f038fb84-9cce-42c9-8963-d0eebf91c84e%40googlegroups.com
> <https://groups.google.com/d/msgid/django-users/f038fb84-9cce-42c9-8963-d0eebf91c84e%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.

Behee Trimble

unread,
Mar 29, 2015, 7:40:41 PM3/29/15
to django...@googlegroups.com
Thanks very much for your reply. You are right - it is much easier if I had to write the code myself.

I am kind of doing the same and I see the repetition but when I try to eliminate the duplicates the program breaks!!

Thanks again
Beheen

Behee Trimble

unread,
Mar 30, 2015, 1:09:47 PM3/30/15
to django...@googlegroups.com
To Whom It May be Helpful:

This program was using bigSlide.js library that works like a charm and good to inject sidebar menu.
The original developer forgot to apply the css lines. Below are the relevant parts:

html file:
<li><a href="#menu" class="menu-icon menu-link">MENU&nbsp&nbsp&nbsp<i class="fa fa-navicon fa-15x"></i></a></li>
...
 <!--OFF CANVAS SIDE NAV-->
        <nav id="menu" class="offnav" role="navigation">
            {% block quicknav %}{% endblock %}
            <ul style="width: 100%; height: 400px; overflow: auto" class="offnav-list">
                {% get_visible_departments user as deps %}
                {% for dep in deps %}
                    <li><a href="/L1/{{dep}}"> {{dep}} ></a></li>
                {% endfor %}
            </ul>


            <ul class="off-canvas-list actbut">
                {% block addstuff %}{% endblock %}
                <div class="navdivider"></div>
                <li><a href="logout"><i class="fa logout fa-lg"></i>Logout</a></li>
            </ul>
        </nav>
<!--END OFF CANVAS SIDE NAV-->

....

At the end of html file - the script section:

<script src="/static/Quo3/js/bigSlide.js"></script>
<script>
      $(document).ready(function() {
           $('.menu-link').bigSlide();
      });
</script>

css file:
.offnav {
background: #fff;
position: fixed;
left: -15.625em;   /*left or right and the width of your navigation panel*/
width: 15.625em; /*should match the above value*/
...
}

Thanks
Beheen

On Saturday, March 28, 2015 at 7:08:23 PM UTC-4, Behee Trimble wrote:
Reply all
Reply to author
Forward
0 new messages