Develop Reference

OnMouseOver drop down not coming

onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>

use this,
<script>
$(document).ready(function(){
$('#appLink_chngpwd').hide();
$(".csrname").mouseover(function(){
$('#appLink_chngpwd').show();
});
$(".csrname").mouseleave(function(){
$('#appLink_chngpwd').hide();
});
});
</script>

In your code you have used like below.
$(".csrname li").css("display","none");
It means you are making display none for child property of span having class .csrname
At present in your code, "Change Password" is sibling element not a child.
So change your code like below.
$(".csrname + li#appLink_chngpwd").css("display","none");

error with Javascript onclick

My structure is like:
<div>
<div>
<ul>
<li id="li1" onclick="someJavascriptFunction()">......</li>
</ul>
</div>
<div>
<ul>
<li id="anotherli1">......</li>
</ul>
</div>
</div>
The javascript:
function getExecJob(execid){
<c:forEach var="exec" items="${execjobList}">
var index = '${exec.execid}';
var ele = document.getElementById("execjoblist"+index);
if('${exec.execid}'==execid){
ele.style.color='#DF013A';
<c:set var ="currentExecId" value="${exec.execid}"/>
<c:set var ="execJob" value="${exec}"/>
}else{
ele.style.color='#339';
}
</c:forEach>
}
I have change css style code in the javascript function. Now it's not only this li1, but all lis like "anotherli1" also response to click . if I click on them ,they have color change!
Could anyone please give me some suggestion about what's happening here and how can I solve it?

$(document).ready( function() {
$("li").click(function() {
//your_func(this)
$(this).css('color', 'red');
});
});
This will when you click any li. You can view demo here

In your JavaScript you have <c:forEach var="exec" items="${execjobList}"> inside your function.
So, in the function, it adds code for each <li> not just the one you clicked on. Each <li> will be set to either #DF013A or #339.

jquery variable?

I'm a jQuery novice, I have the following jQuery written to show a div when a specific link on a map is shown:
<div id="locationmap">
<a class="linkhide" id="link1" href="#">Occupier 1</a>
<a class="linkhide" id="link2" href="#">Occupier 2</a>
<a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>
<div id="mapdetail">
<div class="hideme" id="local1" style="display:none;">
<p>Some content one</p>
</div>
<div class="hideme" id="local2" style="display:none;">
<p>Some content two</p>
</div>
<div class="hideme" id="local3" style="display:none;">
<p>Some content three</p>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$("#link1").mouseover(function() { $("#local1").fadeIn(500); });
$("#link2").mouseover(function() { $("#local2").fadeIn(500); });
$("#link3").mouseover(function() { $("#local3").fadeIn(500); });
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>
However, as you can see the .fadeIn(500) is being repeated for each link. How would I make this a variable once and call it for each line? This would save me repeating the same piece of code 30 times or so for each link.
I have a JSfiddle here: http://jsfiddle.net/karlgoldstraw/4NRY7/
Thanks.

function mouseOver(localId) {
return function() { $("#local" + localId).fadeIn(500); }
}
$("#link1").mouseover(mouseOver(1));

you could use a data-attribute to make the connection between the links and the div simpler,,,
<a data-id="2"...
$('a.linkhide').mouseover(function() {
var el = '#local' + $(this).data('id');
$(el).fadeIn(500);
});

Because i don't see it yet i thought i would add my answer here. Though i realize that the above answers are perfectly viable my solution lets the link tell the function what the content to show is called. By adding a javascript function that will inspect the hash value of the link you can use that as a selector to do your fadein's. This would also give the benefit of degrading better as the hash link would still put the user on the correct content in the event javascript is disabled.
JavaScript
var fade = function(){
var contentSelector = this.hash;
$(contentSelector).fadeIn(500);
};
Then to declare the mouseovers:
$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);
Or you could even do it like this:
$(".linkhide").mouseover(fade);
Then on the HTML
<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>
etc...
JSFiddle - http://jsfiddle.net/4NRY7/11/

