How can I dynamically add a navbar to my jquery mobile application? From javascript I want to be able to add the navbar elements to the dom and then have them parsed.
I found that I could add the element to the DOM however I wanted, and then call .navbar() on the element and it would perform the navbar parsing.
For instance I could use
var myNavBar = $('div', {
'data-role':'navbar',
'html':'<ul><li><a id="some">First</a></li></ul>'
}).appendTo(myPage).navbar();
Use this code after appending HTML code using DOM:
$("div[data-role='navbar']").navbar();
Related
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'
});
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...
I have an iFrame and a div with content in it. I want to delete the div via JavaScript, is that possible and how could I do that?
I don't want to just not display it (eg. display: none via CSS) but remove it from the HTML of the site. I have basic knowledge of JavaScript but don't have any experience working with an iFrame.
You can use
$("#iFrameId").contents().find("#yourDiv").empty();
It is better to use remove()
example: $("#iFrameId").contents().find("#yourDiv").remove();
Explanation
empty() will remove all the contents of the selection.
remove() will remove the selection and its contents and all the event handlers associated with it.
For reference:
http://api.jquery.com/remove/
http://api.jquery.com/empty/
You can try something like:-
frame.removeChild(//pass div id here);
I am using a plugin named anchorific.js to create named anchors and corresponding menu on the fly from h3 tags.
To get it working in a .net page I had to move the div containing the menu so it was the last item on the page.
Now I want to move the div elsewhere, but running .append() after the anchorific code won't work. What can I do to move this element?
To make dom manipulations after the dom is loaded simply use $(document).ready(function() {}) or $(window).load(function() {}) in jQuery or if you prefer window.onload = function() {} in vanilla javascript.
For each checkbox on the web page, I replace it with a slider that I borrowed from jsfiddle.net/gnQUe/170/
This is done by going through the elements when the document is loaded.
Now the problem is that when more content is loaded via ajax, the new checkboxes are not transformed.
To solve the problem, I used AjaxComplete event to go through all the elements again and replace the checkboxes with sliders.
Now the problem happens that elements that were already replaced, get two sliders. To avoid that I check if the checkbox is hidden and next element is div of class "slider-frame", then don't process the re-process the element.
But I have a lot of other such controls as well, and I am presume I am not the only one that has this problem. Is there another easy way around it?
There exists jQuery live/on( http://api.jquery.com/on/ ) event but it requires an event as an argument? whereas I would like to change the look of my controls when they are rendered.
Another example of the same problem is to extend some controls that are loaded via ajax with jQuerys autocomplete plugin.
Is there a better way to accomplish this other than changing some attributes on the element.
To summarize, on document load I would like to process every element in DOM, but when more elements are loaded via ajax then I want to change only the new elements.
I would assume that when the element's are transformed into a slider, a class is added to them. So just add a not clause.
$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});
So in the case of your code do something like this
$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
$(this).addClass('on').html('YES');
$('#slider').val(true);
},function(){
$(this).removeClass('on').html('NO');
$('#slider').val(false);
});
Since you said you do not want to add anything else, how about you change the toggle function to click.
$(document).on("click", ".slider-button", function(){
var elem = $(this);
elem.toggleClass("on");
var state = elem.hasClass("on");
elem.text(state?"YES":"NO");
elem.parent().next().val(state);
});
Running fiddle: http://jsfiddle.net/d9uFs/