Javascript, CSS, HTML

Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,429
73,489
Picked up Javascript today, decided on usinghttp://raphaeljs.com/for what I want to do.

I'm currently trying to create a glowing rectangle that I can animate. Raphael uses some glow implementation that adds a stroke to a path. This is great but it's unanimatable. I've got a workaround where I programmatically create a bunch of rectangles to create a glow effect and then animate each one. This is retarded and even pegs the cpu on firefox.

I created a jsfiddle for it:
http://jsfiddle.net/jimmyw404/jwtsn/38/

Anyone know how to do this is in a non-retarded way? I'm open to new frameworks or whatever.
 
xrg

xrg

Golden Squire
180
59
Depends on what you're going to do with it I suppose. When I was doing web dev, I'd make two images and fade between them using jQuery (I imagine that framework can do it too though).

Some are usingCSS3 stuffthese days it looks like.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,429
73,489
Thanks I'll see if css can help me do what I want. From what I read on those SO answers, however, that's describing how to animate the intensity/color of glow effect, rather than animate the position of the glow effect.
 
Lenas

Lenas

Trump's Staff
7,483
2,229
Agree with the above, glowing rectangle would best be accomplished with using CSS3 box shadow with a light color to create the glow effect, maybe a 1px border to create definition, and animating with JS.

Get IE support for the CSS3 by usingPIE.js
 
B

Buttons_sl

shitlord
5
0
As mentioned above, CSS3 transitions are really good at this. Modern browsers handle them easily and there are various libraries out there to handle oldie browsers like IE 7 and 8 if its important to you.

Quick and dirty example:http://jsfiddle.net/mschwar99/Zrcdz/

Click the "Animate" button to add / remove the class that triggers the animation.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,429
73,489
Excellent, thanks. I'm mostly a c/c++ programmer and one challenge I have with web development is not knowing which part of my mess of html/js/css/php should implement a specific feature. I guess the lesson learned is that if there's a feature that seems to be missing it's because I'm using the wrong tool.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,429
73,489
For posterity if you want a shadow on both inner and outer the css is:
box-shadow:0 0 20px #0f0, 0 0 20px #0f0 inset;


Also I changed the topic to include html/css
 
B

Buttons_sl

shitlord
5
0
Tuco_sl said:
Excellent, thanks. I'm mostly a c/c++ programmer and one challenge I have with web development is not knowing which part of my mess of html/js/css/php should implement a specific feature. I guess the lesson learned is that if there's a feature that seems to be missing it's because I'm using the wrong tool.
Click to expand...
Completely empathize with the difficulties of navigating the mish-mash of front end tools at your disposal. Its what I spend a good chunk of my week doing.

A lot of the newer browser features are being put into place to combat exactly the problem you bumped into - things that seem like they should be trivial tasks for a modern environment required inefficient workarounds to accomplish. Eight or so years of needing Flash installed simply to watch a video is a good example.

This slide deckis a good jumping off point to check out newer native browser features. Its from Google so the examples there work best in Chrome.
 
Lenas

Lenas

Trump's Staff
7,483
2,229
Basic rule of thumb for web development is that HTML should be your barebones structure, CSS should handle all visual aspects, element size and positioning, and Javascript should handle all front end user interaction like click effects, animating DOM elements, AJAX, etc.

CSS3 and HTML5 combined are capable of a lot of animations etc, but Javascript is still the most widely supported method of doing things like that.
 
P

Perrito_sl

shitlord
10
0
Tuco_sl said:
Excellent, thanks. I'm mostly a c/c++ programmer and one challenge I have with web development is not knowing which part of my mess of html/js/css/php should implement a specific feature. I guess the lesson learned is that if there's a feature that seems to be missing it's because I'm using the wrong tool.
Click to expand...
It has always been:
HTML = Content
CSS = Styling
Javascript = Make things happen on the frontend (animations, interactions, make things easier/quicker for the user)
PHP = Make things happens on the backend (databases, dynamic content, security, validation)

But with the introduction of CSS3, you can now make things happen with your styles... javascript is not needed as much. But the problem is that not all browsers support all the css3 goodies.

Then you have things like jQuery that combine all of the above and have prebuilt code and shortcuts to build just about anything.

Basically there is no perfect way of doing things on webpages, at least for the simple stuff. As long as you
 
M

Moth_sl

shitlord
31
0
JQuery is nothing. Anyone who says they are a JQuery developer is full of shit. If you know Javascript you can look up any little thing in JQuery in 3 seconds. JQuery is a super helpful library of shortcuts for DOM manipulation, nothing more.

HTML and CSS are unfortunately the only options for developing standards based websites. They are both fine but still a hassle when developing an application. They are getting better though via html5 tags and the emergence of css preprocessors likeLESSandSCSS.

HTML is become less about markup on the front-end and more abouttemplatespopulated via javascript.

Javascript is less about doing shitty animation affects and more about data management andapplication logic.

If you are an absolute beginner I would recommend getting some kind of book, otherwise technology moves so fast now that it doesn't make sense. A new framework is released every month and if you don't have it on your resume you aren't shit.
 
xrg

xrg

Golden Squire
180
59
I never could get into SASS or LESS. Same with various Grid CSS frameworks, boilerplates, and other things. It would take me longer to figure out how to use that stuff than just hammering it out in Vim takes. Javascript and php frameworks I'll use though. Especially javascript because they usually solve all the cross-browser issues for you.
 
F

foop_sl

shitlord
60
0
Moth_sl said:
JQuery is nothing. Anyone who says they are a JQuery developer is full of shit. If you know Javascript you can look up any little thing in JQuery in 3 seconds. JQuery is a super helpful library of shortcuts for DOM manipulation, nothing more.

HTML and CSS are unfortunately the only options for developing standards based websites. They are both fine but still a hassle when developing an application. They are getting better though via html5 tags and the emergence of css preprocessors likeLESSandSCSS.

HTML is become less about markup on the front-end and more abouttemplatespopulated via javascript.

Javascript is less about doing shitty animation affects and more about data management andapplication logic.

If you are an absolute beginner I would recommend getting some kind of book, otherwise technology moves so fast now that it doesn't make sense. A new framework is released every month and if you don't have it on your resume you aren't shit.
Click to expand...
So true on the technology moves so fast part. I really enjoy templating in javascript but I haven't found one that suit my tastes.
My current biggest problem with web development is how shit gets deprecated within a couple of months from full supports.
I was looking for a template engine, and loved the one from jQuery, until I found out that it was deprecated and was phased out for n different frameworks that were not even in alpha, worse are the ones that require some sort of compilation. Wtf is that shit? If I want to compile things, I would just stick with asp.net or some java stuff.
 
Heriotze

Heriotze

<Gold Donor>
1,031
1,410
http://jsfiddle.net/sYJHZ/

canvas solution that created more problems than it was probably worth. jquery would be the best solution although it's going to have to require a static image and a weird three-box setup where you add in new middle sections of the image on animate callback. Or you could just skew a high res image if you don't mind people's heads exploding when they view on a retina display device.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,429
73,489
I've been doing well by dropping the raphael/canvas approach and just using css/html/javascript like I think it's supposed to be used. Things are going well but I've found my first roadblock doing it.

I want to move the "move me" box from the right box to the left box. This is easy but I want to animate the action (ex: transitions from side to side over 200ms)
http://jsfiddle.net/jimmyw404/ZMFSS/2/


The end result would be some reasonable amount of content that is thumbnail sized on the right box, but when is moved toward the center box it expands out to a viewable level. But that's just the end result, I like baby steps. If I'm approaching this the wrong way and should be doing something different I can change.
 
You must log in or register to reply here.