Develop Reference

Dimming page by hovering over navigation menu

I am trying to dim my page when hovering over the menu. I am using ubermenu (mega menu) for the navigational menu, and also using the X theme on Wordpress.
I have added a CSS class to add a darkened background to the page. In addition, I added a piece of code to dim the page when hovering over one of the tabs for the mega menu(in this example, #menu-item-443 is the ID for one tab).
When I try testing the code out, it doesn't work at all. I tried adding it to the Cornerstone visual editor and it works within the editor, but then won't work on the actual page.
What could be the issue with why the code isn't applying to the pages?
Any help would be appreciated!
CSS code to darken the page:
.dim{
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
display: none;
}
Code to dim the page:
$('#menu-item-443').hover(function(){
$('.dim').fadeTo(200, 1);
}, function(){
$('.dim').fadeTo(200, 0, function(){
$(this).hide();
});
});

The second property of fadeTo is opacity, but you're using display on the element itself. You'll need to use fadeIn/fadeOut instead, as those work with the display property. So it should look something like this...
$('#menu-item-443').hover(function(e){
e.preventDefault();
e.stopPropagation();
$('.dim').fadeIn(200);
}, function(){
$('.dim').fadeOut(200, function(){
$(this).hide();
});
});

carouFredSel slider - prev,next and pagination not working

I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..
You can see the page here: http://goo.gl/pJLNN
The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?

In order to correct the images positions you need to add or change the absolute position of every image container.
Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.
So in the css put this:
#rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}
To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons
prev: {
button : "#msprev"
},
next: {
button : "#msnext"
},
The same happens to pagination, correct it:
pagination: {
container: '#pager'
}

For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had
prev: {
button : "#prev3"
},
next: {
button : "#next3"
},
There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.

Implementing 2 menus with Sidr

I would use two status menu using Sidr (http://www.berriart.com/sidr/).
By default it opens with a class width 260px, but would like to work with another div with a larger opening. How can I use two menus into one file?

i tried sidr-right, and simply i just restyle this 2 elements when I need it 210px wide:
.sidr.right {
right: -210px;
}
.sidr {
width: 210px;
}

use browser default scrollbar on jquery ui modal dialog

Is it possible to use jquery ui's dialog, and span it across the full browser height?
Then, if there is extra page, use the browser default scrollbar to go up and down, freezing the rest of the page behind the overlay?
$(function()
{
$('#category_modal').dialog({
autoOpen: false,
title: 'hello',
modal: true,
height: auto,
width: 500,
resizable: false
});
});

Not using the default dialog. You can make the dialog 100% height/width and "overflow" text scrollable using CSS. Your dialog would look something like this in CSS:
#dialog_box {
width: 100%;
height: 100%;
overflow-y: scroll;
}
You could also put an iFrame within the dialog if you wanted. However, this is no way to completely "Freeze" what is in the background. The user can always select the background and use the mouse-wheel or simply use the browser's scroll bar. Using overflow-y will create a 2nd scroll bar on the edge of the dialog that will scroll the content within (should you need to).

Easyslider 1.7 help - all content displaying on page load

In implementing Easy Slider 1.7 with jQuery on a page of mine, I find that when the page first loads, both images in the ul slider display and then the slider loads properly and only the first slide is displayed.
What is the best way to correct this so that the slider div doesn't display until the script has loaded properly? I'm using this code to run it:
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
pause: 10000
});
});

You can just hide the content via CSS, like this:
#slider { display: none; }
Then show it on page load as well:
$(document).ready(function(){
$("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});
To be safe I'd add a block to the page for non-JS users, could be a style sheet inside if you have a lot of these, otherwise just a style tag:
<noscript><style type="text/css">#slider { display: block; }</style></noscript>

I added the code below to my css to hide the images from being stacked up.
/*Added to hide stacking of images on IE 7/8*/
#slider{
height:227px;
overflow:hidden;
}