CODEWITHSUNDEEP
jquerycssdjango
hokatvcu
hokatvcu

Reputation: 239

Link to stay bold after loading

I have a navigation bar where I want the link that is clicked to stay bold after the new page has reloaded. I'm using a CSS django using a dynamic CSS static file. I'm also using Jquery to make the "boldness". The code does work when I use preventDefault() (but of course it stops the link from loading). It keeps reverting back to its old CSS(not bold) after the new page has loaded. 

$(document).ready(function(){
    $('nav ul li a').click(function(){
        $(this).addClass('boldlist');
        $(this).siblings().removeClass('boldlist');
        alert('clicked');   
    })

});

Not sure how to fix this.. any suggestions?

EDIT: I'm trying to make the links bold so the user knows he/she is on that page. User wants to click the "add run" link .. (for a split second that add run turns bold).. but then when it actually loads to the add run page.. the CSS reverts back (with no boldness).

Like the stackoverflow question tags users badges list above. If you click it, it highlights itself to differentiate from the other buttons.

Edit: I think somehow the CSS file isn't being saved with the Jquery modifications when it is loading a new page.

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>RunLog {% block title %}  {% endblock title %}</title>
    <link rel="stylesheet" href="{% static "css/base.css" %}"/>
     <!-- CSS -->
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/base.js" %}"></script>
</head> 
<body>

    <div class="container">
        <div class='user'>
            {% if user.username %}
            <h3> runner: {{ user.username }}</h3>
            {% endif %}
        </div>
        <div class="logo"> <h1> runLog </h1></div> 
    <nav>
        <ul>
        {% if user.is_authenticated %}
            <li><a href="{% url 'index' %}"> Home</a></li>
            <li><a href="{% url 'add_run' %}"> Add Run </a></li>
            <li><a href="{% url 'getmonthavg' %}"> Month Rate</a></li>
            <li><a href="{% url 'getweekavg' %}"> Week Rate</a></li>    
            <li><a href="{% url 'logout' %}">Logout</a></li>
        {% else %}
            <li><a href="{% url 'register' %}"> Register </a></li>
            <li><a href="{% url 'login' %}"> Login </a></li>
        {% endif %}
        </ul>
    </nav>


    {% block body %}{% endblock body %}
    <div>
</body>

</html>

solved: Used parts of solutions from you all. I had to delete my browser's cookies to get the code working also....seemed like the main culprit.

Upvotes: 1

Views: 424

Answers (4)

SaidbakR
SaidbakR

Reputation: 13544

A solution will depend on cookies or modern data storage. Try the following:

var clicks = [];
$(document).ready(function(){
  $("#navbar a").click(function(){
    clicks[$("a").index(this)] = $("a").index(this);
clicks = clicks.filter(function(n){ return n != undefined });

$.cookie('clicks',clicks.toString() , { expires: 7, path: '/' }); 
console.log(clicks)

  })
console.log($.cookie('clicks').split(","))
$("#navbar a").each(function(){
  if ($.inArray($("a").index(this)+"", $.cookie('clicks').split(",")) != -1){
  console.log($("a").index(this))
   $(this).addClass("visited")
   }

})

});

Checkout this DEMO

However, the above solution has a little bug at the first line clicks = []. The declare of clicks array should be conditional and related to the clicks cookie to initiate it with values of the cookie if it is exist.

The following is the modification to void the described bug above:

if ($.cookie('clicks')){
  var clicks = $.cookie('clicks').split(",");
}
else{
  var clicks = [];
}

Also assigning values in the clicks array will have type casting to be strings:

 clicks[$("a").index(this)] = $("a").index(this)+"";

Checkout the New DEMO

Upvotes: 0

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17144

Another suggestion: is the name of the page somewhere in your template or somewhere in a div? If so you could use it to set a css rule. In any case, I think determining which page you're on should be handle by your templates. So let's say you have your page title either in your template or in a div, you can set a rule like this:

var title = {{ title }} or $(div_with_title).text();
$("a:contains('+title+')").css('font-weight', 'bold');

Or add a class so you can manage more styling.

Or without javascript at all, you can get the page being rendered from your view and put a condition in your li element to add a class on active page and set boldness in css. Like this:

<li {% if current_page == 'Home' %}class="active_page"{% endif %}...

Upvotes: 2

Sebin Simon
Sebin Simon

Reputation: 1646

first create a JS code for identifying which page is currently loaded using window.location then write a conditional statement like following codes

var path = window.location.pathname;
var page = path.split("/").pop();
if( page =='ab'){
      $('.nav #ab').addClass('strong');
}

you can write any styles for that. i hope you will get a good result

Upvotes: 1

Sean Stopnik
Sean Stopnik

Reputation: 1868

Random guess, but wouldn't this do it?

a:visited {
  font-weight: bold;
}

Upvotes: 1

Related Questions