I'm trying to use a ui kit (http://demos.creative-tim.com/material-kit/components-documentation.html#checkbox-row) and it's have several js files, jquery, bootstrap, its own etc. I included them in the index.html and works well if the checkbox or other visual element is on the page at start.
But when i hide a div under ngIf with the checkboxes, and a button toggle shows this div later, it's visual element what the js files adds to it, doesn't do they job and i don't see the fancy checkboxes.
As i think, the external libs right part should be initialized when the hidden div comes visible.
How could i overcome with this issue? (i am using angular 4 with server side rendering)
when i hide a div under ngIf
The *ngIf directive does not hide the div, it removes or adds it to the DOM which is probably why you're having initialization issues. Try binding to [hidden] instead.
Related
I'm working on a Drupal project that imports JQuery on all its pages. We started to use Vue.js by injecting it directly in the HTML pages for the development of dynamic components (not for a SPA).
The problem is that we have JQuery UI that conflicts with Vue.js. It will directly modify all the inputs of Vue.js by readapting their styles.
Is it possible to disable JQuery UI on a particular div, which would contain Vue.js? Without having to disable it on the whole page, because our header has a burger menu that uses JQuery UI.
We found a fix to correct this conflict between Vue.js and JQuery. This method will not completely disable JQuery on a given scope, but will disable a behavior that we were having trouble with.
$('select').selectmenu("destroy")
More about the method destroy here:
https://api.jqueryui.com/selectmenu/#method-destroy
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
I'm trying to make some animations with the components. I use Angular and Masonry (UI library). When I try to animate an element that is outside the ng-view it work's but when I try this on element inside the ng-view it doesn't work. I know that is due to jQuery - it runs the code once (when the page is loaded, but jQuery doesn't wait the ng-view element). How I can fix this problem?
You need to make your animation with directives on "Angular territory".
Check angular-masonry
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
So I tried to reproduce this in JS Bin but I couldnt get the dojo to work. It is the same on chrome and firefox.
I have a checkbox and a dojo ready function which looks like
dojo.ready(function() {
dijit.byId('checkbox1').checked = true;
});
Now when the page is rendered the checked = true is executed successfully however the checkbox does not appear check UNTIL YOU MOUSE OVER IT !
Its like the browser did not repaint the area over the checkbox. Waving your mouse over the checkbox and the browser repaints it so you can see the tick.
Anyone come across this before?
You need to use :
dijit.byId('checkbox1').set('checked', true)
instead of directly setting the attribute. This convention should be followed for all widgets since you never know what other processing may be required when changing attribute values.
For me, the problem was that I was not loading the widget's css properly.
Dojo's Checkboxes are shown using a sprite-sheet rather than a native html checkbox.
I had overridden dojo's css (I was using the claro theme), by hiding the spritesheet image, and showing the regular html checkbox that was backing it.
So, make sure that you are including one of the dojo theme css files (claro.css for me) with you css. and make sure that the <body> tag on your html has the class="claro" or whatever theme you are using.
With the sprite sheet (again, in this case claro) your checkbox should look like not