I have a html page which is table based. I have a ul as menu few charts and few tables. I am trying to design it such that it just fits in any screen without any scrollbar. My browser doesn't honer the height=100% which i tried for the main table of the page. Any thoughts? Thanks in advance :)
you will not fit height as you want except using javascript, or use frameset
Here is javascript/jquery code that I have used to force the height of certain elements.
function resize(){
winH = 460;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
$('#container').height(winH);
}
$(function(){
resize();
});
//the following code readjusts the element's height every time the browser window is altered.
window.onresize = function() {
resize();
}
Related
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
Looks like facebook has once again changed the code for their comment widget. The old hoops we used to jump through of changing the width no longer work.
Examples that no longer work:
.fb-comments * {
width: 100% !important;
}
.fb-comments, .fb-comments span, .fb-comments iframe {
width: 100% !important;
}
The div which has the width set with inline CSS has an random-generated ID, like feedback_0GsySnrdOA4KOODKY, so you can't override it with CSS. The bastards.
Anyone have a solution which doesn't require javascript?
I don't understand why there isn't an option to create the widget with a percentage rather than a pixel. I mean ... is a responsive widget too much to ask for?
Follow this bug https://developers.facebook.com/x/bugs/256568534516879/
Some solution you can use...I found in the thread.
DEMO : http://jsfiddle.net/PZD54/1/
function fbCommentsWorkaround() {
function resizeFacebookComments(){
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $('.fb-comments').parent().parent().width();
$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
$('.fb-comments iframe').css({width: width});
$('.fb-comments span').css({width: width});
}
FB.Event.subscribe('xfbml.render', resizeFacebookComments);
$(window).on('resize', function(){
resizeFacebookComments();
});
$('.fb-comments iframe').on('load', function() {
resizeFacebookComments();
$('.fb-comments iframe').unbind('load');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : "596895303735715",
status : true,
cookie : true,
oauth : true,
xfbml : true,
logging : false
});
fbCommentsWorkaround();
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
this worked for me:
Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
You can use the "data-mobile" attribute. (https://developers.facebook.com/docs/plugins/comments/)
But this will only work on a mobile device, if you want it to resize when resizing the width of your browser, you will need Javascript, I would use $("#element").attr("data-width","size you want"); and call it on load and on resize.
I have a div with applied property position: fixed;. I need to stop this property on some height of screen scroll. Any ideas?
I just need the css code only.
You can do it with jQuery pretty easily:
$(window).scroll(function(){
if ($(window).scrollTop() >= target) { // change target to number
$("#el").css('position', 'relative');
}
});
or pure JavaScript:
window.onscroll = function(){
if(window.scrollY >= target) { // change target to number
document.getElementById('el').style.position = 'relative';
}
};
I encountered a strange problem, maybe someone can help.
There are multiple img on the page, each one is defined as:
<td><img src="img1" onmouseout="Hide(\'div1\');"></td>
When user clicks on the image, the hidden div should appear in the middle of the page and disappear on the mouseout.
This is hidden div:
<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">
Everything works fine till I start scrolling up and down. At some specific positions and at the end of scroll the hidden div is not appearing. Does anyone understand why?
Here is javascript:
function Show (div)
{
var winW=630,winH=460,t,l;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
t=winH/2-240/2+scrollTop;
l=winW/2-400/2+scrollLeft;
document.getElementById(div).style.top=t+"px";
document.getElementById(div).style.left=l+"px";
document.getElementById(div).style.display="block";
}
function Hide(div)
{
document.getElementById(div).style.display="none";
}
I just realized that it is not scrollTop problem.
Anchor inside div does not occupy whole div, only lower portion. Strange that cursor changes on the whole img, onclick is called on the whole img, but hidden div shows only when clicking on the lower portion.
I tried style="display:block" without any success. Out of desperation, I put style="opacity:0.9" and it does work! The only problem is that hidden div shows behind img (like having z-index lower than img). I am not using z-index since hidden div is position:absolute.
* Still looking for some smart person!!!
Try jQuery solution
$(function() {
$('body').scrollTop(0);
});
Meanwhile if you want a JavaScript solution try
document.body.scrollTop = document.documentElement.scrollTop = 0;
Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don't scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?
Short question: How can I make the scroll "focus" on the contents height in the welcome DIV?
I've made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean :)
Thanks in advance.
You can add overflow: hidden to the body.
http://jsfiddle.net/y3qV5/520/
body.freeze { overflow: hidden; }
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});
Old answer:
http://jsfiddle.net/y3qV5/519/
//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
console.log('scroll');
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
console.log('prevent');
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');