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;
});
Related
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
I have a Sidebar / Menu that I am working with. It has been created with Bootstrap, DJango, and Javascript.
Basically, I am trying to write Javascript so that when on clicks on a menu-item, the background changes color (dark blue), the icon change color (light green / turquoise) and it gets a type of "wedge"
Below is an example of a menu-item that has been chosen (Dashboard) along with menu-items that have not been chosen (Security and Messages). The "wedge" has a red arrow pointing to it.
Here is the HTML code that is being used:
[... snip ...]
<div class="page-container">
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu "
data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="nav-item start active open">
<a href="{% url 'mainadmin:dashboard' %}" class="nav-link nav-toggle">
<i class="fa fa-tachometer"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:security' %}" class="nav-link nav-toggle">
<i class="fa fa-users"></i>
<span class="title">Security</span>
<span class="arrow"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link nav-toggle">
<i class="fa fa-comment"></i>
<span class="title">Messages</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List All Messages</span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List My Messages</span>
<span class="badge badge-danger"></span>
</a>
</li>
</ul>
</li>
[... snip ...]
Here is the Javascript code:
<script>
$(document).ready(function () {
$('.nav-item a').click(function(e) {
$('.nav-item a').removeClass('selected');
$('.nav-item a').removeClass('arrow');
$('.nav-item a').removeClass('open');
$('.nav-item a').removeClass('active');
alert("I have gotten in");
var $parent = $(this).parent();
$parent.addClass('selected');
$parent.addClass('arrow');
$parent.addClass('open');
$parent.addClass('active');
e.preventDefault();
});
});
</script>
I do get the alert message - but - what happens is :
-> the background of the chosen menu-item does change color - which is correct
--> The icon of the chosen menu-item changes color (to light blue / turquoise) - which is correct
-> the tick of the arrow does not take place for the chosen menu-item :(
-> the old chosen menu item does not "de-select"
What am I doing wrong?
TIA
Hi #Joe Lissner
Thanks so much for the response!
I had to add the following to get the "wedge" portion to work. It required span tags
// REFERENCE: https://stackoverflow.com/questions/2013710/add-span-tag-within-anchor-in-jquery
$(this).append('<span class="selected"></span>');
$(this).append('<span class="arrow open"></span>');
While this works when clicking on the main-menu item, I'm not so lucky when it comes to clicking on sub-menu items. As of now, I am pretty much new to Javascript.
How would one get the sub-menu items to work?
Also, when clicking on an item, it does not go to the page specified in "href="
How would can one make changes to the code so that when the menu-item is clicked, it would go to the page specified in "href="
Again, thanks for the response :-)
You are removing the classes from the a tags, not the .nav-item elements.
Try this:
$(document).ready(function () {
$('.nav-item a').click(function(e) {
e.preventDefault(); // best practice to have this first, if you remove this line then the link will function as expected.
var $parent = $(this).parent();
var $arrow = $parent.find('.arrow');
$('.nav-item').removeClass('selected arrow open active'); // simplified
$('.nav-item .arrow').removeClass('open');
$('.nav-item .selected').detach(); // remove the span that was there before
alert("I have gotten in");
$parent.addClass('open active'); // simplified
$arrow.addClass('open').before('<span class="selected" />')
});
});
Edit - Fixed the issue with the arrow
I'm trying to make my navigation system more accessible, and I'm having a hard time figuring out one part of it. Here's a list of the features I'd like
Navigable by keyboard. This is working fine.
Click/press enter on a button before a sub-menu to toggle it's active state. This is working fine.
Close a sub-menu when it or any of it's descendants lose focus. Here's where I'm having trouble.
The issue is that I can't seem to accurately figure out if the element or it's children have focus. It works okay for the first press of "tab" on the "keyboard," but after it highlights the second element in the child list, the menu closes.
Here's all my JS along with some example CSS and HTML.
JS:
// toggle the is-active class and aria values on button click
jQuery(".menu-list_toggle").bind("click", function(e) {
e.preventDefault();
if (jQuery(this).next(".menu-list[aria-hidden]").attr("aria-hidden") === "true") {
// mark all sibling menus as inactive
jQuery(this).closest(".menu-list_item").siblings().removeClass("is-active");
// mark menu list as active
jQuery(this).closest(".menu-list_item").addClass("is-active");
jQuery(this).next(".menu-list[aria-hidden]").attr("aria-hidden", "false");
} else {
// mark menu list as inactive
jQuery(this).closest(".menu-list_item").removeClass("is-active");
jQuery(this).next(".menu-list[aria-hidden]").attr("aria-hidden", "true");
}
});
// remove is-active and aria values on blur - HAVING TROUBLE HERE!
jQuery(".menu-list").bind("focusout", function() {
if (jQuery(this).has(document.activeElement).length === 0) {
jQuery(this).closest(".menu-list_item").removeClass("is-active");
jQuery(this).attr("aria-hidden", "true");
}
});
CSS:
[aria-hidden=true] {
display: none;
}
.is-active {
background: teal;
}
HTML:
<ul class="menu-list">
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
<button class="menu-list_toggle">Toggle Menu</button>
<ul class="menu-list" aria-hidden="true">
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
<button class="menu-list_toggle">Toggle Menu</button>
<ul class="menu-list" aria-hidden="true">
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
</ul>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
</ul>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
<li class="menu-list_item">
<a class="menu-list_link" href="#">Some Link</a>
</li>
</ul>
JS Fiddle.
Ideally, I'd like to do this all in vanilla JavaScript instead of jQuery, but I figure I can go back and refactor later once I get the core concept working.
It's very simple, this is how you can do it:
Also, attach the event listener to .menu-list and delegate the blur events from .menu-list_link to it so you won't end up with many event listeners.
jQuery(".menu-list").on("blur", ".menu-list_link", function(e) {
var tThis = jQuery(this);
var tThisParent = tThis.closest('.menu-list_item');
var tThisGrandParent = tThisParent.closest('.menu-list');
var tThisGreatGrandParent = tThisGrandParent.closest('.menu-list_item');
if (tThisParent.is(':last-child')) {
tThisGrandParent.attr("aria-hidden", "true");
tThisGreatGrandParent.removeClass("is-active");
}
});
It closes the sub-menu menu only if the item losing focus is the last item on its corresponding sub-menu.
Demo: https://jsfiddle.net/r0kz0g69/2/
Moreover if you put the whole menu inside a container you can attach the event listener to it instead of .menu-lists, e.g. a .menu-container, so you will only have one event listener on a DOM element for this.
jQuery(".menu-container").on("blur", ".menu-list_link", function() {
var tThis = jQuery(this);
var tThisParent = tThis.closest('.menu-list_item');
var tThisGrandParent = tThisParent.closest('.menu-list');
var tThisGreatGrandParent = tThisGrandParent.closest('.menu-list_item');
if (tThisParent.is(':last-child')) {
tThisGrandParent.attr("aria-hidden", "true");
tThisGreatGrandParent.removeClass("is-active");
}
});
Demo 2: https://jsfiddle.net/r0kz0g69/3/
And a small improvement, don't hide the menu list if the item losing focus is the outermost sub-menu, so the outermost menu stays visible.
jQuery(".menu-container").on("blur", ".menu-list_link", function() {
var tThis = jQuery(this);
var tThisParent = tThis.closest('.menu-list_item');
var tThisGrandParent = tThisParent.closest('.menu-list');
var tThisGreatGrandParent = tThisGrandParent.closest('.menu-list_item');
if (tThisParent.is(':last-child')) {
if(!tThisGrandParent.is('.menu-container > .menu-list')) {
tThisGrandParent.attr("aria-hidden", "true");
}
tThisGreatGrandParent.removeClass("is-active");
}
});
Demo 3: https://jsfiddle.net/r0kz0g69/4/
My website builder has a generic tab function but I don't like it, so I thought I would learn how to build one myself. I'm more comfortable with CSS than scripts at the moments and it shows with what I created, where it looks how I want but is not yet functional on clicks.
Here is the JSFiddle: https://jsfiddle.net/6oq3t9ev/1/
<ul class="tab_conts" id="recent" style="display: block;">
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
<ul class="tab_conts" id="new" style="display: none;">
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
$(document).on("ready int:ready", function() {
var e = $(".tab_name"),
t = $(".tab_conts").hide();
e.prependTo(".tabs-cn"), e.click(function(n) {
n.preventDefault();
var i = $(this),
r = e.index(i);
e.removeClass("tab_name-active"), i.addClass("tab_name-active"), t.hide().eq(r).show()
}), e.first().click() })
Something like this should do the trick:
$(document).ready(function(){
$('.tab_name').on('click',function(){
var href = $(this).attr('href');
$('.tab_conts').css({'display':'none'});
$(href).css({'display':'block'})
});
});
PS. make sure you include jquery in your head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
I am using photoswipe to show my gallery when clicking on a item.
My markup:
<ul id="gallery_mobile_about">
<li>
</li>
<li>
<a href="/files/uploads/Figues-de-Moro.jpg" style="background-image: url('/files/uploads/Figues-de-Moro.jpg');" data-iframe="" data-pos="1" data-url="/files/uploads/Figues-de-Moro.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" style="background-image: url('/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg');" data-iframe="" data-pos="2" data-url="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Deia-Church-on-Cala-rock.jpg" style="background-image: url('/files/uploads/Deia-Church-on-Cala-rock.jpg');" data-iframe="" data-pos="3" data-url="/files/uploads/Deia-Church-on-Cala-rock.jpg" class="gallery-item ui-link">
</a>
</li>
</ul>
The js:
$(document).ready(function(){
var myPhotoSwipe = $("#gallery_mobile_about a").photoSwipe(
{ enableMouseWheel: false ,
enableKeyboard: false }
);
});
The problem is that even that the gallery seems to load, as a backgound i see a white page with the text 'undefined' and on closing the galler page will stay as this white page (is not returning to the original view)
The result (hit on a image where it says 5 items in gallery): http://deia.info/m/?lan=2&task=view_post&catid=14&blogid=25
What am I seem to be missing here?
Adding rel="external" solved this
I allready have the attribute rel="external" and trying things this works for me.
var myPhotoSwipe = $("#Gallery a").photoSwipe({
//your others attributes
target: 'html'
});