1

I have a site at whensayfeed.meteor.com. Each of those "Posts" is a nested in a <a></a> element. The heart on the right side of each one is supposed to be a "like button" so it also needs to be clickable. However, since it's nested in an <a> it just goes to that address when clicked. I need a way to either exclude this element, or do this in some other way. I've tried to just nest the .chant element in the link, but it doesn't pick up that click. What do you believe I should do?

floor
  • 1,519
  • 11
  • 24
Isaac Wasserman
  • 1,461
  • 4
  • 19
  • 39
  • css z-index should fix that problem. http://www.w3schools.com/cssref/pr_pos_z-index.asp – floor Jun 12 '15 at 16:38
  • I tried z-index, but it didn't work for me. Maybe I didn't do it right. Would you mind trying to debug it in browser and post solution? – Isaac Wasserman Jun 12 '15 at 16:40
  • when I clicked on your link it was just a blue screen. – floor Jun 12 '15 at 16:40
  • I just tried it. Your right, it just takes a few seconds. – Isaac Wasserman Jun 12 '15 at 16:41
  • 1
    perhaps either return false or preventDefault may give you the result you are looking for. I tried going to the page but it's just blue with no posts. – Tim Wilson Jun 12 '15 at 16:41
  • What browser are you guys using? Both of my webkit browsers are working as well as my phone – Isaac Wasserman Jun 12 '15 at 16:42
  • I use firefox. Also where is this extra a tag that you want to click? The heart is an image no a tag around it. Also why is the content being wrapped in a anchor tag? – floor Jun 12 '15 at 16:43
  • There is no tag. It does nothing right now. Eventually it will be an onclick event – Isaac Wasserman Jun 12 '15 at 16:44
  • whenever I inspect element nothing comes up in the inspector :\ – floor Jun 12 '15 at 16:48
  • Are you on a Mac or Windows machine? It works on my phone safari, safari, chrome, my brothers chrome. IDK what's going on – Isaac Wasserman Jun 12 '15 at 16:50
  • I am using a mac, firefox. – floor Jun 12 '15 at 16:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80413/discussion-between-isaac-riley-wasserman-and-floor). – Isaac Wasserman Jun 12 '15 at 16:54
  • the href says "whenisay:/.../.../", have you wrote any javascript for it?, in that case use event.target which will give you the img target as source from which you can identify the mouse click happened on the heart img – Dickens A S Jun 12 '15 at 17:29
  • I don't see a reason for you to make those nested anchor tags. Actually I don't see any reason to nest a tags. if you have a link and it needs to span like a button (wider and longer then text) just apply div > link > text. then make link display block with height and width of 100% – qwerty_igor Jun 12 '15 at 17:50

2 Answers2

1

Nesting tags is illegal

Try making your like button a link that's outside of the post link. You can then use position: absolute to overlap your like button on top of the post.

Multitallented
  • 51
  • 2
0

Try this:

  • Set the z-index: 0; of .post-contain instead of previous z-index: -20;.
  • Have a function receiving anchor click events like so: 
    function onAnchorClicked(e){
 if(e.target.nodeName==='IMG'){
  console.log('Image clicked');
  e.preventDefault();
 }else{
  console.log('Anchor clicked');
 }
}
  • Assign the click event to all anchor tags: $('a').on('click',onAnchorClicked);
  • This way, you can do what you want to do when img is clicked.

    • Having said that, although HTML5 does allow block-level elements to be nested inside an anchor tag but legacy browsers will have a hard time.

    A solution to that perhaps could be to have your posts wrapped around a div element instead of anchor which behaves like an anchor tag accompanied by a data-link attribute with values containing your links that you can populate from backend e.g.: <div class="anchor-link" data-link="LINK GOES HERE">...</div> and then assign the click as described above (changing the selector obviously).

    Hope this helps.

    Community
    • 1
    • 1
    Tahir Ahmed
    • 5,687
    • 2
    • 17
    • 28
    • This sort of helps. When I click the heart, it runs my onclick event, but shortly after goes to my link. – Isaac Wasserman Jun 12 '15 at 23:57
    • @IsaacRiley-Wasserman have you deleted the `img` tag? I don't see it on the website anymore. Also, your `init();` function doesn't work because `body`'s `onload()` event doesn't guarantee that your content has also loaded. – Tahir Ahmed Jun 13 '15 at 05:07
    • Use events exposed by Meteor such as `Template.FullFeed.onCreated`, `Template.FullFeed.onDestroyed` or most important in your case, `Template.FullFeed.onRendered` event. Do the things you do inside `init();` in this `onRendered` method. – Tahir Ahmed Jun 13 '15 at 05:09