We Keep Coding

Fullcalendar: shrink/expand calendar height

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;
}

strange CSS / Javascript behavior when hovering over TEXTAREA or A objects

I have a strange problem in my web-app (php) that I noticed recently.
1 month ago it worked just fine.
When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit),
in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.
This DIV is practically a window with 2 inputs and an OK and exit button,
that I hide and show, as a "window" thing would be in Windows.
The moment I hover any other button in the page (so I do a mouseOver), the DIV
shows up again, and it starts working the proper way.
So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.
thanks!
i hope it's not a Chrome bug, in Firefox it seems to work,
but again in Opera it doesn't. So strange.

took at look at your site in Chrome and was able to replicate your problem easily.
by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.
i tested it several times by reloading the page.
on page load, the problem existed, but immediately. after i removed the overflow:hidden, it 100% did not occur again.
on a side note, you have an inline style="display:block" on your .add_link_table, which is not really a table element but a div. that's redundant because a div is a block element by nature -- perhaps it was a table element previously?
i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.

Seems to be a webkit issue.
This may not be a good solution, but give it a try
I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)
function addLink()
{
var addLinkTable = $("#add_link_table");
if(document.getElementById('add_link_table').style.display=='block')
{
document.getElementById('add_link_table').style.display = 'none';
}else{
addLinkTable.css("visibility","hidden");
document.getElementById('add_link_table').style.display ='block';
setTimeout(showTable,10);
function showTable(){
addLinkTable.css("visibility","visible");
}
}
document.getElementById('link_name').focus();
}
Try it out with by switching visibility or opacity or height

jQuery UI menubar, position submenu absolute left

I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns

Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.

Odd "shaking" effect when animating width with jQuery (only in Chrome!)

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).

IE8 Rendering Bug: after javascript visibility-toggle, div content stays white

The page here (http://skergeth.net/slidingfooter/) contains a footer that slides up when you click on contact us. It then shows a contact form.
However in IE8 it slides up and the div containing the form stays white until it is hovered by the mouse.
I also tried the approach that the footer-div has overflow:hidden but since there are other elements inside the footer that should overflow (a menu that extends to the top), this is not an option.
I don't think it is a javascript but because I tried to delay the transition and made sure, the setVisible is called before it but with the same result.
I hope I made myself clear.
Thanks for all your answers!

add height:1% for the div which is after the div having the id="footercontent"
and it should work.(note: test it on all browsers)
this is happened when the IE didn't find a value for the height

Try adding a zoom:1 and/or position:relative to #footercontent or any of the elements inside of it. This forces IE to set a hasLayout and fixes lots of css issues.

I had the same issue. Solved it with:
#div-name * {
visibility: visible;
}

The div containing the form seems to load fine, since the "Contact Us" h1 is visible. It's the form specifically that isn't being displayed in IE8.
Try playing with the display properties of the form element.