A link on my websites homepage doesn't work properly - html

I've got a problem where an anchor link on homepage isn't working properly. The link works if opened in another window. The link itself works fine, also I can see link when hovering with mouse over it.
The URL for my website is https://kuddexperten.se/
The button URL is https://kuddexperten.se/collections/kuddlandet
I've tried validate the code in JSON formatter etc, but since i got no experience of coding its kind of hard to identify the problem as i get alot of errors and warnings.
I've tried using diffrent browsers and turning off adblockers etc. It doesnt work either on desktop or mobilephone.
I'd be happy if anyone had a clue of why the button doesnt work as it should.
Picture of the button:

As you can see in Chrome's Elements / Event Listeners subtab, there's a JavaScript event listener on it in theme.js:
$('.btn-link').on('click', function(e){
e.preventDefault(); // <------------------------- here's your saddle bur
var $this = $(this);
$this.closest('.card').toggleClass('open');
});
You probably shouldn't be using classes intended for a button element on an anchor.

Related

Apple pencil click on button or anchor element not working on webapplication

We have a webapplication, which works fine when using the finger to touch for actions. We just got a apple pencil but that does not click the buttons or links, we can write using that in the textarea's, but any button click does not work. I tried to search for a probable solution, but could not figure our any directions. Any idea of what could be causing that will be very helpful.
One thing I was able to figure out, if I add the event onmousedown rather than onclick, all the events work, but I do not want to change the whole website code from onclick to onmousedown if there is another easier way of doing this. Thank you for any input !
I could not find a proper solution for this. But I have tried this and this seems like working find
$(window).bind('touchstart', function(e) {
e.target.click();
});

Issue with implementing Modal using Button inside a link

I'm working on an existing MVC4 application, and need to implement a modal form.
I'm trying to implement this solution...
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
This works just fine, but the example uses a link, and I need it to be a button.
I could try to style the link as a button, but there's a bunch of other buttons on the same form and it would need to look exactly like those, and I haven't found a good way to style the link exactly like the other buttons in every browser, since most of the button's default style properties aren't overridden.
I've tried wrapping the link around a button, like shown below...
<button type="button">Continue</button>
This works fine in Chrome, but in IE11 when I'm testing the button shows up but doesn't do anything when I click it. Again, the exact same code works fine in Chrome - pressing the button does pop the modal open, but doesn't work in IE. Also, you get an HTML5 validation warning when a button is nested inside a link.
So, what can I do to make my link look exactly like all my other buttons? Or is there some way I can implement this modal solution without using a link that directs to an anchor?
Not sure why your current example isn't working but there are plenty of examples in this stack overflow question/answer Here.

Links Not Doing Anything

I'm making a rather simple online store page at http://pyentertainment.com/store.html integrating PayPal for payments, and just when I thought I was done I noticed none of the hyperlinks seem to do anything. By this I mean when I click them (I'm using Chrome and the same happens on other browsers too), on the status bar where it normally says "loading www.xyz.com" it changes to something for a fraction of a second and then disappears, not loading a new page; it's way too fast for me to catch what it says.
This happens to the links on the nav bar and to the social media links on the right.
Some context: When you click on an item, the page dims and an iframe comes up showcasing said product, with PayPal cart buttons. View cart/Add to cart open a new tab, but if you close them by clicking "continue shopping" they throw another error which although I'm not too concerned about might be the cause of the problem; I know iframes can be iffy to work with.
I'd appreciate any help. The links work on the rest of the domain, too.
Thanks in advance!
I would suggest downloading firebug from here:
Firebug Home Page
And watching what loads while you're loading your page, it will tell you if the resource is actually being located/served when the page is processing. If it's not, you may want to review how you built your links toe ensure they're properly configured.
Thanks guys, the issue ended up being that I had the entire body to check for clicks, and if the user clicked outside the item display box while it was on, dim it out, like this:
$('body').click(function(event)
{
if(!$(event.target).is('#productDisplay'))
{
$("#darkenBackground").fadeOut();
$("#productDisplay").attr('src','buy/loading.html');
return false;
}
});
I got rid of that feature and instead added a little close button to do the same thing. The links work now! Thank you all for your help :)
i cant give a full answer but it looks like its your dimmer specificly the part that detects the body click. try putting it into an if statement to check that the functon has been called before running the body click function
EDIT
something like
if(product displayed) {
look for click event on body
}

How to store a tag visited state after calling preventDefault in click event?

I have couple of a tags in my page. Clicking each result in opening a popup dialog showing detail about blog post (preventing a tag default behavior e.g.: making it visited). So what I want to do is after showing popup dialog set visited state of a tag manually.
My code look something like this:
$("a.news-part").click(function(e){
//do popup
e.preventDefault();
//here I want to store a tag visited state.
});
Any help is very appreciated.
You could do something like this...
$("a.news-part").click(function(e){
//do popup
e.preventDefault();
$(this).addClass('visited')
});
Then, in your CSS, you'd just need to do...a:visited, a.visited or something along those lines per your actual CSS.
Other than the other proposed solution, you could use history.pushState on modern browsers. However, I have not tested yet whether that will actually mark the link as visited.
A browser assings the :visited pseudo class once the link is in its history. You could support older browsers if you replaced your links in runtime with hash history hack compliant URLs. Do a little bit of googling, there are a lot of StackOverflow questions on that already, in case you don't know what I'm talking about.
Good luck!

mailto link not working in chrome extension popup

This issue drove me nuts for 2 days. I made a simple chrome extension which calls a server-side program that returns HTML that I then stuff into a div in the popup. It was all fine, except for the simple anchor link containing a "mailto:xxx#yyy.com" href. An email message composition window would not pop up.
Workaround: Add target="_blank" attribute
I would like to know why this is necessary.
It might have something to do with extensions running in separate processors from the browser, and therefore a target attribute is needed so that a new tab/window can be opened... there are some websites that don't work when displayed inside extension popups for this reason, because the extension frame won't navigate to certain pages...
I know this is an old question, but I ran into a similar situation. I had to send an email, but I had to do it with a button instead of a link and had to finagle this:
function sendEmail(){
var mail = 'mailto:xxx#yyy.com?subject=Subject&body=Body';
var newWin = window.open(mail);
setTimeout(function(){newWin.close()}, 100);
}
It's not ideal, because it opens a new window that's visible to the user instead of doing it instantly. In fact, my first attempt was this (which works in an HTML file, but doesn't work in my extension):
function sendEmail(){
var mail = 'mailto:xxx#yyy.com?subject=Subject&body=Body';
window.open(mail).close();
}
Not sure why adding a timer makes it work in this instance as opposed to just doing it like in a regular HTML file, but that worked for me so I thought I'd share.