i´ve got the following code in my website:
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
I want to do the data-action called by a javascript-function. Is it possible?
Yes it is possible, and you would use the .getAttribute('data-action') to get the value
console.log(document.getElementsByClassName("jr-btn-success")[0].getAttribute('data-action'))
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
Related
I'm trying to display a few images based on the categories they fall in. Every image falls into more than one category. I have links above the images representing each of the categories, and the idea is that when people click one of the links the images in that category are displayed and the others are hidden.
I have the following code for the category links:
<a class="cat-title" href="#" data-filter="cat-102">Category name</a>
<a class="cat-title" href="#" data-filter="cat-2">Category name</a>
<a class="cat-title" href="#" data-filter="cat-17">Category name</a>
<a class="cat-title" href="#" data-filter="cat-151>Category name</a>
Then for the images:
<a data-tags="cat-2, cat-3, cat-17, cat-101, cat-102, cat-132, cat-151" href="link">
<img src="src">
</a>
<a data-tags="cat-2, cat-102, cat-151" href="link">
<img src="src">
</a>
etc.
Now the problem is I don't know a lot about jquery, but I tried Googling for help. The problem is that I would need to filter the images not only for one tag, but for more tags (so that the image displays if any of the categories it belongs to are selected). I wasn't able to find any example online of this situation.
Any help is appreciated!
Use classes instead of data-tags.
<a class="filtered-image cat-2 cat-3 cat-17 cat-101"><img src="src"></a>
Then when the user clicks on a filter, you can do:
$(".cat-title").click(function() {
$(".filtered-image." + $(this).data("filter")).show();
return false; // Prevent default link action
});
You can do it this way:
$('.cat-title').on('click', function (e) {
e.preventDefault();
var filter = $(this).data('filter');
$('[data-tags]')
.hide()
.filter('[data-tags*="' + filter + ',"],[data-tags$="' + filter + '"]')
.show();
});
https://jsfiddle.net/b2cz2k6a/1/
I have a export to excel link on my page like:
<a download="queryResults.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
I would like to present it as a button, I tried something like:
<button download="queryResults.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</button>
Hoe should I get it to work? Thanks.
<a download="queryResults.csv"
onclick="return ExcellentExport.csv(this, 'datatable');" href="#">
<button>Export to CSV</button>
</a>
The button element has no href attribute. Instead you have to provide a type attribute, which has to be type="button". See the specs here: HTML button tag
I want to include this kind of code to a second place.
<div id="social-links">
<!-- Facebook -->
<a href="https://www.facebook.com/name" target="_blank">
<i class="fa fa-facebook-square fa-lg"></i>
Facebook
</a>
<!-- Google+ -->
<a href="https://plus.google.com/+name" target="_blank">
<i class="fa fa-google-plus fa-lg"></i>
Google+
</a>
</div>
Because of the available width I want to replace the with <br/>.
This is my current code but it doesn't work:
$( " " ).replaceWith( "<br/>" );
JSFiddle
here you go:
$('#social-links').html($('#social-links').html().replace(/ /g,"<br/>"));
UPDATE:
Now that I think about it again after 3 years, I'd do it this way:
const $socialLinks = $('#social-links');
$socialLinks.html($socialLinks.html().split(' ').join('<br/>'));
It has much better performance than the previous code.
If you like plain JS:
var socialLink = document.getElementbyId("social-links");
socialLink.innerHTML = socialLink.innerHTML.replace(/ /g,"<br/>");
You can use:
$('#social-links').html($('#social-links').html().replace(/ /g, '<br/>'))
Ah man, late to the party!
Fixed here in a slightly longer version: http: //jsfiddle.net/kitsonbroadhurst/jyrv8e3j/2/
This question has been asked before by the way: Is it possible to remove ' ' using JQuery..?
Try a thorough search before asking next time
I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!
Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})
the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})
Should be:
$(this).next('.show-share-box').slideToggle('slow');
$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');
I just want to clone the link provided (i.e. href="xxx", not all the junk in between) and put that link on another link elsewhere on the page.
This is the link I want to clone:
<a href="/ReviewNew.asp?ProductCode=TRU%2DGDM49">
<span class="PageText_L479n"> |
<span id="write">Write a review</span>
</span>
</a>
This is where I want to clone the link to (on id sendreviewlink):
<li id="sendreview">
<a id="sendreviewlink" href=""><em>Write a Quick Review</em>
<span class="hwText">Earn $2 For Every Approved Review</span>
</a>
</li>
This is my JavaScript code which I have tried so far:
$('#write').closest('a').clone().wrap('#sendreviewlink');
$('#write').closest('a').clone().appendTo('#sendreviewlink');
$('#write').closest('a').clone().ReplaceAll('#sendreviewlink');
you can just set the href like this
$('#sendreviewlink').attr('href',$('#write').closest('a').attr('href'));
Here you go!
http://jsfiddle.net/bsXTM/
Not very polished tho, but ill leave that up to you.