Develop Reference

Hiding specific words in HTML div without losing style/format

I want to hide specific words in an HTML div without losing format in javascript/jquery. This is what I've tried but it messes with the style/format.
HTML code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="ctl00_ctl40_g_fa7fc6e0_693d_4dde_91fd_1dbe1d7d0e76_ctl00_ListForm2_formFiller_ctl02"
class="summary">Count the number of texts:
<ul><li>Text 0</li>
<li>Text 1</li><li>Text 2</li>
<li>Text 3</li><li>Text 4</li>
<li>Text 5</li></ul>
</div>
JS code:
$(function() {
$('.summary').each(function() {
var $this = $(this);
$this.html($this.text().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
});
});
I have also created a JSFiddle here. Please try running it without JS function first and then with the JS function to understand what I mean by style/format.

You are replacing the html with only the text content changed, so you keep the text but loose all html elements. This way you can keep the html:
$this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
A nicer way of doing this is just to replace the text node content:
$('.summary').contents().first()[0].textContent='Texts:';

is this what you wanted?
$(function() {
$('.summary').each(function() {
var $this = $(this);
$this.html($this.html().replace(/\bCount \bthe \bnumber \bof \btexts\b/g, '<b>Texts:</b>'));
});
});
You should be replacing the html not the text nodes.
http://jsfiddle.net/sLa3dkdd/1/

Hide/show div in ul with javascript

Let me start by saying I know this is a duplicate, however I couldn't find a solution by looking through previous answers so I was hoping someone can explain what I'm doing wrong with this.
This is part of a menu output by a php script:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
with the following as my script as per https://stackoverflow.com/a/11842992, which should show each submenu when hovering its parent container
function showMenu(a,b) {
$(a).hover(
function(){
$(b).show();
},
function(){
$(b).hide();
})
}
Javascript and CSS being my weak suits, could someone tell me where my problem is? I feel like onMouseOver doesn't work the way I would expect it to. However I am still learning to manipulate the DOM, please bear with me, thank you!
Edited to reflect missingno's suggestions

For simple scenarios, i'd rather stay away from using JS
Heres how
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
left:-999px;
background:grey;
}
#mtk_main_menu > li:hover > div {
left:0;
}
That will do the trick
Fiddle: http://jsfiddle.net/Varinder/7pXSw/
Edit
If you really want to go the JS way - heres how:
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
display:none;
/*left:-999px;*/
background:grey;
}
#mtk_main_menu > li:hover > div {
/*left:0;*/
}
JS
function showMenu( args ) {
var arguments = args.split(",");
var submenuWrapper = arguments[1].replace(" ", "");
var $subMenuWrapper = $( "#" + submenuWrapper );
$subMenuWrapper.show();
var $menuItem = $subMenuWrapper.closest("li");
$menuItem.on("mouseout", function() {
$subMenuWrapper.hide();
$(this).off("mouseout");
});
}
Fiddle: http://jsfiddle.net/Varinder/vnwy3/1/

You are calling the event handler with a single string parameter instead of two. Try changing
showMenu('mtk_submenu_0, mtk_div_submenu_0')
into
showMenu('mtk_submenu_0', 'mtk_div_submenu_0')
Additionally, inside your script you should use are using literal strings instead of using your parameters
//This looks for an element of class "a"
$("a").hover(
//This uses the contents of the `a` variable instead:
$(a).hover(
Finally, your function is using 'mtk_submenu_0' as a jquery selector. This searches for a class instead of an id. Change the selector to add a "#" on front or change your jquery logic to not need ids (for example, you could create selectors to search for the first div and ul descendants of the current element.

By doing what you are doing, every time the onMouseOver event is triggered, you're attaching the jQuery hover event. Each time you're attaching another listener.
Instead, initialize your event on document ready:
$(function () {
$("#tk_div_submenu_0").hover(
function(){
$("#mtk_submenu_0").show();
},
function(){
$("#mtk_submenu_0").hide();
})
);
});
That will initialize it when the document is ready, and it will initialize it once.
Then just remove your onMouseOver event from the HTML.
<li class="mtk_topmenu">Manager Options ... </li>

First, you're going the long way around the problem. jQuery has a built in toggle method that performs the show/hide for you. Secondly you're putting the hover call on the child element of the item you're trying to show on hover. Here's an updated version of your code:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu(this,'mtk_div_submenu_0');">
Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
</ul>
JS:
function showMenu(a,b) {
var divStr = '#' + a.id + " div";
$(divStr).toggle();
}
I used the hover event on the LI element as it makes more sense in this case.
Here it is in a fiddle: http://jsfiddle.net/3Ecrq/

One thing I find strange about your code is that the first div you mention, mtk_submenu_0, is inside the div you are showing / hiding, mtk_div_submenu_0. Once you hide the outer div, the inner div cannot be 'hovered over', thus preventing it from being shown again.
To ensure the inner div does not get hidden, try something like this:
HTML:
<ul id="mtk_main_menu">
<li class="mtk_topmenu">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
Javascript:
$(document).ready(function() {
$('.mtk_topmenu').hover(
function() {
$('#mtk_div_submenu_0').show();
},
function() {
$('#mtk_div_submenu_0').hide();
});
});
Because of your line:
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">
I assumed you were looking to have the mtk_div_submenu_0 div show / hide whenever the text Manager Options is moused over. Hopefully this helps!

links break when containing element positioned

I have an unordered list of links like so:
<ul id="linkwrapper">
<li><a name="latestBlog"class="menuLinks"id="link1"href="#latestBlog"><img src="images/blog.png" /></a></li>
<li><a name="meetings"class="menuLinks suckit"id="link2"href="#meetings"><img src="images/meetings.png" /></a></li>
<li><a name="aboutus"class="menuLinks suckit"id="link3"href="#aboutus"><img src="images/who_we_are.png" /></a></li>
<li><a name="contact"class="menuLinks"id="link4"href="#contact"><img src="images/contact.png" ,></a></li>
</ul>
I'm using the following javascript to cancel regular link behavior and display a different div depending on which link is clicked.
<script type="text/javascript">
$(document).ready(function(){
var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs
$(document).ready(function() {
$('#link1').trigger('click');
});
$('#linkwrapper a').click(function(){
var $contentDiv = $("#" + this.id + "content");
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
return false;
});
});
</script>
This works great, until I start positioning the unordered list. When I do this much css it still works fine:
#linkwrapper {
position:absolute;
left:175px;
}
but if I add another line like so...
#linkwrapper {
position:absolute;
left:175px;
top:0px;
}
...only the last link in the is clickable. why does that one line of css break the menu?

