We Keep Coding

How to always show submenu in vertical menu with this js file?

My question is if anybody knows what to change in the following js file to always show submenu on the vertical menu , meaning to show the submenu on page load and stay shown whether i hover on it or not, in clear make it part of the vertical menu and not an hidden sub menu that you have to hover on the parent category to access.
What do i need to change in the following code to acomplish that, :
Thanks in advance guys !
* DC Vertical Mega Menu - jQuery vertical mega menu
* Copyright (c) 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
//define the new for the plugin ans how to call it
$.fn.dcVerticalMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
arrow: true,
classArrow: 'dc-mega-icon',
classContainer: 'sub-container',
classSubMenu: 'sub',
classMega: 'mega',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classRow: 'row',
rowItems: 3,
speed: 'fast',
effect: 'show',
direction: 'right',
menubg: '0',
menufixwidth: '0',
menufixheight: '0'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcVerticalMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcVerticalMegaMenuObj.each(function(options){
$mega = $(this);
if(defaults.direction == 'left'){
$mega.addClass('left');
} else {
$mega.addClass('right');
}
// Get Menu Width
var megaWidth = $mega.width();
// Set up menu
$('> li',$mega).each(function(){
var $parent = $(this);
var $megaSub = $('> ul',$parent);
if($megaSub.length > 0){
$('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
$megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
var $container = $('.'+defaults.classContainer,$parent);
if($('ul',$megaSub).length > 0){
$parent.addClass(defaults.classParent+'-li');
$container.addClass(defaults.classMega);
// Set sub headers
$('> li',$megaSub).each(function(){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(defaults.classSubParent);
$('> a',this).addClass(defaults.classSubParent+'-a');
} else {
$(this).addClass(defaults.classSubLink);
$('> a',this).addClass(defaults.classSubLink+'-a');
}
});
$('> li li',$megaSub).each(function(){
if($('> ul',this).length){
$(this).addClass('mega-sub3'); //rajib
$('.mega-sub3 ul').addClass("show3div");
}
});
} else {
$container.addClass('non-'+defaults.classMega);
if(defaults.menubg==1){
var catimages =$('.non-'+defaults.classMega).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$('.non-'+defaults.classMega).css('background','#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom');
}
}
}
var $container = $('.'+defaults.classContainer,$parent);
var subWidth = $megaSub.outerWidth(true);
var subHeight = $container.height();
if(defaults.menufixwidth>0){
var subWidth = defaults.menufixwidth;
}
if(defaults.menufixheight>0){
var subHeight = defaults.menufixheight;
}
var itemHeight = $parent.outerHeight(true);
// Set position to top of parent
$container.css({
height: subHeight+'px',
width: subWidth+'px',
zIndex: '1000'
}).hide();
});
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 10, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcVerticalMegaMenuObj).hoverIntent(config);
function megaOver(){
$(this).addClass('mega-hover');
var $link = $('> a',this);
var $subNav = $('.sub',this);
var $container = $('.sub-container',this);
var width = defaults.menufixwidth;
var outerHeight = $container.outerHeight();
var height = defaults.menufixheight;
var itemHeight = $(this).outerHeight(true);
var offset = $link.offset();
var scrollTop = $(window).scrollTop();
var offset = offset.top - scrollTop
var bodyHeight = $(window).height();
var maxHeight = bodyHeight - offset;
var xsHeight = maxHeight - outerHeight;
if(defaults.menubg==1){
var catimages =$(this).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$container.css({
background: '#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom'
});
}
if(xsHeight < 0){
var containerMargin = xsHeight - itemHeight;
$container.css({marginTop: containerMargin+'px'});
}
var containerPosition = {right: megaWidth};
if(defaults.direction == 'right'){
containerPosition = {left: megaWidth};
}
if(defaults.effect == 'fade'){
$container.css(containerPosition).fadeIn(defaults.speed);
}
if(defaults.effect == 'show'){
$container.css(containerPosition).show();
}
if(defaults.effect == 'slide'){
$container.css({
width: 0,
height: 0,
opacity: 0});
if(defaults.direction == 'right'){
$container.show().css({
left: megaWidth
});
} else {
$container.show().css({
right: megaWidth
});
}
$container.animate({
width: width,
height: height,
opacity: 1
}, defaults.speed);
}
}
function megaOut(){
$(this).removeClass('mega-hover');
var $container = $('.sub-container',this);
$container.hide();
}
});
};
})(jQuery);
$(document).ready(function($){
// menu slide hoverIntend
$('#rajbrowsecat').hoverIntent({
over: startHover,
out: endHover,
timeout: 1000
});
function startHover(e){
$('#rajdropdownmenu').slideDown(200)
}
function endHover(){
$('#rajdropdownmenu').slideUp(600)
}
// menu slide hoverIntend
$('#rajmegamenu').dcVerticalMegaMenu({
rowItems: '5',
speed: 'fast',
effect: 'slide',
direction: 'right',
menubg: '1',
menufixwidth: '236',
menufixheight: '155'
});
});

