We Keep Coding

Rendering HTML Within <script> Tag

I'm injecting some HTML into my page using this code:
<script>
window.onload = function() {
addHeader();
};
</script>
<script>function addHeader(){$("#header-nav-studio").after('<li id="header-nav-products" class="has-subnav"> Pricing  <span class="arrow-down"></span> <div class="header-subnav"> <ul> <li> Apparel Pricing</li><li> Sticker Pricing</li><li> Pinback Button Pricing</li></ul> </div></li>')}</script>
It works, loads everything directly after the "#header-nav-studio" DIV. Only problem is, it's not rendering the HTML within the script properly. It's supposed to generate a "Pricing" dropdown menu. Instead it only works as a link. You can see the example HERE
Is there a way to load the html properly within the script tag or load it from an external source? Thanks so much!

Looks like you need to bind mouseover event on DOM element you have dynamically added that triggers your submenu appearance.
On li element with class has-subnav, there is mouseover event listener, that toggles css class active on it.
You need to change your javascript, so the event is attached even for dynamically created elements. You can use $.on() on parent selector to attach handler.
$('body').on('mouseover', '.has-subnav', function() {
$(this).addClass('.active');
});
//and to remove class on mouseout
$('body').on('mouseover', '.has-subnav', function() {
$(this).removeClass('.active');
});

In the example you shared, the pricing menu item has id same as products menu item. Two nodes having same id can have unexpected results. I would say change the id first to say 'header-nav-pricing' and try your code again.

Jquery issue on css

I'm using a jQuery function to add a class on li tag when it is clicked. The problem is that the class is added for a moment and after disappear. Maybe , 'cause I'm working into joomla there are another jquery function or another php script thet modify li tag after my jquery function?
This is my website,http://debatoversigt.dk/ and if you click on left menu you can see background color appear for an instant and after disappear.
This is my jQuery:
jQuery( document ).ready(function() {
jQuery(".art-block li").click(function(){
jQuery(".selected").removeClass("selected");
jQuery(this).addClass("selected");
});
and css:
.selected{
background-color:red!important;
}

The CSS is removed because the page refreshes. You will need to put code into your page that looks at the current page's URL and applies your selected CSS style to the appropriate menu item. Doing this will still let it function as a menu item but also remain selected on a page load.
One method to consider is to leave the code you have in place already and add this to the page:
jQuery( document ).ready(function() {
var windowloc = window.location.pathname;
jQuery(".art-block li").each(function() {
if(jQuery(this).attr("href")==windowloc) {
jquery(this).addClass("selected");
}
});
});
Another method to use (which is more work but also more robust) is to add a class to the body tag of the page so that it corresponds with a menu item. That would actually be a cleaner method as you can then highlight menu items for child pages and not just for the top level sections. You would need to incorporate a unique CSS class with each list item so that you can compare them on page load. I found a tutorial on adding body classes to Joomla that may be helpful for this approach.
You would use something like this JavaScript code to highlight the menu item once you had your CSS classes in place (both on the menu li items and the body class):
jQuery( document ).ready(function() {
jQuery( document ).ready(function() {
var bodyclass = jQuery("body").attr("class");
jQuery(".art-block li").each(function() {
if(jQuery(this).hasClass(bodyclass)) {
jQuery(this).addClass("selected");
}
});
});
});
Either of these methods would work on your current website, but pick what you feel makes the most sense for your website now and going forward.

In case you want to keep that page refresh, but have the proper menu item highlighted, you need to figure out a way to select the proper menu item. For example, you can compare the current url with each menu items' href attribute, and if they match highlight that item.
The other option is to use AJAX to update the content of the page. From your comments, I assume that's not what you want, but anyway, to do that, you need to prevent the default anchor behavior and load the content. That way you won't have to worry about the disappearing highlight and your code will work perfectly (but you'll run into other issues typical for one-page AJAX websites like URL states, browser history buttons, etc...).

using jQuery to change, only the elements that were loaded via ajax

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/

Smooth slideup/down after creating DOM elements

I have a larga amount of xml data in $(db). When a certain element is clicked, a function traverses through $(db) and creates new DOM elements inside a hidden div. How can I then smoothly slide down the div?
$('li').live('click', function(){
// many $('div.content').append(....
$('div.content').slideDown();
});
In the above example the div.content becomes visible, however without the slide effect. If I, instead of creating DOM elements load an html document with the vary same content, the slide effect works properly. I think that when creating a lot of new DOM elements the browser jams, and then cannot perform a smooth animation. How could I sort this problem out? Would it be possible to create all the DOM elements inside a variable, and then display it as it would happen when you use .load()?

If you can select the newly created element from the DOM, this method will work nicely (needs jQuery). You will simply show the elements you created and then scroll the browser into view.
function scrollTo(element){
$("html, body").animate({
scrollTop: $(element).position().top
});
}

How to dynamically add a navbar to a jQuery Mobile application

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();