I'm using Fancybox 2.1.3 to display some text when the page loads. The problem is that it's wrapping it onto two lines when I want it to all be on one line. I've tried the width, autoSize, and fitToView properties, and none of them are doing anything.
I'd prefer not to modify the fancybox css files, since I'm also using fancybox to display some images, and those are working properly.
Javascript
<script type='text/javascript'>
$(document).ready(function(){
// Activate fancyBox
$('.text').fancybox({
padding : 0,
closeBtn : false,
topRatio : 0.75,
helpers : {
overlay: {
css: {'background' : 'rgba(0, 0, 0, 0.0)'}
} // overlay
} // helpers
});
// Launch fancyBox on first element
$('.text').eq(0).trigger('click');
// Close automatically
setTimeout('parent.$.fancybox.close();', 10000);
});
HTML
<a href='#textid' class='text'></a>
<div style='display: none'>
<div id='textid'>The display text goes here.</div>
</div>
CSS
#textid
{
font-size: 40px;
color: red;
}
#textid {
font-size: 40px;
color: red;
white-space: nowrap;
}
Related
I'm using MathJax in Anki to make notes. When I use "Cloze" note type and put some MathJax in cloze deletion, the lines are suddenly broken, but outside cloze deletion MathJax renders as expected. Here is an example 1.
My front template:
{{cloze:Text}}
<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
messageStyle: 'none',
showProcessingMessages: false,
tex2jax: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true
},
SVG: {
scale: (!!navigator.userAgent.match(/(mac)|(mobile)/i) ? 100 : 180)
}
});
</script>
<script type="text/javascript">
(function() {
if (window.MathJax != null) {
var card = document.querySelector('.card');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
return;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
document.body.appendChild(script);
})();
</script>
And styling:
.card {
font-family: calibri;
font-size: 20px;
text-align: center;
color: black;
background-color: lightgray;
}
.cloze {
font-weight: bold;
color: blue;
}
How to fix this problem?
If you are using a WebKit-based browser (e.g., Safari or Chrome), then recent changes in WebKit may be the cause of your issue. The way MathJax checked for the available width for the math now causes unwanted line breaks in WebKit. (See this issue in the MathJax issue tracker.)
This was fixed in version 2.7.5, so you should upgrade to that. You are currently using 2.7.1, so changing
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
to
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_SVG';
will do it. Changing it to
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_SVG';
will make sure you have the most current (2.x) version automatically (i.e., even though you are calling from 2.7.5, if there is an update to 2.7.6, you will be switched to that automatically).
I have an Openlayers map with a lot of overlays (Point-coordinates).
These overlays are often very close to each other or overlapping.
When I click on an existing Overlay I want the Overlay to be set on top, so that it is fully seen, not behind any other Overlay.
So far I have only seen that the Layers can be set with an z-index. Is it possible to do that with overlays, too?
I would like to do something like that:
map.setLayerIndex(markers, 99);
but with an overlay
Overlays are controls, which are positioned on an coordinate instead of being in a fixed place. They are basically nothing more but regular html div elements and change position with the map.
This also means, you can apply normal CSS styling and use z-index on them.
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// Vienna marker
var marker1 = new ol.Overlay({
position: ol.proj.fromLonLat([16.3725, 48.208889]),
positioning: 'center-center',
element: document.getElementById('marker1'),
stopEvent: false,
className: 'm1 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker1);
marker2 = new ol.Overlay({
position: ol.proj.fromLonLat([23.3725, 48.208889]),
positioning: 'center-center',
element: document.getElementById('marker2'),
stopEvent: false,
className: 'm2 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker2);
function clicked(selector) {
console.log('clicked overlay', selector);
document.querySelectorAll(".ol").forEach(function(el){
el.classList.remove('active');
});
document.querySelector(selector).classList.add('active');
}
html, body, .map {
min-height: 50px;
min-width: 50px;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.marker {
width: 30px;
height: 30px;
border: 1px solid #088;
border-radius: 15px;
background-color: #0FF;
}
.m1 .marker {
background-color: #FF0;
}
.active {
z-index: 1234782904789;
}
.active .marker {
background-color: red;
}
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.0.0/legacy/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.0.0/legacy/ol.js"></script>
<div id="map" class="map"></div>
<div id="marker1" title="Marker" class="marker" onclick="clicked('.m1')"></div>
<div id="marker2" title="Marker" class="marker" onclick="clicked('.m2')"></div>
The existing answer works, but it doesn't preserve the z-order of the overlays, it only guarantees that the clicked one will be on top. Since it is the only element with a z-index in this stacking context, the z-order of the other elements will be random.
Here is a solution that brings the clicked overlay to the front, while preserving the current z-order of all the other ones:
export function bringToFront (map: PluggableMap, clickedOverlayElement: HTMLElement) {
const overlays = map.getOverlays().sort(zIndexComparator);
overlays.forEach((overlay, i) => {
const element = overlay.get('element');
const container = pointInfo.closest('.ol-overlay-container') as HTMLElement;
container.style.zIndex = element === clickedOverlayElement ? overlays.length.toFixed() : i.toFixed();
});
}
function getOverlayContainer (overlay: Overlay) {
return overlay.get('element').closest('.ol-overlay-container') as HTMLElement;
}
function zIndexComparator (a: Overlay, b: Overlay) {
return (getOverlayContainer(a).style.zIndex > getOverlayContainer(b).style.zIndex)
? 1
: -1;
}
Just call the bringToFront() function when your overlay element is clicked.
Working on a little self project and having some trouble getting text placed on top of my background video.
At present, the code is sitting as follows:
<div class="video_container">
<div class="contentContainer">
<div class="skipButton">
<h1>Skip</h1>
</div>
<video id="tgVideo" autoplay loop>
<source src="videos/bgvidm4v.m4v" preload="none">
</video>
</div>
</div>
I am making the video full screen and keep this way when displaying on different size monitors by using the following JS
$(document).ready(function () {
var vid = $('video');
var vid_w_orig = 1280;
var vid_h_orig = 720;
// re-scale image when window resizes
$(window).resize(function () {
//Get the parent element size
var container_w = vid.parent().width();
var container_h = vid.parent().height();
//Use largest scale factor of horizontal/vertical
var scale_w = container_w / vid_w_orig;
var scale_h = container_h / vid_h_orig;
var scale = scale_w > scale_h ? scale_w : scale_h;
//Scale the video to fit any size screen
vid.width(scale * vid_w_orig);
vid.height(scale * vid_h_orig);
});
//Trigger re-scale of the video on pageload
$(window).trigger('resize');
});
This combination is working flawlessly for me so far. Only issue is getting the video to run on Android/iOS, but I think that's a limitation of the device.
What I am in need of is adding a piece of text for now that a user can click on to bring them away from the video. I am adding the href to the button after I get the text to display on top of the video.
I have found some tutorials online and have tried the below
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
}
This is working for the most part, where I can see the text for a split second before it disappears behind the video.
Anyone have any tips for me?
Cheers!
You are setting the whole container to z-index: 999, this element .contentContainer contains also the video element. So I would put z-index only on the text containers alone with non-static position in order z-index to take effect.
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999; // not needed
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
position: relative;
z-index: 1000;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
position: relative;
z-index: 1000;
}
I am currently in learning CSS and it seems I have a hard time understanding the box model. I have a very simple page layout:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/simpleimagebrowser.css">
</head>
<body>
<menu type="toolbar">
<ul>
<li>prev</li>
<li>next</li>
</ul>
</menu>
<div class="imagecontainer">
<img src="images/awsome.jpg">
</div>
</body>
</html>
and a very simple css:
body
{
margin: 0;
padding: 0;
}
menu
{
padding: 0;
margin: 0;
background: green;
}
ul
{
padding: 0;
margin: 0;
}
li
{
display: inline;
}
img
{
padding: 0;
margin: 0;
}
.imagecontainer
{
background: yellow;
padding: 0;
margin: 0;
}
Why is does my yellow <div> have this little margin or gap at the bottom?
I noticed that when I set the font-size to 0 that margin goes away. Can someone explain conceptually what's going on from a css/boxmodel perspective? It seems as if the browser is adding a blank text line below the image or something ...
Add display: block; to your image
img {
display: block;
}
The white space is due to the image being an inline element. I suppose it's the equivalent of line-heightwhich adds white space around text.
This is because all inline elements are expected to fit the 'contains text' model of a span tag, where space is reserved for the tails on letters like g, q, j, etc.
If non, this extra-space is used for 'link underlining' by default browser settings on inline level elements. Meaning, it reserves space for a link hover underline.
tail (n: tel)
Of a letter, the part that extends below the baseline and to the
right, as gjqy. Of the capital letters, Q and R have tails, though
they need not extend below the baseline.
Indeed, adding "display: block;" to your img rule will make the problem go away. This is most likely due to images being treated as "inline" or "inline-block" by default. Thus the browser is very likely attempting to work your image into the line-height of the parent element.
Goal:
When the width and height of the window are both small, the div should be the same size as the window;
When the width of the window is too big (>max-width), the div should keep its width as max-width, and be horizontally centered.
When the height of the window is too big (>max-height), the div should keep its height as max-height, and be vertically centered.
The example below has achieved everything, except for the last point.
How to center this div vertically in the window? I.e., I want the red areas to behave like the green ones, but just vertically instead of horizontally.
(This design is intended for a responsive design for mobile devices' screens. No JS involvement if possible.)
<!doctype html>
<html>
<head>
<style>
body,html{
height:100%;
margin:0px;
background:green;
}
#t1{
position:relative;
height:100%;
max-width:640px;
margin:0 auto;
background-color:red;
}
#t1-1{
position:absolute;
height:100%;
max-height:640px;
width:100%;
background-color:#dddddd;
overflow:hidden;/*demo purpose*/
}
/*the following stuff are for demo only*/
img{
position:absolute;
opacity:0.5;
}
img.w{
width:100%;
}
img.h{
height:100%;
}
</style>
</head>
<body>
<div id="t1">
<div id="t1-1">
<img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
<img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
</div>
</body>
</html>
P.S. In this example, some desktop browsers internally set a min-width value to the whole thing (e.g. 400px in Chrome), unabling the div to keep shrinking horizontally.
You may need a little javascript to make it work:
First of all, you need an <div> element to layout, so I called it mask:
<div id="mask"></div>
Then, style it to fill the entire document, and give a max-width and max-height:
<style>
#mask {
position: fixed;
height: 100%;
max-height: 400px;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background: red;
}
</style>
This style do not perform the centering work, so you need your javascript to do it, we have a layoutMask function to determine if the div should be centered or not:
var mask = document.getElementById('mask');
function layoutMask() {
// here 400 is the same as the max-width style property
if (window.innerWidth >= 400) {
mask.style.left = '50%';
// to ensure centering, this sould be (max-width / 2)
mask.style.marginLeft = '-200px';
}
else {
mask.style.left = '';
mask.style.marginLeft = '';
}
// the same as width
if (window.innerHeight >= 400) {
mask.style.top = '50%';
mask.style.marginTop = '-200px';
}
else {
mask.style.top = '';
mask.style.marginTop = '';
}
}
At last, assign this function to the resize event, and execute immediately to ensure the <div> got layed correctly on first load:
if (window.addEventListener) {
window.addEventListener('resize', layoutMask);
}
else {
window.attachEvent('onresize', layoutMask);
}
layoutMask();
I tried this on my chrome, but I'm sure it does not work under IE6 since IE6 doesn't support the position: fixed; style, but it should work in most browsers.
I've made a jsfiddle for test.
As per my knowledge, with height:100% it is not possible. You need to use <center> to keep it in center horizontally and vertically. You may need to use margins also. Like:
margin-top:18%;
margin-left:40%;
You can add a #media query to achieve this effect
#media (min-height: 640px) {
#t1-1 {
top: 50%;
margin-top: -320px;
}
}
See JSFiddle for testing.