Return when find variable - javascript

I want return result which variable is available that page. How i can write true function ?
function variation() {
var variationControl = document.querySelectorAll(".type-label.subtype-square.selected")[0].innerText;
var doubleVariation = document.querySelector(".type-label.subtype-square.selected");
var singleVariation = document.querySelector("div.row > div > div > div.col-md-3.product-summary-fixed > div > div > div > p:nth-child(1)");
if(variationControl == null){
return "Single Variation";
} else {
return doubleVariation.innerText;
}
}

Probably should go with something like this:
function variation() {
var variationControl = document.querySelector(".type-label.subtype-square.selected");
var singleVariation = document.querySelector("div.row > div > div > div.col-md-3.product-summary-fixed > div > div > div > p:nth-child(1)");
if (variationControl === null || variationControl.innerText === ""){
return "Single Variation";
} else {
return variationControl.innerText;
}
}

Related

Selection.focusNode doesn't work on a <br> element [duplicate]

I am trying to develop a wysiwyg editör.
In the editör, i am trying to find the position of "br" when onkeydown function fire.
<p><b>1234</b><br><br>678</p>
When i locate cursor near 6 getting 678 with "oSelection.anchorNode.nodeValue".
When i locate cursot near "br" getting nothing.
i want to find before and after tag near cursor?
Update 2: After talking to ismail the question could be changed to: how to find out, whether the element before/after the cursor is a <br> tag. This can be achieved like this:
var selection = window.getSelection(),
isBRBeforeCursor = IsBRBeforeCursor(selection),
isBRAfterCursor = IsBRAfterCursor(selection);
function GetPreviousSibling(node) {
if (node.previousSibling != null) {
return node.previousSibling;
} else if (node.parentNode != null) {
return GetPreviousSibling(node.parentNode);
} else {
return null;
}
}
function GetNextSibling(node) {
if (node.nextSibling != null) {
return node.nextSibling;
} else if (node.parentNode != null) {
return GetNextSibling(node.parentNode);
} else {
return null;
}
}
function IsBRBeforeCursor(selection) {
if(selection.anchorNode.nodeName === '#text') {
if(selection.anchorOffset > 0) {
// There is text before the cursor
return false;
} else {
var previousSibling = GetPreviousSibling(selection.anchorNode);
return previousSibling !== null && previousSibling.nodeName === 'BR';
}
} else {
if(selection.anchorOffset > 0) {
return selection.anchorNode.childNodes[selection.anchorOffset - 1].nodeName === 'BR';
} else {
var previousSibling = GetPreviousSibling(selection.anchorNode);
return previousSibling !== null && previousSibling.nodeName === 'BR';
}
}
}
function IsBRAfterCursor(selection) {
if(selection.anchorNode.nodeName === '#text') {
if(selection.anchorOffset < selection.anchorNode.nodeValue.length) {
// There is text after the cursor
return false;
} else {
var nextSibling = GetNextSibling(selection.anchorNode);
return nextSibling !== null && nextSibling.nodeName === 'BR';
}
} else {
if(selection.anchorNode.childNodes.length > selection.anchorOffset) {
return selection.anchorNode.childNodes[selection.anchorOffset].nodeName === 'BR';
} else {
var nextSibling = GetNextSibling(selection.anchorNode);
return nextSibling !== null && nextSibling.nodeName === 'BR';
}
}
}
Update: I think it is a bit tricky to always find the correct previous/next element, because the text is a node itself. So to get the previous/next element, you need to go a level up sometimes before looking left and right. Have a look at the following example:
<p><b>123</b><br><u><i><br>456</i></u><br></p>
Cursor is between 1 and 2.
The next element is <br>, which is one level up and then to the right.
Cursor is between 4 and 5.
The previous element is <br>, which is just one to the left.
The next element is <br>, which is two levels up and then to the right.
If this is the case, you can find the previous/next element like this:
function getElementBeforeSelection() {
var anchor = window.getSelection().anchorNode;
while(anchor.previousSibling === null && anchor.nodeName != 'BODY') {
anchor = anchor.parentNode;
}
return anchor.previousSibling;
}
Original answer: You can get to the surrounding elements with parentNode, previousSibling and nextSibling. So the tags before and after the cursor are:
var anchorNode = window.getSelection().anchorNode,
before = anchorNode.previousSibling,
after = anchorNode.nextSibling;

Add classes to div on 12 different pages

I need to add a class to a div on 12 different pages. Bellow is the code I've tried to use that don't work.
<script>
window.onload = init;
var divsWithClass = null;
function init() {
if (window.location.href.indexOf("page1") >= -1 &&
window.location.href.indexOf("page2") >= -1 &&
window.location.href.indexOf("page3/") >= -1 &&
window.location.href.indexOf("page4") >= -1 &&
) {
this.divsWithClass = document.getElementsByClassName("sub-menu");
var index = 0;
while (index < divsWithClass.length) {
divsWithClass[index].className += "et_pb_slide_dropdown_opened";
index++;
}
}
console.log(divsWithClass);
}
</script>

Using jQuery Mask Plugin on dynamic value

