Having Free Lunch Today

 I wanted to add a floating chat button. Chat buttons are found in modern websites like facebook and those sleek looking real estate websites. Sometimes they act as avatar and had some animated designs. But I have no idea how to do it so I googled it and I was successful for being able to get a free downloadable code for this little project of mine. I got it from this url. This explains why the title of this post is because I got the code for free.

But the code is still not working 100%, I will still need to make it work and since I am still in the conceptualization stage, obtaining this code for free saved me a lot of time. I plan to make it database driven chat and to refresh it every 2 secs to get the latest message and I need to animate the button to tell the user there is a new message.

The Mobile Friendly Layout

 I have created a mobile friendly layout for my project, but this is just an initial design, and basically the left and right sidebars disappear and the header and description changes alignment from left to center. But that was just the beginning. 

It evolved several times like, after I am done with the initial design, I realized that there should be a way to make the left sidebar reappear and make it disappear so I added the menu button at the left most side of the control bar and a close button at the sidebar itself. I should make this menu button active only when the  sidebar is invisible while the close button should disappear when the screen width is greater than 800px.

Then tested it on an actual mobile phone and it seems that as the screen width reaches 700px, the sidebar becomes too over crowded because the the texts have become a lot bigger and the left sidebar width should adjust according to the screen width. Doubling its width should do the trick.

Then I tested it again using a 7" android phone and realized that what if the device changes orientation and the screen width changed while the left sidebar is visible, so it should also respond to that change as well because as the screen size change the text size changes automatically so if the sidebar width stay the same, it will be overcrowded again. 

Here is the finished layout I have made so far:

Pls note that the video shows only the windows chrome browser, it looks very different when viewed on android browser. 

My Project's Layout

 I have chosen the 3 column format for my project because for me this layout displays the much needed functionalities without giving the view overcrowded effect. 

The design is capable of adjusting based on the screen size and should be mobile friendly because majority of internet users are on mobile phone.

Here's what I have done so far:

My Project's Navigation Menu

 My project's navigation system is what I consider its center piece because although it is an enterprise class application which is a combination of text contents and user interaction screen, I would consider it overall as a content management system because it allows content changes to happen most of time and allows creation of new contents not only articles but data entry screens as well and there should be a way for users to specify path location of the new content in the main navigation menu or re-arrange the current over all organization of the navigation menu.

What I have in mind is a highly customizable navigation menu or rather an enterprise class application.

This my concept: 

It should be a tree view and initially, I used w3schools.com sample tree view program (pls note that I am not promoting w3schools) but the css formatting is proudly mine. It should database driven view which has the following table structure:

Article ID

A unique code assigned to the page or post. This is the primary key of the table.

CAT ID

The category id is the unique code assigned to the Category on which the current page or post belongs. This is a secondary key of the table and should check the entry in the Category table.

SYST ID

The system id is the unique code assigned to the application system on which the current page or post belongs. This is a secondary key of the table and should check the entry in the Systems Application table. The Systems Application could be Blog, Social Media, Accounting, HR system, Logistics, etc.. 

Title

The title is a text field which is obviously the title of the current page or post.

 
 
 
 

Abou this Blog

I have been into web dev lately and wanted to document my web dev adventure that is why I created this blog. Web Dev is a serious endeavor, there are many challenges and most of the time the solutions to these challenges gets forgotten and I am forced to start from scratch again if I face the same challenge maybe after sometime, this is based on my past experiences. One major disappointment I had was I was not able to create a backup to my previous project and I just relied storing it on a webhosting company, then the tragedy struck me, I could no longer login to he hosting company's webserver and I could not even contact them and because of that all my files were lost, it was equivalent to a massive 2 years of work was lost. So in this case I hope I will be able to document every major challenges I face.

Please do note that I make mistakes and do a lot of revisions so readers should expect changes to every post in this blog.