UPDATE:
So i managed to do it by diabling all the code (with /*) related to hover effect from the line "// HoverIntent Configuration" to "// menu slide hoverIntend" and by twicking the css a bit for presentation , seemed to do the trick to always showing submenus but for those who are interested i also found a way by adding to the css the line "height:auto", that also seemed to work fairly nicely.
Anyway thanks guys for yor answers anyway , it's always nice to to know that we have a place you can turn to when we are stuck !

Make Javascript event happen only when scrolled to

I currently have a JavaScript creating small pop ups when the page loads. I would like to make them appear only when the user scrolls down to where they appear (over a photo).
Is this possible?
Here is the code:
jQuery(function(){
// initialize of labels
$('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300);
});
});
});
});
});
// dialog close
$('.dialog .close').click(function() {
$(this).parent().fadeOut(500);
return false;
});
// display dialog on click by labels
$('.labels a').click(function() {
$('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
return false;
});
// close dialog on click outside
$('.container').click(function() {
$('.dialog').fadeOut(500);
});
});

Check out this question: How to animate this when scrolled
Here is the basic code you want to use:
<script>
$(window).scroll(function() {
$('.labels').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).fadeIn(100).effect('bounce', { times:3 }, 300);
}
});
});
</script>
You will also want to call the function on page load to initialize any elements that are visible without having to scroll
The OP in the question above links to a page with lots of cool animations you can use as well

height set to "auto" not working with JS animate

I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});

you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')

Jquery dialog sliding

http://jsfiddle.net/G5RP3/
I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.
JS
var speed = 2000;
$(document).ready(function () {
$('#loginmenu').dialog({
show: {
effect: 'slide',
direction: 'left',
speed: speed
},
hide: {
effect: 'slide',
direction: 'left',
speed: speed
},
modal: true
});
});
HTML
<div id="loginmenu"></div>
CSS
#loginmenu {
}

Here's a simple solution:
http://jsfiddle.net/MsS9z/1/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.dialog({
modal: true
});
});
When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.
If you want to slide the dialog to the right on close, things get a bit more complicated:
http://jsfiddle.net/MsS9z/2/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.on("dialogbeforeclose", function() {
var dialog = $(this);
var widget = dialog.dialog("widget");
if (widget.data("dialog-closing") || widget.is(":animated")) {
widget.data("dialog-closing", false);
return true;
}
widget.data("dialog-closing", true);
var origOverflow = $("html").css("overflow-x");
$("html").css("overflow-x", "hidden");
widget.animate({ left: $(window).width() }, {
duration: speed,
complete: function() {
dialog.dialog("close");
$("html").css("overflow-x", origOverflow);
}
})
return false;
})
.dialog({
modal: true
});
});
Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.

Changing the size of a jquery UI dialog dynamically

I have a jquery dialog . I am displaying an asp.net gridview within the dialog.
I want the size of the dialog to change based on the size of the grid view.
There is a button, which shows the dialog when its clicked.
I want to set the size of the dialog such that the gridview fits in it perfectly.
I have my javascript code below :
$("#ViewModalPopup").dialog({
height: 800px,
scrollable: true,
width: 800,
modal: true
});
Here #ViewModalPopup is the div that encloses the modal popup.
I tried implementing the following logic to adjust the height of the dialog based on the size of the div :
var maxHeight = 600;
var currentHeight = $('#ViewModalPopup').height();
if (currentHeight < maxHeight) {
var desiredHeight = currentHeight
}
else
{
var desiredHeight = maxHeight;
}
$("#ViewModalPopup").dialog({
height: desiredheight,
scrollable: true,
width: 800,
modal: true
});
But it is not working as
var currentHeight = $('#ViewModalPopup').height();
is coming out to be null from the second button click onwards.
Is there any way I can change the size of the dialog dynamically ?

Set like
$("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);
API

/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function () {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function () {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});