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');
});
Related
I have a problem in my project.
I created something like keyboard for hangman game with span.
In click situation I need to have disabled span for that letter and if user choose wrong letter the hangman image should be change.
But when I click any button it looks like it is disabled because I changed the color
. clickedLetter{
background-color :....
opacity:.1;
pointer-events: none;
}
But the letter is still clickable and when you click on disabled letter(span) the image of hangman going to change .
I want to add something to stop any action
It is my code:
document.addEventListener("click", (e) => {
if(e.target.className ==='boxForLetter')
{ e.target.classList.add("clickedLetter");}
let clickedLetter= e.target.innerHTML;
.......
....
...
.
I appreciate any thoughts about this problem
The problem is in your if statement.
You need to run the code in your if statement NOT below it. If you run your hangman code BELOW your if statement in a delegated click handler, any click will trigger the hangman code. Also, I would recommend checking if the classlist contains a class, not if the class name equals something. This is more modern and allows for more classes on the objects.
if(e.target.classList.contains('boxForLetter'))
{
//run hangman code here
e.target.classList.add("clickedLetter");
let clickedLetter= e.target.innerHTML;
}
If I understood the problem right, you want to remove the click event if it is already clicked. It may be actually done using pointer-events: none which disables the event trigger.
document.addEventListener("click", (e) => {
if (e.target.className === 'boxForLetter') {
e.target.classList.add("clickedLetter");
}
let clickedLetter = e.target.innerHTML;
});
.boxForLetter {
display: inline-block;
background-color: black;
width: 50px;
height: 50px;
cursor: pointer;
margin-right: 10px;
}
.boxForLetter.clickedLetter {
background-color: red;
opacity: 1;
pointer-events: none;
}
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
I'm having trouble with 2 buttons that each toggles different "div" elements. I want to focus "button 1" by default. How do I do that? Autofocus is not working. Here's the HTML code
<div class="filter">
<button class="filter-btn active" data-target="#block-1" autofocus>1</button>
<button class="filter-btn" data-target="#block-2">2</button>
</div>
Here's the JS code
let $blocks = $(".block-card");
$(".filter-btn").on("click", (e) => {
let $btn = $(e.target).addClass("active");
$btn.siblings().removeClass("active");
let selector = $btn.data("target");
$blocks.removeClass("active").filter(selector).addClass("active");
});
If autofocus is not working due to browser behavior or styling of other elements, you can still use Javascript to set focus.
Example:
document.querySelector(".filter-btn.active").focus({focusVisible: true});
{focusVisible: true} is optional here and it forces browser to make the focus visible.
There is a jQuery equivalent, but it seems that it does not take the optional config.
Example:
$(".filter-btn.active").focus();
Some CSS can be added to making testing easier.
Example:
button:focus {
color: crimson;
}
button:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
When running the following example, note that the first button should be focused.
Full example: (run it in live with button below)
document.querySelector(".filter-btn.active").focus({focusVisible: true});
button:focus{ color: crimson }
button:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
<div class="filter">
<button class="filter-btn active" data-target="#block-1">1</button>
<button class="filter-btn" data-target="#block-2">2</button>
</div>
Hope this will help!
I have the following code that slideToggle() a div while at the same time displaying a button that allows you to slideToggle() back and then hides itself.
$(document).ready(function() {
$("#about-user-widget .hide-btn").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})
The above works great, however when I refresh the page it goes back to the default. The about-user-widget is open and the show-button visibility is set to hidden.
My question is, how would I get the page reload to remember what my settings are at? So for example, if one had clicked hide, and the about-user-widget was hidden and the show-button was visible. How could I get that setting to stay when the page is refreshed?
The show-button is set to hidden by default.
<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><i class="fa fa-eye"></i> Show<span> | </span></div>
I know I'd need to commit this to memory somehow (cookie, local storage of some kind) but being new to jquery I'm not sure how to implement this.
Any help would be appreciated.
First I don't understand why you need two buttons? You can achieve this with one button.
As per saving the state of div shown/hidden
You can use storage in cookies or your preferred metnod.
As per cookie; read the following stack post
Then this for example how you can try:
I used this plugin: https://github.com/js-cookie/js-cookie
$(document).ready(function() {
var currentstate = Cookies.get('divstate');
console.log('on refresh=' + currentstate);
if (currentstate == 'open')
$("#about-user-widget").show();
else
$("#about-user-widget").hide();
$("#button").click(function() {
$("#about-user-widget").slideToggle();
var currentstate = Cookies.get('divstate');
if (currentstate == 'close' || currentstate == undefined) {
Cookies.set('divstate', 'open');
console.log('when click');
} else {
Cookies.set('divstate', 'close');
console.log('else');
}
console.log(Cookies.get('divstate'));
});
});
the HTML part:
<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>
Be aware about cookies plugin's compatibility with browsers; I tested with FireFox and working.
I have an icon of a trash can for a delete button on a Django site.
It's just an anchor tag with an i tag inside that has its href set to a delete view passing the id of the model element.
It works perfectly fine, but I want to create a dialog popup that asks for confirmation before deleting it.
I have seen a few ways to do this but they all require it to be input instead of an anchor.
I also need to make this work on touch devices as well.
How can I change it to an input element and keep the icon as the button rather than showing a submit button. And how can I get the dialog to popup and when Yes is clicked, pass the correct url and id to the submit?
Any advice would be much appreciated.
The easiest way is to add a confirm prompt:
<a ... onclick="return confirm('Are you sure you want to delete this?')">Delete</a>
But you should not do inline javascript so try to add a class and abstract it away. Here it is with jquery:
<a class="confirm-delete" ...>Delete</a>
$(document).on('click', '.confirm-delete', function(){
return confirm('Are you sure you want to delete this?');
})
Let this be your anchor tag:
<a class="icon-trash" id="delete-object" data-object-id="{{ object.id }}">Delete</a>
Note that we have object.id with an attribute. We are going to need that in javascript part.
And you can write something like this at bottom of the page right before body tag closed:
UPDATE WITH SNIPPET
Here you can try the demo. it should work when you put the code right before body tag closed:
var elm = document.getElementById('delete-object');
var objectID = elm.getAttribute('data-object-id');
var resultDiv = document.getElementById('result');
elm.addEventListener('click', function() {
var ask = confirm('r u sure?');
if (ask && objectID) {
var r = "Page will be redirected to </object/delete/" + objectID + "/>";
resultDiv.textContent = r;
} else {
resultDiv.textContent = "User cancelled the dialog box...";
}
return false;
});
.delete-link {
background-color: red;
color: white;
border: 1px solid white;
cursor: pointer;
padding: 3px;
}
#result {
margin: 20px;
padding: 10px;
border: 1px solid orange;
}
<a class="delete-link" id="delete-object" data-object-id="3">Delete</a>
<div id="result"></div>
Just adding this attribute on your a / button tag will do the Job:
onclick="return confirm('Are you sure you want to delete?')"
I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.
My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.
the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.
thanks in advance.
UPDATE:
the html calling the show/reveal actions are:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
The construct the actions for the drop down, Spry requires the following at the bottom of the page:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
In SpryCollapsiblePanel.css, amend the following style rules:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
This increases the padding on the left to make room for the image.
Then add the images to the following rules:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}
THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.
onclick switch an image then onclick of something else switch back to + sign
If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.
// Grab the img object from the DOM
var img = document.getElementById("theImageId");
// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.
Easy fix with some simple JavaScript.
Add the following script:
<script type="text/javascript">
<!--
function name ()
{
var img = document.getElementById("imgid");
if (img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
}
//-->
</script>
When that's done look at the div defining the collapsible panel. It looks something like this:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
All you need for this to work is to add onclick="name();" to the syntax:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>