Develop Reference

Scrolling Div Along The Page, Stop at the Bottom of Itself (Like Twitter)

I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click

You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>

Auto scaling text to fit within a div

Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/

If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/

Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}

I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js

Manipulate Google results page to add a section on the RHS

I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.

I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)

Losing text sharpness (blur) when scaling div over a fixed position element (on mobile safari / webkit browser)

The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with text). When clicking on the black div, it is up-scaled and the text on it stays sharp. However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem).
The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4.
The question is: is there a solution/workaround to tweak every code, but not the red div code, so that the text on the black div will remain sharp?
I am here for any questions / clarification requests.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#main_div").bind("click", function() {
$("#wrapper").css({"z-index": -1});
$("#main_div").css({"-webkit-transform": "scale(1.4)"});
setTimeout(function() {
$("#wrapper").css({"z-index": 2});
}, 4000);
return true;
});
});
</script>
<title>Title</title>
</head>
<body>
<div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position: absolute; width: 972px; height: 598px; ">
<div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;">
<div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; ">
<div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); ">
<span>Here is some TEXT</span>
</div>
</div>
</div>
</div>
</div>
<div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div>
</div>
</body></html>

I was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\

How can I get tooltip to hover on top of texboxes?

Hello again dearest Experts,
I am still having issues getting tooltips to work correctly.
The code below works correctly as far displaying the tooltips.
The big issue is that it expands the textbox, making other textboxes lose alignment.
What we would like to is to have the message in the tooltop hover on top of the textbox but not obscure it. This way, users can still type into it.
Can the code I have below be modified to help me accomplish this?
Many thanks.
THe css
<style type="text/css">
div.activeToolTip
{
display:block;
visibility:visible;
background-color:#A1D40A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
line-height: 1.50em;
font-weight:bold;
color: #fff;
border:1px solid black;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
width:200px;
height:70px;
}
div.idleToolTip
{
display:none;
visibility:hidden;
}
Then textbox and tooltip.
<asp:TableCell><asp:TextBox ID="instruct" onmouseover="document.getElementById('toolTipDiv').className='activeToolTip'" onmouseout="document.getElementById('toolTipDiv').className='idleToolTip'" runat="server" Width="75px"></asp:TextBox>
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>

The key is to make your tooltip position: absolute. This way you'll have exact control over where it appears and it won't affect the layout of any other elements.
The other thing you should do it put it in an element with position: relative set:
<div class="relative">
<input type="text" />
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
</div>
This will create the coordinate system for it (i.e.: bottom: 20px will translate to 20px from the bottom of the relative parent):
.relative {
position: relative;
}
#toolTipDiv {
position: absolute;
bottom: 20px;
left: 0;
}
Here's a demo of it in action.

I recommend you use a jQuery plugin, there are tons of them:
30 Stylish jQuery Tooltip Plugins For Catchy Designs

edit: sorry, that was a complete brain fart. I need more sleep. display:absolute won't do anything, it's position:absolute
Can you show the problem in the jsfiddle?