I"m trying to make a chrome extension. One of the functions of the extension is to grab the link of the post that the user has upvoted. I'm a little confused on how to go about it...
This what I have gotten to work on it so far as far as testing is:
document.addEventListener('click', function(e) {
if (e.target.matches('.arrow.upmod')) {
alert("Hi");
}
});
Which just displays "Hi" when you click the upvote button. I was just testing to see if it actually detects the vote change.
I was playing around with some jQuery, and if you write:
$('div .arrow').parent().parent()
you get the with the information I need. Here is what it returns:
<div class=" thing id-t3_5env7c odd link RES-keyNav-activeThing" id="thing_t3_5env7c" onclick="click_thing(this)" data-fullname="t3_5env7c" data-type="link" data-author="randy001rd" data-author-fullname="t2_rq7wc" data-subreddit="videos" data-subreddit-fullname="t5_2qh1e" data-timestamp="1479996207000" data-url="https://www.youtube.com/watch?v=f72WZwvMTj4" data-domain="youtube.com" data-rank="1" data-context="listing">
What I need is the data-url and data-domain from the post that is upvoted. Any help or direction would be greatly appreciated. Thanks!
jQuery provides a .data method that you can use to retrieve the fields. $("div.arrow").parent().parent().data("url") should give you the data-url field, and getting the domain is similar.
alert($("div").data("url"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thing id-t3_5env7c odd link RES-keyNav-activeThing" id="thing_t3_5env7c" onclick="click_thing(this)" data-fullname="t3_5env7c" data-type="link" data-author="randy001rd" data-author-fullname="t2_rq7wc" data-subreddit="videos" data-subreddit-fullname="t5_2qh1e" data-timestamp="1479996207000" data-url="https://www.youtube.com/watch?v=f72WZwvMTj4" data-domain="youtube.com" data-rank="1" data-context="listing">
Related
Probably something simple so sorry!
Currently, I have <button id="pin">Get pin</button> and it works. (there is a script later on that this calls).
But, I want it to work on some text - preferable an <a href> as the styles are set up on this - so something like Get pin - obviously this would not work so would like to know how to get it to work! :)
I am trying to get it to run the below when clicking it:
<script>
$("#pin").click(function() {
swal("Your support pin", "Your support pin is: {$support_pin}", "info")
});
</script>
Thanks
Change href to "#" and add a click listener and it should work
Get pin
I need help with the next issue. In my code, to toggle some fields I'm using
<a onclick="$('#toggledFormId').toggle()" >Presss</a>
and for me everything was fine, but get issue during the test on other computers. Nothing happends, no errors, no alerts, no toggling.
I know that it's because my version of Chrome is the last one, and on the test computers older, but I need to find universal solution.
I tried this
<script>
$('#hrefId').click(function()
{
$('#toggledFormId').toggle();
});
</script>
this
<script>
$('#hrefId').on('click', function(){
$('#toggledFormId').toggle();
});
</script>
both of this variant by using classes(not id) and some other similar, not to comlicated variants, but with no results.
I will be grateful for any suggestion, especially if it works ^_^
There might be various reasons why it won't work on older chrome versions.
You simply made a spelling mistake with your ids => check your spelling and avoid duplicate ids
One or more closing tags in your markup are missing(if so, chrome attempts to
close them and often miserably fails.).
=> check your markup and try again.
Your items are being added dynamically. In this case try:
$( "body" ).on( "click", "#hrefId", function() {
$('#toggledFormId').toggle();
});
Funny, but non of methods that were purposed didn't work untill...
AdBlock and other similar programs do not let the fields open up. Maybe they think that toggle part of the form is spam or something like this, so after they were disabling suggested solutions started work.
Thank you everyone for help.
I was looking to find out what version of jquery do i used based on the following script that my friend wrote for me, unfortunately he is on holiday so I can't get in touch with him.
I have added the following code within my body tag and then calling it below that:
$(document).ready(function() {
$('.top_cols_hide_arrow').click(function() {
$('.finishing_top_cols_hide').toggle("top");
});
$('.top_cols_hide_arrow').click(function(){
$(this).toggleClass('active');
});
});
and the HTML part:
<div class="finishing_top_cols_hide_arrow_mn">
<span class="finishing_top_cols_hide_arrow">open</span>
</div>
I am trying to run this on my localhost but whenever I click the arrow nothing happens and then I realised that I dont really have a script source for this to function and I'm not sure what I need to link to, in order to get this to work.
If somebody could please advise.
You can use this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
The code that your friend wrote for you is simple so most of Jquery versions will support it.
I need to create a log in popup on mouse-over on a link lust like CodeProject
Sign In link works.
In my code the log in popup is not appearing on right place and mouse over is not working properly. But I want same as the code project log in popup..
How I can achieve this..
Any suggestion is appreciated..
When I read your question, the following came to mind:
http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
It "looks" similar to Code Project's solution, however behavior-wise, it does require minor modification; i.e. It triggers on 'click' instead of the hover/mouseover that you want.
Hopefully its somewhat useful.
first of all ...try this..
.loginpopup{display:none;....Your another style}
.loginpopup:hover{display:block;....Your another style}
I guess something like this will work, with jQuery of course.
<style>
#popup {
display: none;
}
</style>
<script>
$("#yourlink").mouseenter(function () {
$("#popup").show();
});
</script>
<div id="popup">Your popup</div>
<a id="yourlink" href="whatever">http...</a>
Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks
on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.
Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');
Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise