We Keep Coding

hide child tag inside li tag

I am a novice in html/js design. I have searched my specific requirement many ways, but couldn't find a solution. So, your help with a solution via jsfiddle or any example of syntax will be extremely helpful!!!
I have a li element like this in two different div's:
<div id="1">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
As can be seen, li tag comprises of different sub tags(called elements??) like strong, em, var. How do I hide var tag text in first div? i.e., to make it a more generic, how do I only hide(not delete) text within a sub-tag in a li tag ? Also, the text needs to be when the page loads, and not by a button click.
Thank you!

How do I hide var tag text in first div?
simply try this
$("#1 li var").hide();
to make it a more generic, how do I only hide(not delete) text within
a sub-tag in a li tag ?
$("li").children().hide(); //$("li").children("var").hide(); to hide only var
or
$("li").find("*").hide();

Like this one?
$('#1 li').find('var').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="1">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>

Remove style attribute from all descendants in jquery

I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.
The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;">
<div class="index">
Participate
</div>
<div class="index" style="margin-right: 80px;">
News
</div>
<div class="index active" style="margin-left: 80px;">
<a class="active" href="/about/">About</a>
</div>
<div class="external">
Collection
</div>
<div class="index">
Contact
</div>
</nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
' + originalNavItems + '
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?

You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');

You can use
var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");
Then you can use .append() to add that html elements
Fiddle

You can clone into an imaginary div and then fetch the mainNavigation also. You can also remove the style attributes along with that. Hope this works for you...
var temp = $('<div />').html($('#mainNavigation').clone());
temp.find('*').removeAttr('style');
originalNavItems = temp.html();

The nav is cloned but the html() function only returns the HTML for the contents and that's why it disappears. You can avoid some string manipulation by adding the cloned element directly before a target element.
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
$('#mainNavigation').clone()
.find('[style]').removeAttr('style').end()
.insertBefore('#newScrolledNav .newItem');
In the previous case find('[style]') matches elements that have a style attribute.

I'm new to Stack Overflow (and js in general), so this might be really bad ettiquette, but I seem to have accidentally fixed it myself trying to debug my implementation of the first upvoted answer that #Anoop Joshi gave above. Please comment and let me know if it would have been better to just edit my question!
I decided to break the process down into separate steps – similar to #Kiran Reddy's response actually, but I hadn't got to trying his yet.
I tried:
var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.
with a console.log(styledHTML) etc under each line to check what I had at each stage – and it worked! (The code did, console.log didn't?)
I was just doing this to try and log the value of the variables at each stage, but whatever I did fixed it…
Now I need to figure out why I can't even make console.log(variable); work :-/

Try this code
$('#mainNavigation').children().removeAttr('style');
Hope this will help you.

JQuery - setting an "active" class for image-scroll

I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});

The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.

Html rendering closing tags automatically

I am working on a Native mobile application CMS system using client-side technology(javascript via JQuery for the most part) and have implmented a templating system similar to that of ASP.NET.
So suppose I have a navigation control which has a starttemplate, endtemplate and itemtemplate as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</ul>
</div>
</div>
My problem is the browser as it laods seems to decide to want to fix the html so that the tags are closed "properly" as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</ul>
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</div>
</div>
I've tried some workaround and quick hacks to no avail..
I have tried replacing the "<" ">" with certain characters and then replacing them after load but the problem still occurs.

Your code is not valid html. You can't interleave tags (open it in one place and close it in a completely different place). Tags have to be properly nested.
Valid:
<p>
<ul>
</ul>
</p>
Invalid:
<p>
<ul>
</p>
</ul>
Note that you can't properly indent the second one without it looking "off". Please make sure your html is correct first, then the browser will behave properly.
-update- since you want client-side templating, what you don't want is the (invalid) html to be parsed as html. However, it's obviously also not valid xml, which is what you might want.
What you could do is wrap the content of the secions as CDATA.
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate"><![CDATA[
<ul id="Menu">
]]></div>
<div data-type="itemtemplate"><![CDATA[
<li>[[Text]]</li>
]]></div>
<div data-type="endtemplate" ><![CDATA[
</ul>
]]></div>
</div>
Now if you would interpret that as xml, the parts within the templates are considered text rather than markup.

Basically, you're asking for a way to force a browser to display malformed, messy tag-soup. Thank God most browsers don't just blindly render that kind of code, because the results would be unbearable and make your page unintelligible all together.
That said, if you view the raw page source, you'll probably see the un-corrected, raw markup. But because the browser can't really render it, the engine steps up to the plate and does its best.
But please, don't waste your time finding a way around this, it's just a feature to help you, not to annoy you. Also: HTML5 has a lot more rules about what is allowed and what is not, and how the browser is expected to deal with invalid markup (in your code: <div><ul></div> is deemed invalid, for example). If you feel up to it, you can look at the W3C specifications for more info on the subject.

You can't have <div> elements as children of a <ul> element.
<ul>s only accept <li> tags as children. Specification
Also, it appears you're nesting the tags incorrectly, here:
<div data-type="starttemplate">
<ul id="Menu">
</div>
You can't close that <div> if the <ul> is still open. That's why the <ul> is prematurely closed.

Instead of having tags such as I used keywords to represent the < and > and then render all the correct html using the templating system and replace those keywords back to , and > and add it to the document afterwards. Annoying syntax in my template tags, but it works the way I need it to.

How to show the description of the elements that are listed on the sidebar on the body using show & hide javascript or JQuery?

I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?

You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>

I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).

Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)