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.
Related
I'm trying to create a site, on which you can download a file by pressing an button. The thing is, that I want people to click another button first to subscribe to a youtube channel and THEN to be able to download the file. So, I have to get rid of the disabled class on the download button after pressing the subscribe button. Here below is my code, what am I doing wrong?
EDIT: Tried all the answers now, none did work. I'm getting this error, what does that mean?
Uncaught ReferenceError: $ is not defined
at index.html:23
Line 23 is
$('#sub').on('click',function(event){
$('#sub').on('click',function()){
$('#dl').removeClass('disabled');
});
.disabled {opacity: 0.8; cursor: not-allowed;}
.size-3 {font-size: 16px;}
.btn {
font: 100%/1.1 "Quicksand", sans-serif;
background-color: rgba(0,0,0,0.3);
border: 2.2px solid #ecf0f1;
color: #ffffff;
padding: 12px 62px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: none;
font-size: 20px;
margin: 3px 6.9px;
cursor: pointer;
transition-duration: 0.4s;
}
<a id="sub" href="#" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" class="btn size-3 disabled">Download Exyther</a>
jsFiddle: https://jsfiddle.net/qrc3qm2e/
I have added extra code to check if the button shouldn't be clickable, if you need a jQuery answer please follow this link https://jsfiddle.net/qrc3qm2e/1/
Javascript
var subElement = document.getElementById("sub");
var dlElement = document.getElementById("dl");
subElement.onclick = function(event)
{
dlElement.classList.remove('disabled');
dlElement.removeAttribute('disabled');
};
dlElement.onclick = function(event)
{
if(dlElement.className.indexOf('disabled') > -1)
{
event.preventDefault();
return;
}
};
HTML
<a id="sub" href="#" target="blank" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" target="blank" class="btn size-3 disabled" disabled="disabled">Download Exyther</a>
This makes your code an error: function()) << double close
correct JS
$('#sub').on('click',function(event){
event.preventDefault();
$('#dl').removeClass('disabled');
});
https://codepen.io/jacobweyer/pen/JNzgJE?editors=1111
Here's a codepen of the issue
$('#sub').on('click', function(event){
if (event.preventDefault) {
event.preventDefault();
}
$('#dl').removeClass('disabled');
});
You didn't close the function, but also you can add event into the function. This will pass the click event into your jquery.
With the click event you can actually prevent the page from jumping moving as well by preventing the default action on the a tag.
You can help by keeping your example really really simple. We don't need to know about your font for example. : )
You probably want to use a disabled property - or that AND style that a bit with CSS. here's how to do that. - if you want to use a link - then the download will be its default behaviour - so you shouldn't have to prevent it - but see #JacobW 's about that. You'd likely not want the URL in the markup - if you are really trying to dissuade them from getting the file until subscribing. If you can't switch out the button for the link - and see the concept, I'm sure you will at some later date. : ) Good Luck!
JavaScript - and disabled property
https://jsfiddle.net/sheriffderek/3t0pn6gv/
markup
<button class='one'>one</button>
<button class='two' disabled>two</button>
style
button:disabled {
opacity: .3;
}
script (not jQuery for #Canvas)
var signupButton = document.querySelector('button.one');
var downloadButton = document.querySelector('button.two');
signupButton.addEventListener('click', function() {
downloadButton.disabled = false;
});
with jQuery and CSS class - (not actually disabled... but looks so)
https://jsfiddle.net/sheriffderek/wyx1od9g/
markup
<button class='one'>one</button>
<button class='two disabled'>two</button>
style
.disabled{
opacity: .2;
}
script
$('button.one').on('click', function() {
$('button.two').removeClass('disabled');
});
I'm trying to learn how to shorten my jQuery code. Any suggestions or tips would be awesome:
jQuery(document).ready(function($){
$('#checkout_timeline #timeline-4').click(function() {
if ($('#checkout_timeline #timeline-4').hasClass('active')) {
$('#checkout-payment-container').addClass('cpc-visible');
}
});
$('#checkout_timeline #timeline-1, #checkout_timeline #timeline-2, #checkout_timeline #timeline-3').click(function() {
$('#checkout-payment-container').removeClass('cpc-visible');
});
});
To avoid clutter, please find the working version here:
My JSFiddle Code
I know I can use .show() and .hide() but due to other CSS considerations I want to apply .cpc-visible.
There are a handful of things you can improve here. First, you're over-specifying. Ids are unique. No need to select #checkout_timeline #timeline-4 when just #timeline-4 will do. But why even have ids for each li? You can reference them by number using the :nth-child(n) selector. Or better yet, you've already given them application-specific class names like billing, shipment, and payment. Use those! Let's simplify the original content to:
<ul id="checkout_timeline">
<li class='billing'>Billing</li>
<li class='shipping'>Shipping</li>
<li class='confirm'>Confirm</li>
<li class='payment active'>Payment</li>
</ul>
<div id='checkout-payment-container' class='cpc-visible'>
This is the container to show and hide.
</div>
Notice I left the active class, and indeed further initialized the checkout
div with cpc-visible to mirror the payment-is-active condition. Usually I would keep HTML as simple as possible and put "starting positions" initialization in code. But "in for a penny, in for a pound." If we start with payment active, might as well see that decision through, and start the dependent div in a consistent state.
Now, revised JavaScript:
jQuery(document).ready(function($) {
$('#checkout_timeline li').click(function() {
// make clicked pane active, and the others not
$('#checkout_timeline li').removeClass('active');
$(this).addClass('active');
// show payment container only if payment pane active
var paymentActive = $(this).hasClass('payment');
$('#checkout-payment-container').toggleClass('cpc-visible', paymentActive);
});
});
This code is much less item-specific. It doesn't try to add separate click handlers for different tabs/panes. They all get the same handler, which makes a uniform set of decisions. First, that whichever pane is clicked, make it active and the others not active. It does this by removing all active classes, then putting active on just the currently selected pane. Second, it asks "is the current pane the payment pane?" And it uses the toggleClass API to set the cpc-visible class accordingly. Often such "set class based on a boolean condition" logic is simpler and more reliable than trying to pair appropriate addClass and removeClass calls.
And we're done. Here's a JSFiddle that shows this in action.
Try this : You can user jquery selector with timeline and active class to bind click event handler where you can add required class. Same selector but not having active class to remove class.
This will be useful when you add / remove elements and will be more flexible.
jQuery(document).ready(function($){
$('#checkout_timeline .timeline.active').click(function() {
$('#checkout-payment-container').addClass('cpc-visible');
});
$('#checkout_timeline .timeline:not(.active)').click(function() {
$('#checkout-payment-container').removeClass('cpc-visible');
});
});
JSFIddle
Here is one of the ways, you can shorten this code by using :not(). Also its better to use elements than to reference and get them via JQuery always.
jQuery(document).ready(function($) {
var showHideContainer = $('#checkout-payment-container');
$('#checkout_timeline .timeline.active').click(function() {
showHideContainer.addClass('cpc-visible');
});
$('#checkout_timeline .timeline:not(.payment)').click(function() {
showHideContainer.removeClass('cpc-visible');
});
});
try this code its working fine with fiddle
$('.timeline').click(function() {
if ($(this).hasClass('active') && $(this).attr("id") == "timeline-4")
$('#checkout-payment-container').addClass('cpc-visible');
else
$('#checkout-payment-container').removeClass('cpc-visible');
});
This would of been my approach cause you still have to add/remove the active class between each li.
jQuery(document).ready(function($) {
$('ul li').click(function() {
$('ul li.active').removeClass('active');
$(this).closest('li').addClass('active');
k();
});
var k = (function() {
return $('#timeline-4').hasClass('active') ? $('#checkout-payment-container').addClass('cpc-visible') : $('#checkout-payment-container').removeClass('cpc-visible');
});
});
#checkout-payment-container {
float: left;
display: none;
background: red;
color: white;
height: 300px;
width: 305px;
padding: 5px;
}
ul {
list-style: none;
width: 100%;
padding: 0 0 20px 0px;
}
li {
float: left;
padding: 5px 11px;
margin-right: 5px;
background: gray;
color: white;
cursor: pointer;
}
li.active {
background: black;
}
.cpc-visible {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="checkout_timeline">
<li id='timeline-1' class='timeline billing'>Billing</li>
<li id='timeline-2' class='timeline shipping'>Shipping</li>
<li id='timeline-3' class='timeline confirm'>Confirm</li>
<li id='timeline-4' class='timeline payment'>Payment</li>
</ul>
<div id='checkout-payment-container'>
This is the container to show and hide.
</div>
Your code look great, i would have written it the same.
bit sure how much it helps but if you like, you can use inline if like this:
$(document).ready(function(){
$('#B').click(function() { (!$('#B').hasClass('active')) ?
$('#A').addClass('active') : ''; });
$('#C').click(function() { $('#A').removeClass('active'); });
});
Link for a live example:
jsFiddle
I have a cover-image like this
When the user hover on my image, I want to :
show an camera icon on the top left, and
hide it back when the mouse move away.
I have tried
CSS
<style type="text/css">
#cover-img:hover{
opacity: .9;
}
#nav-upload-icon{
top: 10px;
left: 10px;
color: red;
z-index: 1000;
}
</style>
HTML
<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>
JS
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass( "hidden" );
});
I couldn't get it to behave what I expected to see.
What is the best way to implement something like that ?
JSFiddle
There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover {
visibility: visible;
}
#nav-upload-icon {
visibility : hidden;
}
bind mouseout event to remove add the hidden class again
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
$("#nav-upload-icon").addClass("hidden");
});
Give position absolute to place it over the image
Fiddle
Go for #epascarello solution. It is the best.
The hover accepts two functions:
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
Fiddle
But obviously the CSS solution is better.
Your almost there. Add a second anonymous function to add the class for mouseleave
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
According to hover(), you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave
DEMO
If you don't want to use javascript, wrap a div around the image.
<div class="image-wrap">
<img > <-- your super cool large image
<img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>
Then in the css you go something like this
div.image-wrap:hover img.upload {
opacity:0.9
}
Don't bother with javascript, it's 2015
This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.
#cover-img:hover + img {
opacity: 1;
}
Updated Fiddle
I'm working on an ecommerce site for a client using Business Catalyst.
On their "Menu" page, they would like to display an "Out of Stock" DIV over the images of all out-of-stock products.
The DIV should be triggered by BC's proprietary content tag, {tag_instock}.
When {tag_instock} is 0, div.nostock should be displayed on all products that are out-of-stock.
At the moment, it only displays over one product that is out-of-stock rather than all products.
HTML:
<ul class="product-images">
<div id="nostock" class="nostock" style="display: none;"><h2>Out of Stock</h2></div>
<li>img_one</li>
<li>img_two</li>
<li>img_three</li>
</ul>
SCRIPT:
$(document).ready(function() {
var stock = "{tag_instock}";
if (stock == 0) {
document.getElementById('nostock').style.display = "block"
};
});
I'm not quite clear about using jquery vs. javascript. Which would be better suited to this solution?
Please let me know if I need to elaborate.
Any help is greatly appreciated.
Thank you.
I simulate stock value with data attribute for demo purposes...tell me if this works for you, here's a Fiddle
$(function() {
$('li').each(function() {
// var stock = "{tag_instock}";
var stock = $(this).data('stock');
if (stock == 0) {
$(this).append('<div class="nostock">Out of Stock</div>');
}
if (stock > 0) {
$(this).append('<div class="instock">In Stock '+stock+'</div>');
}
});
});
I overdo it a little, added instock and instock values aside, Fiddle updated.
If the three images are always the same, I would combine them into a single image. If you do that, then you can create a CSS class that overlays the image using a content property. By dynamically adding the class to the div's in question, you achieve the affect you want.
The class looks like this:
.no-stock-image:after {
content: url(images/out-of-stock.png);
position: absolute;
top: 10px;
left: -10px;
}
Obviously you'll have to adjust the positioning.
It sounds to me like you should use the following HTML:
<ul class="product-images">
<li><span class="nostock" style="display: none;">Out of Stock</span>img_one</li>
<li><span class="nostock" style="display: none;">Out of Stock</span>img_two</li>
<li><span class="nostock" style="display: none;">Out of Stock</span>img_three</li>
</ul>
Then use CSS like:
.no-stock {
position: absolute;
top: Xpx;
left: Xpx;
width: Xpx;
height: Xpx
background-color: #eee;
}
Adjusting the X's to suit.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 2 years ago.
I have the grap constructured by CSS, which is dynamically changes by JS. I show graph max value by pseudo element as:
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}
That's why I need to set this value by JS. I tried $(".graph:before").css("content", hh); but it didn't help. How to get that value?
I hope the below snippet might help, you can specify the content value you want via JS using the CSS attr() function.
Below you have two options: to use JavaScript or jQuery:
jQuery:
$('.graph').on('click', function () {
//do something with the callback
$(this).attr('data-before','anything'); //anything is the 'content' value
});
JavaScript:
var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
event.target.setAttribute('data-before', 'anything');
});
CSS:
.graph:before {
content: attr(data-before); /* value that that refers to CSS 'content' */
position:absolute;
top: 0;
left: 0;
}
Update (2018): as has been noted in the comments, you now can do this.
You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.
You can use CSS variable
:root {
--h: 100px;
}
.elem:after {
top: var(--h);
}
let y = 10;
document.documentElement.style.setProperty('--h', y + 'px')
https://codepen.io/Gorbulin/pen/odVQVL
I believe there is a simple solution using the attr() function to specify the content of the pseudo element. Here is a working example using the 'title' attribute, but it should work also with custom attributes.:
document.getElementById('btn_change1').addEventListener("click", function(){
document.getElementById('test_div').title='Status 1';
});
document.getElementById('btn_change2').addEventListener("click", function(){
document.getElementById('test_div').title='Status 2';
});
#test_div {
margin: 4em;
padding:2em;
background: blue;
color: yellow;
}
#test_div:after {
content:attr(title);
background: red;
padding:1em;
}
<button id='btn_change1'>Change div:after to [Status 1]</button>
<button id='btn_change2'>Change div:after to [Status 2]</button>
<div id='test_div' title='Initial Status'>The element to modify</div>
People who are still looking some solution of same problem, it is doable as follows using jQuery:
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
This example illustrate that on clicking button: changeBefore , the value for .graph:before will change as per new dynamic coming value for it.
For more description about changing of :before or :after element style or getting its content:
Lets suppose your HTML is like this:
<div id="something">Test</div>
And then you are setting its :before in CSS and designing it like:
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
Please notice I also set content attribute in element itself so that you can take it out easily later.
Now there is a button clicking on which, you want to change the color of :before to green and its font-size to 30px. You can achieve that as follows:
Define a css with your required style on some class .activeS :
.activeS:before{
color:green !important;
font-size:30px !important;
}
Now you can change :before style by adding the class to your :before element as follows:
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
If you just want to get content of :before, it can be done as:
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
I hope it helps
I had a similar problem, but with icons. I needed to switch the play and pause icons for an audio player in html5.
The problem here was that HTML, CSS and jQuery all interpret differently the "content" values to show icons, due to the use of \ symbol.
So the best workaround is to delete and re-create the node. Here's my code:
<ul class="list list--buttons">
<li><i class="fa fa-step-backward"></i></li>
<li><i class="fa fa-play"></i></li>
<li><i class="fa fa-step-forward"></i></li>
</ul>
And the script
<script type="text/javascript">
$(
function(){
var aud = $('audio')[0];
$('.playpause').on('click', function(e){
e.preventDefault();
if (aud.paused) {
aud.play();
/* from play icon to pause icon */
$('.playpause .fa-play').remove();
$('.playpause').append('<i class="fa fa-pause"></i>');
}
else {
aud.pause();
/* from play icon to pause icon */
$('.playpause .fa-pause').remove();
$('.playpause').append('<i class="fa fa-play"></i>');
}
})
$('.next').on('click', function(e){
e.preventDefault();
aud.src = '{$content:audio-file}';
})
$('.previuos').on('click', function(e){
e.preventDefault();
aud.src = '{$content:audio-file}';
})
aud.ontimeupdate = function(){
$('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
}
})
</script>
Hope it helps!
You can use document.styleSheets to modify pseudo selector cssRules
document.styleSheets[0].cssRules[0].style.content = '"111"';
If you use something like an onoffswitch and want to translate the css content attribute with i18next then you can use one of the i18next Framework example from github (i18next Jquery Framework) and then you extended the function with this code:
var before = i18next.t('onoffswitch.before');
var after = i18next.t('onoffswitch.after');
$('.onoffswitch-inner')
.attr('data-before', before )
.attr('data-after', after );
and the css code must be this:
.onoffswitch-inner:before {
content: attr(data-before);
padding-left: 10px;
background-color: #65AFF5; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: attr(data-after);
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}