I have a pivot element in my page, it's work but when I want to change text by icons, they become not clickable and we have to click in the grey part. Do you know how make them clickable ?
In green the clickable part and in red not clickable part.
Part of my code :
<li id="listPivotAccount" class="ms-Pivot-link is-selected " data-content="account" title="Mon compte" tabindex="1">
<i style="" class=" ms-Icon ms-Icon--Accounts" aria-hidden="true"></i>
</li>
You can check the code here
For the record, I have never used SharePoint, so there may be a more elegant solution.
You can fix this behaviour by adding this vanilla JavaScript after your current JavaScript:
// select all icons
var msIcons = document.querySelectorAll(".ms-Icon");
// loop all icons
for (var i = 0; i < msIcons.length; i++) {
// add a click event to the nearest element with class "ms-Pivot-link"
msIcons[i].closest(".ms-Pivot-link").addEventListener("click", function() {
this.click();
});
}
jQuery Example of the above code:
$(".ms-Icon").on("click", function() {
$(this).closest(".ms-Pivot-link").click();
});
var Dropdown = new Class({
initialize: function() {
var e = this;
document.addEvents({
"click:relay(.windowLabel, .dropdown a.dropdownTrigger)": function(t, n) {
t && (t.preventDefault(),
t.stopPropagation()), // issue is here
e.showPopover.call(e, n)
}
}),
document.body.addEventListener("click", function(t) {
e.hideOutside.call(e, t)
})
},
// ...
})
Problem is in preventing propagation of events, and as result all nested elements shouldn't emit what you need.
What is the solution?
You can try add the icon in different way (for example using :before, :after)
The simple way to fix it is to trigger the pivot with a click. So if you use JQuery :
$('.ms-Icon').click(function () {
var pivot = $(this).closest(".ms-Pivot-link");
pivot.click();
});
Short and compatible with IE > 9
Related
I have this button that will hide when no more content to load in review page. The button is working great except that it will still show up even if there are no more data to display. I want it to not show up if there is nothing left to load. Does anyone have any suggestions? Thank you.
Here is my code
$(document).unbind('click').on('click', ".recentreviews5 .showmore", function () {
$('#last').val(parseInt($('#last').val()) + 10)
$('.hide').each(function () {
var itmidx = $(this).index();
if (parseInt(itmidx) < parseInt($('#last').val())) {
var g = $(this).attr('id')
$(this).removeClass('recent').removeClass('hide')
$(this).addClass('recent').addClass('show')
}
});
if ((parseInt($('#last').val()) >= parseInt($('#total').val())) || (parseInt($('#last').val()) < 10)) {
$(".showmore").css('cssText', 'display:none!important')
}
});
You can use this code to manually set the style. The .css call generally speaking doesn't support !important.
$(".showmore").attr('style', 'display: none !important')
$(".showmore").attr('hidden', 'hidden')
This code toggle visibility with display:none / display:block
$(".showmore").toggle();
I have unordered list of links. Using JQuery, when clicked, the link's contents (a div with image and text) are loaded into the section specified. This all works beautifully. But I'm wondering how to also get the onclick function to move the view to the div's location on the page similarly to how anchor tag works. Here is the site where you can see the div being populated, but not moving down to view it. https://www.thecompassconcerts.com/artists.php
My JQuery knowledge is not awesome (I'm being generous).
I followed Osama's suggestion to add event listener and I got almost correct results. Upon first click...contents are loaded but do not move. But on every successive click, it functions perfectly: Contents loaded and move to div (like an anchor link) works! BUT...not on Safari or Mobile Safari.
Here is my jQuery. I assume if first click is not working that I must add listener before the first click?? Can the event listeners be added on page load BEFORE the function to prevent default click, etc.?
<script>
// BEGIN FUNCTION TO CAPTURE AND INSERT CONTENT
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
</script>
Here is the HTML with links in unordered list
<!-- CONTRIBUTING ARTISTS LIST AND BIOS -->
<section id="artists">
<h2>Contributing Artists</h2>
<ul class="cols">
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
</ul>
</section>
Here is HTML of Section where code is being inserted by function
<!-- Performer Bios Dynamically updated -->
<section id="performbio">
</section>
Here is div contents that are being inserted
<div class="artistbio">
<p class="artistname">First Last</p>
<img class="artistimg" src="performers/img/name.jpg">
<p>lots of text here</p>
</div>
If I understand it right, you want to scroll to the section where the details appear on clicking any item in the list but through js and not HTML. In that case, you would add an onclick listener on to the list elements like so:
listElement.onclick = moveToDiv;
The function:
function moveToDiv() {
document.location = "#performbio";
}
A simple way to add a listener to all of the elements:
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
For the edited post, you need to move the function definition out of the document.ready function. you would change the script to:
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
Another Solution: Using scrollIntoView
First, get all the elements into a variable using querySelectorAll
var elements = document.querySelectorAll(".bio");
Then create a function, for the scrolling part:
function scroll(element) {
element.scrollIntoView();
}
Then just add the onclick listener:
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
scroll(elements[i]);
});
}
I found it very frustrating to try to accomplish these two tasks so instead of a jQuery solution I opted for a CSS solution.
I populated my DIV with all the php includes, gave them unique id's for the anchors to work and then used CSS to hide them by default until clicked and it works like a charm....shows only what I need to show and goes there like an anchor is supposed to.
I must thank Ghost for all of your help and efforts to try and solve this via jQuery. You were very kind and generous.
Here is the code I used:
My collection of links.
<li><a class="bio" href="#artist-name1">Name 1</a></li>
<li><a class="bio" href="#artist-name2">Name 2</a></li>
which anchors to these divs
<div class="bio-container" id="artist-name1">
<?php include('performers/name-lastname.html'); ?>
</div>
<div class="bio-container" id="artist-name2">
<?php include('performers/name-lastname.html'); ?>
</div>
Then I use this CSS to hide those divs until the anchors are clicked.
I'm using [id*="artist-"] to target only links with such text...very easy. Not ideal for a massive list...but mine is not so large so it will do for this situation.
[id*="artist-"] {display: none;}
[id*="artist-"]:target {display: block;}
I have a textarea generated with the bellow js code, I also have a button that creates additional text areas when clicked, I NEED to make each text area draggable, Ussually because the "id" is "myForm" it should become draggable using jquery $('#myForm') but it does not work, I have try all forms but it does not work. I also have check similar questions but not luck... I will appreciate if some one can help me out. in the folder I have the Html, The css and all jquery libraries working Ok.
I check with the alert box.
Note: all I need is a textarea with a button to add as many additional text areas and this areas to be draggable, the code to generate this text areas can be any code. In case there is a easier way to accomplish the same thing... Thank you in advance.
function myFunction() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("TEXTAREA");
document.getElementById("myForm").appendChild(y);
}
Is HTML5 Drag and Drop what you are looking for?
All you need to do is define draggable=true in your element and code the relevant ondragstart and ondragend logic. This works with both vanilla JS and frameworks like React.
Made for you kindly however dosn't work in this editor
var new_offset = {top:30, left:40};
var new_width = 200;
var new_height = 150;
var newElement$ = $('<div><textarea id="textarea"></textarea></div>')
.width(new_width)
.height(new_height)
.draggable({
cancel: "text",
start: function (){
$('#textarea').focus();
},
stop: function (){
$('#textarea').focus();
}
})
.resizable()
.css({
'position' : 'absolute',
'background-color' : 'gray',
'border-color' : 'black',
'border-width' : '1px',
'border-style' : 'solid'
})
.offset(new_offset)
.appendTo('body');
textarea {
height:100%;
background-color:whit;
width:100%;
resize:none; border:none;
padding:0px; margin:0px;
}
div { padding:0px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
I hacked it and piggy tailed to a span element this way the span element is easy to make draggable with jquery, The textarea is not draggable but it has to follow the span element THUS is draggable.
The span element has the class= "drag",then I used the jquery $('.drag').draggable and that made the whole trick. Dirty code BUT it works 100% the way I needed.
I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:
<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
<span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
<span>{{ refresh }}</span>
</button>
Here is example to testing:
<button type="button" disabled="disabled" onclick='alert("test");'>
<span>Click me!</span>
</button>
One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.
Just set
pointer-events: none;
for disabled buttons.
Here's CSS to disable all disabled elements everywhere:
*[disabled] {
pointer-events: none !important;
}
pointer-events documentation
This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).
Reported multiple times via Microsoft Connect:
Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled
The bug was still present in Build 10565 (16 October 2015).
It was fixed in the November update, Build 10586.
A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).
One work around I've come up with using angularjs is inspired by Ben Nadel's blog here
So for example:
angular.module('myModule').directive(
"span",
function spanDirective() {
return ({
link: function (scope, element, attributes) {
element.bind('click', function (e) {
if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
e.stopPropagation();
}
})
},
restrict: "E",
});
}
);
Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.
var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
$provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);
if (isEdge) {
var directiveConfig = $delegate[0];
var originalCompileFn = directiveConfig.compile;
directiveConfig.compile = function() {
var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);
// Register a click event handler that will execute before the one the original link
// function registers so we can stop the event.
return function linkFn(scope, element) {
element.on('click', function(event) {
if (event.currentTarget && event.currentTarget.disabled) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
});
return origLinkFn.apply(null, arguments);
};
};
}
return $delegate;
}]);
}]);
I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).
What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I'm doing is replacing the buttons with images, each with a "pressed" version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to "un-pressed". Essentially so that only one image can be "pressed" at a time.
Right now the code for me pressed images are
$(function() {
$(".img-swap1").live('click', function() {
if ($(this).attr("class") == "img-swap1") {
this.src = this.src.replace("_U", "_C");
} else {
this.src = this.src.replace("_C","_U");
}
$(this).toggleClass("on");
});
});
I thought about using an if statement to revert all the "_C" (clicked) back to "_U" (unclicked).
Hopefully I've included enough information.
A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.
Also, your if statement ($(this).attr("class") == "img-swap1") is redundant -- it will always be true because it's the same as the original selector $(".img-swap1").live('click'...
Try
$(function() {
$(".img-swap1").live('click', function() {
$(".img-swap1").removeClass('on').each(function(){
this.src = this.src.replace("_U", "_C");
});
this.src = this.src.replace("_C","_U");
$(this).addClass("on");
});
});
If I understand the question correctly the following may work for you:
$(function(){
$('.img-swap1').live('click', function() {
$('.img-swap1').removeClass('on').each(function(){
$(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
});
$(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
$(this).toggleClass("on");
});
});
I hope this helps.