I want to make a 100% width div in a 300px container, how is it posible? tryed postiton relative and absoulte with no success.
.container { margin:0 auto; text-align:center; background-color:black; width: 300px;}
.normalOne { background-color:grey; height: 50px;}
.hundredProcent { background-color:blue; height: 50px; width:100%;}
.normalTwo { background-color:red; height: 50px;}
<div class="container">
<div class="normalOne"></div>
<div class="hundredProcent"></div>
<div class="normalTwo"></div>
</div>
And here is a fiddle http://jsfiddle.net/lamberta/2U893/
I've added one addition div inside div.hundredProcent with following style:
style='position:absolute; background-color:yellow; height: 50px; width:100%;left:0px;'
Check this updated fiddle. You should not set position:relative to .container or
.hundredProcent div's
You can't do that by CSS alone. Use Javascript; something like this
document.getElementsByClassName('hundredProcent')[0].style.width =
document.body.clientWidth+'px';
for instance in the onload handler.
Make sure it works on all browsers that you need it to work on. I'm not even sure if getElementsByClassName is implemented in all modern browsers, so you may need to give the div an id to positively identify it.
Related
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I am completely flumoxed on this one. I have a Facebook button that seems to be hidding the overflow but only on the y axis???
You can see it live here: www.new.thebespokeflorist.co.uk/blog just scroll down and mouse over the facebook icon below a blog post.
The facebook button is held in a div:
<div class="share-facebook social-noshow" onclick="toggleSocial()">
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="lucida grande"></div>
</div>
The CSS is:
.social-show { width: 60px; overflow: auto; }
.social-noshow { width: 0px; overflow: hidden; }
.share-facebook { background: url('http://www.new.thebespokeflorist.co.uk/wp-content/themes/V3 TBF/images/blog/fb.png') left bottom no-repeat; height: 20px; float: left; padding: 0 0 0 30px; transition: width 0.25s ease 0s; }
.share-facebook:hover { width: 90px; transition: width 0.25s ease 0s; overflow: visible; }
The onclick() java is:
<script>function toggleSocial() {
var noShow = document.getElementById("social-noshow");
noShow.classList.toggle("social-show"); }</script>
As far as I can tell the button is croping within the span width of the facebook button itself which is 71px. If I increase the span width I can see more of the comment box.
Does anyone have any idea what is causing this?
I have also tested loading the facebook button elswhere on the site and I have the exact same issue.
Ok figured it out. I had further up in my CSS a 'fix' for Iframes that made them 100% span. Removing that fixed my problem.
So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
I'm using jQuery UI "sortable" plugin to be able to select and sort items.
I set up the plugin to have two lists, one for "available" items, the second for "selected" items.
The plugin works as expected, I can move items from one list to the other.
However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?
In fact, i'd like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)
This picture describe what I want to do:
The red lines are what I'd like. I want both lists to have this size, fixed.
Here is my code (generated from an asp.net webpage actually) :
<script type="text/javascript">
$(function () {
$("#sourceItems").sortable({
connectWith: "#targetItems",
update: function (event, ui) {
$("#selectedUserIDs").val(
$("#targetItems").sortable('toArray')
);
},
placeholder: "ui-state-highlight"
});
$("#targetItems").sortable({
connectWith: "#sourceItems",
placeholder: "ui-state-highlight"
});
$("#sourceItems, #targetItems").disableSelection();
});
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
<p>Available :</p>
<ul id="sourceItems" class="droptrue">
<li class="ui-state-default" id='i1'>item1</li>
<li class="ui-state-default" id='i32'>item2</li>
<li class="ui-state-default" id='i47'>item3</li>
<li class="ui-state-default" id='i46'>item4</li>
</ul>
</div>
<div style="float: left; display: inline-block;">
<p>Selected :</p>
<ul id="targetItems" class="droptrue">
</ul>
</div>
<div style="display: none">
<input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>
The hidden input field is my container for storing selected items (posted with the form).
I've tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.
I came here looking for a similar, but more generalized solution to the same problem. The solution here didn't help me, but I figured it out on my own and thought it might be helpful to share it.
I didn't want the two sortable lists to be fixed, I just wanted them to stay the same height. When you are dealing with a large number of items, having two dynamically sized boxes around the list can make it hard to work with, as the one box is so much smaller than the other. Making both boxes a fixed height is also less than optimal, as then you end up with scrollbars once your number of items in one list exceeds that height. I wanted both boxes to dynamically expand using the built-in functionality of the JQuery sortable, connectWith code, but I also wanted them to both just be set to the larger of the two. To do this I found that you can modify the padding on the lists, and that area will still be an interactable area for purposes of drag-and-drop.
So, to make two connectWith, sortable lists keep the same height, you can add the following handler for the over event:
over: function(event, ui) {
var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
$("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
$("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
}
Here's a fiddler example extending the other example with this event handler: http://jsfiddle.net/TLrn7/
Edit:
$(document).ready(function(){
$("#targetItems").height($("#sourceItems").height());
$("#sourceItems").height($("#sourceItems").height());
});
http://jsfiddle.net/JEY4U/1/
Old Answer:
Use a 'helper' function, which makes sure the dragged elements have proper width and height.
Something like this:
helper: function(event, ui) {
$(ui).width($(ui).width());
$(ui).height($(ui).height());
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
You use it like this:
$(SOME_OBJECT).sortable({
connectWith: ...,
placeholder: ...,
......
helper: function....
});
Of course you can write any costume helper function you'd like.
The jQuery UI list height is set to a specific height using CSS. Example for 300px height.
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
Read the documentation here: https://jqueryui.com/autocomplete/#maxheight