I'm using CodeMirror 2 editor. The trouble is that I can't make it fullsize (100%; 100%). I added to the main style:
.CodeMirror {
height: 100%;
width: 100%;
}
And this doesn't work for me in any browser. Any ways?
I'm using the following code in http://jsbin.com to stretch the CodeMirror frame (note that JS Bin in particular stretches to half screen width, but the example code below does "fullscreen"):
.CodeMirror {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I don't remember whether CodeMirror adds the class by default, but if it doesn't, you'll also want to add it in the JavaScript (assuming you've not solved this already):
CodeMirror.fromTextArea('ID_OF_TEXTAREA', {
// .. some other options...
iframeClass: 'CodeMirror'
});
You can't do that with CSS, instead you can use JavaScript:
window.onload = function() {
var oTextarea = document.getElementById("myText");
var oParent = oTextarea.parentNode;
oTextarea.style.width = (oParent.scrollWidth - 30) + "px";
oTextarea.style.height = (oParent.scrollHeight - 30) + "px";
};
This will set the size of the textarea based on its parent size.
Added some "padding" but you can remove or reduce it.
html, body, .container, .subContainer, .CodeMirror {
height: 100%;
width: 100%;
}
Should work as well.
Related
Say my image (panoramic) is 10,000 pixels long, but I want to be able to view only 1000 pixels wide at a time, and in order to view more of it, I can just hover my mouse either left or right, and then the image will move accordingly please? If possible, a simple script on HTML? (I'm not sure how to use Javascript or CSS, but if it needs to come down to that, do guide me step by step?
Thank you.
Here is a simple JQuery which you can use to scroll the whole page when hovering over either the left or right;
Example - https://jsfiddle.net/38da9pca/
Need any help implementing it just leave a comment and I will try and help you.
$(function() {
$('#right').on('mouseenter', rscroll);
$('#left').on('mouseenter', lscroll);
$('#right, #left').on('mouseleave', function() {
$('body').stop();
});
function rscroll() {
$('body').animate({
scrollLeft: '+=25'
}, 10, rscroll);
}
function lscroll() {
$('body').animate({
scrollLeft: '-=25'
}, 10, lscroll);
}
});
Edit (Scroll Image Only)
Example - https://jsfiddle.net/38da9pca/1/
I have change it so the lscroll and the rscroll will effect the id of image instead of the body and change it from scrollLeft to left, and that way it will move the images scroll. Dont forgot to change the $('body').stop(); to $('#bg').stop(); or it will never stop scrolling
$(function() {
$('#right').on('mouseenter', rscroll);
$('#left').on('mouseenter', lscroll);
$('#right, #left').on('mouseleave', function() {
$('#bg').stop();
});
function rscroll() {
$('#bg').animate({
left: '-=25'
}, 10, rscroll);
}
function lscroll() {
$('#bg').animate({
left: '+=25'
}, 10, lscroll);
}
});
Here's one. It's using jquery (javascript library). You would have to add it in order to make it work.
Example:
http://www.gayadesign.com/scripts/jqueryphotonav/
Tutorial:
https://blog.gaya.ninja/articles/jquery-convertion-panoramic-photoviewer-in-javascript/
Something like this?
var imgView = document.querySelectorAll('.img-view')[0];
var img = imgView.querySelectorAll('img')[0];
imgView.onmousemove = function(e) {
var x = e.clientX;
var px = ((x / this.offsetWidth) * 100);
var ix = ((px / 100) * img.offsetWidth);
img.style.left = '-' + (ix - this.offsetWidth) + 'px';
}
.img-view {
width: 256px;
height: 160px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
}
.img-view img {
height: 100%;
position: relative;
top: 0;
left: 0;
}
<div class="img-view">
<img src="http://panoramalove.com/wp-content/uploads/2013/01/nighttime-panoramic-view-of-hong-kong-island-from-the-avenue-of-stars-in-tsim-sha-tsui.jpg">
</div>
http://www.bestcastleintown.co.uk/
On the following website I am using the Bootstrap affix component applied to a div with the class of .bcit-sidebar however I have encountered an issue.
I am trying to dynamically position .bcit-sidebar with the classes inside of a media query. When the user scrolls the top: 80px; property ensures the sidebar follows the user.
#media (min-width: 992px) {
.bcit-sidebar.affix {
position: fixed;
top: 80px;
}
.bcit-sidebar.affix-bottom {
position: absolute;
}
}
I have applied the following script to ensure .bcit-sidebar is positioned correctly:
setTimeout(function () {
var $sideBar = $('.bcit-sidebar')
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bcit-nav').height()
return (this.top = offsetTop - navOuterHeight - sideBarMargin)
}
, bottom: function () {
return (this.bottom = $('.bcit-footer').outerHeight(true))
}
}
})
}, 100)
However the sidebar is overlapping the orange page header called .bcit-heading if the user begins to scroll - which I do not want to occur. I have tried increasing the value of top: 80px; set on .bcit-sidebar.affix to top: 180px;, and this eliminates the issue shown here:
But this in turn introduces a new issue - the sidebar no longer aligns with the corresponding height of the .page-headers. These elements should horizontally align but maybe it isn't possible to achieve the sidebar not overlapping the orange header while still horizontally aligning with the page headers . Any ideas on how to resolve this issue by amending the CSS/JavaScript?
I want to match the behavior of affix on the Bootstrap docs (They seem to have achieved it somehow) - http://getbootstrap.com/javascript/#affix
One option is to override the bootstrap behaviour like this...
.bcit-sidebar {
position: absolute !important;
top: 0 !important;
}
Not very nice, but it seems to work. I recommend adding an additional class to make sure you don't get unexpected behaviour somewhere else. For example add a class disable-scrolling...
.bcit-sidebar.disable-scrolling {
position: absolute !important;
top: 0 !important;
}
The solution was to amend my JavaScript running when the DOM loads to a fixed value of 399. This was the estimate height of all the elements above.
setTimeout(function () {
var $sideBar = $('.bcit-sidebar')
$sideBar.affix({
offset: {
top: 399
, bottom: function () {
return (this.bottom = $('.bcit-footer').outerHeight(true))
}
}
})
}, 100)
This code works perfectly as I expected but the problem is when I refresh the page the t_con stays in absolute which should be fixed and when I resize the window less than 980px it is in absolute like what I need and if I resize again more than 980px it goes fixed.
I need it to stay fixed from start. I don't know why it is in absolute at first.
HTML CODE
<div id="t_con">
<div id="t">
</div>
</div>
CSS CODE
#t_con {
width: 100%;
position: absolute;
top: 0;
}
#t {
margin: 0px auto 0 auto;
background-color: #976398;
width: 980px;
height: 30px;
}
Javascript CODE
window.onresize = function(){
var header = document.getElementById('t');
var window_width = document.body.offsetWidth;
if(window_width < 980) {
header.style.position = "absolute";
} else {
header.style.position = "fixed";
}
}
Can anyone tell what am I doing wrong in here? And I don't want to use jQuery for this. So please do not suggest it. The reason I don't like jQuery is it already takes 90kb plus the code we are trying to execute.
You're setting window.onresize twice so your first function will never be called.
Try:
window.onresize = function(){
document.getElementById('t_con').style.position = window.outerWidth < 980 ? 'absolute' : 'fixed';
document.getElementById('t').style.position = document.body.offsetWidth < 980 ? 'absolute' : 'fixed';
}
Hi I have been trying for the last hour to change the way the default scrollbar looks on browser.I am talking about the main scrollbar on the right not ading a new one and styiling it.I am using the jScrollPane plugin but it does not seem to work or I am not doing something right.Here is my code:
$("window").jScrollPane();
window
{
width: 100%;
overflow: auto;
}
window
{
height: auto;
}
If you go to the website that A.K. has linked, you will see the necessary Jquery and CSS for this to work. I have made them easier to understand for you.
$(function()
{
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container'); //this should be the most parent
// div, right beneath the <body> and covering the entire page. Change the ID HERE.
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane( //this is where outer scroll changes
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});
Now CSS:
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
/*** Optional INNER scrolls.
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
***/
Don't forget to include Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js
I need to resize an iframe to match its content, but the height properties I have tried don't account for elements with position: fixed.
Assume a document with only two elements with the absolute and fixed classes.
body { padding: 0; margin: 0; }
.absolute {
position: absolute;
height: 100px;
}
.fixed {
position: fixed;
height: 200px;
}
html.scrollHeight 0 (viewport height in Opera/Firefox)
html.offsetHeight 0
body.scrollHeight 0 (viewport height in Chrome)
body.offsetHeight 0
body.outerHeight 0
If I add html { position: relative; }, html.scrollHeight will be 100px in Chrome, but no value will be 200px. At first I also had an issue with floats, but I solved that by adding a clearfix to body.
I made a jsbin here: http://jsbin.com/ehixiq
If it's not possible to get the real height, what would be my best workaround? I only need to support the latest versions of Opera, Chrome and Firefox.
I've found the best way is to use javascript as it can get the height reliably after rendering. In a recent project I did this with jQuery to get full height of the window:
$(document).height()
You could do something like this for element heights:
$('.element2').height($('.element1').height())
Update:
$('iframe').height($('iframe').parent().height())
The only way I could figure out was to get the actual bottom position of all elements:
var els = Array.prototype.slice.call(document.body.getElementsByTagName('*'));
var elHeights = [];
for (var i = 0, l = els.length; i < l; i++) {
elHeights.push(els[i].scrollTop + els[i].offsetHeight);
}
var docHeight = Math.max.apply(Math, elHeights);
Browsers managed between 5-100k operations per second on a DOM with 100 elements, and in my case that's about the size most documents will have.