on a Sharepoint site, I have a navigation that contains return AjaxNavigate$OnClickHook(event, this);.
There is also a "normale" <a href="...">-tag for the link.
Now, the linked content is being changed by adding a picture inside the link tag.
The picture is shown on the right position, the cursor also shows a link which can be opened via the right-click context menu and chosing "Open Link" or "Open Link in new Tab".
But it does not open when clicked "normally".
I guess that the Ajax code above prevents the normal link handling.
How can I get the image also to be linked correctly?
Thanks.
edit:
relevant HTML (generated mostly by a Sharepoint site):
(...)
<div
class="ms-displayInline ms-core-navigation"
id="DeltaTopNavigation"
role="navigation"
>
<div
class=" noindex ms-core-listMenu-horizontalBox"
id="zz13_TopNavigationMenu"
onclick="return AjaxNavigate$OnClickHook(event, this);"
>
<ul
class="root ms-core-listMenu-root static"
id="zz14_RootAspMenu"
>
<li class="static selected">
<a
tabindex="0"
class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-bold ms-core-listMenu-selected ms-navedit-linkNode"
accesskey="1"
href="https://xxx/sites/00001/SitePages/SomeSite.aspx"
>
<span class="additional-background ms-navedit-flyoutArrow">
<span
class="menu-item-text"
style="text-align: center; display: inline-block; position: relative;"
>
<img
style="width: 50px; height: 50px;"
src="/sites/00001/SiteAssets/images/pic.png"
border="0"
>
<br>Text
</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
</li>
<li class="static">
<a
tabindex="0"
class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode"
href="https://xxx/sites/00001/SitePages/SomeSite2.aspx"
>
<span class="additional-background ms-navedit-flyoutArrow">
<span
class="menu-item-text"
style="text-align: center; display: inline-block; position: relative;"
>
<img
style="width: 50px; height: 50px;"
src="/sites/00001/SiteAssets/images/pic2.png"
border="0"
>
<br>Text 2
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
(...)
EDIT 2:
The <img...-tag is inserted afterwards, via this code:
$('[id$="RootAspMenu"]').find('.menu-item-text').each(function(i,item)
{
var iconName = "pic_";
iconName += $(item).text().replace(" ","").toLowerCase();
iconName += ".png";
$(this).prepend('<img style="width:50px;height:50px;" src="/sites/00001/SiteAssets/images/'+iconName+'" border="0"><br/>');
$(this).css("display", "inline-block");
$(this).css("position", "relative");
$(this).css("text-align", "center");
}
);
...and I noticed that the area "behind" the image (so, the <span> area?) is linked correctly. Only the image is not.
Could it be a problem for the link that the image has been inserted afterwards? How can I solve this problem?
I got it myself!
Inserting in the script/jquery where I insert the image, I also put this:
if ($(this).parent().is("span") ) {
$(this).unwrap();
}
...takes away the <span> around the image / inside the link. Now it works correctly!
Related
I'm working on this website - https://sampledemos.online/training/dashboard.html in which the toggle menu is hiding the content when menu expands.
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active">
<div class="app-brand demo">
<a href="index.html" class="app-brand-link">
<img class="logo" src="/training/images/weblogo.jpg">
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboard -->
<li class="menu-item active">
<a href="course-master-list.html" class="menu-link">
<i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i>
<div data-i18n="course">Course Master</div>
</a>
</li>
and am using javascript as below
<script>
function openNav() {
$(document).ready(function () {
$('#layout-menu').toggleClass('active');
});
}
</script>
Below I have used styles like this...
#layout-menu.active {
width: 64px;
}
.active~.layout-page {
padding-left: 65px !important;
}
.app-brand .layout-menu-toggle {
position: absolute;
left: 15rem;
border-radius: 50%;
}
.active .layout-menu-toggle {
left: 4rem;
}
```
Is there I missed anything in my codings...
If I understand your question correctly then what's happening is that your plugin 'perfect scrollbar' is setting adding the class 'ps' to <ul class="menu-inner py-1 ps"> which adds overflow: hidden !important. That means everything that falls outside that menu-inner container is hidden. If you check your element inspector and remove the overflow: hidden you'll see your toggle menu becomes visible.
i have a code like this
<li role="presentation">
<a
href="#Twistato"
class="rounded btn"
aria-controls="Twistato"
role="tab"
data-toggle="tab">
Twistato
</a>
</li>;
I get a symbol like an image below
can anyone tell me what this symbol is or its name or how I can find it
actually it was a dropdown icon which was given a default value
.the-menu-custom-nav .nav-tabs > li > a:before {
content: '\f0dd';
top: 7px; }
i removed and its fine now
On hover of an <a> the next div fadein and mouseleave on div this div fade out but when div fade in and drag my mouse on dive it will go fade out
jQuery('.share_link').hover(function(event) {
event.stopPropagation();
jQuery(this).next('.quick-view-share').stop().fadeIn();
}, function(event) {
event.stopPropagation();
jQuery(this).next('.quick-view-share').not().fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="javascript:void(0);" class="share_link"></a>
<div class="quick-view-share" style="display: none;">
<a class="facebook" href="#" title="Share on Facebook"> Face Book</a>
<a class="twitter" href="#" title="Tweet"> Twittter</a>
<a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>
The issue is because the hover logic is attached to the a element. Therefore as soon as you leave the a to select something from the displayed div, it immediately disappears.
To solve this you could amend your HTML to hook the events to a containing element. Alternatively you can utilise CSS to make the hover logic work for both elements by using CSS's adjacent sibling operator, +:
a.share_link + .quick-view-share {
position: absolute;
opacity: 0;
transition: opacity 0.4s;
}
a.share_link:hover + .quick-view-share,
a.share_link + .quick-view-share:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="#" class="share_link">Share</a>
<div class="quick-view-share">
<a class="facebook" href="#" title="Share on Facebook"> Face Book</a>
<a class="twitter" href="#" title="Tweet"> Twittter</a>
<a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>
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
how can i keep li with iconsrc="/_layouts/15/images/delitem.gif" image hidden as this div is injected by first party and I am third party trying to hide it.
$("<style> what will go here ???? { display: none; }</style>").appendTo(document.documentElement);
How can I select list item with iconsrc="/_layouts/15/images/delitem.gif" from document.
<div class="ms-core-menu-box ms-core-menu-hasIcons ms-core-defaultFont ms-shadow" title="" dir="ltr" contenteditable="false" style="top: 0px; position: absolute; visibility: visible; left: -129px; width: 127px;" flipped="false">
<ul class="ms-core-menu-list">
<li type="option" text="Delete" onmenuclick="spgridcontainer_WPQ2_rowcontextmenu_onclick(0);" iconsrc="/_layouts/15/images/delitem.gif" iconalttext="Delete" enabled="true" checked="undefined" id="mp43_0_0" class="ms-core-menu-item">
<a class="ms-core-menu-link" id="mp43_0_0_Anchor" href="javascript:;" onclick="return false;" title="Delete">
<div class="ms-core-menu-icon">
<img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON">
</div>
<div class="ms-core-menu-label" id="">
<span class="ms-core-menu-title">Delete</span>
<span></span>
</div>
<span class="ms-accessible"></span>
<div></div>
</a>
</li>
</ul>
</div>
Point is keep delete button hidden whenever this list is injected in into the page.
Keep it simple with css attribute selectors:
li[iconsrc="/_layouts/15/images/delitem.gif"] {
display:none;
}
<ul>
<li iconsrc="/_layouts/15/images/delitem.gif">
<img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON" />
</li>
<li>
<img src="/_layouts/15/images/adasdasfafsdfs.gif" alt="sdfsdfsdf" title="Blablalbavbaab" id="fsdfsdfsdf"/>
</li>
</ul>
you can use list's id attribute in the style tag to keep it hidden:
<style>
li#mp43_0_0 {
display: none;
}
</style>
may be try like this:
$(document).ready(function(){
$('ul li').each(function(idx, li) {
if($(li).attr('iconsrc') =='/_layouts/15/images/delitem.gif'){
$(li).hide();
}
});
});