search

colelawrence / Touch-Splitter-jQuery

A high performance html splitter compatible with touch events
14 stars 7 forks source link

adding content to divs #2

Open criesner opened 10 years ago

criesner commented 10 years ago

Hi, i'm having trouble adding images/text to the div's in the demo. I would like to get it working so that it works responsively.

Any way you could add a few simple demos for this plugin that illustrate some different use cases?

thanks

colelawrence commented 10 years ago

Do you mean positioning and sizing of child elements? Can you provide a code snippet from your project, then I'll look into a demo page tomorrow. On Feb 23, 2014 12:39 AM, "criesner" notifications@github.com wrote:

Hi, i'm having trouble adding images/text to the div's in the demo. I would like to get it working so that it works responsively.

Any way you could add a few simple demos for this plugin that illustrate some different use cases?

thanks

Reply to this email directly or view it on GitHubhttps://github.com/ZombieHippie/Touch-Splitter-jQuery/issues/2 .

criesner commented 10 years ago

So when I placed an image in say the top left vertical split box, it would break the splitter, or upon adding paragraphs of text the text would go above the splitter opposed to being masked by it.

I'll get a code file up when I'm back to my desktop.

criesner commented 10 years ago

Oh and I was going to ask if you think it would be possible to implement a swipe function. So say you did a pullDown swiping motion and it animated to a certain snap spot defined and stopped (opposed to now when you release your finger it stops).

Thinking it could be a nice option to this plugin

colelawrence commented 10 years ago

Oh, I like this swipe idea! On Feb 23, 2014 12:56 AM, "criesner" notifications@github.com wrote:

Oh and I was going to ask if you think it would be possible to implement a swipe function. So say you did a pullDown swiping motion and it animated to a certain snap spot defined and stopped (opposed to now when you release your finger it stops).

Thinking it could be a nice option to this plugin

Reply to this email directly or view it on GitHubhttps://github.com/ZombieHippie/Touch-Splitter-jQuery/issues/2#issuecomment-35825364 .

criesner commented 10 years ago

yeah I think it could be really cool! As I was using instagram today i noticed a feature that works similar to what I was describing. If you go the upload image dialogue it turns into a split screen of preview image and thumbnails below, scrolling up pushes the splitter up to the top and swiping down on the handle snaps it to a position.

It's a subtle but really nice interaction!

colelawrence commented 10 years ago

Thanks for the example, I'll look around for an iPhone to test that on.

How would you describe the configuration for snapping in an object form?

I have such options as {leftMin: Number, leftMax: Number, topMin: Number} etc. And { docks: "left|right" } On Feb 23, 2014 10:37 PM, "criesner" notifications@github.com wrote:

yeah I think it could be really cool! As I was using instagram today i noticed a feature that works similar to what I was describing. If you go the upload image dialogue it turns into a split screen of preview image and thumbnails below, scrolling up pushes the splitter up to the top and swiping down on the handle snaps it to a position.

It's a subtle but really nice interaction!

Reply to this email directly or view it on GitHubhttps://github.com/ZombieHippie/Touch-Splitter-jQuery/issues/2#issuecomment-35857302 .

criesner commented 10 years ago

What exactly do you mean by configuration?

I think you would still set topMin topMax and you could tap+hold to move but if you added a function "snap: true" that was triggered by the swiping gesture. So on swipe up it would animate itself up to the topMin and swipe down would animate to top:Max.

If you wanted to get more customized you could offer multiple custom snap points like first swipeUp goes half way and second swipeUp from there goes all the way to the top

criesner commented 10 years ago

And to contextualize how i'm thinking about using this framework and these functions is in the form of mobile nav. So like the drawer slide out on swipe, i'm thinking about doing this vertically but allowing the user to use the function you've created to decide how far down it comes

colelawrence commented 10 years ago

Recently I vastly improved the snap docking stuff, I'll have to create a nice looking demo page with code snippets to help everyone out.

meriad231 commented 5 years ago

In the Demo, how do you add text to the bottom left corner, under the horizontal bar?

colelawrence commented 5 years ago

@meriad231 it works the way you'd think, just replace the left side with two divs.

I've updated the demo page with this example. http://colelawrence.github.io/Touch-Splitter-jQuery/ https://github.com/colelawrence/Touch-Splitter-jQuery/commit/c74ee3329ef59c5d5888a22fa6caf8ab192f83b9