Here is my code I have written - javascript code for IE and Chrome.
How can replace this with jQuery?
All this code working fine with the Javascript but I want replace it with jQuery.
Please help me to resolve this issue
function GetObject(objName)
{
var objReturn;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var x = top.document.forms.Form1.ownerDocument.getElementById("iframe_module_details");
var y = (x.contentWindow || x.contentDocument);
if (y.document && y.document.getElementById(objName))
return y.document.getElementById(objName)
if (window.Form1 && window.Form1.document.getElementById(objName)) {
objReturn = window.Form1.document.getElementById(objName);
}
else if (window.parent.document.forms[0].document.getElementById(objName))
{
objReturn = window.parent.document.forms[0].document.getElementById(objName);
}
else if (top.frames[0].document.forms[0].document.getElementById(objName))
{
objReturn = top.frames[0].document.forms[0].document.getElementById(objName);
}
else if (window.parent && window.parent.Form1 && window.parent.Form1.document.getElementById(objName)) {
objReturn = window.parent.Form1.document.getElementById(objName);
}
else if (opener) {
if (opener.opener) {
if (opener.opener.parent.Form1 && opener.opener.parent.Form1.document.getElementById(objName)) {
objReturn = opener.opener.parent.Form1.document.getElementById(objName);
}
}
else if (opener.parent && opener.parent.Form1 && opener.parent.Form1.document.getElementById(objName)) {
objReturn = opener.parent.Form1.document.getElementById(objName);
}
}
}
else { //For Chrome
if (window.Form1 && window.Form1.document.getElementById(objName)) {
objReturn = window.Form1.document.getElementById(objName);
}
else if (document.getElementById(objName))
{
objReturn = window.parent.document.forms[0].document.getElementById(objName);
}
else if (document.getElementById(objName))
{
objReturn = top.frames[0].document.forms[0].document.getElementById(objName);
}
else if (window.parent && window.parent.Form1 && window.parent.Form1.document.getElementById(objName)) {
objReturn = window.parent.Form1.document.getElementById(objName);
}
else if (opener) {
if (opener.opener) {
if (opener.opener.parent.Form1 && opener.opener.parent.Form1.document.getElementById(objName)) {
objReturn = opener.opener.parent.Form1.document.getElementById(objName);
}
}
else if (opener.parent && opener.parent.Form1 && opener.parent.Form1.document.getElementById(objName)) {
objReturn = opener.parent.Form1.document.getElementById(objName);
}
}
}
//alert(objReturn);
return objReturn;
}
I don't want multiple code for different browser
Your code is very big for this simple task.
If I read correctly your code, it seems to always use getElementById, so it's very easy with jQuery.
So you can replace all this code with this function :
function GetObject(objName) {
return $('#'+objName).get(0); // Return the DOM element of objName, same as document.getElementById(objName)
}
Related
I'm trying to improve this code from all of these else if statements to a switch or something more efficient.
renderIconType = () => {
const { icons = {} } = this.props;
const percent = courseDataStore.getComponentCompletionPercentage(this.props.linkedNodeId);
const isHovering = this.state.isHovering;
const isStarted = !!courseDataStore.getComponentCompletionPercentage(this.props.linkedNodeId);
const isCompleted = percent >= 1;
if (isStarted && isCompleted) {
return icons.completed
} else if (isStarted && isCompleted && isHovering) {
return icons.completedHover
} else if (!isStarted && !isCompleted && isHovering) {
return icons.notStartedHover
} else if (isStarted && !isCompleted && isHovering) {
return icons.startedHover
} else if (isStarted && !isCompleted && !isHovering) {
return icons.started
} else if (!isStarted && !isCompleted && !isHovering) {
return icons.notStarted
}
}
This currently works for my intents and purposes but pains me to look at it lol. I tried a switch statement but that doesn't work.
I am attempting to verify the referral URL and whether or not a cookie contains a certain string and then perform an action, however right now - my IF statement is always TRUE.
When I remove the ref1 section, and only keep getcookie, I believe the statement is false; although then my else if does not work
Nevertheless, I believe the construction of this If statement is missing something.
if (ref1.indexOf('ccov') || ref1.indexOf('top10') || ref1.indexOf('cenf') || ref1.indexOf('aip')||
ref1.indexOf('constructioncoverage')||
ref1.indexOf('aginginplace')|| ref1.indexOf('seniorliving')|| ref1.indexOf('seniorlist') ||
((getcookie('track-page-1').indexOf('ccov')>-1) > -1) ||
((getcookie('track-page-1').indexOf('top10')>-1) > -1) ||
((getcookie('track-page-1').indexOf('cenf')>-1) > -1) ||
((getcookie('track-page-1').indexOf('aip')>-1) > -1)) {
Complete Code if Interested:
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
var userLang = navigator.language || navigator.userLanguage;
s1.async=true;
var country = ('; '+document.cookie).split('; country=').pop().split(';')[0];
var ref1 = document.referrer;
// if (['BS'].indexOf(country) > -1){
// s1.src='https://embed.tawk.to/61488c2325797d7a89ffe3dc/1fg1m6qod';
// }
// else if (country == 'MX') {
// s1.src='https://embed.tawk.to/6148c99f25797d7a89ffef5b/1fg2576ci';
// }
if (ref1.indexOf('ccov') || ref1.indexOf('top10') || ref1.indexOf('cenf') || ref1.indexOf('aip') || ref1.indexOf('constructioncoverage') || ref1.indexOf('aginginplace') || ref1.indexOf('seniorliving') || ref1.indexOf('seniorlist') || ((getcookie('track-page-1').indexOf('ccov')>-1) > -1) || ((getcookie('track-page-1').indexOf('top10')>-1) > -1) || ((getcookie('track-page-1').indexOf('cenf')>-1) > -1) || ((getcookie('track-page-1').indexOf('aip')>-1) > -1)) {
s1.src='https://embed.tawk.to/620675459bd1f31184dc28c0/1frkjk5mj';
}
else if (userLang.match(/^es/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1f5dpa29q';
}
else if (userLang.match(/^pt/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1f63jmv3f';
}
else if (userLang.match(/^fr/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1fa3s0cbv';
}
else if (userLang.match(/^ru/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1fa3rv0no';
}
else if (userLang.match(/^lv/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1fa3tcrog';
}
else if (userLang.match(/^et/)) {
s1.src='https://embed.tawk.to/609a845c185beb22b30c3bf3/1fa3tv7ll';
}
else if (userLang.match(/^lt/)) {
s1.src='https://embed.tawk.to/60e765f7649e0a0a5ccb3f41/1fa3uck2u';
}
else if (userLang.match(/^sv/)) {
s1.src='https://embed.tawk.to/60e765f7649e0a0a5ccb3f41/1fa5mfs8d';
}
else if (userLang.match(/^de/)) {
s1.src='https://embed.tawk.to/60e765f7649e0a0a5ccb3f41/1fa5muuvn';
}
else if (userLang.match(/^no/)) {
s1.src='https://embed.tawk.to/60e765f7649e0a0a5ccb3f41/1fa5ncduf';
}
else if (userLang.match(/^fi/)) {
s1.src='https://embed.tawk.to/60e765f7649e0a0a5ccb3f41/1fa5nudj7';
}
else if (userLang.match(/^nl/)) {
s1.src='https://embed.tawk.to/60e8531a649e0a0a5ccb61ee/1fa5o97t4';
}
else if (userLang.match(/^da/)) {
s1.src='https://embed.tawk.to/60e8531a649e0a0a5ccb61ee/1fa5orip4';
}
else if (userLang.match(/^el/)) {
s1.src='https://embed.tawk.to/60e8531a649e0a0a5ccb61ee/1fa5pkm1k';
}
else if (userLang.match(/^it/)) {
s1.src='https://embed.tawk.to/60e8531a649e0a0a5ccb61ee/1fa5q4uh2';
}
else if (userLang.match(/^pl/)) {
s1.src='https://embed.tawk.to/60e8531a649e0a0a5ccb61ee/1fa5qj4r7';
}
else if (userLang.match(/^cs/)) {
s1.src='https://embed.tawk.to/60e85defd6e7610a49aa78ec/1fa5qtrst';
}
else if (userLang.match(/^ro/)) {
s1.src='https://embed.tawk.to/60e85defd6e7610a49aa78ec/1fa5rl5gg';
}
else if (userLang.match(/^be/)) {
s1.src='https://embed.tawk.to/60e85defd6e7610a49aa78ec/1fa5rvbod';
}
else if (userLang.match(/^uk/)) {
s1.src='https://embed.tawk.to/60e85defd6e7610a49aa78ec/1fa5sgafc';
}
else if (userLang.match(/^hu/)) {
s1.src='https://embed.tawk.to/60e85defd6e7610a49aa78ec/1fa5t38bi';
}
else if (userLang.match(/^hr/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa5to1mj';
}
else if (userLang.match(/^sr/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa5u9emd';
}
else if (userLang.match(/^ka/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa5uus6k';
}
else if (userLang.match(/^sk/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa5vdsc3';
}
else if (userLang.match(/^tr/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa60012u';
}
else if (userLang.match(/^ar/)) {
s1.src='https://embed.tawk.to/60e8697ad6e7610a49aa7abc/1fa60cgb7';
}
else {
s1.src='https://embed.tawk.to/60a7b623b1d5182476bb3457/1f67huun6';
}
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
It's tricky to debug this code as a sample of the value of ref1 is not provided. However, I can give some advice on where to go with this.
The indexOf method returns either the index of the substring/element provided, or -1 if not present. Be aware that Boolean(-1) returns true.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
document.referrer is a string, so you should probably make use of the includes method on string. This properly yields true when the substring is present, and false when it is not.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
Try replacing the indexOf methods on ref1 with includes like so:
if (ref1.includes('ccov') || ref1.includes('top10') || ref1.includes('cenf') || ref1.includes('aip') ||
ref1.includes('constructioncoverage') ||
ref1.includes('aginginplace') || ref1.includes('seniorliving') || ref1.includes('seniorlist') ||
((getcookie('track-page-1').indexOf('ccov') > -1) > -1) ||
((getcookie('track-page-1').indexOf('top10') > -1) > -1) ||
((getcookie('track-page-1').indexOf('cenf') > -1) > -1) ||
((getcookie('track-page-1').indexOf('aip') > -1) > -1)) {
}
Here is my jQuery for dynamic attached elements. The jq-select-ring button can be multiple on the DOM. Basically, it was attached through an Ajax call.
let cKeyTabShift = false;
$("body").on("keydown", ".jq-select-ring", function (e) {
if (!isMobileSite) {
var keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 9) {
if (e.shiftKey) {
cKeyTabShift = true;
} else {
cKeyTabShift = false;
}
}
}
});
$("body").on("focusout", ".jq-select-ring", function () {
if (!isMobileSite) {
const parentIndex = $(this).closest('.flex-item').index();
const $elmSliders = $(this).closest('.container').find("div[id^='touchCarousel-'][role='tabpanel']");
const $nextArrow = $(this).closest('.touch-carousel').find('.touchcarousel-next');
const $prevArrow = $(this).closest('.touch-carousel').find('.touchcarousel-prev');
if (typeof ($elmSliders) != "undefined" && $elmSliders.length > 0) {
if ($elmSliders.length > 1) {
if (parentIndex == 1 && cKeyTabShift == false) {
if (!$nextArrow.hasClass('endArrows')) {
$nextArrow.trigger('click');
}
}
if (parentIndex == 0 && cKeyTabShift == true) {
if (!$prevArrow.hasClass('endArrows')) {
$prevArrow.trigger('click');
cKeyTabShift = false;
}
}
}
}
}
});
The issue is the trigger click is called when I add breakpoint only.
$nextArrow.trigger('click');
$prevArrow.trigger('click');
I just started learning jQuery, this is my first project; I have classic JavaScript function that I need to convert to jQuery. Could any jQuery expert please help me?
Thank you in advance.
for (var i = 0; (l_link = document.getElementsByTagName("link")[i]); i++) {
if (l_link.getAttribute("rel")) {
if (l_link.getAttribute("rel").indexOf("style") != -1 && l_link.getAttribute("title")) {
l_link.disabled = true;
if (l_link.getAttribute("title") == theme_id) {
l_link.disabled = false;
applied = false;
activetheme = v_css;
}
}
}
}
$('link').each(function(i, link) {
link = $(link);
if (link.attr('rel') && link.attr('rel').indexOf("style") != -1 && link.attr('title')) {
if (link.attr('title') == theme_id) {
link.attr('disabled', false);
applied = false;
activetheme = v_css;
} else {
link.attr('disabled', true);
}
}
});
It would look like this in JQuery.
$('link').each(function(i, l_link) {
if (l_link.attr('rel') && l_link.attr('rel').indexOf("style") != -1 && l_link.attr('title')) {
if (l_link.attr('title') == theme_id) {
l_link.attr('disabled', false);
applied = false;
activetheme = v_css;
} else {
l_link.attr('disabled', true);
}
}
});
I have the following code that works when triggered by an onclick for example: onClick="change('imgA');"
function change(v) {
var target = document.getElementById("target");
if (v == "imgA") {
target.className = "cast1";
} else if (v == "imgB") {
target.className = "cast2";
} else if (v == "imgC") {
target.className = "cast3";
} else if (v == "imgD") {
target.className = "cast4";
} else {
target.className = "chart";
}
}
as soon as this result is stored to the id 'target', How do I perform this same function again but with different classNames ('bio1' instead of 'cast1', etc). then save the results to a different id?
Everytime I've tried hasn't worked to this point.
You could try:
function change(v, id) {
var areas;
if( id == 'target' ) {
areas = 'cast';
} else {
areas = 'bio';
}
var target = document.getElementById(id);
if (v == "imgA") {target.className = areas+"1";}
else if (v == "imgB") {target.className = areas+"2";}
else if (v == "imgC") {target.className = areas+"3";}
else if (v == "imgD") {target.className = areas+"4";}
else {target.className = "chart";}
}