image src transitions appears for the user

image src transitions appears for the user - javascript

I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>

Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.

Related

Clear/reset the content of a div using a button

I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.
Here are the relevant codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Maze - Zoom Zoom</title>
<script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<!-- Commands -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Commands</div>
</a>
<div class="commands">
<div class="draggable">
<input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
</div>
</div>
</ul>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row">
<div class="col">
<div class="container" id="commands"></div>
<button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#commands").empty();
});
});
</script>
</html>

You can make divs' appear or disappear using vanilla javascript only.
A simple example below:
<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>
<script>
resetButton.addEventListener('click', () => {
container.innerHTML = '';
// Or container.style.display = 'none'; if you want container to disappear without leaving space
// Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
});
</script>

Changed to:
<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>
<script type="text/javascript">
$(document).ready(function()
{
$("reset").click(function()
{
$("#commands").empty();
});
});
</script>

Selenium: How to get the html code generated by javascript

Good day!
I'm new to selenium, and I'm trying to get the html code of website.
The driver.page_source() returns
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript" src="https://bam.nr-data.net/1/c95cd51526?a=214311961&v=1167.2a4546b&to=ZlBXZxcAVkEHV0NbDV8aYEEMTlpXEg1dU09cWldaCQQXXglTXlxNWFtRVh1PSFoW&rst=369&ref=https://vsmobile.bet9ja.com/bet9ja-mobile/login/&ap=5&be=335&fe=366&dc=363&perf=%7B%22timing%22:%7B%22of%22:1588632697764,%22n%22:0,%22u%22:321,%22ue%22:321,%22f%22:4,%22dn%22:5,%22dne%22:5,%22c%22:5,%22s%22:94,%22ce%22:191,%22rq%22:191,%22rp%22:310,%22rpe%22:313,%22dl%22:325,%22di%22:363,%22ds%22:363,%22de%22:366,%22dc%22:366,%22l%22:366,%22le%22:367%7D,%22navigation%22:%7B%7D%7D&fp=362&at=ShdUEV8aRU8%3D&jsonp=NREUM.setToken"></script><script src="https://js-agent.newrelic.com/nr-1167.min.js"></script><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={licenseKey:"c95cd51526",applicationID:"214311961"};window.NREUM||(NREUM={}),__nr_require=function(e,n,t){function r(t){if(!n[t]){var i=n[t]={exports:{}};e[t][0].call(i.exports,function(n){var i=e[t][1][n];return r(i||n)},i,i.exports)}return n[t].exports}if("function"==typeof __nr_require)return __nr_require;for(var i=0;i<t.length;i++)r(t[i]);return r}({1:[function(e,n,t){function r(){}function i(e,n,t){return function(){return o(e,[u.now()].concat(f(arguments)),n?null:this,t),n?void 0:this}}var o=e("handle"),a=e(4),f=e(5),c=e("ee").get("tracer"),u=e("loader"),s=NREUM;"undefined"==typeof window.newrelic&&(newrelic=s);var p=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],l="api-",d=l+"ixn-";a(p,function(e,n){s[n]=i(l+n,!0,"api")}),s.addPageAction=i(l+"addPageAction",!0),s.setCurrentRouteName=i(l+"routeName",!0),n.exports=newrelic,s.interaction=function(){return(new r).get()};var m=r.prototype={createTracer:function(e,n){var t={},r=this,i="function"==typeof n;return o(d+"tracer",[u.now(),e,t],r),function(){if(c.emit((i?"":"no-")+"fn-start",[u.now(),r,i],t),i)try{return n.apply(this,arguments)}catch(e){throw c.emit("fn-err",[arguments,this,e],t),e}finally{c.emit("fn-end",[u.now()],t)}}}};a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(e,n){m[n]=i(d+n)}),newrelic.noticeError=function(e,n){"string"==typeof e&&(e=new Error(e)),o("err",[e,u.now(),!1,n])}},{}],2:[function(e,n,t){function r(e,n){var t=e.getEntries();t.forEach(function(e){"first-paint"===e.name?c("timing",["fp",Math.floor(e.startTime)]):"first-contentful-paint"===e.name&&c("timing",["fcp",Math.floor(e.startTime)])})}function i(e,n){var t=e.getEntries();t.length>0&&c("lcp",[t[t.length-1]])}function o(e){if(e instanceof s&&!l){var n,t=Math.round(e.timeStamp);n=t>1e12?Date.now()-t:u.now()-t,l=!0,c("timing",["fi",t,{type:e.type,fid:n}])}}if(!("init"in NREUM&&"page_view_timing"in NREUM.init&&"enabled"in NREUM.init.page_view_timing&&NREUM.init.page_view_timing.enabled===!1)){var a,f,c=e("handle"),u=e("loader"),s=NREUM.o.EV;if("PerformanceObserver"in window&&"function"==typeof window.PerformanceObserver){a=new PerformanceObserver(r),f=new PerformanceObserver(i);try{a.observe({entryTypes:["paint"]}),f.observe({entryTypes:["largest-contentful-paint"]})}catch(p){}}if("addEventListener"in document){var l=!1,d=["click","keydown","mousedown","pointerdown","touchstart"];d.forEach(function(e){document.addEventListener(e,o,!1)})}}},{}],3:[function(e,n,t){function r(e,n){if(!i)return!1;if(e!==i)return!1;if(!n)return!0;if(!o)return!1;for(var t=o.split("."),r=n.split("."),a=0;a<r.length;a++)if(r[a]!==t[a])return!1;return!0}var i=null,o=null,a=/Version\/(\S+)\s+Safari/;if(navigator.userAgent){var f=navigator.userAgent,c=f.match(a);c&&f.indexOf("Chrome")===-1&&f.indexOf("Chromium")===-1&&(i="Safari",o=c[1])}n.exports={agent:i,version:o,match:r}},{}],4:[function(e,n,t){function r(e,n){var t=[],r="",o=0;for(r in e)i.call(e,r)&&(t[o]=n(r,e[r]),o+=1);return t}var i=Object.prototype.hasOwnProperty;n.exports=r},{}],5:[function(e,n,t){function r(e,n,t){n||(n=0),"undefined"==typeof t&&(t=e?e.length:0);for(var r=-1,i=t-n||0,o=Array(i<0?0:i);++r<i;)o[r]=e[n+r];return o}n.exports=r},{}],6:[function(e,n,t){n.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],ee:[function(e,n,t){function r(){}function i(e){function n(e){return e&&e instanceof r?e:e?c(e,f,o):o()}function t(t,r,i,o){if(!l.aborted||o){e&&e(t,r,i);for(var a=n(i),f=v(t),c=f.length,u=0;u<c;u++)f[u].apply(a,r);var p=s[y[t]];return p&&p.push([b,t,r,a]),a}}function d(e,n){h[e]=v(e).concat(n)}function m(e,n){var t=h[e];if(t)for(var r=0;r<t.length;r++)t[r]===n&&t.splice(r,1)}function v(e){return h[e]||[]}function g(e){return p[e]=p[e]||i(t)}function w(e,n){u(e,function(e,t){n=n||"feature",y[t]=n,n in s||(s[n]=[])})}var h={},y={},b={on:d,addEventListener:d,removeEventListener:m,emit:t,get:g,listeners:v,context:n,buffer:w,abort:a,aborted:!1};return b}function o(){return new r}function a(){(s.api||s.feature)&&(l.aborted=!0,s=l.backlog={})}var f="nr#context",c=e("gos"),u=e(4),s={},p={},l=n.exports=i();l.backlog=s},{}],gos:[function(e,n,t){function r(e,n,t){if(i.call(e,n))return e[n];var r=t();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,n,{value:r,writable:!0,enumerable:!1}),r}catch(o){}return e[n]=r,r}var i=Object.prototype.hasOwnProperty;n.exports=r},{}],handle:[function(e,n,t){function r(e,n,t,r){i.buffer([e],r),i.emit(e,n,t)}var i=e("ee").get("handle");n.exports=r,r.ee=i},{}],id:[function(e,n,t){function r(e){var n=typeof e;return!e||"object"!==n&&"function"!==n?-1:e===window?0:a(e,o,function(){return i++})}var i=1,o="nr#id",a=e("gos");n.exports=r},{}],loader:[function(e,n,t){function r(){if(!x++){var e=E.info=NREUM.info,n=d.getElementsByTagName("script")[0];if(setTimeout(s.abort,3e4),!(e&&e.licenseKey&&e.applicationID&&n))return s.abort();u(y,function(n,t){e[n]||(e[n]=t)}),c("mark",["onload",a()+E.offset],null,"api");var t=d.createElement("script");t.src="https://"+e.agent,n.parentNode.insertBefore(t,n)}}function i(){"complete"===d.readyState&&o()}function o(){c("mark",["domContent",a()+E.offset],null,"api")}function a(){return O.exists&&performance.now?Math.round(performance.now()):(f=Math.max((new Date).getTime(),f))-E.offset}var f=(new Date).getTime(),c=e("handle"),u=e(4),s=e("ee"),p=e(3),l=window,d=l.document,m="addEventListener",v="attachEvent",g=l.XMLHttpRequest,w=g&&g.prototype;NREUM.o={ST:setTimeout,SI:l.setImmediate,CT:clearTimeout,XHR:g,REQ:l.Request,EV:l.Event,PR:l.Promise,MO:l.MutationObserver};var h=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1167.min.js"},b=g&&w&&w[m]&&!/CriOS/.test(navigator.userAgent),E=n.exports={offset:f,now:a,origin:h,features:{},xhrWrappable:b,userAgent:p};e(1),e(2),d[m]?(d[m]("DOMContentLoaded",o,!1),l[m]("load",r,!1)):(d[v]("onreadystatechange",i),l[v]("onload",r)),c("mark",["firstbyte",f],null,"api");var x=0,O=e(6)},{}],"wrap-function":[function(e,n,t){function r(e){return!(e&&e instanceof Function&&e.apply&&!e[a])}var i=e("ee"),o=e(5),a="nr#original",f=Object.prototype.hasOwnProperty,c=!1;n.exports=function(e,n){function t(e,n,t,i){function nrWrapper(){var r,a,f,c;try{a=this,r=o(arguments),f="function"==typeof t?t(r,a):t||{}}catch(u){l([u,"",[r,a,i],f])}s(n+"start",[r,a,i],f);try{return c=e.apply(a,r)}catch(p){throw s(n+"err",[r,a,p],f),p}finally{s(n+"end",[r,a,c],f)}}return r(e)?e:(n||(n=""),nrWrapper[a]=e,p(e,nrWrapper),nrWrapper)}function u(e,n,i,o){i||(i="");var a,f,c,u="-"===i.charAt(0);for(c=0;c<n.length;c++)f=n[c],a=e[f],r(a)||(e[f]=t(a,u?f+i:i,o,f))}function s(t,r,i){if(!c||n){var o=c;c=!0;try{e.emit(t,r,i,n)}catch(a){l([a,t,r,i])}c=o}}function p(e,n){if(Object.defineProperty&&Object.keys)try{var t=Object.keys(e);return t.forEach(function(t){Object.defineProperty(n,t,{get:function(){return e[t]},set:function(n){return e[t]=n,n}})}),n}catch(r){l([r])}for(var i in e)f.call(e,i)&&(n[i]=e[i]);return n}function l(n){try{e.emit("internal-error",n)}catch(t){}}return e||(e=i),t.inPlace=u,t.flag=a,t}},{}]},{},["loader"]);</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adapter</title>
<!-- DEPENDENCIES -->
<link rel="shortcut icon" href="img/login_favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" rel="stylesheet" type="text/css">
<link href="css/sportsbook.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
<link href="css/demo.css" rel="stylesheet">
<link href="css/loginBetin.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
<link href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="plugins/jquery-1.12.4/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Javascript client-side code -->
<script type="text/javascript">
var lang = "";
function openSelection(mode, uri){
var url = "https://vsmobile.bet9ja.com" + uri + (uri.indexOf('?') ? "&mode=" : "?mode=") + mode + "&lang=" + lang;
window.location.replace(url);
}
function backToMain(){
var url = "https://mobile.bet9ja.com/Mobile";
window.location.replace(url);
}
</script>
<script type="text/javascript" src="js/grapi.js"></script>
</head>
<body>
<div class="container" id="product" style="display: none">
</div>
<div class="container" id="playarea" style="">
<script>
var isLoaded = false;
function onLoadIframe(iframe) {
if (!isLoaded) {
// iframe.src = '?game=league&OTP=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&mode=premier&lang='; // './index-iframe-content.html' + window.location.search;
if( iframe.src != "" )
{
isLoaded = true;
}
}
else
{
goBackUrl();
}
}
eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
eventer = window[eventMethod];
messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
let data = e.data.split('$');
let command = data[0];
if (command == "goHome") {
backToMain();
}
}, false);
</script>
<div style="${bet9ja.iframe.style}">
<iframe id="playAreaFrame" onload="onLoadIframe(this)" style="
position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:0;
" src="https://vsmobile.bet9ja.com/mobile-1.94.35/themes/?sk=bet9ja&t=644ee448-8fb1-426c-9922-31688a0a85f6&pinHash=02ba41004b38f08bf291e763d02ec2b0&pid=14001&v=0&text=Premier&homeUrl=https://mobile.bet9ja.com/Mobile&otp=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&ss=&bl=&vu=0">
</iframe>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function() {
var input = {"game":"league","OTP":"905f9407-8b82-4cf6-9d63-f7bf7fe4da6c","mode":"premier","lang":""};
var u = "905f9407-8b82-4cf6-9d63-f7bf7fe4da6c";
var home = ""; //"https://vsmobile.bet9ja.com/bet9ja-mobile/login/";
var params = "&pid=14001&v=0&text=Premier";
var game = "league_premier";
grapi.loggedUser(u,input,home,params,game,true );
});
</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"c95cd51526","applicationID":"214311961","transactionName":"ZlBXZxcAVkEHV0NbDV8aYEEMTlpXEg1dU09cWldaCQQXXglTXlxNWFtRVh1PSFoW","queueTime":0,"applicationTime":5,"atts":"ShdUEV8aRU8=","errorBeacon":"bam.nr-data.net","agent":""}</script>
</body></html>
But what happens in the website, is another page will load after this one, which contains the information and numbers that I need, and when I inspect the page using Chrome I find an other html in side the previous one (this one is the one I need):
<html lang="en" class="ui-mobile"><head><base href="https://vsmobile.bet9ja.com/mobile-1.94.35/themes/?sk=bet9ja&t=644ee448-8fb1-426c-9922-31688a0a85f6&pinHash=02ba41004b38f08bf291e763d02ec2b0&pid=14001&v=0&text=Premier&homeUrl=https://mobile.bet9ja.com/Mobile&otp=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&ss=&bl=&vu=0#bet"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="../plugins/jquery-mobile/css/jquery.mobile-1.4.4.css"><link rel="stylesheet" href="../fonts/Icomoon/icomoon.css"><script type="text/javascript" async="" src="https://d31qbv1cthcecs.cloudfront.net/atrk.js"></script><script type="text/javascript" src="../plugins/jquery-mobile/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../plugins/jquery-mobile/jquery.mobile-1.4.4.min.js"></script><script type="text/javascript" src="../plugins/md5/md5.min.js"></script><script type="text/javascript" src="../plugins/ejs/ejstpl.js"></script><script type="text/javascript" src="_base/views/views.min.1.94.35.js"></script><script type="text/javascript" src="../js/lib.min.1.94.35.js"></script><script type="text/javascript" src="bet9ja/js/tracking.js"></script><script async="" src="//static.hotjar.com/c/hotjar-243625.js?sv=5"></script><script type="text/javascript" src="bet9ja/js/certify.js"></script><link id="dynamic-favicon" rel="shortcut icon" href="bet9ja/assets/favicon.ico"><link rel="stylesheet" type="text/css" href="bet9ja/css/style.min.1.94.35.css"></head><body class="ui-mobile-viewport ui-overlay-a" style="padding-top: 0px;"><div class="panel left ui-panel ui-panel-position-left ui-panel-display-push ui-panel-closed ui-body-inherit ui-panel-animate" data-role="panel" data-position="left" data-display="push" id="menu_left_panel">
<div class="ui-panel-inner"><div class="panel-container">
<div id="playlist-selector"></div>
<div class="menu-container">
<div id="deposit-now-container">
Deposit now
</div>
<div id="deposit-now-container-min">
<div class="deposit-now-service-container">
<img class="payment-img" src="_base/assets/img/mpesa_GR.png">
<div class="payment-text">Paybill Number</div>
<div class="pay-bill">997270</div>
</div>
<div class="deposit-now-service-container">
<img class="payment-img" src="_base/assets/img/airtel_GR.png">
<div class="payment-text">Paybill Name</div>
<div class="pay-bill">997270</div>
</div>
</div>
<div id="menu-logged-information"><table><tbody><tr> <td style="font-weight: bold;color:#7792B5; text-shadow: none">Logged: </td> <td id="nom_log" style="padding-left:20px;font-size:1.5em">3942938</td> </tr><tr> <td style="font-weight: bold;color:#7792B5">Balance: </td> <td style="padding-left:20px;font-weight: bold;color:#FFD326"><span id="current_balance">₦ 0</span></td> </tr> </tbody></table></div>
<ul id="menu"><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li>
<li class="li_bet"><a style="padding-left: 20px" id="a_bet_bet" onclick="ViewInit.betButton()" title="Bets" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-home3"> </i>Bet now</a></li>
<li class="li_ticket"><a style="padding-left: 20px" id="a_bet_ticket" onclick="ViewTicketHistory.showTicketHistory(false)" title="Tickets" data-rel="close" class="ui-link"><div id="circle-menu-ticket-id"></div><i class="fa fa-chevron icon-ticket"> </i><span>Tickets </span></a></li>
<li class="li_results"><a style="padding-left: 20px" id="a_bet_results" onclick="ViewResults.showResults()" title="Results" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-trophy"> </i>Results</a></li>
<li class="li_league_table"><a style="padding-left: 20px" id="a_league_table" onclick="ViewLeagueTable.showLeagueTable()" title="League Table" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-calendar"> </i>League Table</a></li>
<!--<li class="li_statment"><a id="a_bet_statment" onclick="$.mobile.pageContainer.pagecontainer('change', '#statements')" title="Statements" data-rel="close">Statements<i class="fa fa-chevron"></i></a></li>-->
<li class="li_back"><a style="padding-left: 20px" id="a_bet_bet" onclick="ViewMenu.close()" title="Bets" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-arrow-left2"> </i>Close menu</a></li>
<li class="li_back"><a style="padding-left: 20px" id="a_bet_bet" onclick="/*window.history.back()*/ window.parent.postMessage('goHome', '*'/*window.location.origin*/);" title="Bets" data-rel="close" class="ui-link">Mobile Home</a></li>
</ul>
<div id="last-session-div"></div>
</div>
</div></div>
</div><div id="loading" style="display: none;"><div id="loading-league">
<div id="loading-div-image">
<img id="loading-image-bar" src="bet9ja/assets/img/intro_loader.gif">
</div>
<div id="loading-div-error"></div>
</div>
</div><div id="bet" class="demo-wrapper ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="bet" tabindex="0" style="position: relative;"><div class="ui-panel-wrapper"><div class="header ui-header ui-bar-inherit" data-role="header" role="banner">
<span class="open left"><i class="fa fa-bars icon-menu" style="font-size: 1.4em; line-height: 2em"></i></span>
<span class="title title-header-mobile"><img class="log-image-header" src="bet9ja/assets/img/logo_1_gl.png" alt="logo">
</span>
<!-- BetSlip -->
<span id="liveBetsTicket">
<a id="bet_ticket" onclick="document.getElementById('div_button_market').scrollIntoView(true);" title="Tickets" class="ui-link">
<i class="fa-lg fa-chevron-right pull-right icon-ticket"></i><span id="bet_ticket_matchResult_counterSelections">0</span>
</a>
</span>
<!-- FreeBets -->
<div id="freeBets">
<a id="freeBetsButton" title="Free bets" class="ui-link">
<div class="icon-free-bets pull-right"></div>
<span id="free_bets_counterSelections">0</span>
</a>
<div id="freeBetsDropdown" class="dropdown" style="display: none;">
<div id="freeBetsDropdownActive" class="active-free-bets"><a class="free-bet no-items">
<span>No available free bets</span>
</a></div>
<div id="freeBetsDropdownInactive" class="inactive-free-bets"></div>
</div>
</div>
</div><div class="content ui-content" data-role="content" style="position: relative;" role="main">
<div class="titan-content" style="display:none">
<div class="div-xs-6 titan-group-container">
<div class="gold-titan-text">Gold Titan</div>
<div class="gold-titan-amount"></div>
</div>
<div class="div-xs-6 titan-shop-container">
<div class="titan-text">Red Titan</div>
<div class="titan-amount"></div>
</div>
</div>
<div class="bets-bonus">
<div class="div-xs-5 bonus-text">Bonus<span>Level: 1</span></div>
<div class="div-xs-1 div-empty"> </div>
<div class="div-xs-5 bonus-amount bonus-collapse">₦ 100</div>
<div class="div-xs-1 bonus-collapse"> <i class="fafa fa-chevron-up" aria-hidden="true"></i></div>
</div>
<div class="bets-bonus-collapsed collapsed">
<div class="div-xs-3 bonus-text">Bonus</div>
<div class="div-xs-1 percentage-bar-bonus-collapsed">0%</div>
<div class="div-xs-4 bonus-amount-collapsed">₦ 100</div>
<div class="div-xs-3 countdown-time-bonus-collapsed bonus-collapse">48h 0' 0''</div>
<div class="div-xs-1 bonus-collapse"> <i class="fafa fa-chevron-down" aria-hidden="true"></i></div>
</div>
<div class="bets-bonus-extended">
<div class="countdown-bar-bonus">
<div class="div-xs-12 countdown-bonus">
<div class="countdown-bonus-inside" style="width: 0%;"> </div>
<div class="circle-percentage" style="left: 0%;">0%</div>
</div>
</div>
<div class="time-bonus">
<div class="countdown-time-bonus">48h 0' 0''</div>
</div>
<div class="text-bonus">
<div class="div-xs-1 div-empty"> </div>
<div class="div-xs-10 bonus-message" style="display: block">
Each ticket you place within the above time gets you closer to your free bonus. Once you claim your bonus your level moves up and your bonus gets higher<i class="info-bonus-hover fafa fa-info" aria-hidden="true" style="margin-left: 5px;border-radius: 5px;"></i></div>
<div class="div-xs-10 bonus-message-winner" style=" display: none;"></div>
<div class="div-xs-1 div-empty"> </div>
</div>
</div>
<div id="bets-time" style="display: block;" class=""><div class="playlist-info">
<img class="playlist-image" height="50" width="50" src="bet9ja/assets/premier.png" alt="14001">
<div id="bets-time-betContdown">00:34</div>
<div>
<span id="text-idleague">League</span>
#<span id="idleague">5269</span>
<span id="leagueWeek">Week <span id="leagueWeekNumber">03</span></span>
</div>
</div>
<div class="credit-with-countdown">
<div id="credit-countdown">₦ 0</div>
</div></div>
<div id="loading-next-event">
<p>Waiting next round<br>
<img src="bet9ja/assets/img/loader_data_race.gif">
</p>
</div>
...ect The code stills too long
I have tried this code:
premiere_legue.click() #this button takes as to page where the problem is
time.sleep(15)
html = driver.execute_script("return document.getElementsByTagName('html')[0].innerHTML")
print(html) # The output is the same first code I shared
I believe that this has to go through a JavaScript code,
Any one can help with this please?

