Develop Reference

Disable a href links in php-javascript

I have 4 links in my page(.phtml file) as follows
<ul id="fileMenu" class="contextMenu">
<li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
<li class="download">Download</li>
<li class="rename">Rename</li>
<li class="del">Delete</li>
<li class="copypath">Copypath</li>
</ul>
I want to disable the add,rename and delete links
Just disable it from UI .
User should be able to see it but no click event should be performed(linksshould be grayed out) .
I have used
disable="disabled"
display =none;
but they are not serving the purpose.
Any other way this would work out ?

I would use this CSS to visually disable a link:
.disable {
position: relative;
}
.disable:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.disable a {
color: gray;
cursor: default;
}
Then in order to disable a link you would put a class disable on corresponding li:
<li class="download disable">Download</li>
What it does is basically overlays a link with transparent pseudo element :before.
Another solution could be using pointer-events: none rule but it's not well supported in IE.
Demo: http://jsfiddle.net/LPz2Z/1/

If you are using jQuery, you might want to do this
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
More Information, Stackoverflow Question

i'm not sure it's the best way but it can do the trick ,
if you use
pointer-events: none; in your css
or if you want to call it from javascript:
elem.style.display.pointerEvents = "none";
to disabled interaction with your users.

Use pointer-events:none;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>

There are a few options. With plain old javascript, you can do, for example:
Download
or
Download
With jQuery you can easily disable a lot of links:
Download
Delete
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>
And you can even use CSS!
Download
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
Although, it wouldn't surprise you, IE <= v9 (if I'm correct) doesn't support this... And on most browsers you can't force the browser to use a pointer as a cursor...
All in a fiddle demo!

Even this served the purpose
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
as I am using contextMenu class in my ul list.

How do I change a glyphicon upon clicking it in Bootstrap 3.2?

I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how to hide the sidebar. I then want it to change back to its default state.
This is what I have currently:
<div id="page-content-wrapper">
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
</h1>
</div>
</div>

Just use:
$('#menu-toggle').click(function(){
$(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});
Fiddle Example

Try
$('#menu-toggle').on('click', function(){
var iSelector = $(this).find('i:first');
if(iSelector.hasClass('glyphicon-arrow-right')) {
iSelector.removeClass('glyphicon-arrow-right')
iSelector.addClass('glyphicon-arrow-left')
}
});
Fiddle
Reference:
selectors
on
hasClass
removeClass
addClass

I guess there is a better way to address this common problem is using CSS's pseudo classes like
:after
For example
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
transition: transform 0.5s;
transform-origin: 8px 7px;
}
And below code for rotating glyphicon
.panel-heading .accordion-toggle.collapsed:after {
transform: rotateZ(180deg);
}
Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.
Reference

How to change the theme color in less css using javascript/jquery

am using the below less css to change different theme color
#lightRed: #fdd;
#lightGreen: #dfd;
#lightBlue: #ddf;
#defaultThemeColor:#lightBlue;
#header{
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
#menu{
background:#defaultThemeColor;
}
And html is as follows:
<div id="swatch">
<ul>
<li>theme1</li>
<li>theme2</li>
<li>theme3</li>
</ul>
</div>
when theme1 is clicked #lightRed theme should be loaded, for theme2 #lightBlue and for theme3 #lightGreen
Please let me know how should be my javascript/ jquery to change the theme color on click

you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with jQuery and modifyVars on a .click event might work:
$('.theme_option').click(function(event){
event.preventDefault();
less.modifyVars({
'#defaultThemeColor': $(this).attr('data-theme')
});
});

using the on-click event to change the background color
this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]

If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:
HTML:
<div id="swatch">
<ul>
<li><a class="red" href="">theme1</a></li>
<li><a class="green" href="">theme2</a></li>
<li><a class="blue" href="">theme3</a></li>
</ul>
</div>
JS:
$('.red').click(function(){
$(this).css('background-color',"red")
});
$('.green').click(function(){
$(this).css('background-color',"red")
});
$('.blue').click(function(){
$(this).css('background-color',"blue")
});

Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.
So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:
lesscss:
.theme-1 {
//Here goes your theme colors
}
.theme-2 {
//Here goes more theme colors and rules
}
#header {
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
And your html:
<div id="header" class="theme-1"/>
<button onclick="$('.theme-1').removeClass('theme-1').addClass('theme-2');" name="Change to theme 2"/>
<button onclick="$('.theme-2').removeClass('theme-2').addClass('theme-1');" name="Change to theme 1"/>
Hope it helps.

