I have a small menu that I always want to be in the bottom right corner.
Now normally this would be no issue with
#element {
position:fixed;
bottom:0;
right:0;
}
but I am using the zoomooz plug in to zoom into several elements on the page.
When this happens, the menu elemnt stays where it originally was.
The plugin uses transform to perform the zoom:
transform: translate(-1358.83px, 577.585px) rotate(0rad) skewX(0rad) scale(3.33879, 3.33879); transform-origin: 1280px 667px 0px;
What can I do to keep the menu element in the bottom right corner even when the plugin zooms?
Related
I have page (Red) with an iFrame on (white). Within the code of the iFrame, there is another iFrame containing another 2 pages (Green & Blue).
In the Red page, i have some Javascript that allows a hidden sidebar to appear when the mouse hovers on the right side of the screen (300px from right). This works fine, however if the user pulls the mouse away and the curser hovers over the red or green pages in the iFrame, the sidebar will not retract. However if the user retracts the curser into the red area (top and left) the sidebar retracts as expected. Im assuming that there is no code within the red and green pages telling the sidebar to retract when a mouseover occurs.
My problem is, i really suck at Javascript. How would I go about having the side bar retract regardless of where the mouse curser ends up? Any help would really be appreciated. Thanks
$(window).on('mousemove',function(e){
if(e.pageX >= $(window).width() - 300 || e.target.id=='sidebar' ){
$('#sidebar').css({'right':'0px'});
}
else{
$('#sidebar').css({'right':'-300px'});
}
});
Could you try to change the mousemove event to using mouse out and mouse in?
$(window).on('mousein',function(e){
$('#sidebar').css({'right':'0px'});
}
$(window).on('mouseout',function(e){
$('#sidebar').css({'right':'-300px'});
});
Also I would like to suggest maybe using a CSS based solution for this where instead using a :hover selector to show/hide the sidebar on mouse over
.sidebar-container{
width:300px;
height:100%;
background:#999;
position:absolute;
left:0px;
top:0px;
}
.sidebar-container .sidebar{
width:100%;
height:100%;
background:#465;
position:absolute;
left:-300px;
top:0px;
transition:all 0.5s;
}
.sidebar-container:hover .sidebar{
left:0px
}
<div class="sidebar-container">
<div class="sidebar">Hi!</div>
</div>
I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.
I want to disable scroll-bar functionality for chrome and don't want to hide the scroll-bar by giving overflow:hidden.
The scroll-bar should be visible
I want something like this: http://prntscr.com/ai5y9k
Any help would be great!!
use overflow: auto
that will display a scroll bar only when necessary (i.e. the content is higer than the window)
Closest you will get to, is to enforce the body to be no larger than the window then tell the scroll bar to always be present.
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
overflow:scroll;}
I'm using html/css/javascript as a game UI for a 3D game. I render the page on top of my game. Most game UI's have an anchoring concept (position widgets to Top, Left, Right, Bottom, Center, LeftCenter, RightCenter, TopCenter, BottomCenter). I'm wondering if anyone knows of any existing html/css framework out there that mimics this behavior or if it's fairly easy to do such a thing with css? I'm not all that familiar with css and I've done some searching around this but haven't seen anything that seems like it's a direct anchoring like I was referring to above. It seems like anchoring div's like this would be ideal in my situation.
I'm picturing behavior like anchoring a div to the bottom center and when I add things inside of it the overall div itself always stays centered at the bottom no matter if I resize the window.
Comment as answer:
Look at css position: fixed it basically causes the element to act like a watermark
If you want it bottom-left you would do
css bottom: 0; left: 0;
If you wanted top-center you could do
css top:0; left:0; right:0;
(I think you can get where I'm going with that without explaining all the different scenarios)
left: 0, right: 0 seems to just make the div take up the entire width. Giving a width of 50% doesn't center that div of a width of 50% it seems.
Response
try html
<div id='a'>
<div id='b'></div>
</div>
css
#a {
position: fixed;
left:0;
right:0;
}
#b {
width: 50%;
margin: auto;
}
I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.
Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative
div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.
Put it in a table with 100% width and that's all