I have a simple prob (i guess). Im trying to do a simple menu hover with jquery. On hover, the menu should show a div that contains submenus. If i hover the div, the div should stay visible to select the submenu. Otherwise the div should hide. The code that i have is:
$("#sub_menu_modelismo").hide();
$("#menu_modelismo").hover(
function () {
$("#sub_menu_modelismo").show('fast');
},
function () {
$("#sub_menu_modelismo").hide('fast');
}
);
The div "#sub_menu_modelismo" should stay visible when the mouse is in it.
Tnx for the help.
you haven't described exactly what the behavior is doing right now that's wrong!!
From the code you have displayed the first thing that happens is the 'modelismo' div gets hidden. To me it looks like it will never show!!
Related
I would like to have a customized Dialog styling, having another background color and a rounded border, as it looks nicer than the gray rectangle that comes by default.
This is partially possible, by styling the Contentpane of the Dialog. The problem is, that the underlying Dialog Style is still there, in which the contentpane is shown. And it seems the Dialog UDID itself cannot be changed, nor can the "Dialog" style be overwritten in the designer nor by code.
Form hi = new Form();
hi.getUnselectedStyle().setBgColor(0xffffff);
Button but = new Button("open dialog");
but.addActionListener(e -> {
Dialog d = new Dialog(BoxLayout.y());
d.setUIID("Container"); // this line has no effect, the outside dialog component is still visible
Style s = d.getContentPane().getUnselectedStyle();
s.setBorder(RoundRectBorder.create());
s.setBgColor(0x00ff00);
s.setBgTransparency(255);
s.setMargin(5, 5, 5, 5); // adding some margin between contentpane and Dailog container, to be more obvious
d.setDisposeWhenPointerOutOfBounds(true);
// title
Label title = new Label();
title.setText("Confirmation");
d.add(title);
// body field with spanlabel info text
SpanLabel bodyLabel = new SpanLabel("Body Text");
d.add(bodyLabel);
// delete button
Button okButton = new Button("Ok");
okButton.addActionListener(e2 -> {
d.dispose();
});
// exit button
Button exitButton = new Button("Cancel");
exitButton.addActionListener(e3 -> {
d.dispose();
});
d.add(GridLayout.encloseIn(2, okButton, exitButton));
d.show();
});
hi.add(but);
hi.show();
In above image, the outermost dark gray is the tinted area outside the dialog. The green is the content pane with the intended rounded border. the light grey in between comes from the Dialog style that I would like to get rid off.
Can this be done?
Short answer: setDialogUIID("Container");
However dialogs are a bit problematic to customize via code, I would strongly recommend styling them via the designer/css as we just didn't design them for hand styling and so you're relying on internal implementation details that might break.
When you invoke getContentPane() on the Dialog you're styling the content pane of the Dialog. Not the Dialog itself so the dialog styling still has the non-transparent background. You can use getDialogStyle() to style the Dialog itself. I'm not sure how well that will work.
I have a page where I want to have a header always in view at the top and buttons always in view at the bottom. the content in the middle is scrollable.
I thought that this would be easy by doing the following:
StackLayout outer = new StackLayout();
StackLayout inner = new StackLayout();//with all of the content added
ScrollView scroll = new ScrollView();
outer.Children.Add(headerLabel);//non-scrolling
scroll.Content = inner;
outer.Children.Add(scroll); //scrolling
outer.Children.Add(button); //non-scrolling
The headerLabel and the button stay on the corrrect position but the content scrolls right up to the top of the page, over the top of the headerLabel (but beneath/under the button at the bottom).
I am positive it was working correctly but I can't remember changing anything.
Has anyone got any ideas on why this would be happening?
so this fixed it
outer.VerticalOptions = LayoutOptions.End;
and
scroll.IsClippedToBounds=true;
I'm trying to sync up my image slides with their textblocks. I've found that Cycle 2 is a great jQuery plug-in and a simple code got me quite far. There's one issue, however. Whenever the text slides for the first time the transition is really bad. The letters of the current and next block "morph" into eachother for a second. After the first cycle everything works as it should.
Here's the cycle code:
$("#slideshow").cycle({
timeout:0, // no autoplay
fx: 'scrollHorz',
randomizeEffects: false,
next: '#next',
prev: '#prev',
});
$("#text").cycle({
timeout:0, // no autoplay
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
});
U can see everything in this fiddle: http://jsfiddle.net/lucb792/85TCZ/1/ (just click arrow left or right)
Is this something that can be fixed, or do I need to search for other solutions to make something like this?
It looks like the plugin is changing the width of the text the first time you use the prev/next controls. Instead of setting the width to the #text, set the width to the divs inside #text slideshow. Changing the CSS to this fixed it for me:
#text div{
width:600px;
}
Here is the fiddle: http://jsfiddle.net/bbernar1/85TCZ/3/
I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});
A few small questions on this web page I am putting together.
http://dansiop.com/guyc/our-team/
I am looking to get the content that appears when you click on an image to slide with the mouse as you scroll down. Not sure if this is possible, if so can anyone help.
I have tried looking but as I am such a n00b to jquery I'm not sure what I am looking for. I found some code that used the tag slide and it was not what i wanted at all so not sure what the command would be.
You need to wrap your prof_1, prof_2, etc, in a wrapper I'm going to call this wrapper prof_wrapper
<div id="prof_wrapper"></div>
jQuery(document).ready( function(){
var orig_t = jQuery("#prof_wrapper").offset().top;
var mt = jQuery("#main").offset().top;
var mh = jQuery("#main").outerHeight();
jQuery(document).bind("scroll", function(event){
var ph = jQuery("#prof_wrapper").outerHeight();
var mo = (mt+mh) - jQuery(document).scrollTop();
var t = jQuery(document).scrollTop();
if(mo <= ph){ //Find out if the #main element's offset top plus it's height minus the scroll position is less than the prof_wrapper's height; if it is, leave the prof_wrapper at the bottom of the #main element
jQuery("#prof_wrapper").css({'position':'absolute', 'bottom':'0px', 'top':'auto'});
}else if(t >= orig_t){ //Otherwise, if we have scrolled past the prof_wrapper, make the prof_wrapper follow us down
jQuery("#prof_wrapper").css({'position':'fixed', 'top':'0px', 'bottom':'auto'});
}else{ //We are probably at the top of the page, so reset the original positioning
jQuery("#prof_wrapper").css({'position':'relative', 'top':'0px', 'bottom':'auto'});
}
});
});
You need to add - position:relative to your #main element, then I think this should be pretty close. Take a look at my comment about the padding and margin on the prof_wrapper.
The positioning of absolute, assumes that #main is the first parent element to have a position assigned to it; if so, then it will use this as the positioning for the bottom.
Something like that?