Href Javascript works on desktop but not on Mobile - javascript

I am using to do this function to rotate html contents. It is working on laptop/mac but not working when I 'touch' the links on mobile phone.
<a href="javascript:void(0)" >Link 1</a>
<a href="javascript:void(0)" >Link 2</a>
<a href="javascript:void(0)" >Link 3</a>
<a href="javascript:void(0)" >Link 4</a>
<a href="javascript:void(0)" >Link 5</a>
Upon clicking, the html contents will be dynamically changed.
I tried
<a href="#" onclick="javascript:;" >Link 1</a>
Also tried
Link 1
Both didnt work on mobile. Any idea why is this so? Do I need to add any codes in the javascript?
Edit:
The triggering code is this. Firstly it is using a class. Below is one of the methods.
bindMoveHandler:function(target){
var _this = this;
target.on(_this.options.trigger,'a',function(event){
var w = $(this).width();
var current_offset = $(this).offset();
var control_offset = target.offset();
var left = current_offset.left - control_offset.left;
var scale = w/100;
var d = 0; //index after move finished
Full code: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Stylish-Tabbed-Slider-Kiwi-Slider/javascripts/kiwi-slider.js
How do I modify this to suit the suggested solutions?

Use jQuery instead of the onclick attribute and use a function call something like this:
html:
Home
jQuery (Tested):
$('#onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
An example page would be like this:
<!DOCTYPE html>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<script>
$('.onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
</script>
</body>
</html>
Here is a working example:
http://jsfiddle.net/q87dLoc1/
Although if you wish to add html and not just text you would change this:
$(this).text('You clicked me!');
to something like this:
$(this).html('<b>You clicked me!</b>');

Have you tried this:
Link 1
Do keep in my mind that this method may bite a possible return value of yourFunction().

Related

On click event on HTML requires double click

I have this anchor which has an onclick function that changes the background color of certain div to green. It is properly working but the problem is it needs to be double clicked in order for the function to be executed.
HTML:
<a onclick="btngreen()" href="">MENU</a>
Javascript:
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = 'green';
}
You could use ondblclick
<a ondblclick="btngreen()" href="">MENU</a>
As per my understanding of your problem.
Try this code. use # in href
<a onclick="btngreen()" href="#">MENU</a>
or you can use
<a onclick="btngreen()" href="javascript: void(0)">MENU</a>
Works fine for me. Only issue I had was your empty href="" tag so I removed it. You could also use href="#" if you do not want to remove it.
<script>
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
<a onclick="btngreen()" href="#">MENU</a>
<div id="nameofdiv" style="width:100px;height:100px;"></div>
If you do not need the button to be a link, you could simple change it to another tag such as <p> since the a will be trying to naviagte the page.
<p onclick="btngreen()">menu</p>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
or you could also just default the link to not navigate from the page such as this example below.
<a onclick="btngreen()" href="#">menu</a>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
Using the href="#" is a dead link and will not navigate the page anywhere.

HTML page keeps reloading after click event

Hi I have a small website, which keeps reloading after a click event. How can I prevent this?
PS: I'm only allowed to use pure JS.
HTML
Cookie Clicker
</head>
<body>
<header>
<h1>Points: </h1>
<span id="score"></span>
</header>
<div class="container">
<div>
<a href="" onclick="addPoints(1)">
<img src="assets/graphics/Friis.png" />
</a>
</div>
</div>
<script src="assets/scripts/cookieClicker.js"></script>
</body>
</html>
JS
var points = 0,
score = document.getElementById("score");
function addPoints(increase) {
console.log('hit');
points += increase;
score.innerHTML = '' + points;
};
You can modify only your html and it works:
<a href="javascript:void(0);" onclick="addPoints(1)">
Some people make this:
<a href="#" onclick="addPoints(1)">
But this is an anchor that scrolls your page to top. If you need to make by javascript, search about event preventDefault.
EDIT
Read about void javascript function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
It's good to understand behaviour.
update your code to:
<a href="" onclick="addPoints(1);return false">
or
<a href="" onclick="return addPoints(1)">
and let your function addPoints return false. Upside of this is that you can actually let the href link to a page in case addPoints reaches a certain level for instance. If addPoints returns true the link will take the user to that page, return false will keep the user on the current page.
Instead of using onClick you can just change the href to run the function.
For example:
<a href="javascript:addPoints(1);">
that happens because you code contain
<a href="" onclick="addPoints(1)"> // These Can Reload Same Page
<a href="#" onclick="addPoints(1)"> // Modify upper code to these code

Load different CSS files on button click with JavaScript

I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?
This is what I have tierd to do with so far.
<script type="text/javascript">
window.onload = function() {
var fontButton = document.getElementById('changeFont');
fontButton.addEventListener('click', function(){
document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
});
}
</script>
This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.
What can I do? Is there a better way to implement this feature?I am open to suggestions.
Changing a theme is usually done by loading in another class with JQuery.
For example:
HTML:
<body id='skin' class="skin-blue">
JQuery:
$('#skin').addClass('skin-red').removeClass('skin-blue');
To change a font-size easily, consider something like this for example:
var size = 20;
function setFontSize(s) {
size = s;
$('#sidebar-menu').css('font-size', '' + size + 'px');
$('#content').css('font-size', '' + size + 'px');
}
function increaseFontSize() {
setFontSize(size + 5);
}
function decreaseFontSize() {
if(size > 5)
setFontSize(size - 5);
}
$('#inc').click(increaseFontSize);
$('#dec').click(decreaseFontSize);
setFontSize(size);
and for example a + and - button
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus" id="inc"></i>
</a>
</li>
</li>
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-minus" id="dec"></i>
</a>
</li>
</li>
i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:
.menu{
color:black}
and after click you will add <body id="greenTheme">
#greenTheme .menu{
color:green}
i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .
Thanks !!
I would try the following link as a quick working example...
enter link description here
You can see it in action here...
enter link description here
Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery.
It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful
You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css

Loading a page Click the Anchor tag

Hi friends I am trying many ways to onloading the page click the anchor tag using jquery or JavaScript.
must see the rel attribute .
<div id="local">
<a id="fmp-button" href="#" rel="http://google.com">
click
</a>
</div>
<script>
//$('#fmp-button').trigger('click');
//$("a[href='#']").click();
//$('#fmp-button').click();
//$('#fmp-button')[0].click();
//$(function(){
// window.location.href = $('#fmp-button').attr('href');
//});
</script>
I am tried all the ways
Any one help me how to click the anchor tag when time of page loading anchor tag must be rel attribute
If you want to just change the page, then this will do:
window.location = $('#fmp-button').attr('rel');
I think you need to do
<div id="local">
<a id="fmp-button" href="http://google.com">
click
</a>
</div>
<script>
$(function(){
$('#fmp-button').click();
});
</script>
here's another way...
<div id="local">
<a id="fmp-button" href="#" rel="http://google.com">click</a>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script>
$(document).on('click', '#fmp-button' ,function() {
var url = $('#fmp-button').attr('rel');
window.location.replace(url);
});
</script>

How would I change the HTML structure of a page using javascript?

I have this webpage for testing with content on it. In 3 other separate HTML files, I have 3 different navigation menus. What I want to do is include a dropdown menu on the testing page with 3 links in it. Each link would change the navigation on the testing page. For example, there is a default navigation on the testing page. Clicking link 1 in the dropdown would change that navigation. Same with link 2 and link 3. How would I do this in JavaScript or jQuery?
This should fit your requirements. For demonstration see this Fiddle.
<a id="link-1">link 1</a>
<a id="link-2">link 2</a>
<a id="link-3">link 3</a>
<div id="navigation"></div>
<div id="templates" style="display:none;">
<div id="navigation-menu1">navigation-menu1</div>
<div id="navigation-menu2">navigation-menu2</div>
<div id="navigation-menu3">navigation-menu3</div>
</div>
var menu1 = $('#navigation-menu1');
var menu2 = $('#navigation-menu2');
var menu3 = $('#navigation-menu3');
$('#link-1').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu1);
});
$('#link-2').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu2);
});
$('#link-3').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu3);
});
The way jquery works is that you set up a listener to a certain event with custom code to run whenever that happens. Here's an example for the link:
<a id="mylink" href="home.html">Go Home</a>
The javascript(put this in between your and tags):
<script type="text/javascript">
$(document).ready(function() {
//This code gets run when the page is finished loading
$('a#mylink').click(function() {
//Handle the event here
});
});
</script>
You also asked how you can change HTML dynamically at run time. jQuery has a great function for this .html()
Say you have some html:
<div id="changeme">Hello</div>
The following jQuery:
$('#changeme').html("Goodbye");
Changes the page's html to the following
<div id="changeme">Goodbye</div>

Categories