Looks Like the page might be rendered. This solution recommends waiting to retrieve the contents of the page How to get html with javascript rendered sourcecode by using selenium
from time import sleep # this should go at the top of the file
sleep(5)
html = driver.execute_script("return document.getElementsByTagName('html')[0].innerHTML")

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

Wallop with options not working

I'm trying to implement the Wallop slider: http://pedroduarte.me/wallop/
My ultimate goal is to have a another Wallop slider within another Wallop slider.
The problem occurs when I'm trying to set the options for the Wallop slider.
Without options it works as demonstrated here:
http://pinefallstudios.com/wallop/without_options.html
The code is:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);
function onClickNext() {
wallop.next();
}
</script>
</html>
However when I try to set itemClass and currentItemClass to something else it stops working as demonstrated here: http://pinefallstudios.com/wallop/with_options.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterOptions = {
itemClass: 'Wallop-outer-item',
currentItemClass: 'Wallop-outer-item--current'
}
var wallopEl = document.querySelector('.Wallop-outer');
var wallop = new Wallop(wallopEl, wallopOuterOptions);
function onClickNext() {
wallop.next();
}
</script>
</html>
I verified that the other options are being set correctly, as you can see in the console, as I'm only setting two options out of several.
What is causing this problem and how can I name my Wallop items so that I can use another inner slider?
Update
As explained by #HungCao it's probably due to the CSS rules.
However, how would one create an inner slider in this case?
This doesn't work as demonstrated here: http://pinefallstudios.com/wallop/with_inner.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<!-- Outer Slide -->
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<h3>Inner Slider</h3>
<!-- Inner Slide -->
<div class="Wallop-inner Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item-current">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
<div class="Wallop-item">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
</div>
</div>
</div>
<div class="Wallop-item">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterEl = document.querySelector('.Wallop-outer');
var wallopOuter = new Wallop(wallopOuterEl);
var wallopInnerEl = document.querySelector('.Wallop-inner');
var wallopInner = new Wallop(wallopInnerEl);
function onClickOuterNext() {
wallopOuter.next();
}
function onClickInnerNext(){
wallopInner.next();
}
</script>
</html>

I think the problem is your new classes are overriding some css rules from the original one.
Look at these 2 blocks
Without options:
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
With options:
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
Do you have any special css rule? Otherwise you should maintain their css rules.

Added Polymer auto-binding template, javascript stopped working

So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

image src transitions appears for the user - javascript

Related

Clear/reset the content of a div using a button

Selenium: How to get the html code generated by javascript

How do have my page fill the username and password on an external site?

Wallop with options not working

Added Polymer auto-binding template, javascript stopped working

Categories

Resources