[Pro] Two Protacolous scroll

Hello.
I need to insert two protacolus scrolls at the same page, for two different texts, and I cant manage. Can you please have a look at the code, please?

In the actions palete, protacolus action, scriptacolous-packed option, Function body I write:

FOR THE FIRST SCROLL


var s = new Control.Slider('thumb','track', {axis:'vertical'});
var f = function(value){
    var inner = $('innerDiv'); //change innerDiv to whatever your inner box is called
    var h = (inner.getHeight() - inner.up('div').getHeight());
    inner.style.top = (Math.round(value * h) * -1) + 'px';
}
s.options.onChange = function(value){
    f(value);
};
s.options.onSlide = function(value){
    f(value);
};

FOR THE SECOND SCROLL (I have set item names to thumb2, innerDiv2 and track2)


var s2 = new Control.Slider('thumb2,'track2', {axis:'vertical'});
var f2 = function(value){
    var inner2 = $('innerDiv2'); //change innerDiv to whatever your inner box is called
    var h2 = (inner2.getHeight() - inner2.up('div2').getHeight());
    inner2.style.top = (Math.round(value * h2) * -1) + 'px';
}
s2.options.onChange = function(value){
    f2(value);
};
s2.options.onSlide = function(value){
    f2(value);
};

The first code by itself works properly with the first text, but when I add the second one, nothing works. As you can see I have changed aswell the variable names adding a number 2.

By the way… is there any other way to make a scroll (that allow to insert two scrolls in the page) and that works in tablets and mobiles? Because this one doesnt work in these devices.

Thanks a lot.

Rakel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

why cant I have the green background for the code… I wrote the tags I saw in other posts…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

To mark an area as code, you can either indent each line of the code block by four spaces, or you can “fence” it off by four tildes in a row. Type four tildes (~) one after the other, press return, type your code block, then press return and type four more tildes followed by a final return.

Walter

On Apr 4, 2014, at 2:48 PM, rakeljuice wrote:

why cant I have the green background for the code… I wrote the tags I saw in other posts…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s what I would do instead of making two separate blocks: make one function that can apply to any number of blocks.

$$('.slider').each(function(elm){
  var thumb = elm.down('.thumb');
  var track = elm.down('.track');
  var inner = elm.down('.window');
  var s = new Control.Slider(thumb, track, {axis:'vertical'});
  var f = function(value){
    var h = (inner.getHeight() - inner.up('div').getHeight());
    inner.style.top = (Math.round(value * h) * -1) + 'px';
  }
  s.options.onChange = function(value){
    f(value);
  };
  s.options.onSlide = function(value){
    f(value);
  };
});

If I recall correctly, the directions for this have you make a nested element, with the outer element set to overflow:hidden, and the inner element pasted inside that outer element being the “slider” element, and a similar construction technique for the track and the thumb. You will need one more layer of construction, then, to apply this new function to multiple elements on the page. Construct your first set of elements, then select both the box and slider and the track and thumb at once, and group them together. While that group is selected, use the Item / Extended menu item to apply a class of ‘slider’ to the group DIV, you will also add a class of ‘window’ to the inner slider, and a class of track and thumb to those elements. You should end up with something like this:

<div id="item5" class="slider">
  <div id="item1">
    <div id="slider" class="window">
      sliding content here
    </div>
  </div>
  <div class="track" id="track">
    <div class="thumb" id="thumb"></div>
  </div>
</div>

Now this should just work without adjustment. So to apply it to a second element on the same page, you just duplicate that grouped element, and add your new content into the “sliding content here” area. The script relies on the classnames rather than IDs, so it doesn’t matter that there are multiple instances of an element on the page. Freeway will take care of the IDs for you – you won’t have to worry that they might be duplicated on the same page.

<div id="item5a" class="slider">
  <div id="item1a">
    <div id="slidera" class="window">
      different sliding content here
    </div>
  </div>
  <div class="track" id="tracka">
    <div class="thumb" id="thumba"></div>
  </div>
</div>

Hope this helps,

Walter

On Apr 4, 2014, at 2:47 PM, rakeljuice wrote:

Hello.
I need to insert two protacolus scrolls at the same page, for two different texts, and I cant manage. Can you please have a look at the code, please?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello Walter. Thanks for your help.

I think the elements I have are ok, because the slider is created that way. And I have grouped the two groups as you say, in another html item with overflow hidden.

But in my version, when I go to item/extended, I just can add name and value, in div or in div-style. I dont know where to add the whole code you said, because the only place is related to the page, at page / html markup.

Anyway, this scroll doesnt work in some devices. You explained to me the reason a year ago more or less. Is there any other kind of scroll that work in all devices? (and being possible to have 2 at the same page)

Thanks a lot

Rakel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

well, a thing I didnt say is that the content of the scroll is a web yep text. I tryed the scrolling layer action, and with this, you can have two scrolls at the same page, but when replace the text with a web yep text item, it stops working…

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re going to have to ask Max about this. There’s too many variables in the WebYep world for me to diagnose.

Walter

On Apr 5, 2014, at 4:09 PM, rakeljuice wrote:

well, a thing I didnt say is that the content of the scroll is a web yep text. I tryed the scrolling layer action, and with this, you can have two scrolls at the same page, but when replace the text with a web yep text item, it stops working…

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t have any scripts lying around that work in all browsers, only desktop browsers. Slider elements don’t tend to work on iOS, because there’s no mouse pointer to work with. There are some scripts I have encountered while browsing on my phone that seem to work there – using a touch swipe on the pane itself rather than a click and drag on another element. I don’t have any of them at hand to share with you, though. That’s a problem with MobileSafari – there’s no View Source to show you how something is done.

Walter

On Apr 5, 2014, at 3:41 PM, rakeljuice wrote:

Hello Walter. Thanks for your help.

I think the elements I have are ok, because the slider is created that way. And I have grouped the two groups as you say, in another html item with overflow hidden.

But in my version, when I go to item/extended, I just can add name and value, in div or in div-style. I dont know where to add the whole code you said, because the only place is related to the page, at page / html markup.

Anyway, this scroll doesnt work in some devices. You explained to me the reason a year ago more or less. Is there any other kind of scroll that work in all devices? (and being possible to have 2 at the same page)

Thanks a lot

Rakel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My brain doesnt work fine when its out of sugar…

Well. When I was on the point of giving up, I started again, and got it. Finally I have used the Scroll Layer action, with two buttons, and applying the web yep items in other way, it worked properly. Now I have two working editable content scrolls at the same page.

Anyway, I am lack of wisdom about styling… and learning a bit averyday, step by step, so If you can tell me where is the place in freeway you said “While that group is selected, use the Item / Extended menu item to apply a class of ‘slider’ to the group DIV, you will also add a class of ‘window’ to the inner slider, and a class of track and thumb to those elements” it would be great for me. And if there is any learning about styling and properly uses os css in freeway, please, tell me where to go… I feel that I could do the same in the half of time if I could learn faster.

Thanks a lot, Waltd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you have an element selected on the page – any element – and you choose Item / Extended from the main menu, you will see a window open up that contains (at minimum) two tabs: and style (where is the HTML name for whatever element you have selected). To add a classname to an element, you simply ensure that the tab is highlighted, press New, then in the Name value enter the word

class

and in the Value field, enter the word

whateverClassNameYouWantToAdd

(Well, not that word exactly, but you see what I mean here.)

Walter

On Apr 5, 2014, at 4:58 PM, rakeljuice wrote:

My brain doesnt work fine when its out of sugar…

Well. When I was on the point of giving up, I started again, and got it. Finally I have used the Scroll Layer action, with two buttons, and applying the web yep items in other way, it worked properly. Now I have two working editable content scrolls at the same page.

Anyway, I am lack of wisdom about styling… and learning a bit averyday, step by step, so If you can tell me where is the place in freeway you said “While that group is selected, use the Item / Extended menu item to apply a class of ‘slider’ to the group DIV, you will also add a class of ‘window’ to the inner slider, and a class of track and thumb to those elements” it would be great for me. And if there is any learning about styling and properly uses os css in freeway, please, tell me where to go… I feel that I could do the same in the half of time if I could learn faster.

Thanks a lot, Waltd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ok, thanks. This is the only place i was thinking you said, but didnt know you can use it for classes. Anyway, I dont properly manage classes and styles, so this is a little bit for me to get it on. Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options