Jump to content
UBot Underground

[Sell] Drag & Drop UI Builder...Now with CSS & Jquery

darryl561

By darryl561,
in Bots and Scripts

 Share Followers 10

Recommended Posts

Marton

Marton 48

Posted
Posted

Thank you again for all your hard work, Darryl! I've tested the hidden fields in multiple tabs, they look great & work perfectly now!

 

I have an interesting question, though this might be something that only interests me. I've created a simple example project to demonstrate my problem. My example project contains a Button that has one hidden TextBox. There is another button, with also a hidden TextBox (attached pictures). I've tried modifying the generated code to make this possible:
 

1. I want the second button to only appear after expanding the first button (so clicking the first button would not only show the first textbox, but also the second button)

2. After that, clicking the second button would make the second textbox appear.

 

I don't know if all that is clear, but in a way I'm talking about multi-tier hidden fields. Now I've tried moving things around in the code to make this happen, but it didn't work. For someone with a little bit better html&javascript knowledge this should be easy (I'm actually honing my html&javascript skills atm, but I'm not quite there yet). Can anyone help me out with this?

I think this is the part where things need to be changed:

 


<html lang="en"><head>
<style type="text/css">
    hidden2641{display:none}
</style>
<style type="text/css">
    hidden9934{display:none}
</style>



.
.
.
//skipped these lines, didn't want to attach too much code here
.
.
.


<style>
#containment-wrapper \{ width: 100%; height:200px; background-color: CCCCCC; padding: 0px; \}
</style>
</head>
<body style=\"margin-left: 0px; margin-right: 0px; margin-top: 0px; cursor: auto; \">
<div id=\"containment-wrapper\">
<div id=\"colorbutton1\" style=\"margin-left: 1px; width: 50px; height: 20px; position: absolute; left: 14px; top: 16px; \" >
    
<button class=\"button1\" id=\"show2641\" style=\"height: px; width: px; font-family: ; 
font-size: ;\" onclick=\"ubot.runScript(\'FirstCommand()\')\"><label variable=\"#showhide1\">More1</label></button>

</div><div id=\"textbox1\" style=\"margin-left: 1px; width: 200px; height: 20px; position: absolute; left: 192px; top: 16px; \" >
    
<hidden2641>
<label>Box1</label>
	<input class=\"textbox\" id=\"VnLtvX\" variable=\"#TextBox1\" fillwith=\"value\" type=\"text\" value=\"\" placeholder=\"\" style=\" width: px;\">
</hidden2641>	

</div><div id=\"colorbutton2\" style=\"margin-left: 1px; width: 50px; height: 20px; position: absolute; left: 13px; top: 90px; \" >
    
<button class=\"button1\" id=\"show9934\" style=\"height: px; width: px; font-family: ; 
font-size: ;\" onclick=\"ubot.runScript(\'SecondCommand()\')\"><label variable=\"#showhide2\">More2</label></button>

</div><div id=\"textbox2\" style=\"margin-left: 1px; width: 200px; height: 20px; position: absolute; left: 189px; top: 89px; \" >
    
<hidden9934>
<label>Box2</label>
	<input class=\"textbox\" id=\"1MMzCX\" variable=\"#TextBox2\" fillwith=\"value\" type=\"text\" value=\"\" placeholder=\"\" style=\" width: px;\">
</hidden9934>	