Fix the closing tag on the last link's image: /> instead of ,>
$(document).ready inside $(document).ready looks weird, you should better move $('#link1').trigger('click'); to the end.
Everything works fine, or the problem is out of what you have described. Check this out: http://jsfiddle.net/fVE4m/

Expanding menu on click

I have a basic menu looking something like this.
<ul id="menu">
<li id="auctions">Auctions</li>
<li class="submenu">Submenu 1</li>
<li class="submenu">Submenu 2</li>
<li class="submenu">Submenu 3</li>
</ul>
I want the three submenus to be hidden until the text "Auctions" is clicked. Then they're supposed to appear, and become hidden again when "Auctions" is clicked a second time and so on. Ive tried something like this.
$(function() {
$('#auctions').click(function() {
$('#menu').animate({'height': '200'});
$('#submenu').animate({opacity : 'toggle'});
}, function () {
$('#menu').stop().animate({'height': '100'});
$('#submenu').animate({opacity : 'toggle'});
});
});
In all honesty I suck at jquery. How do I approach this?

Use jQuery's .slideToggle(), also make sure .submenu is not visible:
JAVASCRIPT:
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
CSS:
.submenu{display:none;}
DEMO: http://jsfiddle.net/dirtyd77/SLGdE/4/

why dont you use this code :
$(function() {
$('.submenu').hide();
$('#auctions').click(function() {
//$('#menu').animate({'height': '200'});
$('.submenu').toggle("slow");
});
});
apart from that you use "#submenu" and in your html its class you should use ".submenu"

Your basic structure is fine, yet i wouldn't use css(). Use slideToggle() in stead:
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});

Does this work for you?
$('#auctions').click(function(){
$("#menu, .submenu").toggle();
});

jquery add li to end of ul but last created li not recognised as last

I have the following code. On cliking the button on the last li, I can create the new li. However, once created, if I click on the latest button created, new li is created. It seems it doesn`t recognise the last created li as the last li. Can someone help on this please.
<html xmlns="http://www.w3.org/1999/xhtml" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mylist :button").click(function() {
var text = $(this).val();
if (text == "Save") {
}
});
$("#mylist li:last-child").click(function() {
$(this).parent().append('<li>' + '<input type = "textbox">' + '<input type = "button" value= "Save">' + '</li>');
});
});
</script>
<div>
<ul id="mylist">
<li id="1">1<button id="Button3">Delete</button> </li>
<li id="2">2<button id="Button2">Delete</button></li>
<li id="3">3<button id="another_entry">Save</button></li>
</ul>
<ul id="mylist2">
<li> test1 <button id="Button6">Delete</button></li>
<li> test2<button id="Button5">Delete</button> </li>
<li id="6"><button id="Button1">Delete</button></li>
</ul>
</div>

You need to use live instead of bind as bind iterates elements only once, however live creates a listener, which attaches events dynamically, even to newly created elements.
You code should conform to this sample:
$("#mylist li:last-child")
.live('click', function() {
// append element
});
tested with jQuery 1.4.0

Instead of:
$(this).parent().append('<li>'.........
Try
$("#mylist").append('<li>'.........