I am here with a good problem that I don't know how to fix it. I was putting some javascript inside my volt file and when I asked to click it works and load the page but the problem is that also copy and past part of my <head> files and part of my bootstrap navbar menu <nav>.
Bootstrap Menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li {% if view.url == '/' %}
class="active"
{% endif %}
><a class="navbar-brand" href="/">DaizCode</a></li>
</ul>
</div>
<?php
$this->view->url = $this->router->getRewriteUri();
?>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php if(isset($_SESSION['username']) == false) { ?>
<li {% if view.url == '/about' %}
class="active"
{% endif %}
>About Us
</li>
<li {% if view.url == 'auth/login' %}
class="active"
{% endif %}
>Login
</li>
<li {% if view.url == 'auth/register' %}
class="active"
{% endif %}
>Register
</li>
<?php } else { ?>
<li {% if view.url == '/auth/dashboard' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/activity-icon.png" />
</li>
<li {% if view.url == '/auth/dashboard/learn' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/learn-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/discussions' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/conv-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/notifications' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/globe-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/inbox' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/inbox-icon.png" />
</li>
<?php } ?>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
{{ content() }}
{{ content() }} is part of the volt template where it goes pick the other pages immediately to show it.
I have some PHP so I can show different menu after the user be on or not.
Here it is the nav file (nav.volt) code:
<input type="text" class="user-login" name="user-login" placeholder="Username..." />
<input type="password" class="password-login" name="pwd" placeholder="Password..." />
X
Here I let you my volt page (script part):
{{ javascript_include('/js/jquery-3.1.1.js') }}
{{ javascript_include('/js/jquery-3.1.1.min.js') }}
{{ javascript_include('/js/bootstrap.min.js') }}
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav");
return false;
});
</script>
Here I can show you the image where you see the inspect of the page, and it is inspecting after the click of class .login which is in bootstrap navbar. The code I want to show on it is there after the red rectangle.
What I want to know is how can I remove what's inside of the rectangle. See the image below.
Google Chrome Inspect of the problem I said above
Updated image problem
Thank you.
You can add this to fetch specific part of the file ,
This would load the input elements and a tag after input element with out loading nav or any other tags.
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav input,input+a");
return false;
});
</script>
Hope this helps
Related
I have a sidebar menu setup that is looping through shopify linklists and outputting the parent and child collection titles and URLs. The problem is that when i click on one of the anchor tags, it opens all of the anchor links as the data-target and id are not unique. I have tried changing the div id to a random number using Mat.random() but cant make this work.
Here is the code
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapseOne"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapseOne">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
you can use the forloop.index to append unique value into a loop in Shopify liquid
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion-{{forloop.index}}">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapse{{forloop.index}}"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
you read more about forloop here
I have made a navbar with bootstrap4 and I want to toggle the icon of current page to active.
Currently, I am using
<li class="nav-item"><a href="/" id="A"
{% if request.path == "/" %}
class="nav-link active"
{% else %}
class="nav-link"
{% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
{% if request.path == "/blog/" %}
class="nav-link active" {% else %}
class="nav-link"
{% endif %}>Blog</a></li>
what I would like is a simpler way with use of url names that could activate a script
like this:
{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>
{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}
Could there be an easier way? Please suggest to highlight the active page icon on navbar to toggle styles.
Thank you
The best way to do this without violating DRY principles and hard-coding your urls would be to use reverse in the templates.
Example:
<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}
<!-- ..... Body HTML ..... -->
<li class="nav-item">
<a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
Blog
</a>
</li>
Clicking on navbar scrolls the page correctly in Chrome, nothing happens in FF and IE.
Any idea?
Here's a part of my nav's jsx:
handleOnClick (e) {
e.preventDefault();
if (this.props.show) {
var target = $(e.target.parentElement);
var el = $('#section-' + this.props.id);
$('.list-group-item').removeClass('active');
$('.scrollspy').removeClass('scrollspy-active');
target.addClass('active');
$('body').animate(
{scrollTop: (el.offset().top - 20)},
{
duration: 200,
done: () => {
$('.scrollspy').addClass('scrollspy-active');
}
});
this.props.onSelected(e, this.props.id);
if ($(window).width() <= 992) {
$('.collapse').collapse('hide');
}
}
};
UPDATE: And here's my nav.html. Forgive me if it's too much.
Forums say that there used to be a scrollspy's problem regarding FF and IE that was releted to height but it doesn't seem to be that one.
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Main navigation -->
<ul class="nav navbar-nav">
{% for nav_item in nav %}
{% if nav_item.children %}
<li class="dropdown{% if nav_item.active %} active{% endif %}">
{{ nav_item.title }} <b class="caret"></b>
<ul class="dropdown-menu">
{% for nav_item in nav_item.children %}
{% include "nav-sub.html" %}
{% endfor %}
</ul>
</li>
{% else %}
<li {% if nav_item.active %}class="active"{% endif %}>
{{ nav_item.title }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if repo_url %}
<li>
<a href="{{ repo_url }}">
{% if repo_name == 'GitHub' %}
<i class="fa fa-github"></i>
{% elif repo_name == 'Bitbucket' %}
<i class="fa fa-bitbucket"></i>
{% endif %}
{{ repo_name }}
</a>
</li>
{% endif %}
</ul>
</div>
It was about changing
$('body').animate(
to
$('html,body').animate(
base.html
<body class="skin-red">
<!-- Site wrapper -->
<div class="wrapper">
<!-- #HEADER -->
{% include 'HEADER.html' %}
<!-- /#HEADER -->
<!-- #SIDEBAR -->
{% include 'SIDEBAR.html' %}
<!-- /#SIDEBAR -->
<!-- #BODY -->
{% block content %}
{% endblock %}
<!-- /#BODY -->
<!-- #FOOTER -->
{% include 'FOOTER.html' %}
<!-- /#FOOTER -->
{% block extrajavascript %}
{% endblock %}
</body>
HEADER.html:
<header class="main-header">
<b>Resource</b> Monitor <i class="fa fa-bar-chart-o" style="color:#ffd400"></i>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<ul class="nav navbar-nav">
<li>Home <span class="sr-only">(current)</span></li>
<li> PC information </li>
<li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
<li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
<li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
<li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
<li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
<li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
<li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
<li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
</ul>
</li>
</ul>
</nav>
</header>
When I click header tab menu, I want to reload only
{% block content %}
{% endblock %}
not whole pages.. but now It reloaded the whole page..
There are formbox in my side bar and there are some values which user input. so I don't want to loose my user input by refresh whole page. Is there any solution..?
You need javascript AJAX api to get the content and change the html content using javascript DOM api if you need "without reload" function.
Django or any application server or http webserver works in a
request-response way, when a response is returned to the browser, the
server has no control to the client.
My bootstrap Navbar is not clickable when I use javascript to highlight active link
Here is my code:
<script type="text/javascript">
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
And this is my navigation menu
<nav class="navbar navbar-inverse navbar-static-top" >
<div class="container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Fidel MRP">
<img style="max-width:85px; margin-top: -18px; background-color: grey;
"src="/static/img/Fidel MRP-logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Sales</li>
<li>Purchase</li>
<li>Inventory</li>
<li>Manufacture</li>
<li>Settings</li>
<li class="devider"></li>
</ul>
<ul class ="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li ><a href="{% url 'auth_logout' %}" %> {{user}} Logout </a></li>
{% else %}
<li ><a href="{% url 'registration_register' %}" %> Register </a></li>
{% endif %}
<li><div class="form">
{% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
<form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}
<div class='form-group'>
<input type='text' class='form-control' name='username' placeholder='Username' />
</div>
<div class='form-group'>
<input type='password' class='form-control' name='password' placeholder='Password' />
</div>
<button type='submit' class='btn btn-default'>Login</button>
</form>
{% endif %}
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div>
</nav>
The problem is
I am using javascript provided to get the visual effect on active menu item after onClick. This script works, but the hyperlink stop working .(So I have to disable the script in order to be able to navigate)
What could be the reason and how can it be resolved?
e.preventDefault(); is stopping the default behavior of the anchor. (navigating to the href).
Removing it will let the browser navigate to the new page when clicked.