So I have a dropdown thingy. You click on the 'Click Me' text and it'll show. Here's a demo to it http://jsfiddle.net/QzLst/
Now here's the issue. The blue text on the right, shows even when I placed it in the div that slides up and down. I'm not really sure where to go from here. Here's my markup
<div class="search">
<div class="text">
Some text
</div>
</div>
<div class="click">Click me</div>
And the CSS
.search{
width: 100%;
background: #000;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
z-index: 200;
height:0;
transition: 0.5s;
}
.toggle{
height:100px;
}
.text{
color: #009dff;
float: right;
}
The demo will help you understand what I mean. All I want is the text to slide with the div named search. So when search closes, basically I guess text would also close
Add overflow: hidden to .search.
This solves that problem:
[update to your fiddle] [http://jsfiddle.net/QzLst/1/]1
We can simply hide the .text class with this CSS:
.text {
display: none;
}
Then we toggle the .text class:
$(".click").click(function(){
$(".search").toggleClass("toggle");
$(".text").toggle()
});
Related
I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
I have the following page:
HTML:
<div class="spacer">
<div id="conversation"></div>
</div>
<div class="colorbox">
</div>
<div class="box">
<div id="message"> XXXX </div>
</div>
CSS:
body {padding: 0; margin: 0; overflow: hidden; font-family: Helvetica;}
.box {
background-color: #FFFFFF;
height:200px;
width: 700px;
border-top-style:solid;
border-top-width: 2px;
border-top-color: #EEEEEE;
display: inline-block;
}
.spacer {
background-color: #FFFFFF;
height:40px;
}
.colorbox{
display: inline-block;
height:120px;
width:120px;
border:1px solid #000;
background-color:blue;
}
#message{
margin:5px;
}
JS Fiddle: http://jsfiddle.net/qtv4c10o/5/
I would like to be able to delete the XXX text without moving the line in that border box, but unfortunately that's not working. When I remove it the line moves to look like this:
http://jsfiddle.net/qtv4c10o/6/
I am eventually going to be updating the XXX text using javascript and don't want the border line to move as well.
The reason your line goes under the blue square is:
You gave a fixed width of 700px to the box class.
So if you reduce the size of the window, your line cannot reach 700px: it has to go where there is more space, ie below the box.
Solution: give it a width that can be achieved within the remaining space
The issue was resolved in chat. Here is a working solution:
Let's first wrap colorbox and box with an outer div.
<div class="outer">
<div class="colorbox"></div>
<div class="box">
<div id="message"> XXXX </div>
</div>
</div>
The outer class is so:
.outer {
width:100%;/* the whole width available */
height:120px;/* same height as blue square */
display:table;
}
We'll give outerbox the following property:
display:table-cell;
and add to box:
width: 100%; //the remaining width, actually
margin-top:105px; // blue square height minus height of message
Here is a working fiddle: http://jsfiddle.net/xzxn4rzf/1/
I would like to type text in a contenteditable div that is placed right to an image.
HTML
<div class="container">
<div class="image">
<img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
<p></p>
</div>
<div class="clear"></div>
CSS
.container {
width: 1000px;
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
border: 1px solid #000;
}
.clear{
clear: both;
}
My goal is to have the caret positioned to the right of the image when I focus into the contenteditable and not to the beginning of the p tag as you can see in this Fiddle.
One solution was to insert a in the <p>, as showed in this other Fiddle, but this is not a very clean solution: it pollutes the text that is written inside.
I can take advantage of JavaScript and jQuery, but a pure HTML and CSS solution is preferred
Any thought?
UPDATE
I forgot to say that the text should go also under the image so it cannot be floated or hidden
Simply try margin-left:500px;
.text {
min-height: 30px;
border: 1px solid #000;
margin-left:500px;
}
You have to remove div's and apply to image these css-styles:
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
with
vertical-align: bottom;
Add overflow:hidden into an element that should not overlay a floating element:
http://jsfiddle.net/nothrem/0mdcLzqs/3/
<div class="container">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
</div>
<div class="text" contenteditable style="overflow:hidden">
<p></p>
</div>
<div class="clear"></div>
</div>
UPDATE: you can use Javascript to change the overflow based on element's content
document.getElementsByClassName('text')[0].onblur = function() {
if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
this.style.overflow = 'visible';
} else {
this.style.overflow = 'hidden';
}
}
Blur fires after you finish editing, you may want to add another events, e.g. onkeyup, onmouseclick, etc.
I am not a big fan of floats unless necessary, I'd remove the float: left from the image CSS and add to the .image, .text one these two lines:
display: inline-block;
vertical-align: top;
To get text under your image
Set the container width to the width of your image, and set the position of your text with float left or right like this:
.container {
width: 500px; // width of image
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;
}
.clear{
clear: both;
}
Here is a demo
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}
is there any chance to do a js onclick function, that if someone will click on that icon automatically the title text will be shown, or just when someone moves mouse over it, title will be shown without any delay? Right now title for element comes out after 1 sec.
you can try this, pure css, without js:
HTML:
<div class="hover">
Hover Me
<div class="tooltip">
Tooltip goes here
</div>
</div>
CSS:
.hover{
border:1px solid black;
text-align:center;
width:150px;
position:relative;
}
.tooltip{
display:none;
position:absolute;
border:1px solid red;
border-radius: 5px;
padding:5px;
top:-10px;
left:200px;
width: 300px;
}
.hover:hover .tooltip{
display:block;
}
http://jsfiddle.net/kamil335/qGTUc/
I just answered the same question
You'll have to create your own tooltip. You don't need JavaScript, pure CSS is enough:
.tooltip {
display: none;
position: absolute;
background: #ffe;
border: 1px solid #eed;
border-radius: 4px;
padding: 2px 4px;
}
:hover + .tooltip {
display: block;
}
body { font-family: sans-serif; }
<div>Hover for tooltip</div>
<span class="tooltip">Tooltip text goes here</span>
jsfiddle.net/v655C
You won't be able to override the default browser behaviour of how it displays tooltips containing the title attribute text, but you could follow the steps on this other question to show and hide a div containing the relevant text (the approach uses jQuery and deals with hover, but adding a click handler isn't much of a stretch).
jQuery Hide/Show with Slide on Hover... better way to do this?