Page 1 of 1

Gadget Element

Posted: Sat Apr 12, 2014 3:40 pm
by Alexi
How can i get the div element of an gadget for js? Actually a findElementByID can't work for all gadgets as some of them doesnt store an ID. GadgetID() in some way?

Re: Gadget Element

Posted: Sat Apr 12, 2014 4:06 pm
by eddy
I don't know if all SB gadgets are DIV-based gadget.

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure 

Re: Gadget Element

Posted: Sat Apr 12, 2014 6:01 pm
by Alexi
Thank you eddy, but is that the object to access like this?

Code: Select all

! myDiv.style.color = 'red';

Re: Gadget Element

Posted: Sat Apr 12, 2014 6:34 pm
by eddy
like that:

Code: Select all

#Window = 0


Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure 

OpenWindow(#Window, 0, 0, 0, 0, "noty", #PB_Window_Background)
ButtonGadget(1, 10, 10, 100, 30, "OK")
ButtonGadget(2, 10, 40, 100, 30, "RUN")

;***** change button background color ********

buttonDIV=GadgetElement(1,#False)
!v_buttonDIV.firstChild.firstChild.style.backgroundColor='red';   // using DOM properties

buttonJquery=GadgetElement(2,#True)
!v_buttonJquery.find('.dijitButtonNode').css({'backgroundColor':'red'}); // using Jquery methods

Re: Gadget Element

Posted: Sat Apr 12, 2014 6:36 pm
by Peter
Alexi wrote:Thank you eddy, but is that the object to access like this?

Code: Select all

! myDiv.style.color = 'red';
ButtonGadgets (for example) consist of several divs and spans.

Code: Select all

<div style="position: absolute; left: 10px; top: 10px; width: 100px; height: 30px;">
	<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_0">
		<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
			<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label" tabindex="0" id="dijit_form_Button_0" style="-webkit-user-select: none; width: 98px; height: 28px;">
			<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode">
			</span>
			<span class="dijitReset dijitToggleButtonIconChar">●</span>
				<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode" style="display: table-cell; width: 98px; height: 28px; color: red;">Button1</span>
			</span>
		</span>
		<input type="button" value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
	</span>
</div>
If you want to color the buttontext, you have to look at a span with class "dijitButtonText":

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure

OpenWindow(0, 10, 10, 300, 300, "")

ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")

GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)

! v_GE1.find(".dijitButtonText").css("color", "red");
! v_GE2.find(".dijitButtonText").css("color", "blue");
Greetings ... Peter

Re: Gadget Element

Posted: Sun Jun 19, 2022 6:36 am
by firace
These examples no longer seem to work (buttongadget color doesn't change for me)
Could anyone have a look please?

Re: Gadget Element

Posted: Sun Jun 19, 2022 9:46 am
by Peter
At some point after 2014 (I don't remember exactly when) Fred changed the variable notation.
SB-Help wrote:Here are the naming rules to use when accessing SpiderBasic items: - JavaScript variable name is the same in lowercase with a 'v_' prefix.

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetobject && v_gadgetobject.div) { return v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div; }
EndProcedure

OpenWindow(0, 10, 10, 300, 300, "")

ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")

GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)

! v_ge1.find(".dijitButtonText").css("color", "red");
! v_ge2.find(".dijitButtonText").css("color", "blue");

Re: Gadget Element

Posted: Sun Jun 19, 2022 9:12 pm
by firace
Peter wrote: Sun Jun 19, 2022 9:46 am At some point after 2014 (I don't remember exactly when) Fred changed the variable notation.
SB-Help wrote:Here are the naming rules to use when accessing SpiderBasic items: - JavaScript variable name is the same in lowercase with a 'v_' prefix.
That was it! Thanks again.