I want to either replace the content element within the QUEUES element, or remove it and add a custom tab. Is this possible?
I was able to remove all the tab content using
flex.WorkerDirectory.Content.replace(<div key="tabs">CustomTabs</div>);
However, I want to keep the 'transfer' header so I can close that panel
This is a start
flex.WorkerDirectory.Content.remove("tabs");
flex.WorkerDirectory.Content.add(<div class="Twilio-Tabs Twilio Twilio-WorkerDirectoryTabs css-1vzbs6y" key="worker-directory">
<div class="Twilio-Tabs-Labels css-1a43y29">
<div class="Twilio-TabHeader css-y47si7">
<button class="css-1i3d2ep"><span class="Twilio">QUEUES</span></button>
<div class="Twilio-TabHeader-StateIndicator-Inactive css-1qqd035"></div>
</div>
</div>
<button type="button">SomeQueueName1</button>
</div>);
Twilio developer evangelist here.
You should target Flex.WorkerDirectory.Tabs, instead of Flex.WorkerDirectory. That way you have access directly to the Tabs content. First remove the queues tab:
Flex.WorkerDirectory.Tabs.Content.remove("queues");
You can then add a new tab like this:
Flex.WorkerDirectory.Tabs.Content.add(
<Flex.Tab
key="new-tab
label="New Tab"
>
<div>New tab content here</div>
</Flex.Tab>
);
Let me know if that helps at all.
Related
What happened to w3-sidenav? We now only seem to have w3-sidebar which is not as good as it always displays in large (laptop, desktop) machines.
Is it possible to use w3-sidebar, but avoid the always-on problem for large screens? I want it visible only when I say.
The w3 tutorials suggest that you use a class="w3-sidebar w3-bar-block" to build a side nav. You have different option of always display etc:
1) Always Display: Add Style="width=25%", and then to the adjacent div, add style="margin-left:25%"
2)Open over content:
a) add to sidebar style="display:none" id="mySideBar" <button onClick="we-close" class="w3-bar-iitem w3-large">Close × </button>
b) Add to content (Adjacent Div): <button class="w3-button w3-large" onClick="W3-open()">☰ </button>
c) Add script
function w3-open(){
document.getElementById("mySideBar").style.display="block";
}
function w3-close(){
document.getElementById("mySideBar").style.display="none";
}
Another option with this is to open the sidebar over the whole page, in which case you will use the same code as option 2 above, just add to the JS w3-open() function: document.getElementById("mySideBar").style.width="100%";
3) Collapsible & Responsive: (I think this is the one you will probably prefer):
a) Define sidebar div with
class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width: 200px" id="mySideBar">
<button class="w3-bar-item w3-button w3-large we-hide-large" onClick="w3-close()">close × </button>
b) Define the main wrapper div with
<div class="w3-main" style="margin-left:200px">
<div class="w3-blue">
<button class="w3-button …." onClick="w3-open()"> ☰ </button>
</div>
</div>
c) insert the javascript as per the above option 2, both w3-open() & w3-close()
Do not quote my code above, I just typed it freehand, so its probably riddled with errors.
Here is the w3school script for option 3
You can read more about sidebars here.
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can't reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you
Just use one dialog, it should be initially hidden anyway:
<div id="rowDialog" style="display:none">
<div id="rowDialogDiv">in here we are
</div>
<button id="rowDialogButton>Custom button</div>
</div>
initialize dialog, not showing it at first:
$('#rowDialog').dialog({ autoOpen: false });
put in an event handler for the row:
$("tr").click(function(){
var rowClicked = $(this);
$('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
$('#rowDialog").dialog("open");
});
Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.
You can also have event handlers for the dialogs elements:
$('#rowDialogButton').click(function(){
//do button stuff
});
something like this maybe?
<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>
The jQuery Code:
$("#myDialog").dialog({
options:....
});
$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});
I have a website where I use flash and activeX. The activeX renders on top of the flash and hence the flash is not visible. I just need to temporarily disable the Active X until the user clicks or goes to another section of the page.
Any help or advice would be great,
Thanks
You can simply hide the active X by using code.. and later you can resume it in your desired section.
Try something like this, You might have to add more <br> tags in the divWithMyActiveXControlFiller <div> tag to make up for the size of the divWithMyActiveXControl when it is hidden.
<div>
<div id="divWithMyActiveXControl" style="display:">
</div>
<div id="divWithMyActiveXControlFiller" style="display:none">
<br><br>
</div>
</div>
To hide:
document.getElementById('divWithMyActiveXControl').style.display = 'none';
document.getElementById('divWithMyActiveXControlFiller').style.display = '';
To show:
document.getElementById('divWithMyActiveXControl').style.display = '';
document.getElementById('divWithMyActiveXControlFiller').style.display = 'none';