Skip to main content

Mobile menu created with Bootstrap 3 

// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
    if($(window).width()<768)
    {
        $('button#mobile-nav').css('float','left');
    }
    $(window).on('resize',function(){
        if($(window).width()<768)
        {
            console.log('here');
              $('button#mobile-nav').css('float','left');
        }
    });
});

I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!

I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.

On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".

before-page-loads.png after-page-loads.png

I have also provided my JavaScript and HTML code.

Thanks for your help!

Comments

Post a Comment

Popular posts from this blog

Vacuum does not reclaim disk space

I have a fact table with 9.5M records. The table uses distyle=key, and is hosted on a RedShift cluster with 2 "small" nodes. I made many UPDATE and DELETE operations on the table, and as expected, I see that the "real" number of rows is much above 9.5M. Hence, I ran vacuum on the table, and to my surprise, after vacuum finished, I still see that the number of "rows" the table allocates did not come back to 9.5M records. Could you please advice what may be a reason for such a behavior? What would be the best way to solve it? A little bit of copy-pastes from my shell: The fact table I was talking about: select count(1) from tbl_facts; 9597184 The "real" number of records in the DB: select * from stv_tbl_perm where id= 332469; slice | id | name | rows | sorted_rows | temp | db_id | insert_pristine | delete_pristine -------+--------+--------------------------------------------------------------------------+----------+-------------...
Post a Comment
Read more

How to lock tables with codeigniter?

I have to run this sql routine in a model: $this->db->query('LOCK TABLE orders WRITE'); $this->db->query('TRUNCATE TABLE orders'); $this->db->query('INSERT INTO orders SELECT * FROM orders_tmp'); $this->db->query('UNLOCK TABLES'); but I get this error: Error Number: 1192 Impossible to execute the requested command: tables under lock or transaction running TRUNCATE TABLE orders I use MyISAM as DB engine on this table. Could you please help me? Solved To perform many INSERT and SELECT operations on a table real_table when concurrent inserts are not possible, you can insert rows into a temporary table temp_table and update the real table with the rows from the temporary table periodically. This can be done with the following code: mysql> LOCK TABLES real_table WRITE, temp_table WRITE; Kindly ask if it not worked for you. try this $this->db->query('TRUNCATE TAB...
Post a Comment
Read more