How can I use JavaScript with mdl-layout--fixed-tabs - javascript

I looked at numerous examples of mdl-layout--fixed-tabs usage.
I can't find any example of using mdl-layout--fixed-tabs with JavaScript. My goal is to make different REST backend calls depending on active tab.

MDL is just a collection of CSS classes, each applied to an HTML element.
JavaScript is used to manipulate the HTML underneath the MDL classes, so you just use JavaScript with MDL like you would with regular HTML.
var tab1 = document.getElementById("tab1"); // Where tab1 is the ID of
// of your HTML element with
// the applied MDL class.
// Do whatever else you need to do, etc...

Related

Bootstrap 4 dynamic tooltip with custom class

I create a dynamic tootltip on target element in the following way :
var dynamicTooltip = new bootstrap.Tooltip($(targetElement));
Everything work just fine, but i would like to add to the generated tooltip a custom class.
Is not clear to me how can i target to the html generated by bootstrap with the previous instruction (or better which bootstrap API should i use to attach a class).
I see that bootstrap tooltip have a class named "tooltip" but i can't use that class to find my newly generated element eg :
$(".tooltip")
In fact i am afraid that the code above will find also already existing tooltip, and i want target only the newly generated one.
How can i achieve that?
From bootstrap docs:
Here
You can use the template option to give complex HTML structure, or just the customClass option to add custom classes:
var dynamicTooltip = new bootstrap.Tooltip($(targetElement), {
customClass: 'myCustomClass'
});

Store "templates" of children

I am new to JavaScript so forgive me if the question comes around as dumb.
I know that appendChild() allows me to add a child element to an existing element. However, the problem is that I want to add an element which has an image on the left and a series of text boxes on the right and I need to add it over and over again on button click.
Adding simple elements like p, a , etc can be done by a single call to appendChild(), however for the above scenario, it will be a little messy.
Is there some way that I can define the custom element that I want to append and then just add it with a single call to appendChild()
Are you using jQuery? If it is a really complicated template, you could use .load() to ajax in an template and populate it with whatever you have to. You wouldn't need to dynamically create all of the elements using javascript, only populate it. This would would also allow you to change your template if need be very easily.
It seems you need cloneNode:
target.appendChild(template.cloneNode(true)); // If you want to clone template
// with all its descendants
target.appendChild(template.cloneNode(false)); // If you want to clone template
// without its descendants
I do this quite a bit. My code generally looks like this:
<div class="template" style="display: none;">stuff</div>
then:
$('.template').clone(true).removeClass('template').show().appendTo(someElement);
Since you're not using jQuery, have a look at the clone function here:
http://code.jquery.com/jquery-1.11.0.js
(search for "clone: function" to find it)
You can steal the relevant bits if you can't actually use jQuery itself.

Is it possible add or change CSS properties using jQuery?

Specifically, a class or id within the css.
Would you use something similar to $(window).height()?
It's not clear exactly what you want, but as a general rule all the styles applied to a given element can be accessed in JavaScript using something like:
element.style.<property-name>
So using native JavaScript you can do:
var elemStyles = document.getElementById("someId").style;
var styleWidth = elemStyles.width;
Assuming at least one element with a given CSS class and a framework that can select elements by class, you can similarly do:
var elemStyles = $(".someClass")[0].style;
var styleWidth = elemStyles.width;
Or depending upon what (if any) JavaScript framework you are using, there may be specialized methods that you can use to access/inspect various CSS attributes for a given element.
Note that any of these methods will bring back all the styles applied to the element, whether they are coming from the CSS file, from inline CSS declarations, or added programmatically by a script on the page. If you want to get just the styles inherited from the CSS file, then things get a bit trickier.
yes its possible
if you would like to receive other css properties check this out
http://api.jquery.com/css
you would do somethig like this
var cssvalue = $(selector).css(propertyName);
This will probably help you, too. Esp. if you want to do it without jQuery: How do you read CSS rule values with JavaScript?

basic scripting question... dynamically modify div content?

I'm wondering what might be the simplest approach to dynamically changing the contents of a "caption" div to reflect the info corresponding to a specific thumbnail/link in an image gallery.
To be more specific, if you visit this link-- which shows off the awesome Seadragon zoom script btw-- I would like to have a small caption under the image that changes (text) content when a user clicks the different links above; perhaps pulling text from an alt or title attribute and placing in an empty div?
In my case, I'll be using thumbnails instead of text links, so upon clicking these images the user will both initiate the "switchTo" Seadragon event and fill the empty div with corresponding content.
thanks for any guidance here.
If you have the id of the div, the simplest way would be to use innerHTML:
document.getElementById(id).innerHTML = "text";
This is fine for simpler cases, like replacing all of the text in a div. If you want to do something more complicated, like having other html elements inside the div, this method is not the best choice.
If you want to add an html element to the div tag, then you should avoid innerHTML. If you have, say, a variable img that is an img tag, then use this to add it to the div:
document.getElementById(id).appendChild(img);
If you want to do anything more complicated than this, you should probably consider using a nice framework like jQuery--it might be too much for something like this, but if you plan to do anything else, then a framework would be worth using.
If you want to do this with jQuery, it can be done using some of the following functions:
var div = $("#id");// jQuery uses CSS selectors to get elements.
div.append("New content");// Puts the new content at the end.
div.empty();// Gets rid of everything inside the div.
div.append(element);// You can also append elements.
// For example, you can create and append an image to the div:
var img = $("<img>");
img.attr("src", "images/something.png");
div.append(img);

How can I apply prototype's toggle to content loaded via JSON, IE problem only

I use PHP and javascript via prototype.
i have a threaded comments page that on open
by default via javascript call to a PHP file data returned via JSON, only parent comments are retrieved in the db. (in short only parent comments are fetched from db and displayed)
then the parents are loaded and formatted to be shown on the page with a link to get and display its child comments, link example:
<span id="moreparent8351" onclick="insertChildDiv('parent8351')">1 Replies and more</span>
the span link above calls the javascript function "insertChildDiv()" that basically gets comments whose parent_id=parent8351, also using a PHP file that returns data via JSON to the javascript that dynamically inserts this child comments nested under its parent comment.
then the span link above using prototype transforms into:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
now here is the problem, this inserted content inside this div with id=childparent8351 wont respond to the hide/show toggle ONLY in IE v6,v7 and v8. other browsers work fine.
it looks like IE cannot apply the hide/show toggle to a dynamically inserted content.
I tried hardcoding the inserted content that i see in fogbugz to the page and testing it again on IE, guess what? toggle works!
I dont want to fetch all the comments both parent and child and then hide the child comments, that is a waste of resources on something that we are not sure is important or to be read by the users.
Is there a workaround? if there is none, then i hope this post will help others on their design stage for something similar.
Element.toggle() should work fine with dynamically generated content. Your problem most likely lies within the method you use to generate this content.
You stated:
then the span link above using
prototype transforms into:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
How exactly are you changing the onclick attribute of the span element?
First of all, I definately would not recommend changing an onclick event on-the-fly. It is probably better to use one function that checks the current state of what you are trying to do and executes the appropriate code.
Be sure not to "transform" your span element, including the onclick attribute using innerHTML. Chances are the DOM is still trying to reference a function that you have just removed. If updating your onclick attribute at all, do it like this:
var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };
...or, when you want to it the Prototype way:
var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach new handler
element.observe('click', function() { // do stuff });

Categories