im looking for the elegant way to avoid writing so much code to perform onclick, show clicked, hide others.
here's the code im using:
html:
<p align="center" style="font-size: 22px;">
<span class="badge badge-secondary" id="yesterday">Yesterday</span>
<span class="badge badge-dark" id="today">Today</span>
<span class="badge badge-secondary" id="tomorrow">Tomorrow</span>
</p>
jquery:
$('#yesterday').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
});
$('#today').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
});
$('#tomorrow').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
});
To do this:
Use a class on those three elements (say, show-hide)
Use a class on the .yesterday, .today, and .tomorrow elements as well (say, slide-target).
Use a single click handler on the class
Within the handler, this is the element you want to show, and its siblings (see siblings) are the ones you want to hide
Within the handler, $('.slide-target') is all the targets, then you can use .filter('.' + this.id) to only target the one for this element, and .not('.' + this.id) to target the others
So roughly speaking:
<p align="center" style="font-size: 22px;">
<span class="show-hide badge badge-secondary">Yesterday</span>
<span class="show-hide badge badge-dark">Today</span>
<span class="show-hide badge badge-secondary">Tomorrow</span>
</p>
and
$('.show-hide').click(function(e) {
e.preventDefault();
// Just to avoid doing it repeatedly
var $this = $(this);
// Add this class
$this.addClass('badge-dark').removeClass('badge-secondary');
// Remove it from siblings
$this.siblings().addClass('badge-secondary').removeClass('badge-dark');
// Find the target elements
$('.slide-target')
.filter('.' + this.id).slideDown('1000').end() // Slide down related
.not('.' + this.id).slideUp('1000') // Slide up others
// Slide down the relevant element(s)
});
A simple extraction of common logic to separate function:
function updateClasses(element, selector) {
element.addClass('badge-dark').removeClass('badge-secondary');
$(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}
$('#yesterday').click(function (e) {
e.preventDefault();
updateClasses(this, '#today,#tomorrow');
$('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#tomorrow');
$('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#today');
$('.tomorrow').slideDown('slow');
});
Something like this:
$('#yesterday, #today, #tommorow').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
if ( $(this).is("#yesterday") ) {
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
} else if ( $(this).is("#today") ) {
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
} else if ( $(this).is("#tomorrow") ) {
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
}
});
I can't think about an easier way to do it:
Using your class badge as the selector for your .click() function.
Using $(this) to change classes on the clicked element, and $('.badge').not($(this)) to target all others.
Getting the class name to show, according to the element you clicked.
Doing the same as point #2 to display/hide the wanted elements.
Here is a working snippet where I added some styling:
$('.badge').click(function(e) {
e.preventDefault();
$('.badge').not($(this)).removeClass('badge-dark').addClass('badge-secondary'); // Resets all except…
$(this).removeClass('badge-secondary').addClass('badge-dark'); // … the one clicked
var classToShow = '.' + $(this).attr('id'); // Get this id
$('.days').not(classToShow).slideUp('1000'); // Hide all except…
$(classToShow).slideDown('slow'); // … the one wanted
});
p {
font-size: 22px;
}
.badge-secondary {
opacity: 0.5;
}
.badge a {
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
<span class="badge badge-secondary" id="yesterday">Yesterday</span>
<span class="badge badge-dark" id="today">Today</span>
<span class="badge badge-secondary" id="tomorrow">Tomorrow</span>
</p>
<p class="days yesterday">Yesterday…</p>
<p class="days today">Today…</p>
<p class="days tomorrow">Tomorrow…</p>
Hope it helps!
Related
This javascript I've found on the internet. With this in my table I can only get the first textbox blinking, the next time I want another textbox blinking it doesn't work. I'm a beginner, thanks for your support.
I've tried a second variable in the javascript, I've also copied the javascript with a different id. Still no luck...
In head I've placed:
<script language="javascript">
function blinktext() {
var f = document.getElementById('announcement');
setInterval(function() {
f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
}, 500);
}
</script>
In html I used:
<div id="announcement" class="rTableCell">
<span style="color: #99cc00;">groen</span></div>
I expect to have multiple boxes in my table to blink
My table is here: https://zappi.info/faq-howto/hub/42-led-referentie-tabel
Use querySelectorAll and classList.toggle
Also note we have added a CSS class to do our hiding of the element.
The toggle call will add if it is not present and remove is it is.
function blinktext() {
document.querySelectorAll('.announcement').forEach(e =>{
setInterval(() => {
console.log(e);
e.classList.toggle('hide');
}, 500);
});
}
// We use an event listener to only run our code once the HTML is
// loaded and ready to be read.
document.addEventListener('DOMContentLoaded', () => {
blinktext();
});
.hide {
visibility: hidden;
}
<div class="announcement rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="announcement rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="announcement rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="announcement rTableCell">
<span style="color: #99cc00;">groen</span></div>
<div class="announcement rTableCell">
<span style="color: #99cc00;">groen</span></div>
I strongly suggest not to use setInterval() for this simple job and just stick to CSS animation like this:
The elements that need to blink should include this line in their style...
animation:Blink 2000ms linear 0s infinite none;
And then add this to your CSS section independently...
#keyframes Blink{from{background:white;} to{background:black;}}
for multiple its easiest to go with the class descriptor
<div id="announcement" class="rTableCell blinking">
<span style="color: #99cc00;">groen</span></div>
function blink(target){
return function(){
target.style.visibility = (target.style.visibility == 'hidden' ? '' : 'hidden');
}
}
let blinkers=document.getElementsByClassName('blinking');
for(let blinker of blinkers){
setInterval(blink(blinker), 500);
}
like this should work (you need the return function structure to have the correct reference in the method)
I'm attempting to track events for all UI elements on a page. The page contains dynamically generated content and various frameworks / libraries. Initially I tracked elements through creating a css class "track" , then adding style "track" to tracked elements. elements are then tracked using :
$('.track').on('click', function() {
console.log('Div clicked' + this.id);
console.log(window.location.href);
console.log(new Date().getTime());
});
As content can be dynamically generated I wanted a method to track these elements also. So tried this using wildcard jQuery operator.
In this fiddle : https://jsfiddle.net/xx68trhg/37/ I'm attempting to track all elements using the jquery '*' selector.
Using jQuery '*' selector appears to fire the event for all elements of given type.
So for this case if is clicked all the click event is fired for all divs. But id is just available for div being clicked.
For the th element the click event is fired twice , what is reason for this ?
Can the source be modified that event is fired for just currently selected event ?
fiddle src :
$(document).ready(function() {
$('*').each(function(i, ele) {
$(this).addClass("tracked");
});
$('.tracked').on('click', function() {
console.log('Div clicked' + this.id);
console.log(window.location.href);
console.log(new Date().getTime());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <div id="1" data-track="thisdiv">
Any clicks in here should be tracked
</div>
-->
<div id="1">
Any clicks in here should be tracked 1
</div>
<div id="2">
Any clicks in here should be tracked 2
</div>
<div id="3">
Any clicks in here should be tracked 3
</div>
<th id="th">tester</th>
You can try with:
$(document).ready(function() {
$("body > *").click(function(event) {
console.log(event.target.id);
});
});
$(document).ready(function() {
$("body > *").click(function(event) {
console.log(event.target.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
Any clicks in here should be tracked 1
</div>
<div id="2">
Any clicks in here should be tracked 2
</div>
<div id="3">
Any clicks in here should be tracked 3
</div>
<table>
<tr>
<td>Cols 1</td>
<td id="td">Cols 2</td>
</tr>
</table>
<p id="th">tester</p>
You may want to use event delegation to target the elements you need. Advantage is that this also works for dynamically generated elements. See code for an example of this.
// method to add/set data-attribute and value
const nClicksInit = (element, n = "0") => element.setAttribute("data-nclicked", n);
// add data-attribute to all current divs (see css for usage)
// btw: we can't use the method directly (forEach(nClicksInit))
// because that would send the forEach iterator as the value of parameter n
document.querySelectorAll("div").forEach(elem => nClicksInit(elem));
// add a click handler to the document body. You only need one handler method
// (clickHandling) to handle all click events
document.querySelector('body').addEventListener('click', clickHandling);
function clickHandling(evt) {
// evt.target is the element the event is generated
// from. Now, let's detect what was clicked. If none of the
// conditions hereafter are met, this method does nothing.
const from = evt.target;
if (/^div$/i.test(from.nodeName)) {
// aha, it's a div, let's increment the number of detected
// clicks in data-attribute
nClicksInit(from, +from.getAttribute("data-nclicked") + 1);
}
if (from.id === "addDiv") {
// allright, it's button#addDiv, so add a div element
let newElement = document.createElement("div");
newElement.innerHTML = "My clicks are also tracked ;)";
const otherDivs = document.querySelectorAll("div");
otherDivs[otherDivs.length-1].after(newElement);
nClicksInit(newElement);
}
}
body {
font: 12px/15px normal verdana, arial;
margin: 2em;
}
div {
cursor:pointer;
}
div:hover {
color: red;
}
div:hover:before {
content: '['attr(data-nclicked)' click(s) detected] ';
color: green;
}
#addDiv:hover:after {
content: " and see what happens";
}
<div id="1">
Click me and see if clicks are tracked
</div>
<div id="2">
Click me and see if clicks are tracked
</div>
<div id="3">
Click me and see if clicks are tracked
</div>
<p>
<button id="addDiv">Add a div</button>
</p>
<h3 id="th">No events are tracked here, so clicking doesn't do anything</h3>
You can invoke the stopPropagation and the condition this === e.currentTarget to ensure invoke the handler function of the event source DOM.
And you must know the <th> tag must wrapped by <table>, otherwise it will not be rendered.
$(document).ready(function() {
$('*').each(function(i, ele) {
$(this).addClass("tracked");
});
$('.tracked').on('click', function(e) {
if (this === e.currentTarget) {
e.stopPropagation();
console.log('Div clicked' + this.id);
console.log(window.location.href);
console.log(new Date().getTime());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <div id="1" data-track="thisdiv">
Any clicks in here should be tracked
</div>
-->
<div id="1">
Any clicks in here should be tracked 1
</div>
<div id="2">
Any clicks in here should be tracked 2
</div>
<div id="3">
Any clicks in here should be tracked 3
</div>
<table>
<th id="th">tester</th>
</table>
I'm building a carousel with basic jquery - I'm using the .css() rule to simply toggle opacity between each slide.
The way I want to do this is on click of each dot I want to check if the specific class exists and if it does hide all other items and show that one. So far I have:
$('.dot').click(function() {
$('.review-module--reviews').children().css('opacity', 0);
if ($('.dot').hasClass('dot1')) {
$('.review-one').css('opacity', 1);
$('.dot1').addClass('dot-active');
} else if ($('.dot').hasClass('dot2')) {
$('.review-two').css('opacity', 1);
$('.dot2').addClass('dot-active');
} else {
$('.review-three').css('opacity', 1);
$('.dot3').addClass('dot-active');
}
});
HTML:
<div class="review-module">
<div class="review-module--reviews">
<div class="review-one">
</div>
<div class="review-two">
</div>
<div class="review-three">
</div>
</div>
<span class="slider-dots">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</span>
</div>
However when I click on dots 2 and 3, it always targets the dot1 slide in the DOM. The 'dot-active' class gets added successfully to dot1 but on click of 2 and 3, that class does not get added.
I also tried explicity checking for a true value in the if statement like so:
if ($('.dot').hasClass('dot1') === true)
Is this the best way to do this? Or should I consider a different thought process?
The error is in this code:
if ($('.dot').hasClass('dotX'))
What you're actually doing here is fetching the list of all .dot elements and checking if the first one has the dotX class. As you can imagine, this will always pick up the first .dot element, which has the dot1 class.
What you probably mean to do is to check if the element that was clicked on has the dotX class, for which you need to check only that element.
Either do so by using the current scope of the click handler:
if ($(this).hasClass('dotX'))
or by checking the target of the click event:
$('.dot').click(function(e) {
$('.review-module--reviews').children().css('opacity', 0);
if ($(e.target).hasClass('dot1')) {
Try this may be it can help you -
JAVASCRIPT CODE-
$('.dot').click(function() {
$('.review-module--reviews').children().css('opacity', 0);
$('.dot').removeClass('dot-active');
if ($(this).hasClass('dot1')) {
$('.review-one').css('opacity', 1);
$(this).addClass('dot-active');
} else if ($(this).hasClass('dot2')) {
$('.review-two').css('opacity', 1);
$(this).addClass('dot-active');
} else {
$('.review-three').css('opacity', 1);
$(this).addClass('dot-active');
}
});
I suggest to use data-* attributes instead so give every .dot a data-review that refer to the related review div :
$('.review-module--reviews div').hide(); //Hide all the slides
$('.dot').click(function() {
var review = $(this).data('review');
$('.review-module--reviews div').hide(); //Hide all slides
$('.slider-dots .dot').removeClass('dot-active'); //Remove 'dot-active' class from all the dots
$(this).addClass('dot-active'); //Active the clicked dot
$('.review-'+review).show(); //Show the related slide
});
Then on click just get the review using jQuery method .data() and show the div with related class.
Hope this helps.
$('.review-module--reviews div').hide();
$('.dot').click(function() {
var review = $(this).data('review');
$('.review-module--reviews div').hide();
$('.slider-dots .dot').removeClass('dot-active');
$(this).addClass('dot-active');
$('.review-'+review).show();
});
.dot-active{
color: green;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="slider-dots">
<div class="dot dot1" data-review="one">dot1</div>
<div class="dot dot2" data-review="two">dot2</div>
<div class="dot dot3" data-review="three">dot3</div>
</span>
<br>
<div class="review-module">
<div class="review-module--reviews">
<div class="review-one">
Review-one
</div>
<div class="review-two">
Review-two
</div>
<div class="review-three">
Review-three
</div>
</div>
</div>
I am facing a weird problem. I have a link tag to download like
<div class="col-md-4 about-right">
<ul>
<h5>Get My Cv</h5>
<li><span class="glyphicon glyphicon-user"><input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF</li>
<li><span class="glyphicon glyphicon-user"><input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
<li><span class="glyphicon glyphicon-user"><input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
<center>
<a href="#" id="cvLink" download onclick="getCv()">
<button type="button" class="btn btn-info">Download</button></a>
</center>
</ul>
</div>
Which downloads documents using radio button checked validation.I have also 3 radio button. I change the URL link based on which radio button is clicked and download the documents using JavaScript. But the problem is when any of the radio button is unclicked I want to show an alert and make the link to do nothing.
I tried this by using "# , javaScript:void(0)". it shows the alert but also downloads the main HTML file on which I am working on. I just want the link will do nothing but show the alert only.
My code is something like below
<script>
function getCv() {
if(document.getElementById('radio1').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk";
}
else if(document.getElementById('radio2').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM";
}
else if(document.getElementById('radio3').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=0VDenJqUldud2M";
}
else
{
alert('Please Select Any Format To Download!!');
}
return false;
}
</script>
First, before we get to the answer to your question I'd like to take a moment to point out some issues with your HTML:
<div class="col-md-4 about-right">
<ul>
<h5>Get My Cv</h5>
<li><span class="glyphicon glyphicon-user">
<input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF
</li>
<li><span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
<li><span class="glyphicon glyphicon-user">
<input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
<center>
<a href="#" id="cvLink" download onclick="getCv()">
<button type="button" class="btn btn-info">Download</button>
</a>
</center>
</ul>
</div>
So, the first problem is one that recurs twice, that the only valid direct child element of a <ul> (or an <ol>) is the <li> element. The others you have in there, the <h5> and the <center> (more on that in a moment) are invalid HTML where they're placed here.
You have the option of either removing those elements from the <ul>, as I've done, or you can simply wrap them in a parent <li> so that the DOM structure becomes valid.
Further, the <center> element has been deprecated since HTML 4.1, I think. Regardless of when it was deprecated, however, it remains deprecated and should no longer be used. If you should need to center something in your layout use CSS to style the presentation of the document, HTML should only define the structure.
Also, and I think this is the last issue with your HTML, it's invalid HTML to have an interactive element, such as a <button>, within another interactive element, such as an <a>. In my demo to reproduce your problem I simply discarded the <button> element, since it has no download attribute.
That said, the following JavaScript is my proposed solution, the HTML is also in the snippet along with the JavaScript and CSS:
// a named function to highlight the <input> elements required
// in order to enable the <a> element:
function highlightRequirements(e) {
// caching the element that initiated the events
// here the <a> element:
let clicked = this,
// retrieving the elements that are required to
// be chosen amongst before the <a> can be used:
required = document.querySelectorAll(
// I store, in the <a> element the attribute:
// data-required="input[name=optradio]"
// here we use the HTMLElement.dataset interface
// to retrieve that selector, which is passed as
// the argument to document.querySelectorAll:
clicked.dataset.required
);
// if the event type (the event, 'e', is passed automatically
// from the EventTarget.addEventListener() method) is the
// 'mouseenter' event:
if (e.type === 'mouseenter') {
// if the <a> element has the download attribute set:
if (clicked.download) {
// we remove the event-listener bound to that element
// for both 'mouseenter' and 'mouseleave' events:
this.removeEventListener('mouseenter', highlightRequirements);
this.removeEventListener('mouseleave', highlightRequirements);
// and we iterate over the required elements, using
// Array.prototype.forEach(), and an Arrow function
// expression, to remove the 'highlight' class from
// the parentNode of each required ('req') element:
required.forEach(req => req.parentNode.classList.remove('highlight'));
} else {
// if the <a> element does not have the download property,
// we iterate over the required elements and add the
// 'highlight' class-name, in order to trigger the animation
// defined in the CSS, in order to draw the users' attention:
required.forEach(req => req.parentNode.classList.add('highlight'));
}
// otherwise, if the event was not the 'mouseenter' event (and so
// must be the 'mouseleave' event):
} else {
// we iterate over the required elements, and remove the 'highlight'
// class-name from their parentNodes:
required.forEach(req => req.parentNode.classList.remove('highlight'));
}
}
// a named function, fired by the radio inputs, to
// 'enable' or 'activate' the <a> element:
function linkActivate(e) {
// we use document.querySelector to retrieve the first
// - if any - element matching the supplied selector:
var link = document.querySelector(
// similarly to above, I stored the selector for the
// relevant <a> element in the 'data-link' attribute,
// and retrieve that attribute-value using the
// HTMLElement.dataset interface:
this.dataset.link
);
// setting the download attribute to 'true':
link.download = true;
// retrieving the 'data-downloadfrom'
// attribute-value from the changed
// radio input:
link.href = this.dataset.downloadfrom;
// adding the 'allowed' class to the
// <a> element, to show that interaction
// is now possible:
link.classList.add('allowed');
}
// selecting all the <input> elements with name="optradio":
let radios = document.querySelectorAll('input[name=optradio]'),
// converting that NodeList into an Array, using
// Array.from():
radioArray = Array.from(radios),
// retrieving the <a> element using
link = document.querySelector('#cvLink');
// iterating over the Array of radio-inputs using
// Array.prototype.forEach() and an Arrow function:
radioArray.forEach(
// here we bind the linkActivate() function as the
// event-handler for the 'change' event:
radio => radio.addEventListener('change', linkActivate)
);
// here we bind the highlightRequirements() function as
// the event-handler for the 'mouseenter' and 'mouseleave'
// events for the <a> element:
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);
function highlightRequirements(e) {
let clicked = this,
required = document.querySelectorAll(clicked.dataset.required);
if (e.type === 'mouseenter') {
if (clicked.download) {
this.removeEventListener('mouseenter', highlightRequirements);
this.removeEventListener('mouseleave', highlightRequirements);
required.forEach(req => req.parentNode.classList.remove('highlight'));
} else {
required.forEach(req => req.parentNode.classList.add('highlight'));
}
} else {
required.forEach(req => req.parentNode.classList.remove('highlight'));
}
}
function linkActivate(e) {
let link = document.querySelector(this.dataset.link);
link.download = true;
link.href = this.dataset.downloadfrom;
link.classList.add('allowed');
}
let radios = document.querySelectorAll('input[name=optradio]'),
radioArray = Array.from(radios),
link = document.querySelector('#cvLink');
radioArray.forEach(
radio => radio.addEventListener('change', linkActivate)
);
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);
#keyframes highlight {
0% {
background-color: transparent;
}
75% {
background-color: limegreen;
}
100% {
background-color: transparent;
}
}
ul + a {
display: inline-block;
text-align: center;
text-decoration: none;
margin: 0.5em auto;
}
ul + a {
color: #66c;
cursor: no-drop;
border: 2px solid #66c;
padding: 0.2em 0.4em;
border-radius: 0.5em;
opacity: 0.5;
}
ul + a.allowed {
opacity: 1;
cursor: pointer;
}
li span.highlight {
animation: 3s highlight;
}
<div class="col-md-4 about-right">
<ul>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio"class="rad" id="radio1" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk" data-link="#cvLink" />
</span>Download In PDF</li>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio2" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM" data-link="#cvLink" />
</span>Download In Word Doc
</li>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio3" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=0VDenJqUldud2M" data-link="#cvLink" />
</span>Download In HTML
</li>
</ul>
Download CV
</div>
JS Fiddle demo.
The above seems to work, though I've not verified it properly; it certainly doesn't throw any errors playing with it in the JS Fiddle demo (attached), and I think clearly shows that selecting from the radio <input> elements is required.
It seems that with the download attribute present that the download is initiated before the execution of the function you had attached via the onclick in-line event-handler (which is obtrusive JavaScript, and is why I bound events in my demo entirely in JavaScript, though I did bind a lot of data to the elements in the HTML), in this attempted solution I remove that download attribute and only add it, via JavaScript, once one of the radios is selected.
It is not enough to have the getCv function return false. You need to write the return false into the onclick itself or have the result of the getCv function call be returned inline in the onclick itself:
<a href="#" id="cvLink" download onclick="return getCv();">
Also, the return value of the getCv function should depend on whether you want the link to be executed:
function getCv() {
if(document.getElementById('radio1').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk";
return true;
}
else if(document.getElementById('radio2').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM";
return true;
}
else if(document.getElementById('radio3').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=0VDenJqUldud2M";
return true;
}
else
{
alert('Please Select Any Format To Download!!');
return false;
}
}
You should add an "return false;" statement to the end of the getCv function.
This will prevent the a from executing.
i have a data table with a column like this
This is my HTML
<td class="orders-options column-invoice">
<strong>
<a class="row-title" href title="View detail">78060</a>
</strong>
<div class="locked-info"></div>
<div class="row-actions">
<span class="edit">Edit</span>
<span class="view">View</span>
</div>
</td>
I would like to show certain options like, "Edit" or "View" when user mouse over . My plan is to addclass on to so that it's visibility: changes hidden; to visible; according to CSS file.
This is my JS
$("td.orders-options").focusin(function() {
$(this).find(".row-actions").addClass('visible');
});
$("td.orders-options").focusout(function() {
$(this).find(".row-actions").removeClass('visible');
});
However this doesn't seem to have any effect on html.
Also I'm curious if this function will change class only in the that is focused or all on other that are not focused
You can use mouseover and mouseout or simple hover.
$("td.orders-options").mouseenter( function() {
$(this).find(".row-actions").addClass('visible');
}).mouseleave( function() {
$(this).find(".row-actions").removeClass('visible');
});
Also instead of visibility, toggle display property in css. Because visibility:hidden will take space though it's hidden.
In terms of hover, it will be like:
$("td.orders-options").hover( function() {
$(this).find(".row-actions").addClass('visible');
} ,function() {
$(this).find(".row-actions").removeClass('visible');
});
Update: Adding DEMO
$("td.orders-options").hover( function() {
console.log("Rias");
$(this).find(".row-actions").addClass('visible');
} ,function() {
$(this).find(".row-actions").removeClass('visible');
});
.row-actions.visible {
display: block;
}
.row-actions {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<table>
<td class="orders-options column-invoice">
<strong>
<a class="row-title" href title="View detail">78060</a>
</strong>
<div class="locked-info"></div>
<div class="row-actions">
<span class="edit">Edit</span>
<span class="view">View</span>
</div>
</td>
</table>
You should rather use .hover()..hover() method specifies two functions to run when the mouse pointer hovers over the selected elements:
$("td.orders-options").hover(function(){
$(this).find(".row-actions").addClass('visible');
},function(){
$(this).find(".row-actions").removeClass('visible');
});
Easily achieve your goal using toggelclass
$("td.orders-options").hover( function() {
$(this).find(".row-actions").toggleClass('visible');
});