We Keep Coding

Split text effect

I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance.

While I am not going to write out all of the code for you I will suggest a method of doing it:
I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.
Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.
On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.
Oh, and to make the two divs appear on the same line look at this answer.
While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.

Creating 3 Scrollable grids

I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.

Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV

You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle

hoverstate on diagonal jquery grid

I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.

well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)

Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?

Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow

Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

set the height of a container to hold dynamically-sized widget

Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.

Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>