How could create a div sticky in the dojotoolkit?
Some scroll function?
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-geometry/position.html#dojo-dom-geometry-position
You could indeed create an event handler to the scroll event and continuously reposition the div, or you simply use CSS and add position: fixed to the div.
For example:
body {
min-height: 9000px;
}
.box {
position: fixed;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background: yellow;
}
<div class="box">Even when you scroll this box stays centered</div>
Related
I have a rectangular website with navigation buttons on the bottom. When viewing the website in landscape mode the bottom and navigation gets cut off, not visible.. How can I make it vertically centered in landscape mode?
My container:
#container {
height: 500px;
width: 910px;
margin-right: -200px;
margin-left: -450px;
position: fixed;
top: 20%;
left: 50%;
overflow: hidden;
}
Add this lines, but work only in new browsers. Here is idea
display: flex;
align-items: center;
I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
Simple html:
<div id="loading">
<img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
</div>
jquery:
$('#loading').hide(); $('#loading').show(); // as required
css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 10px;
left: 24px;
z-index: 100;
}
Try this:
$(document).ajaxStart(function() {
$('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });
$(document).ajaxStop(function() {
$('#loading').remove();
});
replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.
I've found this solution to be cleaner & work well.
I'm trying to make the following div flexible
div {
min-width: 500px;
max-width: 1000px;
width:100%;
height: 400px;
margin-left:100px
}
If I remove the margin left everything works fine, but with the margin, when I start resizing the browser window, the box goes behind the browser window and only then starts being resized. How do I solve this issue? I tried a wrapper, tried resetting box-sizing, tried with different positionings but nothing seems to work, what am I missing?
Try adding width: calc(100vw-100px); or calc(100% - 100px). This sets the width of the div to Veiwport width - Margin
Also remove max-width: 1000px; and min-width: 500px;
div {
width: calc(100%-100px);
height: 400px;
margin-left:100px
}
div {
width: calc(100%-100px); /*or `width: calc(100vw-100px);`*/
height: 400px;
margin-left:100px;
background-color:pink;
}
<div></div>
At the moment I have this, a small DIV that slides in from the top to the center of a container DIV when the mouse hovers over the container DIV; but on mouseout, it slides back out to where it came from. What I'd like to do is have the DIV slide out of the other side of the DIV, directly opposite where it entered.
Is this possible using just CSS? (I imagine with JQuery it would be more straightforward)
<div class="blocks">
<div class="blocks_title">
</div>
</div>
<div class="blocks">
<div class="blocks_title">
</div>
</div>
.blocks {
position: relative;
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px dotted #333;
overflow: hidden;
}
.blocks_title {
position: relative;
width: 20px;
height: 20px;
top: 0px;
left: 40px;
background: #333;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
.blocks:hover .blocks_title {
top: 40px;
opacity: 1;
}
And just when everyone is convinced that it's not gonna work with css only:
http://jsfiddle.net/Xkee9/36/
I used an animation for the mouseenter and a transiton for the mouseleave
Edit: added firefox fix
Edit: Explanation:
(I always use -webkit- -prefixes, just to explain it in Chrome and Safari, Firefox uses the -moz- -prefix, opera the -o- - prefix)
When nothing happens:
the block is at the bottom of the div.blocks (top:80px;), with an opacity of 0, also there is no animation running
When hovering:
the block moves instantaneous to the top with no transition (see:-webkit-transition: none;), because then the animation down-1 is running. That animation moves the block from top:0 to top:40px; in .25s. After the animation, the block stays at top:40px; because that's what I added in .blocks:hover .blocks_title.
When mousleaving:
there is no animation running anymore, but the block moves from top:40px to top:80px; in .25s because of -webkit-transition: all .25s;
How to make a bookmarklet where there's a div that pops up in the middle of the screen?
Seems very simple, i just can't get it down.
To make a div appear in the middle of the screen, you need two divs, one inside the other:
The outer div is has fixed position at top 50%; left: 0px; right 0px; height: 1px and overflow: visible
The innder div is absolutely positioned to left: 50%, top: minus the height of the div and has a margin-left of minus the width of the div. That is:
#
<div id="outerDiv">
<div id="innerDiv">
Your content
</div>
</div>
#outerDiv
{
position: fixed;
top: 50%;
height: 1px;
left: 0px;
right: 0px;
overflow: visible;
}
#innerDiv
{
position: absolute;
width: 200px;
height: 100px;
left: 50%;
margin-left: -100px;
top: -50px;
}
Don't forget that IE6 doesn't support position: fixed so you might want to fall back to position: absolute and scroll to the top of the page if you detect IE6.
As for the bookmarklet: you need to write javascript that constructs these elements and append it to the bottom of the page. Here's a detailed tutorial on adding elements to a page with javascript.
javascript:var theDiv = document.createElement( 'div' ) ; theDiv.appendChild( document.createTextNode('hello') ) ; theDiv.style.position="absolute";theDiv.style.left='50%';theDiv.style.top='50%';theDiv.style.border='solid 2px black'; document.body.appendChild( theDiv ) ; void(0);