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/
Related
I've 3 (loader, locker and debug view) hidden views (touchEnabled and visible set to false, and zIndex to 1) above the main view (zIndex = 2).
Each 'over' view has this method:
$.debugView.show = function() {
$.debugView.touchEnabled = $.debugView.visible = true;
$.debugView.zIndex = 3;
};
$.debugView.hide = function() {
$.debugView.touchEnabled = $.debugView.visible = false;
$.debugView.zIndex = 1;
};
This screen has the 3 'over' views hidden:
Now, I'm opening the 'debug view', but, SOMETIMES it seems like it changes the positions (as if the center it's on the top left corner instead of the center of the device).
Instead of the required result:
If I use the opacity instead of the visible property, it works properly.
This might be an SDK bug right?
<Alloy>
<Window>
<View id="content"/>
<View id="locker"/>
<View id="loader"/>
<View id="debugView"/>
</Window>
</Alloy>
All of these 4 views don't have width or height (so it uses the Ti.UI.FILL as default)
I have noticed this too with a completely different implementation. I had just one view that I included in a window.
Apparently the left and top calculations were not done properly if the elements is hidden.
What I did to solve the issue is to hardcode the left/top position by calculating the left position using this:
$.content.left = (Ti.Platform.displayCaps.platformWidth - 75) / 2;
Where in my case 75 is the width the element has, so that'll be bigger in your case. You can do the same for height.
Now, this is an iOS only solution. On Android you will need to take DPI into consideration calculating it.
I do think it is a bug, though this solution works perfectly for me. I recommend looking at JIRA and see if it is a known issue, and if not, raise it with a very specific explanation of the problem, preferably with a reproducible case delivered as an app. Classic would help most. And if it is not reproducible in classic it might be an alloy issue.
In my situation, I have 10 images loaded in a viewer with the same bounds. each image is arranged one behind other.
// source is an array of url images.
for(i=0;i < source.length-1;i++){
this.viewer.addTiledImage({
tileSource: source[i],
index: i,
opacity:0
});
}
My intention is to control opacity of each image using a slider (range input), the slider set the correspondent image opacity to 1, and let the others with no opacity. This works well.
The idea is preload images and change images smoothly.
The problem
All images are loaded at same time when zooming or panning, so I want to control the load order and give priority to the visible image then load the next image, and so on.
How can I do that? I can't find any method to pause the loading of tiles.
Thanks for your help.
You can try using the 'open' event and adding the next image once the previous one has loaded. Something like:
var i =0, viewer = this.viewer;
viewer.addTiledImage({
tileSource: source[i],
index: i,
opacity:0
});
viewer.addHandler('open', function() {
i++;
if (source[i]) {
viewer.addTiledImage({
tileSource: source[i],
index: i,
opacity:0
});
} else {
viewer.removeAllHandlers('open');
}
});
Note that this is untested sample code but you should get the idea. And you should actually use removeHandler() instead of removeAllHandlers(), but this is just an example.
I can fix my issue by controlling opacity instead of control network download, openseadragon has no method to control the download order at dzi image level, so the way is control the opacity because 0 opacity don't do any download. Thanks to the openseadragon contributors for help me to solve this issue.
https://github.com/openseadragon/openseadragon/issues/971
I am trying to make a screenshot at the bottom of the long page (e.g. http://www.taoism.net/ttc/complete.htm) like so:
Nightmare({ show: false })
.viewport(1024, 30000)
.goto('http://www.taoism.net/ttc/complete.htm')
.wait()
.screenshot(sImagePath, {
x : 0,
y : 27711,
width : 1024,
height : 133
});
Screenshot file size is 0 bytes.
Tested with different y values, it works until ~8000px.
Tried using .scrollTo, it did not help.
Does anybody know a workaround?
P.S. Nightmarejs wraps around electron browser.
This might be what you've looking for https://github.com/segmentio/nightmare/issues/328#issuecomment-159311982
Basically you dynamically adjust the viewport dimensions based on the content to grab size.
If the paper is too big for the div it's shown in, I'd like to make the paper draggable.
I tried the papers blank:pointerdown and pointerup events but was not able to just follow the mousemovement. I also tried to make the element of the paper draggable via jquery, but nothing seems to do the trick...
Is there any way to do this?
This can be achieved with a combination of JointJS events and document events. The graph display is encapsulated in a div:
<div id='diagram'></div>
Then add the event handlers for JointJS, first the pointerdown event where we store the start position of the drag:
paper.on('blank:pointerdown',
function(event, x, y) {
dragStartPosition = { x: x, y: y};
}
);
Then the end of the drag (pointerup) when we delete the variable we store the position in (it also acts as a flag whether there is an active drag in progress):
paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
delete dragStartPosition;
});
As JointJS does not expose a "paper pointer move" event, we need to use the mousemove document event. For example, with JQuery:
$("#diagram")
.mousemove(function(event) {
if (dragStartPosition)
paper.translate(
event.offsetX - dragStartPosition.x,
event.offsetY - dragStartPosition.y);
});
We get the drag start coordinates and the current pointer position and update the paper position using the paper.translate() call.
WARNING: if you scale the paper (using paper.scale()), you have to also scale the starting position of the drag:
var scale = V(paper.viewport).scale();
dragStartPosition = { x: x * scale.sx, y: y * scale.sy};
The calls to paper.translate() will then update to the proper position.
I know this is a slightly old thread, but I was stuck with this for a while and came across a neat solution using the SVG Pan and Zoom library. Git hub link here
EDIT - I created a plunker of the steps below (plus some extras) here:
SVG panning with Jointjs
First step after creating the paper is to initialise SVG Pan and Zoom:
panAndZoom = svgPanZoom(targetElement.childNodes[0],
{
viewportSelector: targetElement.childNodes[0].childNodes[0],
fit: false,
zoomScaleSensitivity: 0.4,
panEnabled: false
});
Where targetElement is the div that the jointjs paper has gone into. Jointjs will create a SVG element within that (hence the childNodes[0]) and within that element the first element is the viewport tag (hence childNodes[0].childNodes[0] in the viewportselector). At this stage pan is disabled, because in my use case it would intefer with drag and drop elements on the paper. Instead what I do is keep a reference to the panAndZoom object and then switch pan on and off on the blank:pointerdown and blank:pointerup events:
paper.on('blank:pointerdown', function (evt, x, y) {
panAndZoom.enablePan();
});
paper.on('cell:pointerup blank:pointerup', function(cellView, event) {
panAndZoom.disablePan();
});
Just another way of tackling the issue I guess, but I found it a bit easier, plus it gives you zoom too and you can adjust the sensitivity etc.
I suggest the following:
register a handler for the paper blank:pointerdown event that will initiate the paper dragging (store a flag which you'll use in your mousemove handler to recognize the paper is in the "panning" state).
Put the big paper in a <div> container with CSS overflow: auto. This <div> will be your little window to the large paper.
register a handler for document body mousemove event (because you most likely want the paper to be dragged even if the mouse cursor leaves the paper area?). In this handler, you'll be setting the scrollLeft and scrollTop properties of your <div> container making the paper "panning". For adjusting the scrollLeft and scrollTop properties, you'll use the clientX and clientY properties of the event object together with the same properties that you stored previously in your blank:pointerdown handler. (in other words, you need those to find the offset of the panning from the last mousemove/blank:pointerdown).
register a handler for document body mouseup and in this handler, clear your paper dragging flag that you set in step 1.
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");
});
});
});