I have a sidebar div that I have given a fixed position so that as the page scrolls it is always visible. Just to make things interesting the sidebar's position is set by some javascript code to deal with lower screen resolutions and problems with it ending up in the wrong position.
That is all working nicely, however it appears that the controls on the div don't move when it gets repositioned so you can't click on them. They appear in the correct position they just don't actually do anything.
I'm sure I've read a solution for this on here but can't track it down.
Here is the CSS for the sidebar:
.mainsidebar
{
display:inline-block;
width:35.5%;
float:left;
padding: 0px 0px;
margin: 12px 8px 8px 8px;
min-height: 480px;
position: fixed;
font-size: 9pt;
left: 0px;
overflow:auto;
background-color: #4b6c9e;
border-radius: 8px 8px 8px 8px;
}
and the javascript that sets it's position:
var elementStyle1 = document.getElementById("mainSideBar");
elementStyle1.style.top = "23.2%";
I tried doing the same thing with the asp control but can't get any result.
Ok sorry - you can ignore this. I thought it was the problem I mentioned above as I was sure I had read a solution describing a similar situation.
It actually was the z-index of the controls that was the problem - once I set the div to have a lower z-index than the controls then I was able to click on them.
Lets assume the ID of the ASP.NET server control is "mainSideBar". Then your javascript code will be
var elementStyle1 = document.getElementById("<%=mainSideBar.ClientID%>");
Related
hello friends i have a blog that will give students' results by an iframe. it is displayed fine in desktop but in the mobile browser the iframe is getting narrowed in width 100% as I have given.To be more specific, look at my web page
and look at another page(and after getting into this page please click on any of the links named link-1 or link-2)this is nice i want my above page to be like this.the iframe in this page also gets narrowed but in some other way.The main problem here is the second page responses cleanly but mine is not that much clear what should I do to be like that. thanks in advance.
Note:you will not notice my problem unless you click on link-1 or link-2 in the second page given above because the iframe is opened after clicking on those links.
Try to apply the iframes div tag with the same class that they have. Their div tag has a class called eh-box. Their div tag is more like a pop up as well.
The eh box class contains this css
.eh-box {
top: 10%;
left: 0;
right: 0;
float: none;
width: 98%;
height: 600px !important;
background: #ffffff;
margin: 0 auto;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
}
I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).
Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}
As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.
What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)
Been playing around with margin and padding since yesterday, but still no idea how to do it.
Any help will be really appreciated, guys.
td;dr: How to get border to autosize/autoscale to content.
html:
<div id="container">
<div id="eachitem">
</div>
</div>
css:
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
}
Container is for position the whole content into postion based on margin.
Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.
Since different content have different length. I want it to scale down to the max content as shown in image below:
Click Demo
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
float:left;
width:250px;
}
Try to use word-wrap property.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
word-wrap: break-word;
}
Here is an example with your code.
After you edit your question, I see you want border to fit the content exactly? Well, try this.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
display: inline-block;
word-wrap: break-word;
}
Here is an example.
Resizing padding, margins and border weights based on content size is nasty in any language, due to the unpredictable nature of text. Content length, font weight and sizes, display resolution and window size all affect text in myriad ways. Additionally, most high-level languages like JS cannot compute text dimensions without actually rendering it first. This means you must first display the text, then compute how much space it occupies, then twiddle the surrounding properties. And depending on the APIs available, you might not even be able to predict what values to use. In that case, you have to iterate over multiple values, see what it looks like, and if it is not correct, run through all the steps again. Not a fun endeavour to get into.
I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.
What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)
The header element had styling like so:
header{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).
What would cause this to happen in just Android 4.0 browsers?
What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:
header{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.
Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)
I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!
Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;
If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.
I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.
Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.