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.
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 want to add a 'fancy' button to my page. I see two possibilities:
an a element with a picture as background and add a javascript function to the click event.
or
an img element and add a javascript function to the click event.
What is your opinion ? Which one is the better way to do it and why ?
Thank you !
Other options include:
A link that styled to look like a button using a background image
A Button element that is styled with a background image and no border.
An Input element with type submit or button styled with a background image and no border.
I find that that button element works the best, particularly if you want rollover hover effects.
jQuery UI has a button plug-in that will style pretty much any kind of interactive element into a fancy button.
Wherever possible, UI elements should be defined as CSS backgrounds. They are not part of the site content, so they don't really need to be indexed by search engines.
Semantically-speaking an A-tag implies a link, and therefore the event should be hooked up to the A-tag, not the image.
The first one. You have more options to style it, and it's easier to "theme" it as well. Imaging a "dark theme" and a "light theme", using CSS you can easily keep the same HTML but have totally different styles and images for your button. In some browsers, images are not necessary; you can easily create your button using pure CSS.
It depends on what you're trying to do.
On my project, we have a form that we want to submit using a button rather than javascript, so we're inserting a button element.
<button type="submit">Sign Out</button>
Then you can style the button using CSS.
Other than that, we use images for non-form buttons and javascript for the functionality behind them.
Not sure what you mean by 'fancy' button but first look into what you're able to do with CSS, look for example at http://hellohappy.org/css3-buttons/ or http://twitter.github.com/bootstrap/base-css.html#buttons .
If you want something fancier than that you should define a link in HTML, with and anchor tag since that's semantically correct and set it's background to an image with CSS. I don't see any reason to use Javascript for the click event as long as you simply want to make A GET request to some other page.
Semantically, <button> and <input type="button|submit|reset" /> elements are the correct choice for interactive elements within the page.
If you're simply styling a link to look like a button, then continue to use an <a> element, but define some styles and use a class, such as <a class="button">.
Pretty much any element can be made into a button, and if you use the correct attributes it will maintain semantics.
The following are semantically identical, but the <img> requires JS support:
<!-- the image is of some fanciful text -->
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" />
<input type="image" src="some/image.jpg" alt="Continue" />
If you simply have a decorative image that doesn't affect the content, you could use a span or div that's styled with CSS:
<span role="button" tabindex="0" class="button continue-button">Continue</span>
I'm pretty sure you can get that effect with plain CSS, no need for JS unless you want to call a function of some sort, and to spazz the button there is no need for a JS function.
You can simply use CSS actions (not sure they are named this way) like active, hover, focus, etc...
here is an example:
http://jsfiddle.net/RQucV/2/
it has a red color for background at first, changes to blue while clicking and becomes purple when visited. this is possible because i used a 'a' tag which has these properties.
i only changed the background color, but you can also changes many other elements, such as font, background image, margins, borders, you name it.
i think its cleaner to use pure CSS because of the JS clutter. if you want to add more scripts later, something bad is bound to happen when the browser has too much scripting to do. besides, parsing CSS might actually be faster than JS.
Just another tip if you go with pure CSS: not all browsers handle CSS the sameway, i highly recommend appending a "reset.css" to your stylesheet in order to make it play along the sameway in every browser you use.
hope it helps!
I have a div that when clicked uses the jeditable jQuery plugin to do some sort of HTML replace which changes the div into a form that contains a textarea.
I want to attach the tinyMCE JS to all textareas on my site. The problem I have is that the textarea is created dynamically AFTER the tinymce has been applied to textareas.
Can anyone think how to attach some very simple wysiyyg text editor (preferable tinymce) to the textarea control once it is created by jEditable?
I'm using the latest jQuery library in a PHP app.
Cheers,
Billy
What you want seems not possible at first. The reason for this is the following:
Tinymce creates on initialization a content-editable iframe (NOT a textarea!) which will be used to edit html content. There are editor actions (i.e. save) which will write the Iframes content back to the initial html element (can be a div, textarea or anything else).
The problem I have is that the textarea is created dynamically AFTER the tinymce has been >applied to textareas.
But you can initialize the tinymce whenever you like (you need to use the mode 'modal' for this) - even AFTER the textarea is created dynamically.
Using the TinyMCE jQuery Plugin, I think you could do this:
$(function() {
$('div.editable_textarea')
.editable({ ... })
.click(function() {
$(this).find('textarea').tinymce();
});
});
I based that selector off the jEditable live demo.
I'd like to modify some parts of my website to show popups when a user clicks on some <td> elements. I'd like to keep the modification very simple, which is why I considered using a JavaScript framework. It does not really matter which, but I'd like to be able to include html in the tooltip's text.
What's the easiest way to achieve this? Could you maybe give an example?
qTip, a jQuery plugin, works very well for creating tooltips. It also supports HTML markup inside the tips. To have the tooltip show when clicking the element, rather than on mouseover, you can use the 'show' option:
jQuery('.selector').qtip({show: 'click'});