This is the calendar I have, however, I'd like for it to be shrunk down a bit. When I do this with the following command I get a truncated schedule instead of a compressed one. Take a look:
$('#calendar').fullCalendar('option', 'height', 200);
---OR WITH---
$('#calendar').fullCalendar('option', 'contentHeight', 200);
Calendar before resizing with the above command:
Calendar after trying to resize:
You can see a scrollbar has appeared and some events are no longer present (until I scroll). I have played around with CSS to try resizing it manually (notably with the .fc-slats > table height and #calendar font-size) but these are very hard to work with and create misplaced events when changed dynamically. I need to be able to vertically shrink/expand the calendar dynamically, preferably using JQuery. How can this be achieved?
Thanks in advance.
Just add this css to the page you have your calender "DIV"
.fc-time-grid .fc-slats td {
height: 1em; /* Edit as required */
}
I found an unperfect way to "shrink" FullCalendar... It seems to be to only way.
Using CSS zoom property, it give a nice result in Chrome 60, Opera 47 and IE 11 (surprisingly! For once.)... But sadly, it just do not respond at all in FireFox 55.
MDN cross-browser compatibility table in the zoom page is quite out of date... That's why I mention the browsers I tested. Maybe some SO users could tell about Safari and other browsers... Mobiles, etc.
So, I think that is your better option... Or live with a scrollbar (which could be improve with CSS).
In this CodePen, you can toggle a class to zoom the calendar between 100% and 75%.
.shrinked{
zoom: 0.75;
}
Related
I'm looking to do a fluid reponsive equal height column, with an 'overlay' on click.
To get the responsive equal height thing working, I've made the 'overlay' the actual base content (so it sizes the columns), and am attempting to then put the initial state in the overlay.
This works fine on FF and Chrome, but not IE10 or 11 (haven't tested earlier).
On IE, doing position: absolute; right: 0; left: 0; top: 0; bottom: 0 inside a TD doesn't seem to make the overlay cover the whole TD, rather just the size of the content inside it.
http://codepen.io/anon/pen/dooJjb
Any ideas?
Bonus Points:
What my designer originally wanted was for the header to slide up, and the paragraphs to slide up from the bottom - don't really think this is possible without a lot of JS?
I've not checked your example in IE but I know there are serveral ways you could get this working on all browsers.
I always avoid before & after with layout as they have some cross browser issues, this may not be your current show stopper but either way before & after are not really for layout IMHO.
I did something similar a few months ago:
[ [box,box,box] [overlay,overlay,overlay] ] : The two holders have position absolute, top & left = 0, the overlay holder z-index:1.
[ [box,overlay] [box,overlay] [box,overlay] ] : The boxes are relative and the overlays are positioned absolute. All overlay dimensions are defined and given a z-index of 1.
The key is to keep it clean you really don't need more than 3 levels deep in this scenario you just need to position, and set the layers right.
Animating paragraphs would be clean, with jQuery but I'd prefer to us another animation lib like GSAP. But if you must natively and if you can afford to skip the animation with IE8 then you will basically set CSS3 transitions and use something like .classList to toggle the class http://jsfiddle.net/davidThomas/Tpz86/
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
I have a dropdown menu made using an HTML select tag. I know that there are 152 options, but this large number forces some of the options off of the webpage view on most reasonable size monitors if I were to make the size 152. I tried setting the max-height of the select to 100% guessing that this would limit the size to the maximum number that can fit in the div. However, for some reason I do not understand, it still displays all 152 options with some below the screen view.
<select name="school" size="152" style="max-height: 100%;">
...
</select>
Is there a way to have a select tag display as many options as it possibly can fit onto the screen ( 100% height ) listed out, but force you to scroll to get to any options that would be displayed below the screen ( past 100% height ) ?
If you can limit the required support to IE9+, you can use viewport units (vh) to force the select to always be exactly the height of the viewport, using this CSS:
select {
display: inline-block;
height: 100vh;
}
You also have to set a size attribute of at least 2 on the select itself. As long as you set a reasonable fallback size option on the select, it will work in a limited fashion on older browsers, which will simply ignore the 100vh value and render the select at it's default height.
That's it! The only real drawback is that the list will always be the height of the screen, it won't automatically shrink if there are fewer items.
Working fiddle showing it in action.
I would say no without some sort of jQuery replacement plugin. I've just checked Firefox and also Safari and FF sets a height on the opened list and safari just goes to the bottom of the browser window, both by default.
Try Chosen.js, it really is good and then you can style it from there: http://harvesthq.github.io/chosen/ It even provides options search and other cool features.
I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.
You can see the issue at: http://verypc.very-dev.co.uk/
You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.
My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.
I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.
Any help would be great!
this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)
line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();
window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)
you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile
I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).
I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.
I'm animating the width of a li element using jQuery in a simple snippet of code. I'm using hover() as the handler and .animate() to animate the width. Here is my code.
$('li').each(function() {
//store the original width of the element in a variable
var oldWidth = $(this).width();
$(this).hover(
function() {
//when the mouse enters the element, animate width to 900px
$(this).animate({width: '900px'}, 600, 'linear')
},
function() {
//when the mouse leaves, animate back to the original width
$(this).animate({width: oldWidth}, 350, 'linear')
}
);
});
The code is really really simple and works but with one very odd quirk in Chrome. When animating the elements in and out, the li elements "shake" as if they're really cold and were shivering. You can see the behavior here in a live example: http://missmd.org/ (edit: bug is now fixed)
I've animated a bunch of stuff before with jQuery and never seen this behavior. Is there any explanation for why it occurs and how I can get around it? I'm wondering if it's because I've floated the elements to the right and am animating to the left. The bug is maddening and detracts from the overall presentation a lot (at least to me). Anyone else seen this before?
Edit to clarify: it's not the actual li element that "shivers" it's the text within it that shakes slightly but noticeably from left to right very quickly as the animation runs. I'm stumped.
Edit two: after fiddling with the CSS a bit now I can only reproduce the effect in Chrome (21.0.1180.60 beta-m for me). In Firefox it works as intended. It also works great in IE. Very ironic that Chrome (usually great with this stuff) is giving me trouble now. Pulls hair out, checks sanity
Here is my HTML to help get to the bottom of this. We have reproduced the problem in ChrisFrancis' jsFiddle.
<nav>
<ul class="nav">
<li class="one">
<a href="homeandnews/">
<span class="title">Home and News</span>
<br/>
<span class="subtitle">Learn more about me and read general updates!</span>
</a>
</li>
</ul>
<nav>
I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it.
I was looking to this issue as well and this: -webkit-backface-visibility: hidden; solve my problem. I add this odd shaking while using CSS3 transform on a SVG.
More info can be found here: CSS3 transform rotate causing 1px shift in Chrome
Hope it helps
I changed your css: ul.nav li a, adding float: right to it and that fix the shake.
Anyway if it helps, I had the same problem when animating height of a div within another div with height:auto. Changing the height to a fix width solved it.
Hope it helps.
This seems to be a bug in Chrome version 21.0.1180.60 and may also be present in other versions. Nothing wrong with the code here and I guess we just leave it up to workarounds or submitting a bug report now.
Sigh.
Had similar issue with shaking SVGs when there's a CSS transition applied to parent tag. I tried to apply everything I could randomly, and this fix finally helped:
svg {
transform: translate3d(0, 0, 0);
}
This problem occurred with some divs when I was trying to animate another div within it. What I noticed is that it happens if the div or element has css property display:inline-block. Making the element float would have solved the problem, but inline-block was required in my case.
I noticed that the element had also vertical-align:middle css property. Changing it to vertical-align:text-bottom solved the problem. No more shaking effect in Chrome v23 (may be the bug is still persisting in newer versions).
I'm sure there's a million questions along this line but I can't find one that relates to my specific issue. After wrestling with IE7 for countless hours I finally have the text showing above the video content (classic IE7 z-index bug - squashed now).
You'll need to have a look at this site in either Firefox / Chrome / Safari first:
http://valeriaentertainment.com.s66112.gridserver.com/
Hovering over "Gallery" or "About" in the navigation will reveal an animated jQuery slideUp() / slideDown() dropdown menu. For some reason, now that the CSS is fixed the background for the dropdowns is not visible in IE7.
Any debug suggestions / IE7 hacks? ;)
EDIT:
I should note that I think this is a javscript issue because the animation does not seem to be happening as expected (view site in a good browser)...
Here is the relevant JS code the js-enabled class is to allow the menus to work via CSS only in case javascript is disabled:
//jQuery slideDown for menu dropdowns
$('.menu').addClass('js-enabled');
$('.js-enabled li').hoverIntent(function () {
$(this).find(".sub-menu").stop(true,true).slideDown(400);
},
function () {
$(this).find(".sub-menu").stop(true,true).slideUp(400);
});
I'm poking around a bit and IE doesn't seem to register the CSS property for the background image.
What happens if you add quotes into your background:url property:
.sub-menu li{
background: url('images/sub-menu_middle.jpg') top left repeat-y;
...
}
Edit
As you said, the older IE is picky about it's spaces. Added a space between ) and top in the CSS