Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Porfolio re-imaging: SITE PREVIEW IS UP WITH DOCK

Featured Replies

  • Replies 75
  • Views 5.4k
  • Created
  • Last Reply

Top Posters In This Topic

 

 

 

Firehydrant_3_of_3_by_Nadril.png

 

 

 

 

 

:wall: How high was your ISO when you did that?

2257AD.TUMBLR.COM

  • Author

I took it like 3 years ago, no idea lol. I did do some post-process work though.

Oh I see. I just noticed because it just looks incredibly noisy to me :P

2257AD.TUMBLR.COM

  • Author

The camera I used for it wasn't terribly amazing, like a sub $200 camera.

  • Author

Slight update. I'm still figuring out what I want to do with the background, but for the time being I've started to get some of the coding done. Background will just be done last.

If you want all the content to stay centered just give your container { margin:0 auto; } which I think you have already, so you should be fine.

If you want all the content to stay centered just give your container { margin:0 auto; } which I think you have already, so you should be fine.

 

That's the first thing that I thought too. I dunno though, from coding experiences, that single code isn't universal over all browsers.. I could be wrong though.

 

 

 

Nice and clean backbone code, even though it doesn't really code for anything yet :P

hiccup.png
  • Author

Yeah right now I'm doing that. For the container though I set each margin manually (well auto for left/right/bottom and 300px for top) so that it would hang off center there a bit instead of dead center.

 

 

 

Good to hear what I've got it fine so far, now the difficult part is the javascript =P.

Javascript isn't really that hard to implement if you're using a framework ;)

 

 

 

The most annoying part is getting full browser compatibility (use a CSS Reset). I tend to "gtfo ie6" though :lol:

  • Author

So I think I'm going to use the dojo framework, any thoughts on that or any experiences with it?

 

 

 

I want to implement the Fisheye Widget for my thumbnails bar, except making it a lot more subtle. Still I've looked around at the coding for it and being extremely new to javascript it's all a little confusing.

Hey, I've never really heard, or experimented, with the dojo library, so I can't really say much about it.

 

 

 

However, I know it is pretty easy to have this MacOS Dock style menu using jQuery. Furthermore, since jQuery is so much more popular, and quite powerful and versatile, you may find other uses for it ;).

 

 

 

These two sites give you a nice overview of how to implement it.

 

http://www.wizzud.com/jqDock/ (Tells you everything you need to know - menu at top of page)

 

http://nettuts.com/javascript-ajax/leop ... ng-jqdock/ (Explains some extra cool stuff too)

 

 

 

I know you said you want to use dojo, but I would personally use jQuery due to how popular it is, and therefore the amount of useful plugins available for it.

  • Author
Hey, I've never really heard, or experimented, with the dojo library, so I can't really say much about it.

 

 

 

However, I know it is pretty easy to have this MacOS Dock style menu using jQuery. Furthermore, since jQuery is so much more popular, and quite powerful and versatile, you may find other uses for it ;).

 

 

 

These two sites give you a nice overview of how to implement it.

 

http://www.wizzud.com/jqDock/ (Tells you everything you need to know - menu at top of page)

 

http://nettuts.com/javascript-ajax/leop ... ng-jqdock/ (Explains some extra cool stuff too)

 

 

 

I know you said you want to use dojo, but I would personally use jQuery due to how popular it is, and therefore the amount of useful plugins available for it.

 

 

 

Yeah I'll give jQuery a shot. I wasn't really "set" on any one thing, it was the only one I found. :P

  • Author

Awesome. I'll check all of that out tonight. :thumbup:

 

 

 

Question though, what should I do about the fact that I want to combine several javascript things at once? Like, I want to hover over the thumbnails and when you do so it changes the text/large image on the bottom, and if you click on it I want it to go to a lightbox thing. Is that possible?

Awesome. I'll check all of that out tonight. :thumbup:

 

 

 

Question though, what should I do about the fact that I want to combine several javascript things at once? Like, I want to hover over the thumbnails and when you do so it changes the text/large image on the bottom, and if you click on it I want it to go to a lightbox thing. Is that possible?

 

 

 

Extremely possible, I believe that for the effects that you wish to have, lightbox uses either a rel="lightbox" or similar, or can be setup in its function to only apply to a certain selector (such as #portfolio1 or .images).

 

 

 

Therefore you can use it in this sort of way:

 

 

or

 

 

 

 

However, the documentation of whatever plugin you are using should explain it in more detail. But yes, it is definitely possible to combine jQuery effects.

  • Author

Got the jqDock working now. :thumbup:

 

 

 

If I'm good it should take me about another week to finish the site, if i don't put it off. Now that I have the hard javascript stuff figured out I'll probably work faster. :)

 

 

 

edit: got a slight problem:

 

 

 

 

 

First off I think I'm going to do the text inside of the lightbox instead of on hover. This is because the hover script erdoth showed me conflicts with the jqDock, and doesn't work. (>_<). So I decided to do the lightbox text, except the problem is this:

 

 

 

 

 

 

The title is going off of the jqDock "title" command, and places the text as you hover over it, and it ignores the lightbox. I'm not sure what to really do about this -- like if there is an alternative to lightbox that doesn't use "title" or is there a way to work around it?

 

 

 

edit:

 

 

 

Also if you go to my site for some reason it doesn't show the javascript stuff, but it does if I just preview it myself. Why is this?

I think you need to import the script from the web or something like that.

  • Author

What do you mean? It works fine if I just run the site from my PC, but if I run the site from my host none of the javascript works. I've got the js files and stuff all in the right places.

 

 

 

edit: got it working now.

 

 

 

www.zackcerny.com

 

 

 

Example of the dock in action.

Hey man nice job. I don't know if it's possible nor how it works, but can you shorten the time for the picture to enlarge? As in less frames, because it's fairly jittery on my computer, and we have decently fast internet (by Australian standards, which suck), i presume a quicker magnification would eliminate this. Also the pictures cover your header on mouse over.

 

 

 

Overall i don't really know if i like the dock bit, that's just personal preference though. I think it would look better with the text. Respect though, you've obviously put a lot of time and effort into it, and i commend you on that.

Splatter-RM-stroke.png

"A disbelief in magic can force some poor souls into believing in authority and business"

Looks good. Is it ie compatible?

polvCwJ.gif
"It's not a rest for me, it's a rest for the weights." - Dom Mazzetti

The icon zoom should be faster IMO.

 

 

 

It looks slow and laggy right now (I might just be lagging but meh)

  • Author

Yeah I think I can increase the speed of it, I'll be sure to do that.

 

 

 

Looks good. Is it ie compatible?

 

 

 

I think so, didn't check.

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.