Hash link disables relative link in HTML - javascript

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 :)

Related

Rails 4 Delete link influenced by Template JS

I am using rails 4 with devise. All the Devise functionality works as expected including the "Sign Out" link given by the following piece of code:
= link_to "<span class= 'fa fa-power-off'></span> Sign Out".html_safe, destroy_user_session_path, method: :delete
I have since installed a template and ran into some issues. The JS in the template file seems to be causing some difficulty when I place my "Sign Out" link in a dropdown on the Navbar.
If I place the link in my normal body content, it does work. This led me to the template source code to try and figure out why this link was sending a GET request instead of a DELETE request when placed in a Template navbar dropdown. After I deleted the following piece of code, my link started working:
$('.dropdown-menu').on('click', function(e) {
e.stopPropagation();
var Target = $(e.target);
var TargetGroup = Target.parents('.btn-group');
var SiblingGroup = Target.parents('.dropdown-menu').find('.btn-group');
// closes all open multiselect menus. Creates Toggle like functionality
if (Target.hasClass('multiselect') || Target.parent().hasClass('multiselect')) {
SiblingGroup.removeClass('open');
TargetGroup.addClass('open');
}
else { SiblingGroup.removeClass('open'); }
e.stopPropagation();
var Target = $(e.target);
var TargetGroup = Target.parents('.btn-group');
var SiblingGroup = Target.parents('.dropdown-menu').find('.btn-group');
});
When I added the remainder of the Template js files, it stops working again, so I assume that something similar is done in one of the other files. Instead of removing pieces of JS, I am trying to understand what's happening. I understand that Rails uses it's ujs to trigger a DELETE request but why is the above piece of JS code hindering Rails from doing what it's supposed to?
PS. I am not fluent in JS so this might seem simple to somebody who knows JS extremely well.
I think the problem is with e.stopPropagation(); lines in the js code. These are likely not really needed. However, it may depend of kinds of other links in the dropdown menu. Just try to remove those two lines and check if everything works fine.

Auto Loading HTML in a Div with Javascript

I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});

How to make this grid work

I purchased a html5 theme that I am customizing for my church website. It has two cool features:
A tab script that allows for multiple items to displayed on one page.
a grid that will allow me to display sermons in a series in a neat and orderly way.
Both of these work well when used alone, but when I try to use the grid inside the tabs, no dice.
I am a design guy and know very little about Javascript functions and need help. Here is what the developer, who has not got back with me said to do:
"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"
$(".nav-tabs li")click(function(e){
ADORE.IsoTope();
e.preventDefault();
}
I do not know where to add this or even if something else needs to be added. I have also attached a link where you can download my code (html/php and .js file) so you can see what is going on. Any help would be appreciated. Remember, I know very little about Javascript.
https://www.dropbox.com/s/jypfjz3a89soxh7/example.zip?dl=0
Add:
$(".nav-tabs li a").click(function(e){
$('a[href="' + $(this).attr('href') + '"]').tab('show');
var IsoTopeCont = $(".isotope-grid");
IsoTopeCont.isotope({
itemSelector: ".grid-item",
layoutMode: 'sloppyMasonry'
});
});
at Line 469 of your init.js and it should work for you. Thanks
You can try the following: inside your init.js add the following:
$(".nav-tabs li").click(function(e){
e.preventDefault();
ADORE.IsoTope();
});
e.g. in the first line after var ADORE = window.ADORE || {};
As you mentioned that you don't know much about javascript: the first line starts with
jQuery(function($){ ...
This takes care about that everything inside the { will get executed when jQuery is loaded.
I'm not sure if the e.preventDefault(); is necessary - this is used e.g. to prevent links from getting executed and attach a different function to the click() event, so it could be possible that Isotope is working when a tab is clicked, but the tab is not working anymore.
If this won't work, you can check with web dev tools if there are any script errors. In case you're unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console

Small riddle: Why this isn't working on Chrome?

Any ideas on why the following code perfectly 'posts' when using FF (I can see the DB updated) but fails on Chrome?
$("a").click(function() {
$.post("ajax/update_count.php", {site: 'http://mysite.com'});
});
Tip: jQuery version is jquery-1.4.3.min.js
Update
The issue seems to be that when the link is clicked, a new page is loaded, which seems to be stopping the post in Chrome... Is that a possible explanation? If so, what can I do?
You need to prevent the default behavior of an <a>. Use this:
$("a").click(function (e) {
e.preventDefault();
// Your code
});
or, if you actually want the link to load the new page, you could try:
$("a").click(function (e) {
e.preventDefault();
var href = this.href;
// Might want to put a "loading" spinner on the page here
$.post("whatever", {}, function () {
window.location.href = href;
});
});
Might have to change it a little - maybe use $(this).attr("href") or $(this).prop("href"), not this.href...the differences those evaluate to may or may not work with window.location.href (I'm sure both do).

Add javascript action to all links on a webpage

Good morning, I would like to know if is possible add automaticalliy a javascript action to all links (or classes) on a webpage, for example I wanna add the following javascript action: "PlayFlashSound();", so the links on my web page should be:
<a onmouseover="PlayFlashSound();" href="#">Link Text</a>"
The problem adding manually the javascript action is that I'm using Joomla, and I don't know how to do it.
Thanks.
with jQuery you could do it like this.
$(document).ready(function() {
$('a').click(function() {
PlayFlashSound();
return false
});
});
Something like this could easily be accomplished using jQuery:
$('a').mouseover(function()
{
PlayFlashSound();
});
Example available here.
I assume since one of this question tags is "joomla" the author would like to accomplish what's needed using Mootool that is included into Joomla CMS. The code could be, for instance, like this one:
window.addEvent("domready",
function() {
$$('a').each(function(item, index) {
item.addEvent('click', PlayFlashSound);
});
})
Keep in mind that if you wish to block the default actions of those links the PlayFlashSound function must return "false";

Categories