so i bought a site witch is connected to a gestional programm in office..
the site is a little old, it's fully compatible with all the versions of internet explorer but not with other browsers(opera,safari,chrome,firefox...)
the only piece not working is a menu not opening correctly, when you click on it it doesn't happen anything or in chrome it changes the image but it doesn't upload the links. it seems that it doens't upload things in the hiddenframe...
in chrome it gives error in loadchildren function.
in firefox it gives error in function Toc_click ()
TypeError: window.event is undefined
[Break On This Error]
var eSrc = window.event.srcElement;
we searched for the problem and we think that the problem should be in this file
the problem should be a syntax problem, it's compatible in old browsers but not on the new ones. i cannot change completely the code as it is connected with other files(a lot) and sql server...
we already tried to change
document.frames["hiddenframe"].location.replace(strLoc);
by
document.getElementsByName("hiddenframe").location.replace(strLoc);
it doens't work and it doesn't work on IE either...
/* TOC.JS */
var framesTop = parent.parent;
//var L_LoadingMsg_HTMLText = "Loading, click to cancel...";
var LoadDiv = '<DIV ONCLICK="loadFrame(true);" CLASS="clsLoadMsg">';
L_LoadingMsg_HTMLText = LoadDiv + L_LoadingMsg_HTMLText + "</LI>";
function caps(){
var UA = navigator.userAgent;
if(UA.indexOf("MSIE") != -1)
{
this.ie = true;
this.v = UA.charAt(UA.indexOf("MSIE") + 5);
if( this.v == 2 ) this.ie2 = true;
else if( this.v == 3 ) this.ie3 = true;
else if( this.v == 4 ) this.ie4 = true;
else if( this.v == 5 ) this.ie5 = true;
else if( this.v == 6 ) this.ie6 = true;
else this.ie6 = true;
}
else if(UA.indexOf("Mozilla") != -1 && UA.indexOf("compatible") == -1)
{
this.nav = true;
var v = UA.charAt(UA.indexOf("Mozilla") + 8);
if(v == 2 ) this.nav2 = true;
else if(v == 3 ) this.nav3 = true;
else if(v == 4 ) this.nav4 = true;
}
if(UA.indexOf("Windows 95") != -1 || UA.indexOf("Win95") != -1 || UA.indexOf("Win98") != -1 || UA.indexOf("Windows 98") != -1 || UA.indexOf("Windows NT") != -1 || UA.indexOf("Windows XP") != -1) this.win32 = true;
else if(UA.indexOf("Windows 3.1") != -1 || UA.indexOf("Win16") != -1) this.win16 = true;
else if(UA.indexOf("Mac") != -1) this.anymac = true;
else if(UA.indexOf("SunOS") != -1 || UA.indexOf("HP-UX") != -1 || UA.indexOf("X11") != -1) this.unix = true;
else if(UA.indexOf("Windows CE") != -1) this.wince = true;
}
var bc = new caps();
////////////////////////////////////////////
// Not sure why this is here, it puts a scrollbar up when none is needed
// if("object" == typeof(parent.document.all.fraPaneToc)) parent.document.all.fraPaneToc.scrolling = "yes";
////////////////////////////////////////////
var eSynchedNode = null;
var eCurrentUL = null;
var eCurrentLI = null;
var bLoading = false;
function loadFrame( bStopLoad )
{
if( "object" == typeof( eCurrentUL ) && eCurrentUL && !bStopLoad )
{
eCurrentUL.innerHTML = hiddenframe.chunk.innerHTML;
eCurrentUL = null;
bLoading = false;
}
else if( "object" == typeof( eCurrentUL ) && eCurrentUL )
{
eCurrentUL.parentElement.children[1].className = "";
eCurrentUL.parentElement.children[0].src = "bs.gif";
eCurrentUL.parentElement.className = "kid";
eCurrentUL.className = "clsHidden";
eCurrentUL.innerHTML="";
eCurrentUL = null;
bLoading = false;
}
else
{
bLoading = false;
}
return;
}
function GetNextUL(eSrc)
{
var eRef = eSrc;
for(var i = eRef.sourceIndex + 1; i < document.all.length; i++)
{
if( "UL" == document.all[ i ].tagName )
{
return document.all[ i ];
}
else if( "LI" == document.all[ i ].tagName )
{
break;
}
}
return false;
}
function MarkSync(eSrc)
{
if("object" == typeof(aNodeTree)) aNodeTree = null;
if("LI" == eSrc.tagName.toUpperCase() && eSrc.children[1] && eSynchedNode != eSrc )
{
UnmarkSync();
eSrc.children[1].style.fontWeight = "bold";
eSynchedNode = eSrc;
}
}
function UnmarkSync()
{
if("object" == typeof(eSynchedNode) && eSynchedNode )
{
eSynchedNode.children[1].style.fontWeight = "normal";
eSynchedNode = null;
}
}
function MarkActive(eLI)
{
if( "object" == typeof( eLI ) && eLI && "LI" == eLI.tagName.toUpperCase() && eLI.children[1] && eLI != eCurrentLI )
{
MarkInActive();
window.eCurrentLI = eLI;
window.eCurrentLI.children[1].className = "clsCurrentLI";
}
}
function MarkInActive()
{
if( "object" == typeof( eCurrentLI ) && eCurrentLI )
{
window.eCurrentLI.children[1].className = "";
window.eCurrentLI = null;
}
}
function LoadChildren( eLink )
{
var strLoc = "loadtree.asp" + eLink.href.substring( eLink.href.indexOf( "?" ) );
document.frames["hiddenframe"].location.replace(strLoc);
}
function Navigate_URL( eSrc )
{
var eLink = eSrc.parentElement.children[1];
urlIdx = eLink.href.indexOf( "URL=" );
if("object" == typeof(framesTop.fraTopic) && eLink && "A" == eLink.tagName && urlIdx != -1 )
{
if(eLink.target=="fraTopic"||eLink.target=="_top"){
framesTop.fraTopic.location.href = eSrc.parentElement.children[1].href.substring( urlIdx + 4 );
}else{
window.open(eSrc.parentElement.children[1].href,eLink.target);
}
MarkSync(eSrc.parentElement);
}
else if("object" == typeof(framesTop.fraTopic) && eLink && "A" == eLink.tagName && eLink.href.indexOf( "tocPath=" ) == -1 && eLink.href.indexOf( "javascript:" ) == -1 )
{
if(eLink.target=="fraTopic")
{
framesTop.fraTopic.location.href = eSrc.parentElement.children[1].href;
}
else if( eLink.target=="_top" )
{
top.location = eLink.href;
return;
}
else
{
window.open(eSrc.parentElement.children[1].href,eLink.target);
}
MarkSync(eSrc.parentElement);
}
else if( eSynchedNode != eSrc.parentElement && ( urlIdx != -1 || ( eLink.href.indexOf( "javascript:" ) == -1 && eLink.href.indexOf( "tocPath=" ) == -1 ) ) )
{
// START D.S.
if(eLink.target=="fraTopic")
{
if (navigator.userAgent.indexOf("Windows") == -1) {
var MyHref = eSrc.parentElement.children[1].href;
do
{
if (MyHref.indexOf("%2E") != -1) MyHref = MyHref.replace("%2E", ".");
else if (MyHref.indexOf("%2F") != -1) MyHref = MyHref.replace("%2F", "/");
else if (MyHref.indexOf("%3F") != -1) MyHref = MyHref.replace("%3F", "?");
else if (MyHref.indexOf("%3D") != -1) MyHref = MyHref.replace("%3D", "=");
else if (MyHref.indexOf("%26") != -1) MyHref = MyHref.replace("%26", "&");
else break;
}
while (true);
parent.fraTopic.location.href = MyHref;
} else {
parent.fraTopic.location.href = eSrc.parentElement.children[1].href;
}
}
// END D.S.
MarkSync( eSrc.parentElement );
}
}
function Image_Click( eSrc , bLeaveOpen )
{
var eLink = eSrc.parentElement.children[1];
if("noHand" != eSrc.className)
{
eLI = eSrc.parentElement;
MarkActive(eLI);
var eUL = GetNextUL(eLI);
if(eUL && "kidShown" == eLI.className)
{
// hide on-page kids
if( !bLeaveOpen )
{
eLI.className = "kid";
eUL.className = "clsHidden";
eSrc.src = "bs.gif";
}
}
else if(eUL && eUL.all.length)
{
// show on-page kids
eLI.className = "kidShown";
eUL.className = "clsShown";
eSrc.src = "bo.gif";
}
else if("kid" == eLI.className)
{
// load off-page kids
if( !bLoading )
{
bLoading = true;
eLI.className = "kidShown";
eUL.className = "clsShown";
window.eCurrentUL = eUL;
eSrc.src = "bo.gif";
eUL.innerHTML = L_LoadingMsg_HTMLText;
LoadChildren( eLink );
}
}
}
}
function Toc_click ()
{
var eSrc = window.event.srcElement;
event.returnValue = false;
if("A" == eSrc.tagName.toUpperCase() && "LI" == eSrc.parentElement.tagName)
{
var eImg = eSrc.parentElement.children[0];
if(eImg) eImg_click(eImg);
}
else if("SPAN" == eSrc.tagName && "LI" == eSrc.parentElement.tagName)
{
var eImg = eSrc.parentElement.children[0];
if(eImg) eImg_click(eImg);
}
else if("IMG" == eSrc.tagName)
{
}
return event.returnValue;
}
function eImg_click(eImg)
{
if("IMG" == eImg.tagName)
{
Image_Click( eImg , false );
Navigate_URL( eImg );
}
}
function Toc_dblclick()
{
return;
}
function window_load()
{
if( self == top ) location.replace( "default.asp" );
var objStyle = null;
if( bc.win32 && ( bc.ie4 || bc.ie5 || bc.ie6 ) && "object" == typeof ( ulRoot ) && "object" == typeof( objStyle = document.styleSheets[0] ) && "object" == typeof( objStyle.addRule ) )
{
window.eSynchedNode = document.all["eSynchedNode"];
objStyle.addRule( "UL.clsHidden" , "display:none" , 0 );
objStyle.addRule( "UL.hdn" , "display:none" , 0 );
//--ulRoot.onclick=Toc_click;
ulRoot.ondblclick=Toc_dblclick;
if( window.eSynchedNode )
{
MarkActive(window.eSynchedNode);
window.eSynchedNode.all.tags( "B" )[0].outerHTML = eSynchedNode.all.tags("B")[0].innerHTML;
window.scrollTo(0,window.eSynchedNode.offsetTop-(document.body.clientHeight/2));
}
else
{
MarkActive(document.all.tags( "LI" )[0]);
}
}
}
window.onload = window_load;
suggestions?
Related
I have a Homepage Takover running on our website. and I have already written code for displaying the image as background image and it is clickable.
But I need certain part of image needs to clickable to another URL.
<!DOCTYPE html>
<html>
<head>
<title>asdfasdf</title>
</head>
<body>
<div>
<script>
if (top == self) {
var interWindow = window;
var interDoc = window.document;
} else {
try {
var interWindow = window.parent;
var interDoc = window.parent.document;
} catch (e) {
/* The creative cannot escape the iframe. Show an appropriate alternative. The alternative will remain inside of the iframe. */
}
}
var timeDelay = 0;
var backgroundColor = '#ffffff';
function initBackground() {
high = window.screen.height;
size = window.screen.width;
if (size <= 1280) {
interDoc.body.style.backgroundImage = none;
} else if (size > 1280 && size < 1440) {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
} else {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
}
if (backgroundColor != '') {
interDoc.body.style.backgroundColor = backgroundColor;
}
interDoc.body.style.backgroundRepeat = 'no-repeat';
interDoc.body.style.backgroundPosition = 'top center';
interDoc.body.style.backgroundAttachment = 'fixed';
interDoc.onclick = backGroundClick;
}
var backGroundClick = function (e) {
if (document.all) {
if (event.button == 2 || event.button == 3) {
return false;
}
} else {
if (e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return false;
}
}
var link = 'google.com';
EE = e ? e : event;
if (!EE) {
return;
}
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
var ad = window.open("" + link);
} else {
console.log('link click event: ' + t.tagName);
}
}
interDoc.onmouseover = function (e) {
EE = e ? e : event;
if (!EE)
return;
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
interDoc.body.parentNode.style.cursor = 'pointer';
} else {
interDoc.body.parentNode.style.cursor = 'auto';
}
}
window.setTimeout("initBackground();", timeDelay);
</script>
</div>
</body>
</html>
The Red highlited part in the background image needs to redirect to another URL when onclick.
I've created a simple keyboard controlled JavaScript game (extra task from front-end bootcamp I finished recently). A few days ago I decided to add controls for mobile devices, and while keyboard control works well (response from the game is instantaneous), mobile controls 'suffer' from some kind of lag.
Main game controlling JS code:
var Zombie = require('./zombie.js');
var Brain = require('./brain.js');
var Trap = require('./trap.js');
function Game() {
this.board = document.querySelectorAll('#board div');
this.zombie = new Zombie();
this.brain = new Brain();
this.trap = new Trap();
this.trap2 = new Trap();
this.trap3 = new Trap();
this.trap4 = new Trap();
this.trap5 = new Trap();
this.score = 0;
this.speed = 320;
this.index = function(x, y) {
return x + (y * 10);
}
this.showZombie = function() {
this.board[this.index(this.zombie.x, this.zombie.y)].classList.add('zombie');
}
this.hideVisibleZombie = function() {
document.querySelector('.zombie').classList.remove('zombie');
}
this.showBrain = function() {
this.board[this.index(this.brain.x, this.brain.y)].classList.add('brain');
if(!(this.brain.x === this.trap.x && this.brain.y === this.trap.y)) {
this.board[this.index(this.trap.x, this.trap.y)].classList.add('trap');
}
if(!(this.brain.x === this.trap2.x && this.brain.y === this.trap2.y)) {
this.board[this.index(this.trap2.x, this.trap2.y)].classList.add('trap');
}
if(!(this.brain.x === this.trap3.x && this.brain.y === this.trap3.y)) {
this.board[this.index(this.trap3.x, this.trap3.y)].classList.add('trap');
}
if(!(this.brain.x === this.trap4.x && this.brain.y === this.trap4.y)) {
this.board[this.index(this.trap4.x, this.trap4.y)].classList.add('trap');
}
if(!(this.brain.x === this.trap5.x && this.brain.y === this.trap5.y)) {
this.board[this.index(this.trap5.x, this.trap5.y)].classList.add('trap');
}
}
this.moveZombie = function() {
this.hideVisibleZombie();
if (this.zombie.direction === "right") {
this.zombie.x += 1;
} else if (this.zombie.direction === "left") {
this.zombie.x -= 1;
} else if (this.zombie.direction === "up") {
this.zombie.y -= 1;
} else if (this.zombie.direction === "down") {
this.zombie.y += 1;
}
if (!(this.gameOver())) {
this.showZombie();
this.checkBrainCollision();
}
}
this.turnZombie = function(event) {
switch (event.which /*|| e.which*/) {
case 37:
this.zombie.direction = 'left';
break;
case 38:
this.zombie.direction = 'up';
break;
case 39:
this.zombie.direction = 'right';
break;
case 40:
this.zombie.direction = 'down';
break;
}
}
this.turnMobileZombie = function(event) {
switch (true) {
case event.currentTarget.classList.contains('up'):
this.zombie.direction = 'up';
break;
case event.currentTarget.classList.contains('down'):
this.zombie.direction = 'down';
break;
case event.currentTarget.classList.contains('left'):
this.zombie.direction = 'left';
break;
case event.currentTarget.classList.contains('right'):
this.zombie.direction = 'right';
break;
}
}
this.checkBrainCollision = function() {
if (this.zombie.x === this.brain.x && this.zombie.y === this.brain.y) {
document.querySelector('.brain').classList.remove('brain');
document.querySelectorAll('.trap').forEach(e => e.classList.remove('trap'));
document.querySelector('.eat').play();
this.score++
document.querySelector('#score strong').innerText = this.score;
this.increaseSpeed();
this.brain = new Brain();
this.trap = new Trap();
this.trap2 = new Trap();
this.trap3 = new Trap();
this.trap4 = new Trap();
this.trap5 = new Trap();
this.showBrain();
} else {
return;
}
}
this.gameOver = function() {
if (
(this.zombie.x < 0 || this.zombie.x > 9 || this.zombie.y < 0 || this.zombie.y > 9) ||
((this.zombie.x === this.trap.x && this.zombie.y === this.trap.y) && (this.brain.x !== this.trap.x || this.brain.y !== this.trap.y)) ||
((this.zombie.x === this.trap2.x && this.zombie.y === this.trap2.y) && (this.brain.x !== this.trap2.x || this.brain.y !== this.trap2.y)) ||
((this.zombie.x === this.trap3.x && this.zombie.y === this.trap3.y) && (this.brain.x !== this.trap3.x || this.brain.y !== this.trap3.y)) ||
((this.zombie.x === this.trap4.x && this.zombie.y === this.trap4.y) && (this.brain.x !== this.trap4.x || this.brain.y !== this.trap4.y)) ||
((this.zombie.x === this.trap5.x && this.zombie.y === this.trap5.y) && (this.brain.x !== this.trap5.x || this.brain.y !== this.trap5.y))
) {
document.querySelector('.dead').play();
clearInterval(this.idSetInterval);
document.querySelector('.brain').classList.remove('brain');
document.querySelectorAll('.trap').forEach(e => e.classList.remove('trap'));
document.querySelector('#over').classList.remove('invisible');
document.querySelector('#over').classList.remove('none');
document.querySelector('p span').innerText = this.score;
return true;
} else {
return false;
}
}
var self = this;
document.addEventListener('keydown', function(event) {
self.turnZombie(event);
});
document.querySelectorAll('.mobile-controller div').forEach((e,i) => {
if(e.classList.contains('up') || e.classList.contains('down') || e.classList.contains('left') || e.classList.contains('right')) {
e.addEventListener('click', function(event) {
self.turnMobileZombie(event);
})
};
})
// $(document).on('click', '.mobile-controller div', function(e) {
// var e = jQuery.Event("keydown");
// if ($(this).hasClass('left')) {
// e.which = 37;
// self.turnZombie(e);
// }
// else if ($(this).hasClass('up')) {
// e.which = 38;
// self.turnZombie(e);
// }
// else if ($(this).hasClass('right')) {
// e.which = 39;
// self.turnZombie(e);
// }
// else if ($(this).hasClass('down')) {
// e.which = 40;
// self.turnZombie(e);
// }
// $(document).trigger(e);
// });
this.startGame = function() {
this.idSetInterval = setInterval(function() {
self.moveZombie()
}, this.speed);
}
this.increaseSpeed = function () {
this.speed -= 5;
clearInterval(this.idSetInterval);
this.idSetInterval = setInterval(function() {
self.moveZombie()
}, this.speed);
};
}
module.exports = Game;
Preview of the game here: link
Link to GitHub repo here: link
As You can see, I've tried a jQuery solution - controls work, but still with the same lag. I'd appreciate any help.
I am using Opencart v2.2.0. Search box is autocomplete and that part is alright. But now I need to make letters bold as I type in the search box.
Example:
The user starts typing "some", and as he types, the results are:
something
awesome
etc.
NOTICE: The words "something" and "awesome" are just an example, in real time I do not know what search terms would user type in.
So far I have this code, but as I am not really a js/jquery expert, I need help implementing the upper request. Thank you all.
//<![CDATA[
function doLiveSearch( ev, keywords ) {
if( ev.keyCode == 38 || ev.keyCode == 40 ) {
return false;
}
$('#autosearch_search_results').remove();
updown = -1;
if( keywords == '' || keywords.length < 2 ) {
return false;
}
keywords = encodeURI(keywords);
$.ajax({url: $('base').attr('href') + 'index.php?route=module/autosearch/ajax_asr&keyword=' + keywords, dataType: 'json', success: function(result) {
if( result.length > 0 ) {
var eList = document.createElement('ul');
eList.id = 'autosearch_search_results';
var eListElem;
var eLink;
var eImage;
for( var i in result ) {
eListElem = document.createElement('li');
eLink = document.createElement('a');
if( (result[i].thumb) != '' )
{
eImage = document.createElement('img');
eImage.src = result[i].thumb;
eLink.appendChild(eImage);
}
// name
var el_span = document.createElement('name');
var textNode = document.createTextNode(result[i].name);
eLink.appendChild(el_span);
el_span.appendChild(textNode);
// model
if( (result[i].model) != '' )
{
var el_span = document.createElement('model');
var textNode = document.createTextNode(result[i].model);
eLink.appendChild(el_span);
el_span.appendChild(textNode);
}
if( typeof(result[i].href) != 'undefined' ) {
eLink.href = result[i].href;
}
else {
eLink.href = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
}
eListElem.appendChild(eLink);
if( (result[i].price) != '' )
{
var br = document.createElement("br");
eLink.appendChild(br);
// special price
if( (result[i].special) != '' )
{
var el_span = document.createElement('special-price');
var textNode = document.createTextNode(result[i].special);
eLink.appendChild(el_span);
el_span.appendChild(textNode);
}
// price
var el_span = document.createElement('price');
var textNode = document.createTextNode(result[i].price);
eLink.appendChild(el_span);
el_span.appendChild(textNode);
}
// quantity/stock
if( (result[i].stock) != '' )
{
var br = document.createElement("br");
eLink.appendChild(br);
eLink.appendChild( document.createTextNode(result[i].stock) );
}
eList.appendChild(eListElem);
}
if( $('#autosearch_search_results').length > 0 ) {
$('#autosearch_search_results').remove();
}
//view all results
if( (result[i].viewall) != '' )
{
eListElem = document.createElement('li');
eLink = document.createElement('a');
var el_span = document.createElement('viewall');
var textNode = document.createTextNode(result[i].viewall);
eLink.appendChild(el_span);
el_span.appendChild(textNode);
eLink.href = $('base').attr('href') + 'index.php?route=product/search&search=' + keywords;
eListElem.appendChild(eLink);
eList.appendChild(eListElem);
}
$('#search').append(eList);
}
}});
return true;
}
function upDownEvent( ev ) {
var elem = document.getElementById('autosearch_search_results');
var fkey = $('#search').find('[name=search]').first();
if( elem ) {
var length = elem.childNodes.length - 1;
if( updown != -1 && typeof(elem.childNodes[updown]) != 'undefined' ) {
$(elem.childNodes[updown]).removeClass('highlighted');
}
// Up
if( ev.keyCode == 38 ) {
updown = ( updown > 0 ) ? --updown : updown;
}
else if( ev.keyCode == 40 ) {
updown = ( updown < length ) ? ++updown : updown;
}
if( updown >= 0 && updown <= length ) {
$(elem.childNodes[updown]).addClass('highlighted');
var text = elem.childNodes[updown].childNodes[0].text;
if( typeof(text) == 'undefined' ) {
text = elem.childNodes[updown].childNodes[0].innerText;
}
}
}
return false;
}
var updown = -1;
$(document).ready(function(){
$('#search').find('[name=search]').attr('autocomplete', 'off'); //disable autocomplete
$('#search').find('[name=search]').first().keyup(function(ev){
doLiveSearch(ev, this.value);
}).focus(function(ev){
doLiveSearch(ev, this.value);
}).keydown(function(ev){
upDownEvent( ev );
}).blur(function(){
window.setTimeout("$('#autosearch_search_results').remove();updown=0;", 1500);
});
$(document).bind('keydown', function(ev) {
try {
if( ev.keyCode == 13 && $('.highlighted').length > 0 ) {
document.location.href = $('.highlighted').find('a').first().attr('href');
}
}
catch(e) {}
});
});
//]]>
just add a function that highlights all the searched text end run it on every text you add to your html:
function highlightQuery(string,searchQuery){
if(!string){
return "";
}
var expr = searchQuery;
expr = expr.replace(/\s+/, "|",searchQuery);
var regex = new RegExp(expr,"gi");
return string.replace(regex, function($1){
return '<span class="highlight">'+ $1 +'</span>';
});
}
We are trying to do the formatting part at javascript
so that only display should be done at HTML part
Execute the below function on typeahead ,and then you just need to display
the resultant array( formattedResult ) in HTML.
formattedResult will contain the formatted text.
While displaying formattedResult array in HTML , put 2nd position text
in bold of each iterated item.
Please try following code:-
//argument types searchList(Array) and searchWord(String)
function formatResult(searchList, searchWord ){
var formattedResult = [[]];
for(var prop in searchList){
if(searchList[prop].indexOf("some")!=-1)
{
var index= searchList[prop].indexOf(searchWord );
var temp = [];
temp.push(searchList[prop].substring(0,index));
temp.push(searchWord.toUpperCase());
temp.push(searchList[prop].substring(index + searchWord.length,
searchList[prop].length));
//console.log(temp);
formattedResult.push(temp);
}
else{
formattedResult.push(searchList[prop])
}
}
return formattedResult;
}
I have two datatables and I use four datepickers(datepicker,datepicker2,datepicker3,datepicker4). Two for each datatable. Actually it's working for one table but for the other it's not vice versa. Here is my code
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var mini = document.getElementById('datepicker').value;
var maxi = document.getElementById('datepicker2').value;
var mini2 = document.getElementById('datepicker3').value;
var maxi2 = document.getElementById('datepicker4').value;
if((mini !== '') && (maxi !== '')){
var taena = data[10]; // use data for the date column
var ifMin = mini.substring(0,2) + mini.substring(3,5) + mini.substring(6,10);
var ifMax = maxi.substring(0,2) + maxi.substring(3,5) + maxi.substring(6,10);
var ifTaena = taena.substring(0,2) + taena.substring(3,5) + taena.substring(6,10);
if ( ( ifMin === '' && ifMax === '' ) || ( ifMin === '' && ifTaena <= ifMax ) || ( ifMin <= ifTaena && ifMax === '' ) || ( ifMin <= ifTaena && ifTaena <= ifMax ) ){
return true;
}
return false;
}
if((mini2 !== '') && (maxi2 !== '')){
var taena2 = data[9]; // use data for the date column
console.log(taena2);
var ifMin2 = mini2.substring(0,2) + mini2.substring(3,5) + mini2.substring(6,10);
var ifMax2 = maxi2.substring(0,2) + maxi2.substring(3,5) + maxi2.substring(6,10);
var ifTaena2 = taena2.substring(0,2) + taena2.substring(3,5) + taena2.substring(6,10);
if ( ( ifMin2 === '' && ifMax2 === '' ) || ( ifMin2 === '' && ifTaena2 <= ifMax2 ) || ( ifMin2 <= ifTaena2 && ifMax2 === '' ) || ( ifMin2 <= ifTaena2 && ifTaena2 <= ifMax2 ) ){
return true;
}
return false;
}
return false;
}
);
I hope you guys could help me
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";}
}