As prem suggested, it would be best to apply a class to each theme
CSS:
/* -- [ light blue theme (default) ] ---------- */
#header, #header.lightblue {
background: #ddf;
height: 80px;
margin-bottom: 20px;
width: 300px;
}
#menu, #menu.lightblue {
background: #ddf;
}
/* -- [ light red theme ] ---------- */
#header.lightred {
background: #fdd;
height: 95px;
margin-bottom: 10px;
width: 400px;
}
#menu.lightred {
background: #fdd;
}
/* -- [ light green theme ] ---------- */
#header.lightgreen {
background: #dfd;
height: 72px;
margin-bottom: 15px;
width: 290px;
}
#menu.lightgreen {
background: #dfd;
}
This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.
HTML:
<div id="swatch">
<ul>
<li><a class="theme_option" data-theme="red" href="#">theme1</a></li>
<li><a class="theme_option" data-theme="green" href="#">theme2</a></li>
<li><a class="theme_option" data-theme="blue" href="#">theme3</a></li>
</ul>
</div>
JavaScript (jQuery):
jQuery('a.theme_option').click(function(e){
e.preventDefault();
var theme_class = jQuery(this).attr('data-theme');
jQuery(body).attr('class', theme_class);
}

the variables in css is a draft now!
http://www.w3.org/TR/css-variables/

Create classes by each color
Store class into local storage
change it using javascript function
<!DOCTYPE html>
<html lang="en" class="theme_name_1">
<head>
<style>
.theme_name_1{
color: #FFFF;
}
.theme_name_2{
color: #000;
}
</style>
</head>
<body>
<button id="switch" onclick="changeTheme()">Switch</button>
<script>
/* Script Save theme local storage to first load */
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
function setTheme(theme_name) {
localStorage.setItem('theme', theme_name);
document.documentElement.className = theme_name;
}
/*Change theme button click */
function changeTheme() {
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
}
</script>
</body>
</html>

How can I toggle a child when I hover over a parent?

Here's some sample HTML
<style> .icon {display:none;} </style>
<ul>
<li>ABC <i id="abc" class="icon">x</i></li>
<li>DEF <i id="def" class="icon">x</i></li>
<li>GHI <i id="ghi" class="icon">x</i></li>
</ul>
I need to show .icon when I hover over its parent li.
Here's what I'm trying:
$('.icon').each().parent().hover(function() {
$(this).children('.icon').toggle();
});
Can you point me in the right direction?

There is no need to use each method, you can use $(selector, context), try the following:
$(document).ready(function() {
$('ul li').hover(function() {
$('.icon', this).toggle();
});
})

You can do this with CSS too (although problematic in IE, since it has issues with :hover on tags other than A):
<style>
.icon {display:none;}
li:hover .icon {display:inline;}
</style>

I assume you want to show the icon only as long as you hover:
$('li').hover(
// called on mouseenter
function () {
$(this).find('.icon').show();
},
// called on mouseleave
function () {
$(this).find('.icon').hide();
}
);
This method is saver than to simply toggle visibility state in case events get lost..

how to change Image button on mouseover

I want to change the image button from green to yellow on rollover.
Here is my CSS code
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-orange.png);
}
a.alt { display: none; }
My html code
<div id="y-moringa">
<a id="try-it-button" href="#"><span class="alt"></span></a>
</div>
Thanks in advance.

Add float: left or display: inline-block or display: block to a#try-it-button.
Which one of those you want really depends on the layout you desire.
You don't need to duplicate all the properties on :hover (except for the new background).
What you should actually be doing here is using "CSS Sprites" (there are many benefits), and adjusting the background-position on :hover.

Untested, but give this a shot:
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
display:block; // <-- **I added this**
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
background:url(../image/try-it-orange.png);
}