iTop, where to implement onchange javascript? - javascript

the iTop fourms are pretty inactive and I am pretty stuck so I thought I'd ask here if that is ok. I am attempting to add my own piece of javascript to work onchange of the iTop organization select bar.
Here is a link to iTop if needed: http://www.combodo.com/spip.php?page=rubrique&id_rubrique=8
Extra info on my iTop forum question, no answers yet: https://sourceforge.net/p/itop/discussion/922360/thread/dd1da92f/
So iTop is a piece of software made using php, html, js and css but I am new to php so I have ran into a little bit of a problem. I am trying to implement a piece of javascript which will change the top-bar of the css to a different colour based on organization, I made a small prototype independent of iTop and it works perfectly. However I am unable to add the onchange() method along with the javascript as the main user interface is generated dynamically using php. I have tried numerous ways to implement the javascript but none have worked. Here are some pictures of iTop and code to help:
This is a picture showing the inspect element of iTop and how I came to believe jquery-1.7.1.min.js may be the correct location to place the code.
So I have tried going into this file and copy and pasting in my Java Script code but in some locations it has no affect and within function(a){....} it results in iTop only displaying a blank page, I could be going about this totally wrong but from what I have seen this file seems to be the one I am to edit to get what I want.
here is the javascript i am trying to implement:
var changeStyle = function(){
//HTML
var selectedValue = document.getElementById("org_id").value;
//CSS
var trimColor = document.querySelector("#top-bar");
//BT
if(selectedValue=="3"){
//change banner colour
trimColor.style.backgroundColor= "#3498db";
}
//Bell Aliant
else if(selectedValue=="27"){
//change banner colour
trimColor.style.backgroundColor= "#f1c40f";
}
//Bell Canada
else if(selectedValue=="26"){
trimColor.style.backgroundColor= "#e74c3c";
}
else
trimColor.style.backgroundColor="#ecf0f1";
}
Here are some pictures of it working in my non iTop version of just HTML, JS and CSS:

This is an old question but I'll answer it anyway as the answer is still ok for the last versions of iTop.
To inject some JS in the page, you have to use the iPageUIExtension::GetNorthPaneHtml(iTopWebPage $oPage) API which gives you acces to the iTopWebPage object. Then you can use the various public methods such as "iTopWebPage::add_ready_script($sScript)" to inject $sScript into all of the backoffice pages. Moreover, the script will be executed once the DOM is ready.
You can find an example here.
class PageUIExtension implements iPageUIExtension
{
/**
* #inheritdoc
*/
public function GetNorthPaneHtml(iTopWebPage $oPage)
{
...
$oPage->add_linked_script(utils::GetAbsoluteUrlModulesRoot() . 'molkobain-handy-framework/common/js/handy-framework.js');
}
}
Note: You will need to make your own iTop extension, check here for how to do it.

Although I do not believe it is the best solution I have entered the following code into jquery-1.1.1.min.js as shown
And I have achieved the desired result, the trim now changes with the organization change, this however is not the perfect solution I was looking for and is a bit slow but not in the sense that you'd get annoyed, at least in my opinion. Mission Accomplished for the moment!

Related

Problems with implementing a specific code

