I have a chat box that is resizable. It has
resize:both;overflow:auto
in the CSS. So at the bottom right of the div, there is a little arrow thing that you can click on and resize the div.
Is there another way to style this? I'd much rather be able to put the mouse on any corner of the div and resize it, or at least have that arrow be on the top right or top left of the div. I'd also like to be able to change what the arrow looks like, to make it more obvious what it does.
Also, is it possible to have the cursor change when the mouse is over the arrow?
Short answer: this is not possible.
However using javascript and CSS a custom solution can be made. You can place a little div in a corner using absolute positioning. Then have javascript resize the textbox on dragging the little div.
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
I'm working on a website and was looking for a function that lets me hover a div to scroll right inside another div, like this example:
See: http://jsfiddle.net/s17L50pv/1/
Imagine that the arrow > to the right is the div you hover and the content in #slider moves right, showing more books!
You need to use setInterval() and some events (mouseover and mouseout) to get this effect
See if that's what You are talking about - http://jsfiddle.net/s17L50pv/5/
I suggest you use a javascript carousel slider for this, there are tons of free scripts around, e.g:
http://kenwheeler.github.io/slick/
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
i have a question about html and css.
How can i make a sidebar like the one in Google FAQ page?
I mean, the sidebar that when you put the cursor over, an arrow appears and if you move the cursor, the arrow moves with it.
I hope you can help me, thanks!
From the looks of it, they are listening for an event (in this case when div#gd-collapsible is hovered over) and the class "hover" is added to it.
So you have that #gd-collapsible is about 3 pixels wide and and on hover, the class "hover" is added which has 1px border solid on left and right, and that's about it really.
You can do this via jQuery, just make sure you style the div#gd-collapsible in a way that it's height equals the one from the right side bar.
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement