I just want to hide div if label which div contains set to 0.
here is my design:
<div id="pnltickethistory" class="thumb">
<img alt="" src="../images/emblem-library_64.png" name="ibtninquiryhistory" width="64" height="64" />
<br/>
<asp:LinkButton ID="lbut_inquiry_histrory" runat="server" onclick="lbut_inquiry_histrory_Click">Enquiry History</asp:LinkButton>
<div class="noti_bubble" id="noti_bubble1">
<asp:Label ID="lbl_inquiry_count" runat="server"></asp:Label>
</div>
</div>
-----------------------------------------Updated---------------------------------------------
and this is my java script code:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var g1 = $('#lbl_inquiry_count').val();
if(g1=='0')
{
$('#noti_bubble1').hide();
}
var g2 = $('#lbl_query_count').val();
if(g2=='0')
{
$('#noti_bubble2').hide();
}
var g3 = $('#lbl_post_count').val();
if(g2=='0')
{
$('#noti_bubble3').hide();
}
});
</script>
this is my css:
.thumb
{
position:relative;
float:left;
width:110px;
height:90px;
padding:5px 5px 5px 5px;
margin-right:30px;
margin-bottom:20px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
background-color:none;
border:#67849C solid 2px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.thumb:hover
{
width:110px;
height:90px;
background-color:#E7EBF3;
border:#67849C solid 2px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 5px 5px 5px 5px;
}
.thumb img
{
filter:alpha(opacity=100);
opacity:100;
}
.thumb:hover img
{
filter:alpha(opacity=40);
opacity:0.7;
}
.noti_bubble {
position:absolute;
top: -6px;
right:-6px;
padding:1px 5px 1px 5px;
background-color:red;
color:white;
font-weight:bold;
font-size:10pt;
border-radius:30px;
box-shadow:1px 1px 1px gray;
}
how to hide div using jquery
Assuming noti_bubble3 is class name of div to hide,
Simply,
$('.noti_bubble3').css('display', 'none'); // hide elements with class .noti_bubble3
or,
$('.noti_bubble3').toggle();
or
$('.noti_bubble3').hide();
For reference:
.css( property ) // will return property value
.css( property, value ) // will set property value
Edit as per comment,
$('#noti_bubble3').css('display', 'none'); // hide element with ID noti_bubble3
or,
$('#noti_bubble3').hide();
or,
$('#noti_bubble3').toggle();
Reference .css() .hide() .toggle()
Instead of .css('none'), do .css("display","none").
Then read up on jQuery .css().
use could use $('...').hide();
To hide something using jquery, you can use the built-in hide method :
$('your_selector').hide()
Try fadeOut() or hide() methods. For example:
$('#my_div').hide();
or
$('#my_div').fadeOut();
Assume that Label is set to 0 when it has text content '0'. Then you may use this code:
$('.noti_bubble').each(function() {
var el = $(this).find('Label');
if (!el.length) return true;
var v = el.text();
if (v == '0') $(this).hide();
});
Please try this. Selects elements that have the specified attribute with a value beginning exactly with a given string.
$("[id^= 'noti_bubble']").hide();
ok i got solution just add runat="server" to div which want to hide and you can simply use this div from code behind and make Visible = false;
Related
In javascript I have a variable which contains some value which i get from JSON.
var a =recipe[0].step[1].processingTime;//here processing time is stored in var a
I want to display this value by showing a description box, when I hover my mouse over a small div id in HTML.
<tr>
<td>Recipe 0</td>
<td>
<div id="p1"><div>
</td>
</tr>
How to do that? Can anyone please show me a easy solution.
If you only want the simple native html tooltip you can just set the elements title atrribute. For example the ones that get shown when you hover over the SO voting arrows
document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);
Demo
var text = "13ms";
document.getElementById("p1").setAttribute("title",text);
#p1 {
width:80px;
height:80px;
background:#323232;
}
<div id="p1"></div>
If however you are wanting a fancier one, you can do this with a little javascript and using css :hover, :after, attr css function, and the content property.
Give your div (or whatever element) a css class like below:
.withTooltip:hover:after {
content:attr(data-tooltip);
display:block;
padding:10px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
}
:hover will cause the style to applied only when the element is
hovered over.
:after will create a pseudo-element
conent you can use to set the text that the pseudo-element will display
attr will take the passed attribute name and get the value of that
attribute
Then use javascript to set the attribute to your saved text (in this case using data-tooltip)
document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);
Demo
var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
elements[i].dataset.tooltip = someData[i];
}
.box {
width:50px;
height:50px;
background:#86DDFF;
margin:10px;
position:relative;
display:inline-block;
}
.withTooltip:after {
content:attr(data-tooltip);
display:block;
padding:10px;
position:absolute;
right:-40px;
top:0px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
opacity:0;
transition:all 0.3s;
z-index:100;
pointer-events:none;
}
.withTooltip:hover:after {
opacity:1;
}
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
Here's a vanilla javascript version:
var a = "something to show";
function showProcTime(elem) {
elem.addEventListener("mouseout", clearProcTime);
elem.innerHTML = '<div class="popupBox">' + a + '</div>';
elem.style.backgroundColor = "#EFEFEF";
}
function clearProcTime(e) {
var elem = e.target;
elem.removeEventListener("mouseout", clearProcTime);
elem.innerHTML = "";
elem.style.backgroundColor = "#CCCCCC";
}
.popupBox {
display: block;
width: 200px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
background-color: #EFEFEF;
border: 1px solid;
padding: 10px;
}
<div id="p1" style="background-color:#CCCCCC;display:inline-block;width:200px;height:20px;" onMouseOver='showProcTime(this)'>roll over me
<div>
You could use jQuery:
var a =recipe[0].step[1].processingTime;
$('#p1').mouseenter(function(){
$(this).html(a)
}).mouseout(function(){
$(this).html('');
});
Have you tried jquery hover method? http://www.w3schools.com/jquery/event_hover.asp
and if you are using simple javascript try this: http://www.w3schools.com/jsref/event_onmouseover.asp
I think this is simple:
<html>
<script>
var a = 'the processing time you got from json';
function displayTitle(e){
e.title = a;
}
</script>
<body>
<table border>
<tr>
<td>Recipe 0</td>
<td onMouseOver='displayTitle(this);'>
<div id="p1"><div>
</td>
</table>
</body>
Here's my fiddle demo.
Is there any javascript code to keep changing the 'Z' when hover ?
For eg. when i hover over the Z, it disappears and E takes its position from the right,and E disappears to the left and P takes its place from the right similarly this process continues to form the word Zephyr.
and when the user moves the pointer away. it should come back to Z .
.initials {
position:absolute;
background:{color:main color};
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
margin-left:20px;
font-size:20px;
letter-spacing:5px;
box-shadow:0px 2px 3px rgba(0,0,0,.15)
}
Take look to the code below. Hope this will help you. To increase/decrease speed of animation change the animate function's third parameter to your time. Here time is in ms.
$('.initials').mouseenter(function(){
for(var i=0; i<5; i++){
$('.letter:first').delay(500).animate({
marginLeft: '-=' + '70'
}, 300);
}
});
$('.initials').mouseleave(function(){
$('.letter:first').animate({
marginLeft: '0'
}, 1500);
});
.initials {
position:absolute;
background:{color:main color};
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
font-size:20px;
letter-spacing:5px;
box-shadow:0px 2px 3px rgba(0,0,0,.15);
overflow: hidden;
white-space: nowrap;
}
.letter{
width:60px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="initials">
<div class="letter">Z</div>
<div class="letter">e</div>
<div class="letter">p</div>
<div class="letter">h</div>
<div class="letter">y</div>
<div class="letter">r</div>
</div>
JS Fiddle: http://jsfiddle.net/63utadgw/16/
It is possible using CSS Animation. You can see this How to move text using CSS animation?.
No need to use JavaScript
I am trying to create a drop-down menu for a site that i am working on, and I am having problems with hiding and showing the drop down with the code that I have been using.
Basically, I need this:
The Collections
to read in the browser like:
The Collections
or display
The Collections
Code:
<html>
<head>
<title>Menu Test</title>
<!-- Begin css library -->
<style type="text/css">
html {
overflow-y: scroll;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #fff;
color: #444;
margin: 0px;
padding: 0px;
}
/* Begin top bar
*************************/
#top-bar {
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
font-family: GillSansMTStd-Book;
}
#top-bar-content {
position: relative;
height: 94px;
margin: 0 auto;
width: 1025px;
text-align: "right";
}
#top-bar .wrap {
padding-left: 33px;
padding-right: 33px;
}
#top-bar .links {
float: right;
line-height: 94px;
}
#top-bar a {
outline:0;
}
#top-bar .links a {
display: inline-block;
color: #b9afa3;
font-size: 14px;
font-weight: normal;
letter-spacing: .8px;
text-decoration: none;
margin-left: 30px;
text-transform: uppercase;
}
#top-bar .links a:hover,
#top-bar .links a.active {
color: #746758;
background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;
}
#top-bar .collections {
display: none;
background-color: #695d4f;
color: #fff;
position: absolute;
top: 94px;
width: 340px;
text-align: center;
margin-left: 80px;
padding-top: 10px;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
z-index: 5;
}
#top-bar .collections a{
color:#fff;
display:block;
line-height:26px;
padding:10px 20px;
margin:0;
background-image:none;
text-transform:capitalize;
font-size:16px;
}
#top-bar .collections a.the-ardmore-collection {
font-size:14px;
}
#top-bar .collections a:hover,
#top-bar .collections a.active {
background-color:#fff;
color:#695d4f;
background-image:none;
}
</style>
<!-- End css library -->
<!-- Begin jquery library -->
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'block';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<!-- End jquery library -->
</head>
<body>
<div id="top-bar">
<div id="top-bar-content">
<div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div>
<div>
</body>
</html>
I personally think it is better to use the :hover CSS property for menus. It is a lot easier to implement but you might have problems on mobile devices. https://developer.mozilla.org/fr/docs/Web/CSS/:hover
However, if you really want it on the onclick event, you will need to add or bind your event. Here is the jQuery documentation for it: http://api.jquery.com/bind/
once you will have bind the event, you will have to use your function's "event" parameter to get which element you clicked on and then show the right menu.
The problem:
You have no handle on the element you are trying to change inside your function. This is because you are using getElementById(), but the collections div has no id attribute defined.
You are referencing the element whose display you wish to toggle inconsistently. Sometimes you are using document.getElementById(shID+"-show"), and other times you are simply using document.getElementById(shID).
There is a logic error in your if statement; the condition in if (document.getElementById(shID+'-show').style.display != 'none') should check whether the style IS set to none, if so we want to change the style to block, and vice versa.
The Solution
Add an id attribute to the collections div like so:
<div id = "collections" class = "collections">
Inside your showID function replace all instances of document.getElementById(shID+"-show") with document.getElementById(shID). In fact, an even cleaner way to do this would be to only call the function once and assign the result to a variable.
Change the condition in your second if statement to check if the display IS equal to none.
With all the changes mentioned, your final function will look something like this:
function showHide(shID) {
var el = document.getElementById(shID);
if (el) {
if (el.style.display === 'none' || el.style.display =='') {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
}
You may notice I added an or in the if statement. This is because for some reason the initial value of el.style.display (before it is set using javascript in the function) is ''. Without this or condition it would take two clicks to display the menu the first time around.
The Multiple menu solution:
Multiple menus expands the showHide from one to two lines of code.
Note: The basics are documented in another Answer to this post that was posted prior to this one.
This time vs. the previous single method we save the divs to an array of variables. It is important this array is defined globally outside of any function.
This code is test and works well.
The initialization code:
Create the arrays
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
The initialization in now in an init function. Not required but is more reliable. This way it will never execute before page load.
window.onload = init;
The init just get the showHide divs for the first time.
Then hides them all.
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
I have added a hide all function. It is easier and quicker to hide all menus when another is displayed. You do not want two menus open at the same time. You could track the open menu and specifically close that one, but why bother?
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
Wrapping it up:
I altered some of your HTML for test and demo purposes.
HTML
Art Into Design
The Collections
Contact Us
Newsletter
<div id="d2"class="collections" >
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
</div>
<div id="d3"class="collections">
Hand bags
Scatter Cushions
Batonka Stools
</div>
<div id="d4"class="collections">
Tablecloths
Place Mats
Napkins
Table Runners
</div>
</div>
</div>
</div><div>
JavaScript
<script language="javascript" type="text/javascript">
function showHide(id) {
hideAll();
div[id].style.display=toggle[div[id].style.display];
}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
window.onload = init;
</script></body></html>
Very simple one line of code to execute to show hide. Just a few lines to set up.
This code is tested and works well. This is for just one menu but can easily to expand to multiple. See my other Answer for multiple menus (added after this one)
Setup code is run one time when the page loads.
The setup:
Create an array to do the toggle. This eliminates the if else.
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
Read the "collections div into a variable. Read once, never again.
var div = document.getElementById('d1');
The initialize the div so the DOM holds the display:none. Otherwise the first read will be null.
div.style.display='none';
Then the showHide function
function showHide(id) {div.style.display=toggle[div.style.display];}
The div.style.display within the toggle array toggle[div.style.display] wil either be block or none. Which ever, toggle will return the opposite. The sames as if it were toggle['block'] which returns 'none' which get assigned to the collections div.
Note:
The JS code should be located just before the closing body tag </body>. This way it will not be parsed until the HTML is all loaded.
Also it is very important to use a valid DOC Type. If not the Browser has to guess and may guess wrong. Slows own page load time.
<!DOCTYPE html>
<html lang="en">
The JavaScript code:
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Also way too much white space. This could significantly increase your transmission time. Most should be compressed as your pages should be gzipped.
<!DOCTYPE html>
<html lang="en"><head><title>Menu Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
html {overflow-y: scroll;margin: 0; : 0;font-family: sans-serif;}
body {background-color: #fff;color: #444;margin: 0px; : 0px;}
/* Begin top bar *************************/
#top-bar {-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);font-family: GillSansMTStd-Book;}
#top-bar-content {position: relative;height: 94px;margin: 0 auto;width: 1025px;text-align: "right";}
#top-bar .wrap { -left: 33px; -right: 33px;}
#top-bar .links {float: right;line-height: 94px;}
#top-bar a {outline:0; }
#top-bar .links a {display: inline-block;color: #b9afa3;font-size: 14px;font-weight: normal;letter-spacing: .8px;text-decoration: none;margin-left: 30px;text-transform: uppercase;}
#top-bar .links a:hover,#top-bar .links a.active {color: #746758;background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;}
#top-bar .collections {display: none;background-color: #695d4f;color: #fff;position: absolute;top: 94px;width: 340px;text-align: center;margin-left: 80px; -top: 10px;-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);z-index: 5;}
#top-bar .collections a{ color:#fff; display:block; line-height:26px; :10px 20px; margin:0; background-image:none; text-transform:capitalize; font-size:16px;}
#top-bar .collections a.the-ardmore-collection { font-size:14px;}
#top-bar .collections a:hover,#top-bar .collections a.active { background-color:#fff; color:#695d4f; background-image:none;}
</style></head><body>
<div id="top-bar">
<div id="top-bar-content"><div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div id="d1"class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Note: The CDATA is to isolate the JS from HTML. Without the CDATA the JS will sometimes cause HTML errors when running the W3C HTML Markup Validator. It is a recommended best practice.
The CDATA tells the Browser it is not HTML. The format is
<![CDATA[ data goes here ]]>
The reason it has the two slashes is comment out the CDATA tags from the JS parser but still recognized by the HTML parser.
I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.
.left,
.right {
margin: 10px;
float: left;
border: 1px solid red;
height: 60px;
width: 60px
}
.left:hover,
.right:hover {
border: 1px solid blue;
}
.center {
float: left;
height: 60px;
width: 160px
}
.center .left1,
.center .right1 {
margin: 10px;
float: left;
border: 1px solid green;
height: 60px;
width: 58px;
display: none;
}
<div class="left">
Hello
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
<div class="right">
Hello2
</div>
When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.
You can use style property for this. For example, if you want to change border -
document.elm.style.border = "3px solid #FF0000";
similarly for color -
document.getElementById("p2").style.color="blue";
Best thing is you define a class and do this -
document.getElementById("p2").className = "classname";
(Cross Browser artifacts must be considered accordingly).
// select element from DOM using *const*
const sample = document.getElementById("myid"); // using CONST
// or you can use *var*
var sample = document.getElementById("myid"); // using VAR
// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED
Use document.getElementsByClassName('className').style = your_style.
var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";
Use single quotes for JS strings contained within an html attribute's double quotes
Example
<div class="somelclass"></div>
then document.getElementsByClassName('someclass').style = "NewclassName";
<div class='someclass'></div>
then document.getElementsByClassName("someclass").style = "NewclassName";
This is personal experience.
Consider the following example:
If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.
document.getElementById("ele_id").style.color="blue";
But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};
See below:
const ele=document.getElementById("ele_id");
const custom_style={
display: "block",
color: "red"
}
//Object.assign():
Object.assign(ele.style,custum_style);
Spread operator works similarly, just the syntax is a little different.
Just for the info, this can be done with CSS only with just minor HTML and CSS changes
HTML:
<div class="left">
Hello
</div>
<div class="right">
Hello2
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
CSS:
.left, .right{
margin:10px;
float:left;
border:1px solid red;
height:60px;
width:60px
}
.left:hover, .right:hover{
border:1px solid blue;
}
.right{
float :right;
}
.center{
float:left;
height:60px;
width:160px
}
.center .left1, .center .right1{
margin:10px;
float:left;
border:1px solid green;
height:60px;
width:58px;
display:none;
}
.left:hover ~ .center .left1 {
display:block;
}
.right:hover ~ .center .right1 {
display:block;
}
and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/
This is really easy using jQuery.
For instance:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
I've update your fiddle:
http://jsfiddle.net/TqDe9/2/
You can do so using jQuery like this.
$('.left, .right').on('mouseenter', function(e) {
if ($(this).attr('class') == 'left1') {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
} else if ($(this).attr('class') == 'left1') {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
}
})
or you can use it like this
for first requirement
$('.left').on('mouseenter', function(e) {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
for second requirement
$('.right').on('mouseenter', function(e) {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
I am trying to change a list item when the user clicks the selected class is changed to the clicked item. I have this code:
$(function() {
$("a.product-page li").click(function(){
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
});
});
However the removeClass works however the addClass does not.
Here is the Site.
HTML:
<ul id="options">
<span></span><li>Summary</li>
<span></span><li>Specs</li>
<span></span><li>Media</li>
<span></span><li>Reviews</li>
</ul>
CSS:
ul#options {
margin-left:0px;
}
ul#options li{
list-style:none;
padding: 10px 20px;
background: #CCC;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
}
ul#options a{
display:block;
border:none !important;
}
ul#options a.selected-page span{
position:absolute;
width:0px;
height:0px;
border-width:10px;
border-color:transparent #999999 transparent transparent;
border-style:solid;
margin-left:270px;
margin-top:11px;
}
ul#options a:last-child li {
border-bottom:1px #999 solid;
}
It's because you're immediately removing the class. Flip those two lines around, and it'll work.
$(function() {
$("a.product-page li").click(function(){
$("#options a.selected-page").removeClass("selected-page");
$(this).parent("a").addClass("selected-page");
});
});
As noted in a comment above, your HTML is terribly malformed as well. That will need to be fixed.
You should wrap <a> link tag inside li tag like below,
HTML:
<ul id="options">
<li><span></span>Summary</li>
<li><span></span>Specs</li>
<li><span></span>Media</li>
<li><span></span>Reviews</li>
</ul>
You are removing the class that you just added. You can move the remove class above the addclass or just use not to exclude this when you remove..
Code:
$(function() {
$("a.product-page", $('#options')).click(function(){
$(this).addClass("selected-page");
$("#options a.selected-page").not(this).removeClass("selected-page");
});
});
You are adding the class and then removing in the next line.
The order here
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
is incorrect.
Reverse the lines
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");