Empty href is not working with javascript - javascript

I searched the forum for this and I cannot find a solution to my problem. If I missed something please point me to the right thread.
I have three divs that replace each other onclick.
Here's my HTML:
<div id="a">AAAA <a id="showa" href="javascript:void(0)">Show A</a></div>
<div id="b">BBBB <a id="showb" href="javascript:void(0)">Show B</a></div>
<div id="c">CCC <a id="showc" href="javascript:void(0)">Show C</a></div>
And I am using this javascript to achieve this:
function ReplaceDivs(a,b,c){
$("#showa").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#b").show();
$("#a").hide();
$("#c").hide();
});
$("#showb").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#c").show();
$("#b").hide();
$("#a").hide();
});
$("#showc").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#a").show();
$("#b").hide();
$("#c").hide();
});
I am using preventDefault and I also tried entering by entering javascript:void(0) but my code is still not working.
It's working without a problem when I am testing it on fiddle.
You can see my example here
You can see the actual page here
What I am missing?
Also, I was wondering if there's a way to add animation so the divs show/hide nicer. This is the first time I am working on javascript so I don't really know where to start on this.

The code on your actual page is <a id="showa" href="">Show A</a>. A blank href equals a link to self. You need this:
This is the preferred way for links without an action.

I had the exact same problem. The solution in my case was fixing the path to jquery source.
Before
<script src="scripts/vendors.js"></script>
After
<script src="/scripts/vendors.js"></script>
Added a slash in the path before scripts/...
I got this problem when I created a new page-> typed in the source path-> picking up the source path.
But it worked fine without the front slash in other sample prebuild pages that i got as template. Yet to figure out the resaon for that.

Try using # for the value of your href.

Related

Hash link disables relative link in HTML

I'm building a webapp that basically its an one-page webapp so to link to another part of the app is like this:
This is possible because I used JavaScript that contains animations and different stuff, the problem is that somehow, this method disables the possibility to link like this:
How can I have both links, without disabling the hash links?
EDIT: To be honest I dont know which part of the js its causing this behaviour because I took a template, but here is the js:
https://github.com/gomobile/template-list-view/blob/master/www/lib/appframework/appframework.ui.min.js
I believe you have a code like this
$('a').on('click', function(e) {
e.preventDefault();
});
You need to have an if like
if ($(this).attr('href').indexOf('#') == 0) {
e.preventDefault();
}
OR better change the selector to:
$("a[href^=#]").on('click', function(e) {
e.preventDefault();
// your animation here.
});
This code will just apply to anchor elements that have the href starting with #
------- update --------
You added a minified js :).
If you don't have the problem in your code, you can fix it with a hack like this:
$('a:not([href^=#])').on('click', function(e) {
window.location.href = $(this).attr('href');
});
But you should really find the issue, not fix it like this :)

jQuery .change not working in WooCommerce

I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class

what's a better way to write javascript:void(0)?

What's a better or correct way to write the following:
click here
If you're using jQuery, the proper way would be:
html
Link
jQ
$('a').click(function(e){ e.preventDefault(); $('p').show(); });
Just omit the href entirely:
<a onclick ="$('p').show()>click here</a>
Since you're using jQuery, use it at its full potential:
<a id="your-id">click here</a>
<script>
$('#your-id').click(function() {
$('p').show();
});
</script>
Use # and return false in the onclick handler.
return false prevents the URL from being followed. An anchor to # points to the current page, so that it makes sense to open/bookmark the link.
click here
The semantically correct thing to do here is to use a button tag instead of an a tag. It is bad practice to use javascript:void(0) in a link. Shoot, it's bad practice to include any inline JavaScript.
Let it point to an URL which will make the desired element to show up by a server side view technology such as PHP/JSP/ASP so that the link still works for clients who have JS disabled.
E.g. in JSP:
link
<p class="bar ${param.foo != 1 ? 'hide' : ''}">paragraph</p>
with
$(".foo").click(function() {
$(this).next(".bar").show();
return false;
});

How to go to an specific anchor when entering the page (doesn't work)

First of all, thats my current state of play: thsbrk.de.
The black boxes should be e.g. a about section. I want to achieve that if you enter my page (thsbrk.de) you directly go to my reference section (anchor '#references'). Then, if you hit the about link you will scroll up to that about section. I already tried to make it working but it doesn't. The anchor seems to be not working.
It would be awesome if someone could look at my code and offer me a solution :)
(The scroll isn't implemented yet, I only ask for the anchor problem)
EDIT: Here I've got a example how it should work: Example
Give a script tag like this in the head.Let it be the first script also.
<script>
location.href="http://thsbrk.de/#references"
</script>
From your code, you have did the same. But just try reordering the script tags it might work.
Plain JS:
window.onload=function() {
var anchorHash = 'references';
document.getElementsByName(anchorHash)[0].scrollIntoView();
}
Here is a jQuery example from 2009 - there may be newer ways
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
In your case this might work
$(document).ready(function() {
var anchorHash = 'references';
var pos = $('#'+anchorHash).position();
window.scrollTo(0,pos.top);
});
Try this and tell me the result:
$(document).ready(function() {
window.location.href = '#references';
});
and then modify your anchor tag like this:
<a name="references">Here</a>

JQuery isn't recognising a #id selector, seems to be dependent on the URL

I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.
<script>
$(document).ready(function() {
$("#select_mailshot").click(function () {
alert('mailshot');
document.location.href = "/products/1";
});
$("#select_blog").click(function () {
alert('blog');
document.location.href = "/messages";
});
$("#select_contact").click(function () {
alert('contact');
document.location.href = "/contacts/1";
});
});
</script>
(the alert steps are in there for debugging)
The following html code in index.html.erb
<ul>
<li id="select_mailshot">Mailshot</li>
<li id="select_blog">Blog</li>
<li id="select_contact">Contact us</li>
</ul>
The intention is that this effectively creates 3 buttons.
When clicking on any button from http://myurl.com/ it all works.
When clicking on any button from http://myurl.com/messages (get to this via the middle button) it all works
When starting from http://myurl.com/products/1 it all stops working (the alerts do not trigger). In fact when starting from http://myurl.com/anything/id it stops working.
I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.
Can anyone shed any light as to what's going on here?
What does firebug tell you? Do you have javascript errors on the page? if so, what are they? Are you sure the jQuery library is included correctly in the deeper pages ( i.e. is it a relative path? )
Is this javascript inlined?
If not, then maybe the link is relative so when you try to load it from messages/40 you need ../script.js. Another solution is to use absolute URLs (http://myurl/script.js) or virtual (/script.js).
Thanks to cherouvim and digitaljoel.
This was due to javascript files being included relative to the current URL.
The following was included in the head tag
<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
I changed it to
<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>
(note the extra "/" in the src attribute) and everything works as expected.
I worked this out after checking the error logs on the server and in the browser.
Feeling a little dumb but a lesson well learned.
I was using FaceBox to create modal overlays and I couldn't figure out why I was having the same problem.
I turns out that the listener wasn't being attached to HTML elements until it was visible. (The items were available if I viewed source, but jQuery seemed not to attach a listener until it was visible.)
For anyone having the same problem, I'd suggest moving your click() code to a point where the HTML element you're attaching to is visible.
Also, I've found selecting by ID does give more problems than class. I have no idea why. (No, there were not duplicate IDs.)
Hope this helps someone with the same problem!

Categories