Week 13: Final HTML Fixes (Design, Functionality)

Coming up to the tradeshow this Friday, my team and I have been fixing parts of the site's functionality and design throughout the process. However there were some concerns to look at and fix. For example:

The close button for the divs often disappeared when you were to scroll down for more of the information. So instead I tried to fix it by positioning it as fixed and putting it outside of the div with a nice design to it so it looked good.

The Information Div

Close-up of the close button

But it got quite annoying in regards to responsiveness. Most of the elements on the page are set to percentage so that they adjust to different screen dimensions. I did fix the button by using pixels however it did not clash well with the opened div as it would go over it and so on. Jonas suggest positioning it in the div itself however that doesnt work as well. Since the div is responsive, if the button was to be positioned inside it would not stay in the same position for different screens. Of course it is possible and  at that moment I was working on it until a tutor asked why it would be out of the div in the first place by I shot that idea down because otherwise you cannot fix it or at least if you did, it would cover up the text and that would look horrible. So he instead suggested using a div behind the modal div to act as the close button. Just have the settings as:

#close_div {
          position: fixed;
          width: 100%;
          height: 100%;
          display: none;
}

Then just set the javascript (jquery) as:

$(document).on("click","#info_btn",function(){
$("#info").show();
$("#close_div").show(); //show the div to close the info
return false;
}); 

//if you wanted to do the jquery for the close_div element, do this:

$(document).on("click","#close_div",function(){
$("#info").hide();
$("#close_div").hide(); //otherwise it will still be showing!
return false;
});

Normally I am not that good at jquery so this project really helped me learn and it is exciting to get it to work! 

_________________________________________________________________________________

Other html fixes to our site included the content of the information div. Basically just updating the parts that were actually not correct and looking at the grammar, etc. I also added an about the group part where we say our roles and what we did throughout the design process.

About Us

We are T-REX INC., a 5 person group who formed on the first day of contact sessions. We shared our vision together to create a timeline and geo-location scheme to visualise the data from Trove.

We all had our fair share of work, where Thuan, Park and Jonas handled most of the coding for the mapping of data. Gabrielle did most of the html and css designing of the pages and Breanna has helped a lot with the assistance in all areas including large amounts of research.

If you wish to submit some feedback or any enquiries, please email Gabrielle Burey on gabrielle.burey@uq.net.au.

Members: Jonas Wong, Park Sang Ik, Thaun Duc Chu, Gabrielle Burey and Breanna Larkin

I also fixed the copyright so it was inside the div rather than outside because then there would be occurrences where the copyright would float over the opened divs. As you can see below in the image on the bottom left corner.

Of course there will always be areas to fix, and if given a lot more time and possibly some more funding $$ ;), the website would become to be a beautiful masterpiece!