</div>
</div></body>
<script type=\'text/javascript\' charset=\'utf-8\'>
{#jsmin}
</script>
<script type=\'text/javascript\' charset=\'utf-8\'>
{#jsdd}
</script>
<script type=\'text/javascript\' charset=\'utf-8\'>
{#jsosfile}
</script>
<script>
$(document).ready(function()\{
  $(\"#show2641\").click(function()\{
    $(\"hidden2641\").toggle();
  \});
\});
</script>
<script>
$(document).ready(function()\{
  $(\"#show9934\").click(function()\{
    $(\"hidden9934\").toggle();
  \});
\});
</script>
</html>

Thank you for any help,

Marton

post-695-0-69795800-1382340464_thumb.jpg

post-695-0-84338500-1382340476_thumb.jpg

Link to post
Share on other sites
  • Replies 190
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

darryl561

http://77thcloud.com/uibuilderpro/salesthread/salesheader.png           NOTICE:   This UI Builder is no longer being sold as   I have released a much better ui builder.   You can check it out here:  

darryl561

New update, feature added.   I have added the first of two types of dynamic dropdowns to the builder.   With the one that I have just added you can add up to 4 dropdowns in a "group". Dropdown two's o

darryl561

Just uploaded a major update, here's whats new:   1) Completely new "tabs" which is a major improvement for creating tabbed ui's. Tabs are also draggable so you can now align them either horizontally

Posted Images

darryl561

darryl561 177

Posted
  • Author
Posted

Hi Marton, yeah that can definitly be done. For "nested" hidden fields you will have to manually make the changes to the code though, but it's pretty easy.

 

I think it will be a lot easier to make a screencast though and show you what you will need to do rather than try to explain it here.

 

I will send you a demo bot and link to screencast as soon as I get it done.

 

Cheers.

  • Like 1
Link to post
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
darryl561

darryl561 177

Posted
  • Author
Posted

Daryll,

 

Would this be useful for Ubot Standard users or not ?

The main discussion is here:

http://www.ubotstudio.com/forum/index.php?/topic/15395-anyone-have-a-good-idea-on-how-to-handle-this/

 

Hi uniquebot, I assume you mean the dropdowns I referred to in that thread.

 

Unfortunately the method I will be using won't work with the standard version of uBot.

 

Darryl.

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

New update, feature added.

 

I have added the first of two types of dynamic dropdowns to the builder.

 

With the one that I have just added you can add up to 4 dropdowns in a "group". Dropdown two's options will change depending on what is selected in dropdown one, dropdown 3's option will change depending on what is selected in dropdown 2 etc.

 

I have had to use a different style of dropdown for the dynamic dropdowns, so you will have to create a new theme/s for them to work. Unfortunately they will not work with previously created themes.

 

You can also add a normal dropdown using this new style if you want.

 

I will be adding the second type of dynamic dropdown soon which will be able to be populated from scraped data or from a saved file.

 

Cheers

Darryl.

  • Like 2
Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

New update.

 

I have added the second type of dynamic dropdown as I mentioned in the post above which will enable you to populate dropdowns from scraped data or from a saved file.

 

Cheers

Darryl.

  • Like 1
Link to post
Share on other sites
Sanjeev

Sanjeev 46

Posted
Posted

Hi Daryl,

 

I seem to be doing something wrong while creating the type01 dynamic drop down.. please see  the bot attached.. it's not populating the drop down as it should..?

 

1.In the UI Builder Pro - I created a single type01 dynamic drop down - and named it -  #dyndrop01

2. I then copied and pasted the code into  codeview of Ubot studio, saved the bot to disk re-opened the bot

3. Created and set  a variable named - #dyndrop01 content - to a comma separated list of text which I scraped from a webpage.

4.pressed the run button - but didn't see the drop down updating - I then saved and reopened the bot, ran the bot again - got the  same result.....?

I guess I didn't understand what needs to be done , correctly...

Please help.

dynadrop01.ubot

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

Hi Daryl,

 

I seem to be doing something wrong while creating the type01 dynamic drop down.. please see  the bot attached.. it's not populating the drop down as it should..?

 

1.In the UI Builder Pro - I created a single type01 dynamic drop down - and named it -  #dyndrop01

2. I then copied and pasted the code into  codeview of Ubot studio, saved the bot to disk re-opened the bot

3. Created and set  a variable named - #dyndrop01 content - to a comma separated list of text which I scraped from a webpage.

4.pressed the run button - but didn't see the drop down updating - I then saved and reopened the bot, ran the bot again - got the  same result.....?

I guess I didn't understand what needs to be done , correctly...

Please help.

 

Hi Sanjeev,

 

I ran the bot you attached and it worked perfectly the first time, but then had problems when I tried running it again.

 

I changed your wait 1sec command with a wait for everything loaded command and had no problems after that. Here's a bot with the changed wait command:

 

dynadrop01.ubot

 

Wow Darryl!!

 

 

This is amazing update bro!!

 

 

Thank you soooo much!

 

No worries TC, glad you like it.

 

Cheers

Darryl.

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

That's weird, it's still working perfectly for me: see screencast

 

I have version 4.2.20 of uBot, but don't know if that would make any difference or not.

 

If the version is not the problem it's got me stumped to be honest coz as you can see in the screencast it's working perfectly for me.

Link to post
Share on other sites
Sirfrank

Sirfrank 17

Posted
Posted

is that possible to insert images in PRO version in Costume code section like with this codesnipet:

<img style="width:190;height:153px;margin-top:-20px;" alt="" src="http://www.jofogas.hu/pg/0o/y495Wkj/xWYkuAgk/+Znq94NTlnW+wizChrw==.gif?1" />

 

?

 

If yes, grabbing it right now

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

Darryl?

 

I find that if I change the dynamic drop down's option, and then update the drop down variable again -subsequently the dropdown does not appear to update..?

 

http://www.screencast.com/t/hkzs4dSTWI

 

Hi Sanjeev, this is a bit weird.

 

In the screencast I made you can see that sometimes it does update, but not always.

 

See Screencast

 

I think it must be a problem with uBot. If it was the code causing the problem I am sure it would either work every time or none of the time.

Might have to check with uBot support about that one.

 

Darryl.

Link to post
Share on other sites
Sanjeev

Sanjeev 46

Posted
Posted

Hi Darryl,

 

How can I create an interface for the UI HTML Window using your tool?

I tried copying  and pasting  the 'UI  html panel' code into the 'Ui html window' , as you can see from the screen cast - it appears to work..

But as  I didn't find any info about this, on the forum or in your tutorials, I just wanted to know if this is  the right way to do it?

 

Thanks.

ui html window.ubot

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

Hi Sanjeev,

 

yeah the only thing if you copy and paste you will have to replace all the instances of: ___NODEVIEWCOPY___28___NODEVIEWCOPY___ with the correct variable.

 

This is how I would do it(I think it's probably easier) see screencast

 

Cheers

Darryl.

Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

Hi Kev,

 

possibly soon, but not at the moment with the builder. Will PM you for more details and I think I should be able to help you out now though.

 

 

Also while I'm here there is something I am pretty excited about and want to let you guys know about it as well. You may have seen Edward's CSS Themes, if not I'd encourage you to check them out: http://www.ubotstudio.com/forum/index.php?/topic/15477-sell-ubot-css-themes-instantly-style-your-bots-stanprodev/

they are amazing.

 

Edward's css and design skills are awesome, and he is creating themes that can be used in UI Builder Pro. And believe it or not you will be able to make your ui's look even better than the examples on his thread.

 

When finished these themes can be added to the builders theme folder, and to use them all you will have to do is select the one you want to use, exactly as you do to select a theme that you have created.

 

Edward has raised the bar here as far as amazing looking ui's go, and when finished, using these themes combined with the ui builder, it is soon going to be possible for anyone to take their ui's to a whole new level with ease.

 

Cheers

Darryl.

  • Like 1
Link to post
Share on other sites
darryl561

darryl561 177

Posted
  • Author
Posted

Just want to let everyone know that Edward has released the first of his awesome "made for UI Builder Pro" themes, and they are available to "plugin" to the builder right now.

 

The css styling used for these themes, right down to the finest detail, is second to none. Right down to the scroll bars and progress bar. And Edward has also included graphics with the themes, that can easily be added with the builder to compliment them perfectly.

 

If you want to take your UI's to a new level with this kind of css styling you have 3 options:

 

1) an advanced knowledge and skill in css(even then it would still be a difficult and time consuming task)

2) pay some-one to do it(could get very expensive)

3) use Edward's themes in combination with UI Builder Pro(very quick and easy and in-expensive considering you can use them over and over)

 

You can check them out here:

 

http://www.ubotstudio.com/forum/index.php?/topic/15543-sell-drag-and-drop-ui-builders-beautiful-new-custom-themes/

 

I am sure that Edward would be happy to receive any suggestions/requests regarding styles, colors etc. that you would like to see in a theme.

 

Cheers.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Followers 10
Go to topic listing
×
×
  • Create New...