This is one way that doesn't involve changing the HTML. As you can probably tell, changing the id of the link could make this much more efficient.
$(".linkhide").mouseover(function() {
var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
var contentBox =$(this).attr('id').replace('link','');
$("#content" + linkDivMap[contentBox] ).fadeIn(500);
});
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });

Replacement for your current script.
This allows you to use a single dynamic function, and a single jQuery.mouseover() call, for all .linkhide elements, to avoid the duplication of code that still results from #MikeThomsen's answer.
$( document ).ready( function () {
$( ".linkhide" ).mouseover( function ( event ) {
var item_id = this.id.match( /([0-9]+)$/ )[1];
$( "#local" + item_id ).fadeIn( 500 );
} );
$( ".linkhide" ).mouseout( function () {
$( ".hideme" ).css( 'display', 'none' );
} );
} );

Jquery hovercard

I'm using http://designwithpc.com/Plugins/Hovercard , but I can't find out how to declare a var on hovercard. Every job-desc has his own ID and it should be call when hovering labels. I hope I explained well.
<li id="577" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text</label></h3>
</span>
<span class="job-descr" id="hiden-577">TextTextTextTextText</span>
</li>
<li id="588" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text2</label></h3>
</span>
<span class="job-descr" id="hiden-588">Text2Text2Text2Text2Text</span>
</li>
Jquery code:
$('.labeldesc').hovercard({
var idhover=$(this).closest('.item').attr('id');
detailsHTML:$("#hiden-" + idhover).html()
});

Give this a shot: http://jsfiddle.net/X2q9z/
$('.labeldesc').hovercard({
onHoverIn: function() {
var txt = $($(this).parents('li')[0]).find('.job-descr').html();
$(this).find('.hover_text').html(txt);
},
detailsHTML: '<div class="hover_text"></div>'
});

First of all your jQuery Code has issue. You cannot use var inside calling hovercard function.
I update it as you wanted. Please take a loot at this: http://jsfiddle.net/cnCmN/
$('.labeldesc').each(function(){
$(this).hovercard({
detailsHTML: $("#hiden-"+$(this).closest('.item').attr('id')).html()
});
});

I am having a few problems trying to create a jquery live search function for basic data set?

I am designing a simple jquery live search function within a widget on a site i'm developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:
<ul>
<li>Searchable Item 1</li>
<li>Searchable Item 2</li>
etc
I am using a list like this:
<ul>
<li>
<a href="#">
<div class="something>
<img src="something.jpg">
<p>Searchable Item 1</p>
</div>
</a>
</li>
etc.
As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:
//includes im using
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<script type="text/javascript" src="js/quicksilver.js"></script>
<script type="text/javascript" src="js/jquery.livesearch.js"></script>
//document ready function
$(document).ready(function() {
$('#q').liveUpdate('#share_list').fo…
});
//actual search text input field
<input class="textInput" name="q" id="q" type="text" />
//part of the <ul> that is being searched
<ul id="share_list">
<li>
<a href="#">
<div class="element"><img src="images/social/propellercom_icon.jpg… />
<p>propeller</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/diggcom_icon.jpg" />
<p>Digg</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/delicios_icon.jpg" />
<p>delicious</p>
</div>
</a>
</li>
</ul>
also here is the jquery.livesearch.js file I am using
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
I believe the problem lies here:
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:
return this.children('p').innerHTML but it doesn't work, I'm ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they're like foreign languages to me!

In the jquery.livesearch.js file I believe you can replace this line:
var rows = list.children('li'),
with:
var rows = list.children('li').find('p'),
This should make it so the livesearch plugin will only search the paragraph tags in your list.
You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:
Change:
rows.show();//1
rows.hide();//2
jQuery(rows[ this[1] ]).show();//3
To:
rows.parents('li:first').show();//1
rows.parents('li:first').hide();//2
jQuery(rows[ this[1] ]).parents('li').show();//3