I'm looking to add a nicer effect to a jQuery Content slider which uses tabs.
At the moment it uses 'opacity' which is really ugly.
Here is my code;
$('#featured').tabs({
fx:{
opacity: "toggle"
}
}).tabs('rotate', 5000, true);
Check out http://www.jsfiddle.net/cxNj8/4/
Is it possible to add a nicer fade like 'fade' in jQuery cycle?
(note: I've added the cycle library to the jsfiddle example)
jQuery UI tabs doesn't seem to support "crossfading", only "fade out" then "fade in" with a blank gap between them.
However, you might try the Flowplayer jQuery plugin which has an example of doing cross-fading tabs in a slideshow that is similar to your example:
http://flowplayer.org/tools/tabs/slideshow.html
$('#featured').tabs({
fx:{
height: "toggle",
opacity: 'toggle',
duration: 600
}
}).tabs('rotate', 5000, true);
Related
I am using the splitview plugin of jQuery.mobile jQuery Mobile - Splitview . I am using jQuery.mobile popups as context menus which are fired on taphold event. Right now I am opening popus by
$("#myPopup").click();
where myPopup is popup defined in HTML.
In this way I can open popup, but I can not position the popup to the position of tap. Does anyone have an idea?
Something like
$( ".selector" ).popup( "open", {x:event.pageX, y: event.pageY} );
does not work because of splitview plugin. Without this plugin it works perfectly.
(and of coarse, I know, that taphold event does not contain information about position, that was just an example. I tried it also with pure numbers and it does not work either)
Well, my solution is not beautiful, but it works. In HTML file I defined new DIV and before opening context menu I position it.
$("#contextDiv").css({
position: "absolute",
top: contextMenuTapY,
left: contextMenuTapX
});
Then I open the context menu relatively to this DIV
HTML:
JS:
$("#aPopupElement").click();
Seems like tooltips that you get from attribute title="test" are not displayed inside the panel.
Tested also with stackoverflow loaded in the panel, no tooltips when you hover mouse over hot, week, month. But the custom tooltips work, e.g. when you hover over tags.
Is there a way to enable tooltips in Add-on SDK panels, or the only way is going custom tooltips?
No, displaying tooltips for HTML elements requires special code in the browser. This code is there for the built-in browser but not for the browser that the SDK embeds in a panel. That's something that might be worth filing as an SDK bug but in the meantime - custom tooltips are the way to go.
Yes, there's a way.
This works since Firefox 31
var panel = require("sdk/panel").Panel({
width: 400,
height: 400,
contentURL: "http://stackoverflow.com/",
});
panel.show();
require('sdk/view/core').getActiveView(panel)
.setAttribute('tooltip', 'aHTMLTooltip');
I am using the Jquery UI,
I am using a modal dialog which is working fine, but give a stripped overlay when it is set.
In the Jquery themeroller, I see options for other textures, but I can't figure out how to use them.
Does anybody know?
$('#send_message_form').dialog({ minWidth: 400,
modal: true,
overlay: { opacity: 0.5, background: 'black'} });
Thank you!
In the themeroller options during theme creation, just choose the texture you want. The selected texture will be the overlay of the modal dialog.
If you want to change it manually, change the url portion of the background attribute of the CSS class .ui-widget-overlay, which should be in the jquery-ui-.custom.css file.
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.
I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.