I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.
The code is very simple and is as follows:
HTML:
<div class="hot_spot-container">
<div class="content-spot">
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
<div class="hotspot-content"></div>
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
<br class="clear-fix" />
</div>
</div>
CSS:
.hot_spot-container {border:1px solid blue;
position:absolute;
}
.content-spot {
border:1px solid red;
display:inline-block;
}
.hotspot-cir {
float:left;
height:100%;
width:auto;
}
.hotspot-content {
float:left;
background:#ec6e47;
}
.clear-fix {
clear:both;
}
JS
$(".content-spot").css({
height:$(window).height() * ".2"
});
try this:
$(".content-spot").css({
height:$(window).height() * ".2",
width:$(window).height() * ".2"
});
when you change height of content-spot it's width still fixed and need to get resize too.
DEMO
you can use this code too:
$(".hotspot-cir").css({
height:$(window).height() * ".2"
});
DEMO
You must define the width for the element to which you have set the position: absolute; so you should use something like this:
.hot_spot-container {border:1px solid blue;
position:absolute;
/* any width you want or if you don't know the width then define auto.*/
width: 45px;
}
if you make
.hot_spot-container {display:inline-block}
instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width
Try this
I removed your javascript and made this changes
.content-spot {
border:1px solid red;
display:inline-block;
width: auto;
}
.hot_spot-container {
border:1px solid blue;
position:absolute;
display: inline-block;
}
Related
I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}
I have this ok css3 icon created with css.
http://jsfiddle.net/5c9gN/
JS:
$('.ok').mouseenter(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#33CC33');
});
$('.ok').mouseleave(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#ccc');
});
CSS:
.ok{height:40px; width:40px; display:block; position:relative; margin-left: auto; margin-right: auto;}
.ok:after, .ok:before{content:''; height:32px; width:10px; display:block; background: #ccc; position:absolute; top:6px; left:18px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.ok:before{height:16px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:18px; left:6px;}
And I'm having a little issue while trying to change the color of the icon. It always changes the background color not the icon.
Could anyone help me?
Thanks
Using only CSS:
DEMO
.ok:hover:after, .ok:hover:before {
background: #33CC33;
}
Add this css
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
and update your JS code to this
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
Is there a way to make these two textareas that are floated next to one another always be the same height. The height of their container, which expands when one of them is resized. I've tried putting them in a container div and setting their height to 100%. I've tried making a jquery function to resize them (you can see it commented out in the fiddle) which failed.
http://jsbin.com/IkESUli/6/edit
How can I make them always the same height after a resize?
textarea{
min-height:150px;
float:left;
display:inline-block;
overflow:auto;
}
#t2{
width:30px;
overflow:hidden;
text-align: right;
white-space:nowrap;
}
div.container{
min-height:150px;
border:1px solid black;
display:inline-block;
}
This will works:
$(".t").mouseup(function(){
$(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});
You could use mousemove instead of mouseup for "real time" effect.
try setting textarea's height to 100% and container's height to 150px. when textarea is in 100% it will automatically fits into your parent div's height, hope this helps.
textarea {
height: 100%;
width: 100%;
display: block;
}
div.container{
height: 150px;
min-height:150px;
border:1px solid black;
display:inline-block;
}
You can use javascript to implement the following scenario. Once the parent element changes its dimentions, for instance, height, you call the functios (ES6 Javascript version):
const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {
document.querySelectorAll(someTextareaSelector)[0].style.height =
document.querySelectorAll(someParentElementSelector)[0]
.getBoundingClientRect().height + "px"
}
const someTextareaSelector = '...'
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)
I have seen several solutions which determine when an element is visible in the viewport whilst scrolling the page, but I haven't seen any which do this for elements that are contained in a scrolling container div as in the example here.
How would I detect the items as they scroll into view via the scrolling div? And by contrast how would I detect them if they fell out of view. In all cases the overflow elements are not hidden at the outset.
HTML
<div id="mainContainer" class="main">
<div id="scrollContainer"class="scroller">
<div id="picturesContainer"class="holder">
<div id="pictureContainer1" class="picture position1">
pictureContainer1</div>
<div id="pictureContainer2" class="picture position2">
pictureContainer2</div>
<div id="pictureContainer3" class="picture position3">
pictureContainer3</div>
<div id="pictureContainer4" class="picture position4">
pictureContainer4</div>
<div id="pictureContainer5" class="picture position5">
pictureContainer5</div>
<div id="pictureContainer6" class="picture position6">
pictureContainer6</div>
<div id="pictureContainer7" class="picture position7">
pictureContainer7</div>
<div id="pictureContainer8" class="picture position8">
pictureContainer8</div>
<div id="pictureContainer9" class="picture position9">
pictureContainer9</div>
</div>
</div>
</div>
CSS
.main{
position:absolute;
top:0px;
left:0px;
height: 200px;
width:200px;
background-color: grey;
border: 1px solid black;
}
.scroller{
position:absolute;
top:0px;
left:0px;
height: 250px;
width:250px;
background-color: lightblue;
border: 1px solid black;
overflow: scroll;
}
.picture{
position:absolute;
height: 200px;
width: 200px;
background-color: lightyellow;
border: 1px solid black;
}
.position1{
top:0px;
left:0px;
}
.position2{
top:0px;
left:200px;
}
.position3{
top:0px;
left:400px;
}
.position4{
top:200px;
left:0px;
}
.position5{
top:200px;
left:200px;
}
.position6{
top:200px;
left:400px;
}
.position7{
top:400px;
left:0px;
}
.position8{
top:400px;
left:200px;
}
.position9{
top:400px;
left:400px;
}
.holder{
position:absolute;
top:0px;
left:0px;
width:600px;
height:600px;
background-color:lightgreen;
}
include jQuery library on page first.
function getObjDims(obj){
if (!obj) return false;
var off = $(obj).offset();
var t = {
top:off.top,
left:off.left,
width:$(obj).width(),
height:$(obj).height()
};
return {x1:t.left, y1:t.top, x2:t.left+t.width,y2:t.top+t.height}
};
function testInside(pic,box){
var d=getObjDims(pic);
return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1;
};
$(document).ready(function(){
var inside={};
var port=$('#scrollContainer');
var box=getObjDims(port);
$(window).resize(function(){
box=getObjDims(port);
});
$(port).scroll(function(){
var str=[];
$('.picture').each(function(i){
var oldState = inside[this.id]!=undefined?inside[this.id]:0;
var newState = testInside(this,box);
inside[this.id]=newState;
if (oldState!=newState)
switch (newState){
case 1:str.push(this.id);break;// go IN
case -1: break;// go OUT
}
});
$('#picStatus').text(str.join(', '));
});
});
Add in HTML for results output:
<div style='margin-top:280px;'>Pictures in window (numbers):</div>
<div id='picStatus'></div>
It is code based on object's coords, witch are recalculated on scroll event. There are some things to know. IE and, seems to be, Opera takes into consideration width and height of scrollbars themselves, that demands curtain code tuning. I just have suggested solution direction and did not spent much time for debugging this.
And yet, maybe will be useful following (from jquery api about offset):
Note: jQuery does not support getting
the offset coordinates of hidden
elements or accounting for borders,
margins, or padding set on the body
element.
http://www.quirksmode.org/mobile/viewports.html discusses the issues around viewports, determining their dimensions, and calculating element bounds relative to a viewport's coordinate frame. Part 2 of that blog post then goes into the implicit viewports in mobile browsers. He doesn't give code that answers your question exactly, but it's definitely relevant and worth a read.
I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }