I have prepare 2 tree view in separate iframe using jstree. The right tree view should control the left tree view. When user click one one the list in right tree view, the respective item folder will open and selected on left tree view. I can make it happen using div in single page. I control the left tree view using instance of left tree view in right jstree div var instance = $('#left').jstree(true);.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 1px solid black;
}
.flex-child:first-child {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Tree Menu</h1>
<!-- <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>-->
<div class="flex-container">
<div class="flex-child magenta">
<div id="left" class="demo">
</div>
</div>
<div class="flex-child green">
<div id="List">
</div>
</div>
</div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
$('#List')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
//console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
var instance = $('#left').jstree(true);
instance.deselect_all();
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
When using iframe, I could not get the instance of left tree view. I want to get left tree view instance in index-10_2.html(right iframe source) to select and open respective node. I had use left=$("#1").contents(); to get the iframe content, var instance=left.find('#left'); to get instance, and instance.select_node(tm_id); to select node. But, error instance.select_node is not a function shown.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-10_1.html" id="1"></iframe>
<iframe src="index-10_2.html" id="2"></iframe>
</body>
</html>
index-10_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-10_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
left=$("#1").contents().find('#left');
instance=left.jstree(true);
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
I had used document.getElementById('1').contentWindow.jQuery('#left').jstree(true); to get instance from iframe with id='1'. In order to listen to right iframe(with id='2') if any menu has been clicked, I used document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){}). I get the instance of left iframe within this function. By using this instance, I has deselect previous selection, select current selection, and open children of selected menu.
index-12.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates and open the template
in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-12_1.html" id="1"></iframe>
<iframe src="index-12_2.html" id="2"></iframe>
<script>
sec_frm =document.getElementById('2');//second frame
sec_frm.addEventListener("load",function(){//wait for second frame to load
fst_frm_jstinst=document.getElementById('1').contentWindow.jQuery('#left').jstree(true);//first frame jstree instance
document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){
if(data.selected.length){
//close all menu in first frame
document.getElementById('1').contentWindow.jQuery('#left').jstree("close_all");
//get selected menu id from second frame
selected_node=data.selected[0];
//deselect any selected menu on first frame
fst_frm_jstinst.deselect_all();
//select node(country)
fst_frm_jstinst.select_node(selected_node);
document.getElementById('1').contentWindow.jQuery('#left').jstree("open_all",selected_node);
//console.log(selected_node);
}
})
})
</script>
</body>
</html>
index-12_1
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree 4a77e59/dist/themes/default/style.min.css"/>
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-12_2.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
I am doing a project for college but having trouble with images displaying on the mobile device.
Desktop screenshot
So the image in the background displays on the desktop as shown above. and below is the mobile application with no background loading.
mobile screenshot
This is my code. My image location is correct seeing as the desktop loads it and i got the style code from another stack overflow answer but it hasn't helped.
<!DOCTYPE html>
<html>
<style>
#bg {
background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent;
background-image: url(images/logo.jpg);
width: 400px;
height: 400px;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,
user-scalable=yes, width=device-width">
<title>ITCOA</title>
</head>
<div id="bg">
<body>
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"onclick="parent.location='findPlace.html'">Find a place!</button><br><br>
<button type="button" id="showMapsButton" onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
Thanks for any help.
Updated code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<title>ITCOA</title>
<script src="cordova.js" defer></script>
<style>
#bg {
background: url('images/logo.jpg') center center / cover no-repeat;
width: 400px;
height: 400px;
}
button {
margin: 15px 0 15px 0;
display: block;
}
</style>
</head>
<body>
<div id="bg">
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow
Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"
onclick="parent.location='findPlace.html'">Find a place!</button>
<button type="button" id="showMapsButton"
onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>
First of all <style> tag should be in your <head>. <div id="bg"> is above html body element. Why #bg id has 2 background statements? background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent; and
background-image: url(images/logo.jpg); ? Please at least read W3s. Other thing is that your code is overall terrible. I advice to stop using inline styling elements and also stop using inline javaScript. You can add <script src="cordova.js" defer></script> to your <head> with defer flag. Consider adding css file to your project and add all of your styles there. Also since you already have js file you can put your click behavior there by addEventListener() Method.
Update:
jsfiddle
Update2:
I achieve that function for default HTML video with these code:
window.addEventListener("focus", aaa);
window.addEventListener("blur", bbb);
function aaa(){
document.getElementById('player').play(); }
function bbb(){
document.getElementById('player').pause();}
But I have a code now including a flash player in which my video is shown. The code above is not working for flash player? Is there a way that I can pause video when the browser tab is changed or the window is minimized?
Here is my code (pause function is not working, it is executed as usual-as I did nothing)
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Quicksand|Actor' rel='stylesheet' type='text/css'>
<link href="skins/overlay/techsmith-smart-player.min.css" rel="stylesheet" type="text/css" />
<style>
html, body {
background-color: #1a1a1a;
}
</style>
</head>
<body>
<div id="tscVideoContent">
<img width="32px" height="32px" style="position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px"
src="data:image/gif;base64,R0lGODlhIAAgAPMAAAAAAP///zg4OAA==">
</div>
<script src="scripts/config_xml.js"></script>
<script type="text/javascript">
(function (window) {
function setup(TSC) {
TSC.playerConfiguration.setFlashPlayerSwf("DataModel_controller.swf");
TSC.playerConfiguration.addMediaSrc("DataModel.mp4");
TSC.playerConfiguration.setXMPSrc("DataModel_config.xml");
TSC.playerConfiguration.setAutoHideControls(true);
TSC.playerConfiguration.setBackgroundColor("#000000");
TSC.playerConfiguration.setCaptionsEnabled(false);
TSC.playerConfiguration.setSidebarEnabled(false);
TSC.playerConfiguration.setAutoPlayMedia(false);
TSC.playerConfiguration.setPosterImageSrc("DataModel_First_Frame.png");
TSC.playerConfiguration.setIsSearchable(true);
TSC.playerConfiguration.setEndActionType("stop");
TSC.playerConfiguration.setEndActionParam("true");
TSC.playerConfiguration.setAllowRewind(-1);
TSC.localizationStrings.setLanguage(TSC.languageCodes.ENGLISH);
;
TSC.mediaPlayer.init("#tscVideoContent");
}
function loadScript(e,t){if(!e||!(typeof e==="string")){return}var n=document.createElement("script");if(typeof document.attachEvent==="object"){n.onreadystatechange=function(){if(n.readyState==="complete"||n.readyState==="loaded"){if(t){t()}}}}else{n.onload=function(){if(t){t()}}}n.src=e;document.getElementsByTagName("head")[0].appendChild(n)}
loadScript('scripts/techsmith-smart-player.min.js', function() {
setup(window["TSC"]);
});
}(window));
</script>
</body>
</html>
i'm actually trying to do something new for me , and i'm not able to know if it's possible or not.
I have one Html page whit some iframe into. That i can't touch.
I only have acces to the iframe. And i'd like to do a button into one of this iframe that will change the width of an element into another iframe.
I actually have this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<meta http-equiv="content-type" content="text/html; char=iso-8859-1">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</div>
<style type="text/css">
body{
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
width:100%;
height:1080px;
}
#container
{
width:15px;
height:15px;
}
</style>
<script>
function Expend()
{
document.getElementById('container').style.width="100%";
document.getElementById('container').style.height="100%";
screen.width;
}
</script>
</body>
</html>
i wish that the Expend() function is in another jsfile/Iframe and change the width of the element container of this iframe, is that possible ?
Thanks a lot sorry if my question isn't understable
I want to display the leaflet pop up on the right or left side of the mouse pointer. By default it is displayed on the top of the mouse pointer.
how can I do that?
The demo is available here: http://jsfiddle.net/Wn5Kh
<!DOCTYPE html>
<html>
<head>
<title>CircleMarker tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css"
/>
<![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
</body>
</html>
In leaflet.css you can change:
.leaflet-popup {
position: absolute;
text-align: center;
}
Try to play around with the position and you will see that you can change where the popup will be opened.