Goto to Post: 1 | 2 | 3 | 4 | 5 | 6 | 7

floating navigation

3/2/15

I was reading up on the affix feature of bootstrap and wanted to use it to add a floating menu. At first it wasn't displaying the buttons at the proper width, so I ended up using CSS to detect and properly size the buttons based on resolution.

#leftNav.affix { position: fixed; width: 165px; }

@media all and (max-width: 1200px) { #leftNav.affix { position: fixed; width: 132px; }

It seems to work well on the Beta and Standard themes, but my code definitely isnt perfect yet as the iOS verison of the site has a menu that does not float at all. I'll investigate and hopefully figure out what to do. I am also going to make it a project to find out how to properly fix my beta style sheet so it's iOS compatiable without jittery scrolling.

Website: Snapshot

iOS fixes + page navigation

3/1/15

So I ran into an issue with my beta theme in which the background was not scrolling, but it was only happening on my iPhone. I found out that apple removes the ability to use the background-attachment: fixed; css property on iOS. I looked on google for ways to get around this and have put in a fix on the beta-ios style. I just needed to wrap the entire body in a div (named #fixbig in my code) and make it have the fixed background instead css as follows:

#fixbg{

 background:   url("http://www.mnh.si.edu/arctic/ISC18/images/EastFront_night.jpg") top;

 height:100%;

 width:100%;

 position:fixed;

 overflow: scroll;

 -webkit-overflow-scrolling: touch; }

It seems to affect the smoothness in the scrolling of the page a bit so I've kept the original beta around to use as well. I've also added post navigation and a back to top link to quickly scroll around. Styling wise I've made a .codeText class to help keep code I post on the website looking neat.

Website: Snapshot

new style options

3/1/15

I wanted to be able to change the whole theme of the site but also wanted to be able to keep a stable more regular theme. So I went and made a superjaatbeta.css and index-beta.html to be able to test out my changes. I realized that this was a pretty bad method of doing it as the content on the beta homepage would have to be manually updated when the normal index was updated. So I searched up a way to dynamically change styles and found this. I implemented everything and added some new options in the navigation to quickly change it around. I am pretty happy with the results. More to come soon.

Website: Snapshot

contact + code changes

3/1/15

I realized I didn't have any contact information on this page so added a nifty email button to the navigation. My next project is going to be making a separate contact page all together, with a custom form that will send me an email. Other than that I've made some back-end changes. I've learned about bootstraps Media objects, and converted the code of all my blog posts to have the proper tags in bootstrap. Most of the changes are not too noticeable but I do like the layout of the images better, as they float more center aligned in the posts and look cleaner next to the text on both desktop and mobile.

Website: Snapshot

spelling + money saving

2/28/15

Two blog posts in one day... I'm on fire. I just learned sublime has a spell checker built in and as soon as I turned it on I realized spelling Isn't one of my strong points. So I've cleaned up the site and blog posts and will definitely keep using it to save you from my stupidity. Also because I'm running on NearlyFreeSpeech's pay for what you use hosting, I've taken all my images and either hosted them externally or hotlinked them straight from the source. I know this is terrible practice but it'll save me a couple cents per month so its worth it.

Website: Snapshot

changes + more learning

2/28/15

This is my second blog post whats really good. I just moved all my styling to an external sheet superjaat.css I've also added responsive images to my blog posts with that dope border radius effect. I also spent way too much time learning how to add and modify a bootstrap based progress bar even though I'll probably never need one on my site. To see it click the fire in the footer then click the bar itself to have it jump percentages. Bootstrap is 100 times easier than I was expecting, which is good so I can concentrate on javaScript and jQuery.

I've also decided I'll be adding a snapshot of the site with each blogpost going forward so I can track my progress.

Website: Snapshot

first post: new website

2/27/15

This is my First blog post whats good. I made this website as a way to learn bootstrap, css, javascript and jQuery. I decided the best way of doing this would be to code a responsive blog from scratch. As of now the blog is super bare bones. I'm literally just using basic HTML tags to create these posts. There is probably going to be a ton of broken things on this site and a bunch of stuff that exists for no reason or doesn't do anything really. That's probably just me trying to learn how it works.


back to top