I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.
If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other.
I'm using chrome. Here is the code. Any feedback is appreciated.
CSS file:
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
HTML:
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
JAVASCRIPT (from command line, or onchange of a checkbox)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
UPDATE: I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility. That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked.
UPDATE 2: Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. But if the element is initially set to invisible in css, the checkbox is not able to make the element visible. So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.
Your CSS is hiding an a element within the tab, not the tab itself:
#tabmenu li[status='disabled'] a {
}
Changing the tab's style won't undo that.
If your CSS was instead:
#tabmenu li[status='disabled'], a.active, #disabled {
...
}
then changing the display would be useful.
You've set the a element inside the li to be hidden, so setting the tab to be visible isn't enough. Setting the container (the li) visible won't make the content (the a) visible.
You probably want to change your rule to
#tabmenu li[status='disabled'], a.active, #disabled {
CSS targets <a> tags hidden, javascript is changing an <li>, the child <a> would still be hidden
you should have function that will check state of a checkbox I've added it to markup
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>
</ul>
<label>
<input type="checkbox" id="check"/>show text
</label>
Then next code will check the state of your checkbox and will change visibility of tab
$(function () { //document ready
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE
function display(){
tab=document.getElementById('tab1');
checkbox=document.getElementById('check')
if (check.checked){
tab.style.display = 'inline';
}
else{
tab.style.display='none';
}
console.log(tab.style.display)
}
});
Or try to play here http://jsfiddle.net/766Nb/
P.s: on jsfiddle I've cleaned up css a bit
For hidde element li you need tab.style.display='none'; and for show element li you need tab.style.display='list-item';.
Then the necessary code it's this:
JAVASCRIPT
function llm()
{
tab = document.getElementById('tab1');
if (document.getElementById('Check1').checked==false)
{
tab.style.display = 'none';
}
else
{
tab.style.display='list-item';
}
}
HTML
<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
CSS
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
I think it's not possible to do only with css. If you need more help notify me.
Look this way, maybe you can solve your problem using these steps:
Create a .visible class on the css with this code:
.visible {
display: inline !important;
}
And create another class .hidden:
.hidden {
display: none !important;
}
And then, use this code to Hide your element:
tab = document.getElementById('tab1');
tab.className = 'hidden';
And this code to Show your element:
tab = document.getElementById('tab1');
tab.className = 'visible';
Important: with this solution you can start with display:none on the CSS without having problems to set visible after, because the !important tag on the classes overwrite all, so you will not have problem to hide it.
Related
I'm currently trying to replace the text of a div and add a link to it. Basically I don't have the ability to directly modify a text so what I'm doing is modify that text with the ::after property, and I would like to link the new 'copy' that I'm replacing so that it takes you to another page. Here's my code:
<div class="category-name">
<span itemprop="productname" data-masterid="03324">Blue Male T-shirt</span>
</div>
and here's the CSS I'm using to change the text 'Blue Male T-shirt:
.category-name {
visibility: hidden;
}
.category-name::after {
content:'Electric Blue Tee';
visibility: visible;
display: block;
padding: 5px;
border: none !important;
text-transform: capitalize;
font-size: 12px;
}
Now, I've found a script to add to make the after property a link, but I can't seem to be able to make it work:
<script>
jQuery('.category-name::after').each(function() {
var link = $(this).html();
jQuery(this).contents().wrap('');
});
</script>
Does anybody know what I'm putting wrong? Any help would be highly appreciated!
Thanks in advance :)
You cannot wrap pseudo-elements in HTML tags. The most you can do is wrap the span element inside the .category-name element in the a tag.
jQuery('.category-name > span').each(function() {
jQuery(this).wrap('');
});
I have a button inside the anchor tag(defined it using class).
<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>
Now I want to disable it.So I have used the following code to disable the anchor tag.
moreButton.disabled = true;
The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled i.e. not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.
The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:
a {
pointer-events: none;
}
I am a disabled anchor tag
As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:
.contactButtonSmall {
position:absolute;
left:225px;
top:165px;
font-weight:normal;
font-size:11pt;
}
Then you can use the :disabled selector to change the appearance of the button when it is disabled:
.contactButtonSmall:disabled {
/* Styling for disabled button */
}
I have used button along with the style attributes
background-color: Transparent;
border: none;
instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.
example code is given below:
<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>
In CSS file:
.contactButtonSmall {
position:relative;
display: block; /* 'convert' <a> to <div> */
width: 60px;
max-height: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../contactImages/blankSmallButton.gif);
text-decoration: none;
text-align: center;
cursor:pointer;
background-color: Transparent;
border: none;
}
You can use a mixture of CSS and JS to accomplish this:
HTML:
<a href="/" id="myLink">
click me!
</a>
CSS:
#myLink {
background: red
}
a#myLink.disabledLink {
background: grey;
cursor: not-allowed;
}
JS:
document.getElementById("myLink").onclick = function(e)
{
e.preventDefault();
this.className += " disabledLink";
}
jsfiddle here
this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim.
Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?
Thanks,
http://jsfiddle.net/49Qvm/9/
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
I think your best bet would be to create an element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.
You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).
Here's a fiddle: http://jsfiddle.net/49Qvm/28/
Try this javascript/css that utilizes z-index to create a focused effect.
CSS
.link {
z-index: 700;
list-style-type: none;
padding: 0.5em;
background: black;
display: inline-block;
cursor: pointer;
color: white;
}
.dim {
width: 100%;
height: 100%;
z-index: -6;
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
body {
background-color: orange;
}
jQuery
var $dim = $('.dim');
$('.link').hover(function(){
$dim.fadeIn(200);
}, function(){
$dim.fadeOut(200);
});
HTML
<div class="dim"></div>
<ul>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
</ul>
Some text here
http://jsfiddle.net/49Qvm/33/
I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.
Is there any way to get a checkbox inside a button?
At the moment I have this solution:
<html>
<body>
<div id="menu">
<button><input type="checkbox" /></button>
</div>
</body>
</html>
It's ok, it works fine with Chrome and Firefox...but really awful with IE, so I need another way to achieve this goal.
Any ideas?
Thanks
I think its not a valid mark up to place a checkbox within a button. It would be better to replace the button with span or div and apply some CSS to span or div to make look like button and apply click event to that and change the checkbox state.
Just an example for you
I'm not entirely sure what you're trying to achieve here, so please forgive me if my answer isn't what you were looking for. If you want a button which changes the state of a checkbox, then #thecodeparadox's answer should work great, however if you're looking for a button which performs a function but also has a checkbox inside of it which can be toggled, you might want something like the following:
HTML:
<div id="button" href="#">
<input type="checkbox" class="check">Submit
</div>
CSS:
body {
margin: 10px;
}
#button {
display: inline-block;
background: #ddd;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
.check {
display: inline-block;
margin-right: 10px;
}
jQuery:
$('#button').on('click', function() {
window.location = '#';
})
http://jsfiddle.net/QStkd/278/
It's not valid markup but you can cheat IE with jquery -
<button>hi</button>
$('button').prepend('<input type="checkbox" />');
Demo: http://jsfiddle.net/Gg9fG/