[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
Web-Development Question
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /g/ - Technology

Thread replies: 12
Thread images: 1
File: mockup.jpg (419 KB, 1920x1080) Image search: [Google]
mockup.jpg
419 KB, 1920x1080
Hey, im trying to build a simple website that consists of a frame which displays content (Some Buttons, Images and so on). The Canvas containing the content is going to be much bigger than the frame and i basically want to be able to move the content underneath. I do not want the content outside of the frame to be visible.
Any advice on how to accomplish that?
I've got no Web-Development-Skills to my name, I've only used Node.js so I know a bit of javascript.
Attached is a mockup, greyed-out area basically should be invisible, background and buttons should move underneath the frame.
>>
>>51277975
Learn to use div's.
>>
Don't use frames it's 2015 ffs
>>
>>51277975
you can make use of the CSS scroll property, along with specifying sizes for your containers, etc

see http://jsfiddle.net/31o51m8t/

https://developer.mozilla.org/de/docs/Web/CSS/overflow
>>
>>51278017
>scroll property
well, it's called "overflow", but you get the idea
>>
>>51278008
"Frame" in this case meant that I want something that looks like a Picture-Frame.

>>51278017
Thanks a lot, i'll look into that
>>
>>51277975

Take a look at codecademy.com m8
>>
>>51277975
I get what you're saying but I don't really get what you're trying to do. What are you making? Tell us more about what you are trying to do.
>>
Okay, I've tried a few things but I'm not really sure whether or not im on the right track.
Basically I want to create a Frame (think of a TV-Screen) and a Wheel (Think of the Wheel of Fortune) that can be seen "on the TV-Screen".
I want to be able to turn the wheel by scrolling with the mouse.
I only want the part of the wheel that is visible on the TV to be visible. Also, the wheel contains stuff that should be clickable - I want to use SVG-Graphics for those if possible.
I tried using a HTML5-Canvas, which allowed me to rotate the objects. I also used the overflow-attribute to accomplish the "Frame"-Look.
However it seems like a canvas is not reall ideal because I cant click on stuff.
>>
>>51279195
You can click on stuff with canvas but you're overcomplicating things using canvas, you can rotate things with CSS, if its simple animations you can use JS + CSS, if you want something really fancy with complex animations use canvas
>>
>>51280440
Yeah, I kinda got it to work, im using JQuery+CSS right now. Thanks for your input guys <3
>>
>>51279195
sounds interesting actually

good luck
Thread replies: 12
Thread images: 1

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.