As stated above, I have problems with implementing a specific code on my website.
This is how it should look: https://codepen.io/smalinux/pen/VjXokA.
var d1_li = MorphSVGPlugin.convertToPath("#d1_li"),
d2_li = MorphSVGPlugin.convertToPath("#d2_li"),
d3_li = MorphSVGPlugin.convertToPath("#d3_li"),
d4_li = MorphSVGPlugin.convertToPath("#d4_li"),
d5_li = MorphSVGPlugin.convertToPath("#d5_li"),
d6_li = MorphSVGPlugin.convertToPath("#d6_li"),
d7_li = MorphSVGPlugin.convertToPath("#d7_li"),
d8_li = MorphSVGPlugin.convertToPath("#d8_li"),
d9_li = MorphSVGPlugin.convertToPath("#d9_li");
(I don't know how I show the rest of the JS code, but you can see it in the provided link)
Now, I have a Wordpress website and I am not good in HTML/JS/CSS at all. I am using the Avada theme and when I try to implement this, I either get a white box with nothing happening at all when I use the code generator. When I try to implement the codes seperately I see all the animations overlapping eachother and not moving (meaning JS is wrong?).
Now, I hope I explained my problem. If somebody could help me I would be forever grateful!
Exactly how are you implementing the css and js? Screenshots would help. Are you using a child theme?

How to tell if smart invert is enabled with JavaScript?

Is it possible to see if iOS 11’s Smart Invert is enabled using either JavaScript or CSS? I’d like my websites to work with it, seeing I (and probably a lot of other people) use it a lot.
Based on the answer posted in the comments above and using Modernizr.js you could do this fairly easily with a custom test.
Modernizr.addTest('colorinvert', accessibilityIgnoresInvertColors in window && !accessibilityIgnoresInvertColors);
This will add a class to the page's <html> element called colorinvert if the colors are being inverted, and nocolorinvert if not.
This should make it easy to apply custom css or javascript logic when the colors are inverted.
Vanilla js could analyze this property and do the same thing as modernizr as well -- something like this run during initial page load should work:
var classname = "colorinvert";
if(typeof(window["accessibilityIgnoresInvertColors"]) === "undefined" || accessibilityIgnoresInvertColors) classname = "no" + classname;
document.getElementsByTagName("html")[0].classList.add(classname);

menucool tooltip javascript purchase pop-up

I am pretty new to web design and programming. I am trying to learn as much as i can but i have issues with tool tip JavaScript that i used in my website
Here is my website
Does anyone know how to disable the "purchase pop up box"?
This is exactly what i am using
Please help!
For Latest tooltip.JS:
Find below js Code in tooltip.js
e.className = "mcTooltipInner";
Now Find e[P] = h; code, next to upper searched code(in if condition) and replace below code with e[P] = h; code.
$('.mcTooltipWrapper').css('display','none');
/* e[P] = h; */
you just have to find and delete the script after g=new ub; until var c=e(R,k);, so find and delete the script:
if(a)console.log=a}if(E&&E.id=="mcttDummy"&&d.innerHTML.indexOf(X("kdvh#Uh"))!=-1)g.i=function(){};return g},jb=function(d,c,b){b=b||{};var a;for(a in c)d[a]=b[a]!==undefined?b[a]:c[a]},gb=0,I,tb=function(b){if(!b){b=e(o,"mcttDummy");if(!b){b=e(N,"div");b.id="mcttDummy";b[a].display="none";
and it won't show the pop-up again
Open the tooltip.js in Notepad....
Do a search for "mcttDummy", this is the popup that comes up randomly.
You should see a function like this:
if(!b){
b=e(N,"div");
b.id="mcttDummy"
...etc...
}
In that condition where the object is not B,
Put an alert there, that's useful for debuging javascript.
if(!b){alert("mcttDummy");
b=e(N,"div");
b.id="mcttDummy"
...etc...
}
Now try to get the purchase popup to come up.
It should be triggered after the alert.
The tool script relevant portion i.e.
if(a)console.log=a}if(E&&E.id=="mcttDummy"&&d.innerHTML.indexOf(X("kdvh#Uh"))!=-1)g.i=function(){};return g},jb=function(d,c,b){b=b||{};var a;for(a in c)d[a]=b[a]!==undefined?b[a]:c[a]},gb=0,I,tb=function(b){if(!b){b=e(o,"mcttDummy");if(!b){b=e(N,"div");b.id="mcttDummy";b[a].display="none";
May also look like -
if(a)console.log=a}if(k&&k.id=="mcttDummy"&&d[P].indexOf(mb("kdvh#Uh"))!=-1)g.i=Nb;return g},yb=function(d,c,b){b=b||{};var a;for(a in c)d[a]=b[a]!==undefined?b[a]:c[a]},ub=0,M,Jb=function(b){if(!b){b=l(L,"mcttDummy");if(!b){b=l(N,"div");b.id="mcttDummy";b[a][Y]="none";
If you remove the complete script, the script may not function properly. Instead of that, you may simply replace "none" as "". This will solve the issue as I've tested.
Look for this code in js-image-slider.js
for(var b=[],a=0;a<e[d];a++)b[b[d]]
Start this for loop from 24 i.e a=24
The logic is simple.... they iterate the for loop to 24 i.e making the string "slider purchase reminder" count to 24 including spaces.
If you iterate the loop from 24 the string making logic will not work, hence it will not be displayed on the page. So your code snippet should look like
for(var b=[],a=24;a<e[d];a++)b[b[d]]

Modifying HTML text using innerHTML and/or replace

So I have been stuck on this jQuery problem for days at this point.
I am working on a Web Application that was derived from Mobile and my company goes through NetBiscuits for mobile.
Long story short NetBiscuits uses their own markup and I cannot get this string'[BR][BR]'from showing up in an error message.
[BR] is the BML of line break and I need some jQuery to take that sucker out of our web app!
[ ] essentially needs to be < > or nothing (preferred)
I gave the form: errors a div id of "erMsg." Here's my code in javascript:
document.getElementById("erMsg").value = document.getElementById("erMsg").innerHTML(erMsg.replace('[BR][BR]', '<br><br>'));
I have tried countless methods and practices both using jQuery and JS, innerHTML and replace().
ANY help would be most graciously accepted.
innerHTML is not a function, it's a property. You assign to it.
Try this:
var elem = document.getElementById('erMsg');
elem.innerHTML = elem.innerHTML.replace(/\[br\]/ig,'<br />');

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!

Categories