I need to display an image in a resizable dialog (so far all the specific image popup libraries I have tried do not fit my needs).
All I want to do is maintain the aspect ratio during resizing. Sounds easy, but it's not.
I thought something like this might work, but no dice:
var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );
Any pointers greatly appreciated, tks
Due to the way it's hooked in, I find it easiest to just do the resizable portion yourself, like this:
$("div").dialog({
title:"Title",
width:400,
height:400,
resizable: false
}).parent().resizable({
handles: 'n,e,s,w,se,sw,ne,nw',
aspectRatio: true
});
You can view a demo here, you can also destroy and re-create it...but that's a bit wasteful, so just create it above, specify the max/min height/width in the resizable instead of the dialog if needed. This should work: .parent().resizable("option", "aspectRatio", true), but it doesn't due to the way the widgets hooked in, so the eaiest solution is to just create the resizable yourself with the options you want when you create the dialog.
Side note: you're using .parent() here because you wan the dialog container that contains the title bar and your content. It's created/wrapped like this when you create the dialog.
Related
I currently have this code (it's not written by me):
$(window).stellar({
horizontalScrolling: false,
responsive: true
});
Now, I'm curious about what it actually does. I did comment it but I didn't see any changes, but before I ruin something, I'd like to know what it does so I can decide whether to keep it in or not.
It seems to be activating this plugin:
http://markdalgleish.com/projects/stellar.js/
Its documentation says what those options do:
Configuring Offsets
Stellar.js' most powerful feature is the way it aligns elements.
All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset. This allows you to create intricate parallax patterns very easily.
Confused? See how offsets are used on the Stellar.js home page.
To modify the offsets for all elements at once, pass in the options:
$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});
Maybe this helps provide you with the informations you need ^^ http://markdalgleish.com/projects/stellar.js/docs/
Hello It is use for parallax scrolling effect and also you can refereed below link for more information.
http://markdalgleish.com/projects/stellar.js/docs/
OK, so I've built a basic test template with a fluid center content section, and 2 fixed-width sidebars (one on the left, and one the right).
So, my question is :
Is it possible to make this two sidebars resizeable by the user? (e.g. like a split pane)
Any ideas?
Demo: http://83.212.101.132/angjs/ang4.html
Yes you can using jquery UI:
http://api.jqueryui.com/resizable/
The code is pretty simple:
$( ".Class Name" ).resizable({ aspectRatio: true });
I'm trying to create a list which looks and feels like a typical 'Picker', this means it's a normal list which fades out at the top and bottom, and there's a mask overlay in the middle.
Example
The problem with the normal list is it starts with the first <li>-element on top while it should be in the middle, and scrolling down to the the last element it's at the bottom while it should be in the middle.
To fix this, I implemented some padding. However after scrolling down and back up, the padding isn't applied anymore. I think this has something to do with the maxScrollY in the source code.
Has anyone ever tried something like this, or alternatives?
Here's the code:
var myScroll = new iScroll('hour-list-wrapper', {
snap: "li",
momentum: false,
vScrollbar: false
}
);
http://jsfiddle.net/2kBdv/3
Mobiscroll library would make it easier for you, see the demo here http://demo.mobiscroll.com/select/select
If you want to create your custom solution for this anyway you can look for some inspiration in the source code.
According to the documentation, I should be able to configure the size of my OpenLayers popup by declaring an OpenLayers.Size object in the FramedCloud constructor:
this.popup = new OpenLayers.Popup.FramedCloud('featurePopup',
this.options.feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(80, 60),
html,
null, true, this.onPopupClose
);
map.addPopup(this.popup, true);
Currently the popup that is rendered is autosized no matter what dimensions I use in the constructor.
I've tried manually setting the autosizing attribute of the FramedCloud to false as well as manually adjusting the css styling for the popup without achieving the results I need.
I checked and found some similar issues in the OpenLayers 2.11 issues list, but I haven't found a workaround. Any ideas?
this.popup.autoSize = false;
Add this instruction before the addPopup().
Not sure how helpful this will be for others, but for this particular example, scrollbars were being rendered as a result of a floated div at the bottom of the dialog. By updating the css I was able to draw clean autosized popups without having to calculate custom dimensions.
I got the same problem and the only workaround I found is to use for instance AnchoredBubble.
So I have an interesting problem. I currently have a grid of four block elements, and I would like to enable some behavior to cause the div to grow when clicked on. The catch is, I am trying to animate it to the top level of the page, aka, I don't want it to dislocate the position of the other divs on the page.
It's difficult to explain, but I want it to kind of be like a modal window with the open animation originating from the element's location. Like a popup when it's clicked. Right now I am trying to do this in the click function:
$( "#cell" ).animate({
height:600, width:600, position:'fixed'
}, 1000, "linear", function(){ alert("all done"); });
This animates it bigger, but I was hoping to make it like an overlay. Has anyone seen anything like this, or a plugin that accomplishes this before?
Clone the element, absolutely position it over the original and animate the copy.
Press "Add to cart" and see this in action:
http://toys.scholarschoice.ca/products/Active-Play-536/12-Years-Old-Up-563/RipStik-Caster-Board-Silver-p46490/pstart1/
I tried to implement the idea of cloning and animate the clone..
See my DEMO