I'm trying to use jQuery-Mask-Plugin on an input which value can be dynamic. This input can be any number with, at least, 2 digits to a maximum of 8 digits and the mask is a '-'. For example I can have '2-2', '45-8' or '9999999-8', etc.
The issue is that the mask isn't working at all. I managed to make it work using $("#input-area input").mask("00-0"); but that way, my mask isn't dynamic.
Here's what I was trying to do:
var options = {
onKeyPress: function (conta, ev, el, op) {
var masks = ['0-0', '00-0', '000-0', '0000-0', '00000-0', '000000-0', '0000000-0', '0000000-0'];
if(conta.length == 2){
var mask = masks[0];
} else if(conta.length == 3){
var mask = masks[1];
} else if(conta.length == 4){
var mask = masks[2];
} else if(conta.length == 5){
var mask = masks[3];
} else if(conta.length == 6){
var mask = masks[4];
} else if(conta.length == 7){
var mask = masks[5];
} else if(conta.length == 8){
var mask = masks[7];
}
$('#input-area input').mask(mask, options);
}
}
if($('#input-area > div > input').length == 2){
$('#input-area > div > input').mask('0-0', options);
} else if($('#input-area > div > input').length == 3){
$('#input-area > div > input').mask('00-0', options);
} else if($('#input-area > div > input').length == 4){
$('#input-area > div > input').mask('000-0', options);
} else if($('#input-area > div > input').length == 5){
$('#input-area > div > input').mask('0000-0', options);
} else if($('#input-area > div > input').length == 6){
$('#input-area > div > input').mask('00000-0', options);
} else if($('#input-area > div > input').length == 7){
$('#input-area > div > input').mask('000000-0', options);
} else if($('#input-area > div > input').length == 8){
$('#input-area > div > input').mask('0000000-0', options);
}
A few things wrong here
First of all and the most obvious is that you are initiating the
mask before the input is loaded in DOM. Load the input first then
the mask
You are missing code: Where is the event that loads the dynamic input?
You are loading your onKeyPress in the options?
You might want to structure your jquery as such
HTML
However your keypress is made (click event), make it so it passes the value of the length. Basically, load your data-id dynamically beforehand in the button. In my example, it is 2
<button class="loadinput" data-id="2">Click</button>
<div id="input-area"><div></div></div>
JQUERY
Then in jquery load the input first, then load the mask
$(document).on('click', '.loadinput', function() {
var this_length = $(this).attr('data-id');
$('#input-area > div').html('<input id="thisinput" type="text">');
if (this_length == 2) {
$('#thisinput').mask('0-0');
} else if (this_length == 3) {
$('#thisinput').mask('00-0')
}...and so on
})
Searching a bit further in the docs of Jquery Mask Plugin I found Recursive digits. It will be something like: $('#input-area > div > input').mask('##0-0', {reverse: true});

Placing the element at last of sorted list

I am sorting on the basis of doc_status the items using sort function.
Everything is fine just one case when doc_requirment =0 I want it to be last element of items irrespective of its doc_status.
var lockStatus = 2;
var items = [
{ doc_requirement :4, doc_status :0 },
{ doc_requirement: 3,doc_status:1 },
{ doc_requirement:0,doc_status :2},
{doc_requirement: 3 ,doc_status :3},
{ doc_requirement: 1,doc_status : 0},
];
if(lockStatus == 2){
var finalSortedDocuments = items.sort(function(firstDoc,secondDoc){
var order = [2,0,1,3];
if(firstDoc.doc_status == secondDoc.doc_status && firstDoc.doc_status ==0){
var orderNew = [ 1,4];
return orderNew.indexOf(firstDoc.doc_requirement) - orderNew.indexOf(secondDoc.doc_requirement);
}
return order.indexOf(firstDoc.doc_status) - order.indexOf(secondDoc.doc_status);
});
}
You just have to add one more criteria to the sorting function:
items.sort(function(firstDoc, secondDoc) {
if(firstDoc.doc_requirement == 0 && secondDoc.doc_requirement != 0) return 1;
else if(firstDoc.doc_requirement != 0 && secondDoc.doc_requirement == 0) return -1;
// Then sort by doc_status
var order = [2,0,1,3];
return (order.indexOf(firstDoc.doc_status) - order.indexOf(secondDoc.doc_status));
});
Try something like this-
items.sort(function(doc1,doc2){
if(doc1.doc_requirement=== 0){
return 1;
}
if(doc2.doc_requirement=== 0){
return -1;
}
return doc1.doc_status > doc2.doc_status;
})
You can try like this
var finalSortedDocuments = items.sort(function(firstDoc,secondDoc){
if(firstDoc.doc_status== 0){
return(1);
}
if(secondDoc.doc_status== 0){
return(-1);
}
return firstDoc.doc_status-secondDoc.doc_status;
});

how to make this javascript function output #value in the xpath?

The code below, produces Xpath. However, it doesn't display #value attribute/property. It is not working very well.
function getXPath(node, path, val) {
path = path || [];
if(node.parentNode) { path = getXPath(node.parentNode, path); }
if(node.previousSibling) {
var count = 1;
var sibling = node.previousSibling
do {
if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {count++;}
sibling = sibling.previousSibling;
} while(sibling);
if(count == 1) {count = null;}
} else if(node.nextSibling) {
var sibling = node.nextSibling;
do {
if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {
var count = 1;
sibling = null;
} else {
var count = null;
sibling = sibling.previousSibling;
}
} while(sibling);
}
if(node.nodeType == 1) {
if (val){
path.push(node.nodeName.toLowerCase() + (node.id ?
"[#id='"+node.id+"' #value='"+val+"']" :
count > 0 ? "["+count+"]" : ''));
}else{
path.push(node.nodeName.toLowerCase() + (node.id ?
"[#id='"+node.id+"']" : count > 0 ? "["+count+"]" : ''));
}
}
return path;
};
try:
http://mcc.id.au/xpathjs
or
http://xmljs.sourceforge.net/

Categories