I'm using a sidebar in Semantic UI v1.1.2 but don't want it to apply a dimmer to the rest of the page when the sidebar is active.
I can see this is controlled by settings.dimPage, but I don't know how to override the default true value when building my dist files, or when hooking up my sidebar?
I'm activating it on the page like this:
$('.sideMenu').sidebar('attach events', '.menu.button');
It looks like I should be able to pass something like {'dimPage': false} in as a parameter, but I don't know how to combine it with the above 'attach events'...?
Thanks!
I'm just figured this out myself by using the kitchensink code example.
Should be something like this for your example:
$('.sideMenu').sidebar('setting', { dimPage: false });
$('.sideMenu').sidebar('attach events', '.menu.button');
Related
I am using a custom-created button on my HERE Map using the JS 3.0 library.
I followed a HERE support engineer's suggestion provided here: HERE Map UI JS - How to add custom buttons to the Map UI?
So far, I have been able to get it to work just fine, but I just found out that I need to be able to enable or disable the button depending on various business rules. But it looks like there is no "setDisabled" functionality for HERE Controls or Buttons?
https://developer.here.com/documentation/maps/api_reference/H.ui.Control.html
https://developer.here.com/documentation/maps/api_reference/H.ui.base.Button.html#.State (I saw that there was the option to initialize a button to be disabled, but not to change an existing one. Seems inefficient to create a new button every time I need to enable or disable it.)
Any suggestions?
Dont use the var ui = H.ui.UI.createDefault(map, maptypes, 'en-US'); line in order to disable buttons or find your self in an "if" statment to access this when a certain button is pressed or statement is passe
There is a setDisabled() method inherited from the parent class H.ui.base.Element which you can use:
// assume custom UI control exists
customControl.setDisabled(true) // <- disables the control
customControl.setDisabled(false) // <- enables the control
Here is jsfiddle working example of custom UI control which disables itself after click.
See H.ui.Control#setDisabled() for more details.
I want to add an additional checkbox next to Crop Image but I can't understand what need to write in javascript for rendering it and handling then. I couldn't find documentation with explaining that. I've tried to write code like that but it didn't work:
function addListBlockClassName (settings, name) {
if (name !== 'core/gallery') {
return settings
}
// new checkbox
settings.attributes.enableVoting = {
default: false,
type: 'boolean',
}
return settings
}
wp.hooks.addFilter(
'blocks.registerBlockType',
'my-plugin/class-names/list-block',
addListBlockClassName
)
You can add the additional checkbox on sidebar by using InspectorControls and Checkbox Control
Have a look at gallery block and learn how the are implementing things on sidebar via using InspectorControls. This can be complex so for easier implementation you can look at other core blocks of Gutenberg.
And this link can help you about how to use CheckboxControl.
In your above code you are just adding a hook which is changing the default class name of block gallery and that is not what you are asking. Please note that as per my knowledge you can't edit default core blocks (apart from very few things) unless you copy whole core block and add additional functionality into it.
What is best practice to change content on a page without creating a route?
BlazeLayout.render('mainLayout', { top: 'header', menu: 'menu', main: 'dashboard', bottom: 'footer' });
How can i hide/show template components inside the dashboard without creating a new route? Should this be done in helpers using some sort of if/else logic in the html and using helper for on button click? Let's say i want to show different content inside dashboard template based on button clicks (href).
Please provide a best practice and good solution that is easy with lots of components.
How can i hide/show template components inside the dashboard without
creating a new route? Should this be done in helpers using some sort
of if/else logic in the html and using helper for on button click?
You can do that but you should be aware of some points to keep your code clean and modular:
Try to wrap parts of your dashboard into own templates to keep the code clean
Use ReactiveDict in favor of many ReactiveVar instances
Wrap recurring parts in templates, too to reduce duplicate code
Register recurring helpers globally or in the most upper template of your Dashboard
Subscribe on the parent template to data that is shared across all parts of the dashboard and subscribe to local data in the respective components
Use autorun and subscription.ready() and display a loading indicator until the subscription is ready. Don't wait to have everything loaded before rendering as this may reduce the UX dramatically.
Let's say i want to show different content inside dashboard template
based on button clicks (href).
You can attach a data attribute to the button, that has a specific id of the target to be toggled:
<template name="dashboardComponent">
<a href class="toggleButton" data-target="targetId">My Link</a>
</template>
You can then read this id and toggle it's state in your ReactiveDict:
Template.dashboardComponent.events({
'click .toggleButton'(event, templateInstance) {
event.preventDefault();
// get the value of 'data-target'
const targetId = $(event.currentTarget).attr('data-target');
// get the current toggle state of target by targetId
const toggleState = templateInstance.state.get( targetId );
// toggle the state of target by targetId
templateInstance.state.set( targetId, !toggleState );
}
});
In your template you can then ask to render by simple if / else:
<template name="dashboardComponent">
<a href class="toggleButton" data-target="targetId">My Link</a>
{{#if visible 'targetId'}}
<div>target is visible</div>
{{/if}}
</template>
And your helper is returning the state:
Template.dashboardComponent.helpers({
visible(targetName) {
return Template.instance().state.get(targetName);
}
});
There could be the problem of sharing the state between parent and child templates and I suggest you to avoid Session where possible. However as beginner it is a lot easier to first use Session and then work towards a more decoupled (parameterized templates) solution step by step.
Please provide a best practice and good solution that is easy with
lots of components.
This is a high demand and it is your competency to work towards both! However here is a short peek into this:
Best practice is what works for you plus can work for others in other use cases. Try to share your work with others to see where it will fail for their use case.
Using routes has the advantage, that you can use query parameters to save the current view state in the url. That adds the advantage, that on reloading the page or sharing via link, the page state can be fully restored.
easy with lots of components is a contradiction and I don't know if you expect some magical puff that solves this complexity for you. As a software engineer it is your competency to abstract the complexity into smaller pieces until you can solve the problem within certain boundaries.
I've just started using the tag cloud feature for a new site i'm developing.
but now I've run into some problems
I can set the links in my tag cloud to go to a page, but I have many pages with a tab container.
so for instance, I have a tab container. one of its panels is a sports panel. the tab container has three other panels, say food, travel and drinks.
how do I make a tag that goes directly to that panel in the tab container?
really stuck here.
tried creating a normal a id="something" name="something", and tried creating the tags a href to that name with a #, but that didn't work.
could somebody please help me
would, of course, be greatly appreciated
A # is your best bet. So for example if you set up your link to appear as:
Link text
Then you can bind to the "hash change" event using javascript. jQuery example below.
// on load
jQuery(document).ready(function(){
// bind window hashchange event
jQuery(window).bind("hashchange", function(){
// get hash selected
var hash = window.location.hash;
// *** now do something with that information *** //
// *** eg, show hide panels where a nested element, attribute or data matches hash *** //
});
});
If you're doing it this way you should make all the "tab clicks" simply bound hash changes too, forgetting any previous functionality. Then it will be solid, and consistent.
You could also do the same using query strings. And if you're not a fan of the "hashchange" then do it another way. The key is that you would have a javascript function that looks for something in the url, then does something about it!
EDIT
Add to the "do something section" assuming all your tabs are of the same class and the hash is the same name as the ID
jQuery(".tabs").hide();
jQuery("#" + hash).show();
Has anyone tried to customize this button?
https://developer.linkedin.com/plugins/apply
Beyond the built-in customization options, please don't change the look-and-feel of this button. It's part of our "Brand".
The Apply With LinkedIn button does have some customizations available. See this page for more information:
https://developer.linkedin.com/apply-visual-display-options
You could wait for the window to completely load with jQuery, then apply your css overrides. You'd want to hide the button initially and then show it when the css overrides are applied. There might be a bit of a race condition that will show the button without your styling applied at first though.
something like:
$(document).ready(function() {
$(".IN-widget").hide();
});
$(window).load(function(){
// change LinkedIn's things you shouldn't change because their branding is important here
$(".IN-widget").show();
});