Google Chrome - JS and CSS issues

Question

This is the address of the website http://okcpirot.rs/prijava First with JS issues:

JS is working in all browser except in Chrome, and I don't have clue why. Here I get error:

Uncaught TypeError: Object [object Object] has no method 'on prijava:142'

Second issue is with CSS. Arrow in the right top should be in front (it is used to open and close login area). This is the case in all browsers except Chrome. Once again I don't have clue way.

CSS code for this part:

#top_area {background: rgba(0,0,0,.8); padding: 10px 0; position: fixed;width: 100%; top:0; z-index: 1000}
#login{float: right;}
#login {margin-right: 40px}
#login label {color:#F2F2F2;display: block; float: left; margin: 0 10px}
#login input {float: left; border: none;border-top: 1px solid #555; border-bottom: 1px solid #333; padding: 2px 5px;}
#login input:focus, .lozinka input {box-shadow: inset 0px 0px 2px rgba(0,0,0,.4)}
#login input[type=submit] {margin-left: 10px; }
#login input[type=submit]:hover, .lozinka input[type=submit]:hover  {box-shadow: inset 0px 0px 3px rgba(0,0,0,.5)}
.kreiraj_nalog{width: 16px;height: 16px;float: left;background: url(../img/resursi/kreiraj_novi_nalog.png) no-repeat;padding-right: 5px;}
.zaboravljena_lozinka{width: 16px;height: 16px;float: left;background: url(../img/resursi/zaboravljena_lozinka.png) no-repeat;padding-right: 5px;}
.top_area_links {float: right;clear: both;color:#F2F2F2 !important;padding-top: 5px; }
.top_area_links a {float: right; color:#F2F2F2 !important; margin-right: 5px;}

.korisnik{float: right;margin-right: 40px;padding: 11px;}
.korisnik p, .korisnik a {float: left;clear: none; color: #f2f2f2; margin: 0 5px;}
.korisnik a:hover {color: #f2f2f2;text-decoration: underline;}


.top_area_maska {position: fixed;width: 100%; top:0;}
.zatvori_top{float: right;width: 32px;height: 32px;background: url(../img/resursi/zatvori_otvori_top.png) no-repeat;display: inline-block;margin-top: 5px;position: relative;z-index: 100000;}
.zatvori_top:hover{background: url(../img/resursi/zatvori_otvori_top.png)  -32px 0 no-repeat;cursor: pointer;}
.otvori_top{background-position: 0px -32px }
.otvori_top:hover{background-position: -32px -32px }
.top_area_links a:hover {text-decoration: underline;}

HTML part:

<div class="top_area_maska clearfix">
    <div class="container_12 clearfix">
        <div class="zatvori_top <?php if($this->session->userdata('toggle_top') == TRUE )  echo 'otvori_top'?>"></div>
    </div>
</div>
<div id="top_area" class="clearfix" <?php if($this->session->userdata('toggle_top') == TRUE )  echo 'style="display: none"'?>>
    <div class="container_12">
        <?php
            if($this->session->userdata('is_logged_in') == FALSE) :
            $attributes = array('id' => 'login', 'class' => 'clearfix');
            $hidden = array('current_page' => current_url());
            echo form_open('korisnik/validacija', $attributes, $hidden);
         ?>
         <label for="email">Email</label>
         <input type="email" name="email" id="email" placeholder="Email" autocomplete='off' />
         <label for="pass">Lozinka</label>
         <input type="password" name="pass" id="pass" placeholder="Lozinka" autocomplete='off' />
         <input role=prijava type="submit" name="submit" value="Prijavi Se">
         <div class="top_area_links clearfix">
             <a class=""href="<?php echo base_url('prijava') ?>" role=nalog><span class="kreiraj_nalog"></span>Kreiraj Nalog</a>
             <a href="<?php echo base_url('prijava') ?>" role=lozinka><span class="zaboravljena_lozinka"></span> Zaboravljena Lozinka | </a>
         </div>
         <?php echo form_close();
            else :
          ?>
        <div class="korisnik">
            <p><?php echo $this->session->userdata('full_name') ?> | </p>
            <a href="<?php echo base_url() ?>korisnik/nalog/<?php echo str_replace(' ', '_', $this->session->userdata('full_name')) ?>/<?php echo $this->session->userdata('id_user') ?>">Moj Nalog | </a>
            <a href="<?php echo base_url() ?>korisnik/odjava">Odjavi se</a>
        </div>
        <?php endif; ?>
    </div>
</div>

Is some kind of black magic here at work or Chrome is going crazy?

Answer 1

In Chrome it is showing your variable named name is actually a string containing "[object Object]". It already has this value before it is getting set to .find("#ime"). It seems to be a global scoping issue. I recommend changing the name of the variable to something less common.