I'm using Fancybox afterShow to display image descriptions on the side via overlay like so:
afterShow : function (){
var description = "<div class='hidden_tab'>"+$("#tab").html()+"</div>"
$('#fancybox-overlay').html(description);
}
The problem is that I need modal to be false so users can click out. But the hidden_tab tabs, when clicked, also exit fancybox.
Is there a way to section where modal takes affect? Or a workaround? I have tried setting z-index for the hidden_tab to be high but this did not do the trick.
If you need to set modal : false then try adding closeClick : false (which prevents closing when clicking INSIDE fancybox)
BTW, the default value of modal is false. Don't assume that people will necessarily understand why modal was set to true in your script.
Related
I'm trying to use toggles on an inactive screen as a replacement for functions (and thus help code reuse), however I'm stuck as my toggle won't activate unless I visit the page it's on. I found plenty of working examples online but somehow can't get it to work for me.
Overview:
I have a button on screen1 and a toggle on screen2.
During my button's OnSelect event, a variable varSendData is being set to true like so:
Set (varSendData, true)
The toggle has its Default property set to varSendData.
The OnCheck property of the toggle contains the code to be executed:
Notify("This works")
Problem:
While the variable varSendData is correctly being set to true, nothing happens while I'm on the screen1 with the button. Only when I visit the screen2 with the toggle (even if in edit mode only) does the toggle change state and execute the code in the OnCheck property. I tried using the OnChange property of the toggle, however that has the same effect/limitation.
Furthermore, if I set the variable (varSendData) back to false before visiting screen2 then nothing happens from which I conclude that the toggle is only triggered (changed) if the page it's on is visible/active.
Any ideas on how I could get the toggle to change state even if I'm not screen2? Or any other ideas on how I could reuse the same code from different screens?
It's a limitation of the method the actual code is calling. In order to allow the HTML to refresh from this "Notify("This Works"). You would need to also have a function that refreshes the HTML in the screen your currently viewing.
I was able to get this to work by adding a label and setting its text property to be If(Toggle6.Value = true, "yes", "no").
Literally adding this in allowed the notification to pop up. Nothing extra.
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
I am looking to set an ionic button's state to active, but this isn't documented at all in the API docs. As of right now, when you click the button, the "activated" class is added to the button, and then removed a few moments later.
This can be done via [ngClass]="{'activated' : YourVariableHere }"
HTML:
<button class="post-button" [ngClass]="{'activated' : buttonActive}"ion-button outline small icon-left">
Component code:
buttonActive: boolean = true;
I have an accordion that works great. I'm trying to figure out a way to search all the flaps of the accordion:
Find String on Page (Ctrl+F) when jQuery Accordion in Use
I have used the destroy method on a link and then reinitializing on another link, but it would be great to toggle this with one button. ((I originally asked this question without this solution here, so the answer below is just this. I won't accept it until I see if any better solutions come up))
$(document).ready(function() {
$("#hide").click(function() {
$(".accordion").accordion("destroy");
});
$("#show").click(function() {
$(".accordion").accordion({
navigation : true,
collapsible : true,
heightStyle : "fill",
active :
});
});
});
I was also able to toggle the entire accordion with jQuery toggle() but this just makes the entire thing disappear. What I want is to toggle the accordion functionality, while leaving the div structure behind so it's visible, just as if someone disabled JavaScript in the browser.
So the above kind of does what I want, except in reality, the better solution is to actually remove the class .accordion because that makes the page truly look like it should. Destroying the accordion actually breaks some stuff and this is undesirable.
I thought it would be as easy as this but it's not working:
$(document).ready(function() {
$("#hide").click(function() {
$("#accordion").removeClass(".accordion");
});
$("#show").click(function() {
$("#accordion").addClass(".accordion");
});
});
This does seem to be adding and removing the class I'm telling it to, but the initial remove is not removing the accordion class to remove the accordion itself.
I have used the destroy method on a link and then reinitializing on another link (although one button toggle would be better):
$(document).ready(function() {
$("#hide").click(function() {
$(".accordion").accordion("destroy");
});
$("#show").click(function() {
$(".accordion").accordion({
navigation : true,
collapsible : true,
heightStyle : "fill",
active :
});
});
});
I had to edit some CSS to make this work out, but it's the best I could find.
NOTE
I should note that I ended up finding even a simpler approach to this. Simply adding a reload restores the page back to its original state:
$("#show").click(function() {
location.reload();
});
The destroy and reload is a very simple solution. The one button aspect is solved with this event which goes in the document ready function:
// event to destroy accordion and make it's content searchable
$("#open-1").on("click",function() {
// if the button says Enable reload to bring the accordion back
if ($(this).html() == "Enable") {
location.reload();
}
// otherwise destroy the accordion and change the button to Enable
else {
$("#accord-1").accordion('destroy');
$(this).html("Enable");
}
});
The button can say anything you want initially. The key is that it's set to "Enable" and tested for "Enable" to reload the page. You can make that any string you want as well. Here's a complete example.
I want to push toolstripbutton down in my code and I can't seem to be able to do that. I know on Delphi RAD Studio or XE, you can do the following and cause the button to be pressed.
ToolStripButton1.Down := true;
The only ToolStripButton property I see that comes close to "down" is checked true or false. If I do set it to true, it only highlights the toolstripbutton not press it down.
Here is how the button looks when I put my mouse on it and click:
You can clearly see that the Zoom In button is down.
Here is how the button looks when I try to do the samething through my code by setting CheckOnClick true and Checked true.
In this image, the only thing you can see is the blue box around it. I suppose if I had used just the text on the button, you will see that the whole button filled with blue color to show that it was pressed.
I also have toolstrip button in my other program which acts the same way but I had to use imagelist control to switch between pressed or down or checked verses not pressed or down or checked.
So, is there a way to press the ToolStripButton programmatically in Delphi Prism or C#?
Set the ToolStripButton.CheckOnClick property to True. (It's found in the Behavior section of the Items Collection Editor.)
This makes clicking it just like toggling the Down property in a Delphi TSpeedButton (making it flat or depressed), and if ToolStripButton1.Checked is the equivalent of if SpeedButton1.Down in Delphi.
To set up the test, I did the following:
Created a new Winforms application
Dropped a ToolStrip onto the new MainForm
Added four ToolStripButton items and gave them images to make them easier to see.
Set the CheckOnClick property to True for each of them
Set the Checked property of toolStripButton1 to True;
Added the code below to toolStripButton1.Click
method MainForm.toolStripButton1_Click(sender: System.Object; e: System.EventArgs);
begin
toolStripButton2.Checked := not toolStripButton2.Checked;
toolStripButton4.Checked := toolStripButton2.Checked;
end;
Running the app (initial startup, toolStripButton1 checked and the others unchecked):
The first button is clearly down, and the rest are up.
After clicking toolStripButton1 once:
The first button is now up (unchecked) and the second and fourth are down (checked). (I should pay more attention to the consistency in sizing if I do successive images in future posts.)
If have placed this code in the preceding control in the 'Leave' event.
Private Sub PurposeComboBox_Leave(sender As Object, e As EventArgs) Handles PurposeComboBox.Leave
Me.AppliancesForSelectedFunctionToolStripButton.PerformClick()
End Sub
I do not know if you could place code in Form Load or not.
Hope this helps.