How to get a link that do nothing - javascript

I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link.
link on right click
Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that
<ul type="none" id="search-options">
<li [class.active_view]="Display('all')" (click)="docClick()">All</li>
<li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
<li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
<li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
<li class="dropdown">
<a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Settings
</a>
<ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
<li routerLink="/preferences">Search settings</li>
<li data-toggle="modal" data-target="#customization">Customization</li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tools
</a>
<ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
<li (click)="filterByContext()">Context Ranking</li>
<li (click)="filterByDate()">Sort by Date</li>
<li data-toggle="modal" data-target="#myModal">Advanced Search</li>
</ul>
</li>
</ul>
After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more complicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.

Using will make the page scroll to the top.
Use javascript:void(0):
Clicking here does nothing
Or equivalently, use javascript:;:
Clicking here does nothing
Or, with HTML5, just omit the href attribute:
<a>Clicking here does nothing</a>
You can use event.preventDefault() to prevent the default action of the link from being taken.
Valid Link<br>
<button id='hitMe'>Disable link</button>
<br/>
<button id="enable">Enable link</button>
<script>
document.getElementById('hitMe').onclick = function() { // button click
document.querySelectorAll('a').forEach(a =>{
a.onclick = function(e){
e.preventDefault();
return false;
}
});
};
document.getElementById("enable").onclick = function(){
document.querySelectorAll('a').forEach(a =>{
a.onclick = null;
});
}
</script>

By clicking the button, no more links will be followed.
Like this you still have the hover destination preview. Like google.de etc...
document.getElementById('hitMe').onclick = function() { // button click
[...document.querySelectorAll('a')].forEach(function(el){
el.onclick = function( e ) { // all 'a'
return false;
}
});
};
Valid Link<br>
<button id='hitMe'>Disable link.</button>

use
javascript:;
as href attribute
and add
event.preventDefault()
onclick method.
Click me

Related

Load dynamic content in div from different navbars

On one page, alphabet.php, in my project I have a sidebar further down on the page that loads diverse php-pages in a Content div. Like this:
HTML SideMenu
<nav id="sideMenu">
<ul class="list-unstyled components">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C <span class="caret"></span>
<ul>
<li id="c1">C1</li>
<li id="c2">C2</li>
</ul>
</li>
</ul>
</nav>
<div id="Content">
<h2>Lorem bla bla</h2>
<p>lorem bla bla </p>
</div>
JS
$(function() {
'use strict';
var newHash = '',
$content = $("#Content");
$("#sideMenu").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
newHash = window.location.hash.substring(1);
$content.load(newHash);
console.log(newHash);
});
});
The same content should be loaded also when you click the topmenu and footer navigation. And at the same time scroll to the Content div.
HTML MainMenu
<li class="dropdown"><a href="#alpha" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Alphabet <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left" role="menu" id="alpha">
<li>A
</li>
<li>B
</li>
<li>C
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
</li>
I solved the JS for the main-menu with this code
$(function() {
'use strict';
if(location.hash) $('#Content').load(location.hash.substring(1));
$('#alphaa').click(function() {
$('#Content').load(this.hash.substring(1));
});
});
EDIT: I changed the URL in MainMenu to alphabet.php#a.php etc., and it loads the content into the div IF you are on the current page (alphabet.php). Not if you're on another page.
EDIT 2: Solution for the main-menu JS. Now everything works fine but I guess you could make it prettier without two different js functions for the main-menu and the side-menu, but for now I'm pleased with this. It works!
Here is how i am able to do the navigation
i wrote the links like:
<a class="nav-link" href="javascript:void(0);" data-href="/page1.html #div1">Page 1</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page2.html #div2">Page 2</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page3.html #div3">Page 3</a>
If you use javascript:void(0) in your href= then you don't need to call the event.preventDefault.
then in my scripting side i wrote:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
$('#content').load(linkPage);
}
});});
Note
One thing you need to make sure is that domain of the calling page and pages from which the data has to come should be the same or else you will have the cross-domain issue.
Edit 1
The #div1,#div2,.#div3 are basically the ids of the div on their respective pages from which the data has to be fetched.
for example if i have some content on my pages like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Page 1</title>
</head>
<body>
<div id="div1">
hi i am the content of page 1
</div>
</body>
</html>
So, when someone clicks on the menu links the load function will go to the particular page (which is in our case the page1.html or any other) and return the HTML contents of div with id as div1 and load the data to the particular div(i.e. div with id content).
Edit 2
The JQuery's Load() is better explained on this Jquery Load you can use this to understand more about it.
So, what i think you are doing is you are creating a request to a /page1.html from the domain www.example.com, in that case load function will call the www.example.com/page.html and will load the contents of the page but if you make a request to other any other page let say /page11.html from the domain www.example.com/page2.html then the load() will create this www.example.com/page2.html/page11.html url which is not correct and hence it will not load any content.
So,what you can do is either you can put the whole url on the of the page i.e. www.yourdomain.com/page.html #divid in the attribute data-href or you can create the particular url on the javascript calling funciton like:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
var pageUrl = window.location.origin+'any other seperation for the pages
if any'+linkPage;
$('#content').load(pageUrl);
}
});
});
Here the window.location.origin is going to give you the domain on which the website is running regardless of hashes or slashes and then it will concate it with the linkPage and will make the proper url for the called page.

