Verb Links

Are verblinks only used in a command pane?

Please show example of a div(Not a pre-made pane) that contains images that are clickable links to verbs or commands.
In JS and the JS.eval code.

Everything in the forum I could find uses pre-made panes and I can't figure out how to add the links to the div.
So:
A div with image based buttons leading to a command.

If a command is used, which works great, where show it be .inserted before .
I did this and inserted before the game panes but it is fighting me on the position on the page. I want to move it outside the #gamePanel in the right side of the 'body'.


K.V.

Like this?


In the pane:

<span id="help_command_button" class="accordion-header-text" style="padding:5px;"><a id="verblinkhelp" class="cmdlink commandlink" style="text-decoration:none;color:NavajoWhite;font-size:12pt;" data-elementid="" data-command="help"><img src="https://textadventures.blob.core.windows.net/gameresources/73ae1f35-2c11-41ce-8cb5-97bfb1392ce1/Question Mark edited (free).jpg" style="width:51px;height:51px;margin:0px 0px -8px" title="Get HELP"></a></span>

Not in the pane:

<a id="verblinkhelp" class="cmdlink commandlink" style="text-decoration:none;color:NavajoWhite;font-size:12pt;" data-elementid="" data-command="help"><img src="https://textadventures.blob.core.windows.net/gameresources/73ae1f35-2c11-41ce-8cb5-97bfb1392ce1/Question Mark edited (free).jpg" style="width:51px;height:51px;margin:0px 0px -8px" title="Get HELP"></a>

image


PS

I stole that code from Dcoder's game:
https://textadventures.co.uk/forum/quest/topic/kk4_i5ys-02jqmukcgcddq/new-era-in-map-making


I have yet to learn how to add JS code into a JS.eval.... I can do a lot but...
this is what I have by piecing, but it don't work. Nothing shows up.

JS.eval ("$('<a>', {id: 'verblinkhelp'}).css({'background-image':\"url('https://i.imgur.com/p7UK3Lp.png')\",'width':'246px','height':'50px','margin':'0px 0px -8px'});")

On the positive side...No errors!


Something like…

JS.eval ("$('<img>', {id: 'verblinkhelp', src: 'https://i.imgur.com/p7UK3Lp.png', title: 'help'}).css({width: 246, height: 50, margin: '0px 0px -8px', cursor: 'pointer'}).addClass('cmdlink commandlink').data('command', 'help').prependTo('#gamePanesRunning');")
?

I want to move it outside the #gamePanel in the right side of the 'body'.

Not sure where you mean.


On the right side of the screen where it is empty.
I change the interface again. I have the the verblinks on the right side but can't get them to move up. They are still attached to the gamePane.

