It looks like you're new here. If you want to get involved, click one of these buttons!
window.myfunction = function(){type thing. When I tried that on the scrollable function, I got an error that "this" is undefined. I also get errors of "scrollv v" being undefined on mouseover.
<div id="scrollable-v" class="scrollable"> <div class="belt"> <!--INSERT CONTENT HERE INSIDE BELT DIV--> <p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave... </p> <p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave... </p> <p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave... </p> <p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave... </p> <!--END INSERTION --> </div> </div> <p style="width:250px; text-align:right"><img src="roundup.png" onMouseover="scrollv.scrollContent('up')" onMouseout="scrollv.stopScroll()" /> <img src="rounddown.png" onMouseover="scrollv.scrollContent('down')" onMouseout="scrollv.stopScroll()" /></p>
<script> var scrollv, scrollh // register two global vars for two scrollable instances jQuery(function(e){ // on DOM load scrollv = new scrollable({ wrapperid: "scrollable-v" }) scrollh = new scrollable({ wrapperid: "scrollable-h", orient: 'horizontal' }) }) </script>
.scrollable{ width: 250px; /* default width of scrollable content in px or percentage */ height: 200px; /* default height of scrollable content */ border: 1px solid black; overflow: hidden; /* keep this */ position: relative; /* keep this */ } .scrollable .belt{ /* default style of inner scrollable DIV */ width: 100%; position:absolute; left: 0; top: 0; padding: 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .scrollable .belt.horizontal{ /* default horizontal specific style of inner scrollable DIV */ width: auto; /* set to auto or an explicit px value large enough to accomodate entire horizontal content */ height: 100%; /* white-space: nowrap; */ /* prevent wrapping inside DIV. Uncomment if embedding images or regular text content inside horizontal belt diV */ } article.columns{ /* demo CSS to create columns of content inside horizontal scrollable */ width: 800px; /* See http://www.javascriptkit.com/dhtmltutors/css3columns.shtml */ -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; } article.columns > p:first-of-type{ margin-top: 0; }
Comments
Then place the following after Impetus:
The errors are gone, now, but I have no clue how to code the "onMouseover" and "onMouseout" in Twine. The html code does not work, as is: and the browser complains about the expected ; after the onMouseover. So, I changed it to which doesn't work, doh. So, I tried a image link with a script tag, like: which doesn't work, either. You must be laughing or shaking your head, but the difference between using JavaScript in html and Twine will eventually dawn on me.
Nothing happens, when I hover on the images.
Are you placing the Impetus and scrollable scripts within the same script-tagged passage or separate ones? As currently written, they need to go into the same script-tagged passage along with the reworked scrollv/scrollh code I gave previously, which should go after both. Basically, the order should be:
I know this is a holiday for many people. I appreciate you taking time to help me sort this out. Still, it's not urgent, but I want to use this so I don't loose the right side of a popup when it needs to scroll, and this looks so smooth, I would love to be able to use it for that (and some other places).
Okay, the scrollv/scrollh code needs to executed each time passage rendering takes place. Replace the original reworked scrollv/scrollh code I gave you with the following:
Thank YOU! I have been looking for a solution for weeks and when I saw the script, even considering the source, I knew this was what would appear best. Thank you, for giving me the help to make it work in Twine! It most definitely works in my test tws. Thank you, so much.
Ok, everything works fine, if I am doing the test from a standard passage. When I put the same code on my inventory passage, which is called by a popup macro, I get the error: when I hover over the image.
I tried placing all of the scroll code below the popup code in my script passage, but that doesn't do it.
This is the popup macro code (I believe it was yours)
And this was the non-Twine/non-SugarCube way I am doing the mouseover
I am sure there is a better/easier way.
The whole point of the scroll script was to remove the scroll bars from the popup, as it is rounded 3d style and the scroll bars just ruin the right side. Thank you, for all the time you have spent helping me with this. I do appreciate it.
If you're only going to use the scrollable within your custom dialogs, then you don't need the scrollv/scrollh code anywhere else and can remove the postdisplay task I gave last time.
Here's an updated version of the <<popi>> macro, both to bring it up to standards and to add a version of the scrollv/scrollh code: (untested, but should work)
I do realize that this would have been helpful, from the start. If only we could all think "what first", before we communicate... I did, not at first, mention it:
I guess, with all the code involved, I just didn't think about the "why", until I got all of the code put down. I do apologize.
I thank you for the updated code. It does not show an error on the popup, but the scroll does not function, either. I am attaching a .tws of my test (which I probably should have done at the beginning, as well). The standard passage(scroll_test) does throw an error that "scrollv is not defined.". When you play it to the "begin" link you want to click on inventory on the footer. There is no error, but the text does not scroll.
Many thanks, for your help and patience. As I said, before, asking for help is relatively new for me.
That's easily fixed by moving the call to Dialog.open() to before the scrollv/scrollh code.
Here's an updated version of the <<popi>> macro: (tested and working)
EDIT: By renaming SugarCube's directory within Twine 1's targets directory you've not only broken the support file, unless you renamed it similarly, but also made the TWS unable to be opened on any system where it hasn't been so renamed. You may not care able the latter, though you should the former.
Sorry, for that and I am glad you brought this up. I had no idea that you would not be able to open the file. I guess I was confusing it with the html file, thinking Twine would import it and you would have to choose which story format to use.
I have about 4-5 versions of SugarCube in my targets folder. I renamed the folders and the .py file inside to version numbers. Somehow, on the latest version, I forgot to rename the .py. Perhaps, this is why my "find" has been acting so strangely...
Again, many thanks, for your help!