Disable Click Hover/ Double click issue iPad

I have an issue with my web application. The issue is that on Safari for iPad I have to click 2 times to actually perform the click on the <a> tag. The first one performs a hover like when you hover with the mouse on desktop. I am using AngularJS. I tried on firefox, it works just fine. Here is my code :
<ul class="navigation">
<li class="navigation-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']" class="navigation-link" role="button">
menu1
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute]" class="navigation-link" role="button">
menu2
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute2]" class="navigation-link" role="button">
menu3
</a>
</li>
</ul>
I tried adding (onclick)=" " or ng-onclick=" " or style="cursor:pointer" so the hover doesn't trigger but none of this worked.
Thank you for your help
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});

Get selected text from bootstrap dropdown

I have a bootstrap dropdown, and I want to keep the text of what is selected. I have tried most of the ways tried here, Get Value From html drop down menu in jquery , but there was never really an answer given, so I am still stuck.
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
I have a js function that looks as follows
$("#tableMenu").click(function(){
var selText = $("#tableMenu").text();
document.getElementById("tableButton").innerHTML=selText;
});
but as explained in the above link, $("#tableMenu").text(); returns everything in the dropdown as a string, not just the one wanted. How do I get the text just from the one selected.
You need to attach the click() handler to the a element within the ul that gets toggled. You can then retrieve the text() of that element and set it to the related button. Try this:
$("#tableMenu a").on('click', function(e) {
e.preventDefault(); // cancel the link behaviour
var selText = $(this).text();
$("#tableButton").text(selText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
Have you tried using an actual HTML drop down box and not an unordered list?
<select name="tableMenu" id="tableMenu" class="dropdown-menu">
<option value="Att1">Att1</option>
<option value="Att2">Att2</option>
<option value="Att3">Att3</option>
</select>
You should then be able to use:
var selText= document.getElementById("tableMenu").value;
Bind the click event to li and using this get the selected text and assign to the tab button text
$("#tableMenu li").click(function () {
var selText = $(this).text();
document.getElementById("tableButton").innerHTML = selText; // $("#tableButton").text(selText); //Using Jquery
});
Here's a vanillaJS way:
Given the following bootstrap 4 dropdown snippet:
<div class="dropdown-menu" id="select-color-dropdown" aria-labelledby="select-color">
<a class="dropdown-item" href="#">Red</a>
<a class="dropdown-item" href="#">Orange</a>
<a class="dropdown-item" href="#">Green</a>
<a class="dropdown-item" href="#">Gray</a>
</div>
One could write an event listener:
/* find web elements */
const colorSelectors = document.querySelector("#select-color-dropdown");
/* define event listeners */
const loadEventListeners = () => {
colorSelectors.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target.innerText);
});
}
/* Load all event listeners */
loadEventListeners();
which would print the selected option on every select (Red, Green...)

Bootstrap dropdown on hover not working, what am I doing wrong?

I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.
jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...

jQuery toggle through Twitter Bootstrap button classes

Scenario
I would like the user to be able to toggle through the Twitter Bootstrap button classes using jQuery when the main part of the button is clicked (for quickness).
Or
Allow the user to select a state from the drop down menu.
Whatever the state selected, the whole btn-group should have the same button class.
Not Started (btn-info), In Progress (btn-warning), Completed (btn-success) and Late (btn-error).
What I would like
What I have so far
This is my HTML code. It is standard Bootstrap button group.
<div class="btn-group">
<button type="button" class="btn btn-warning">Week 7</button>
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Not Started
</li>
<li>
In Progress
</li>
<li>
Completed
</li>
<li class="divider"></li>
<li>
Late
</li>
</ul>
</div>
This toggles all of the buttons, not just the button that is clicked.
$('.btn-group').click(function () {
var classes = ['btn btn-info','btn btn-info','btn btn-success'];
$('.btn').each(function(){
this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
});
});
Without changing your HTML you could use the following JavaScript code:
//// TOGGLE ////
// toggle only if the first part of the button (button:first-child) is clicked
$('button:first-child').click(function () {
var classes = ['btn btn-info','btn btn-warning','btn btn-success','btn btn-danger'],
// select new class name first so it isn't changed on every iteration (if you use each)
oldClass = this.className,
newClass = classes[($.inArray(oldClass, classes)+1)%classes.length];
// this method keeps all other classes untouched (e.g. dropdown-toogle)
$([this, this.nextElementSibling])
.removeClass(oldClass)
.addClass(newClass);
});
//// SELECT ////
// add a click listener to every a element
$(".btn-group").each(function () {
var classes = ['btn-info','btn-warning','btn-success','btn-danger'],
buttons = $(this).children("button");
$(this).find("a").each(function (index) {
$(this).click(function () {
// use the a elements index to get the right array element
var newClass = classes[index];
$(buttons)
.removeClass(classes.join(' '))
.addClass(newClass);
});
});
});
Also see the live demo here: http://jsfiddle.net/b9e3ossu/1/
I hope that helps :).

Categories

Resources