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");
Related
I want to change a HTML+JS template behavior but i don't want to re do things which are already done. assume we have a hierarchy of elements and looks like the inner one is calling a function on it's onclick event. but when i select it on the chrome inspector console and check if it has anything for the onclick it returns null i think it's developed in a more general way or possibly on other property?
What i want is to find that function wrap it in mine and call it after doing something else.
The hierarchy is like below:
<ul> <li data-id="1234"> <div> the button </div> </li> ... </ul>
whenever the button is pushed the data-id is sent to the server via ajax.
I played a little bit with es6 and did the expected result: https://codepen.io/omgitsevan/pen/yxrVVM
but basically, the code is the following:
Javascript
document.addEventListener('click', (evt) => {
function getDataAttr(node, attrValue) {
if (!node.getAttribute(attrValue)) {
return getDataAttr(node.parentNode, attrValue)
}
console.log(node.getAttribute(attrValue))
}
getDataAttr(evt.target, 'data-id');
})
HTML
<ul>
<li data-id="1234">
<div> the button </div>
</li> ... </ul>
I hope it will work
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".data").click(function(){
var data = this.parentNode.parentNode.getAttribute("data-id");
$.ajax({
url:"url",
data:{'data':data},
type:"post",
success:function((){
});
})
});
});
</script>
</head>
<body>
<li data-id="1234"> <div> <a class="data" onclick = abc(event)>the button</a> </div>
</body>
</html>
I am really new to javascript and jquery, but I am trying to create a page that will allow the user to click on a Country name and information for that country will load in a div from a separate html file.
Else where I found this code which works nicely for this, using the .click(function) on the <a> tag:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("a").click(function(){
$j.ajax({
url: $j(this).attr("href"),
success: function(response) {
$j("#partnerContent").html(response);
}
});
return false;
});
});
Here is the basic html:
<div id="contentcontain">
<div class="partnercol1">
<div class="container">
<div id="menu" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Belgium</li>
<li>Brunei</li>
<li>Bulgaria</li>
</ul>
</div>
</div>
</div>
<div class="partnercol2">
<div id="partnerContent"></div>
</div>
However, now every <a> tag on the page (including top and bottom menus) loads their href into the div when clicked. How can I target just the div containing the state menu to work with this function?
Make the selector for the elements you're attaching the events to more restrictive:
// this selects all the anchors below the items with ID menu
$j("#menu a").click(function () {
...
});
in your html, put:
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a class="menu-item" href="partners/belgium.html">Belgium</a></li>
<li><a class="menu-item" href="partners/brunei.html">Brunei</a></li>
<li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li>
</ul>
And in your javascript
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".menu-item").click(function(){
$j.ajax({
url: $j(this).attr("href"),
success: function(response) {
$j("#partnerContent").html(response);
}
});
return false;
});
});
You're loading an entire html page, which means you're loading
<html>...</html>
and then stuffing that in its entirety into your page, that means you'll eventually have
<html>
....
<html>...</html>
...
</html>
which is NOT valid. If you're trying to replace the contents of a single <div> in your page, then either you fetch that entire page into a var and slice out the chunk you want, or have jquery fetch/insert ONLY the part you want, e.g.
$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');
Note the second #... argument in the .load() call. That tells jquery to ignore everything in the page EXCEPT for the specified element/ID. Only that ID's contents will be stuffed into #div_to_replace.
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I have kept notification button in my header.
When user click Get notified then it should replace by message Notified successfully
CODEPEN: CODEPEN
HTML
<li style="display:none" id="l1">Notified soccessfully ..
</li>
<li><a style="display:block" id="l2" href="#about">Email</a>
</li>
<li>
<div id="input-collection" class="input-group input-group-lg left-input-group">
JS
function notify()
{
alert("hi");
document.getElementById("l2").dispaly='none';
document.getElementById("input-collection").dispaly='none';
document.getElementById("l1").dispaly='block';
}
In codepen, donno what is the issue with my code.
IT should be display not dispaly and you should provide .style
function notify()
{
alert("hi");
document.getElementById("l2").style.display='none'; // Changed
document.getElementById("input-collection").style.display='none'; // Changed
document.getElementById("l1").style.display='block'; // Changed
}
Code Pen
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.