JS.eval ("$('#placesObjectsLabel .accordion-header-text').text('In View');") if (not HasAttribute(game,"pane_commands")) { game.pane_commands = "travel;heal;help;save" } JS.setCommands (game.pane_commands) JS.eval ("$('#commandPane').css({'width': '246px', 'padding-left': '1050px', 'padding-top': '150px', 'position': 'fixed', 'margin-top': '200px'}).insertBefore('#gamePanes');") JS.eval ("$('#verblinktravel').html(\"\")") JS.eval ("$('#verblinkhelp').html(\"\")") JS.eval ("$('#verblinksave').html(\"\")") JS.eval ("$('#verblinkheal').html(\"\")") JS.eval ("$('li.ui-selected').css({ 'background':'transparent', 'font-weight': 'bold', 'font-size': '120%'})") JS.eval ("$('.ui-accordion-header').css({'border': 'none', 'text-align': 'center','background-color': 'transparent','background-repeat': 'no-repeat'})") JS.eval ("$('.ui-icon').css({'opacity': '0'})") JS.eval ("$('.ui-accordion-content').css({'border': 'none', 'background': 'transparent', 'font-weight': 'bold', 'padding-bottom': '10px', 'margin-bottom': '25px', 'overflow': 'hidden','background-repeat': 'no-repeat'})") JS.eval ("$('.accordion-header-text').css({'color':'saddlebrown','background': 'transparent', 'font-size': '14px', 'padding-right': '10%'})") // JS.eval ("$('
', {id: 'backgroundUpperLayer'}).css({border: 'transparent'}).insertBefore('#gamePanes');") // JS.eval ("$('#backgroundUpperLayer').css({'background-image':\"url('https://i.imgur.com/WBQJl3u.png')\", 'position': 'fixed'}).width(640).height(170)") JS.eval ("$('#statusVarsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\",'background-repeat': 'no-repeat', 'background-color': 'transparent', 'background-position': 'bottom', 'padding-bottom': '35px', 'text-align': 'center', 'margin-top': '-2px', 'font-size': '13px', 'padding-top': '10px'});") JS.eval ("$('#statusVarsLabel').css({'background-image':\"url('https://i.imgur.com/h8gDXQo.png')\", 'background-color': 'transparent', 'padding-top': '-2px','height': '16px'})") JS.eval ("$('#gamePanesRunning').css({'width': '246px', 'margin-right': '25px', margin-top': '10px'}).insertBefore('#gamePanes');") JS.eval ("$('#gamePanes').css({'margin-top': '30px', 'margin-left': '200px', 'width': '246','background-repeat': 'no-repeat'})") JS.eval ("$('#placesObjectsWrapper').css({'font-weight': 'bold', 'overflow': 'hidden', 'padding-bottom': '8px', 'padding-top': '8px'})") JS.eval ("$('#placesObjectsAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\",'background-repeat': 'no-repeat', 'line-height': '80%', 'background-position': 'bottom', 'padding-bottom': '35px', 'text-align': 'center', 'font-size': '12px', 'margin-top': '-2px'}).insertBefore('#inventoryLabel')") JS.eval ("$('#placesObjectsLabel').css({'background-image':\"url('https://i.imgur.com/h8gDXQo.png')\", 'background-color': 'transparent','height': '16px' }).insertBefore('#placesObjectsAccordion')") JS.eval ("$('#inventoryLabel').css({'background-image':\"url('https://i.imgur.com/h8gDXQo.png')\", 'background-color': 'transparent'})") JS.eval ("$('#inventoryAccordion').css({'background-image':\"url('https://i.imgur.com/qEElOEq.png')\", 'line-height': '80%', 'background-color': 'transparent', 'padding-bottom': '35px', 'padding-top': '6px'})") JS.eval ("$('#inventoryAccordion').css({'overflow': 'hidden', 'text-align': 'center', 'font-size': '13px', 'max-height': '200px', 'margin-top': '-2px', 'background-position': 'bottom','background-repeat': 'no-repeat'});") JS.eval ("$('#inventoryContent').css({'padding-bottom': '50px', 'overflow': 'hidden'})") JS.eval ("$('#inventoryWrapper').css({'font-weight': 'bold', 'overflow': 'hidden', 'height': '80px'})") if (HasScript(player, "changedhitpoints")) { do (player, "changedhitpoints") }

Hmm… something like:

$('#commandPane').show().css({position: 'absolute', left: $('#gamePanes').width(), top: 0, height: 'initial', border: 'none', background: 'none'}).empty();
$('<img>', {id: 'verblinktravel', src: 'https://i.imgur.com/Q9gzWhy.png', title: 'travel'}).css({width: 246, height: 50, cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'travel').appendTo('#commandPane');
$('<img>', {id: 'verblinkhelp', src: 'https://i.imgur.com/p7UK3Lp.png', title: 'help'}).css({width: 246, height: 50, cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'help').appendTo('#commandPane');
$('<img>', {id: 'verblinksave', src: 'https://i.imgur.com/8LtLjkK.png', title: 'save'}).css({width: 246, height: 50, cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'save').appendTo('#commandPane');
$('<img>', {id: 'verblinkheal', src: 'https://i.imgur.com/9lIscXs.png', title: 'heal'}).css({width: 246, height: 50, cursor: 'pointer', display: 'block', float: 'center'}).addClass('cmdlink commandlink').data('command', 'heal').appendTo('#commandPane');

?


I went searching online for the answer to my problem on mobile while away from the house today. and found a video on position. I knew about it but had forgotten. So much to remember. I could not figure out why the gmaePane div would start in the middle of the page. Got back home and found it all laid out here.

Dang absolute!

Thanks, guys!


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums