How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I have a LOT of asp:Labels and I want to change the size of the font for every single one.
I know that they are converted to <span> but I have other elements with text that get converted to spans which I don't want to change.
So how can I apply style to only the the spans generated from Labels all at once?
Please don't tell me I'll have to go through each one and apply a cssClass directly.
You can define a Skin for that. Think of Skin as a set of settings common for all controls of specific type. Skins do not exist on their own, but within a theme. Here is a walkthrough on how to create a theme from MSDN. I do not think it is reasonable to copy it here.
But to focus on your specific use case, go ahead and follow this walkthrough and create a theme with only a single skin defined like so:
<asp:Label runat="server" CssClass="CommonCssClass" />
Notice we do not use SkinID, so this will be applied to all Label controls.
Next go to the page and modify Page directive:
<%# Page Theme="YourThemeName" %>
That's it, this should apply skin defined in the theme to the labels on the page.
In fact I would make an argument that this is a better way to do similar changes to server side controls then trying to figure out how to capture resulting HTML with css selector. The latter puts your code into dependency on the generated markup, which is dangerous as ASP.NET does not always generate what you would expect. For example, Label does not always render as span.
I think I'll just start of
Explanation:
I'm currently building a Site written in jQuery and I'm using multiple techniques wich allows the site to construct itself like Ajax Object returning functions inside a normal class not singleton, but i also have singleton based classes in other areas of the page which are loaded asynchronously via Ajax and so on...
At the beginning i call a self made function that is a chain of functions which each are attached to other functions, classes and variables declared within and out of my singleton Page-Class Construct (But all still on the same Document|Window).
"Page is the actual name of the class".. So on
$(window).load();
i call
Page.SetupPage();
Loading some Cookies with md5 encrypted data (WORKS)
Loading The Site Menu Bar via Ajax which contains : "the Site Menu
which is getting its data from a DB", "the Search Panel(jQuery
autocomplete) drop down menu", "the user panel and the shopping cart HTML Drop Down Menus" <-- (THE
PROBLEM IS HERE), then turning it in to a smart menu Element with the
jQuery smart menus Plugin.
Loading The Pages Body in a Div Container which properties are set within
the first step (WORKS)
THE PROBLEM:
If I'm trying to access a existing Div inside the MegaMenu HtmlDropDown Div inside the Smartmenu formated element, i am not able to build further elements in to that dropdown menu because I'm calling the userPanel at the beginning of the page, wich also had the same problem with my auto user recognition unless i call the API with 'itemActivate' a#mydiv, the plugin sets any other open mega menus CSS display properties to none
SO:
I'm currently also including a second js script that has a singleton class named ShoppingCart which has a function named ShoppingCart()... If i call that on $(window).load() i get the json response object and can fill it into an array... but unless I'm not setting the css property of the shoppingCart DropDown UL Tag to "display" -> "block" i can't access the div inside that smartmenu html dropdown megamenu and append items to that div and further more: i cannot call the jScrollPane plugin at the end of the append inside the mega menu HTML drop down div wich i'm trying to access, because i use an other focus on a other menu button to make sure everything is loaded as it shoul!
THE FUNNY THING:
$('#main-menu').smartmenus('itemActivate', $('a#shoppingPanel'));
$('#ShoppingCartDiv').css({ 'min-width' : 300, 'height' : 200 }).attr({ 'class' : 'scroll-pane' });
$('#ShoppingCartDiv .jspContainer').css({ 'min-width' : 300, 'height' : 200 });
$('#ShoppingCartDiv .jspPane').css({ 'min-width' : 300, 'height' : cartItems.length*64 });
$('.scroll-pane').jScrollPane();
$('#main-menu').smartmenus('enable', $('a#shoppingPanel'));
if I'm adding these lines inside the each append function of my "setShopingCartItems" function and afterwards calling the jScrollPane function, it works... but when i'm changing to another area which contains a scroll pane element, it breaks the scroll pane in the cart area...
Do you have any suggestions how to append and style elements without the display of the parent is set to block? Or how do i achieve that goal best and in a more cleaner way?
All Answers are appreciated! Thanks in advance!
*EDIT*
Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1...
Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1... For whatever reason! CLOSED
I know there a fixed position for the zoomControl, but they are not enough for where I need to put it.
Can I style it with CSS? Such as top:80px; right:20px;
Yes you can do it with jQuery. If you see the HTML source for the map generated, it can be observed that the various controls the map provides don't have a ID attribute to manipulate them. However we can use the title attribute of each element to modify them as per our need. See this solution where in a click on the map div adds a top:50px to the bar in zoom control -
**DEMO
jQuery-
$("div[title='Click to zoom']").css("top","50px");
});
Similarly you can capture other controls in the map and add css to them as per your need.
One point to note here is that you can't us the $(document).ready() to change the css on page load since the map actually takes time to load and by then the zoom bar isn't in the DOM. So I used a map click event to add the css. You can use other events to manipulate the css of the zoom control or other controls.
I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);