I have some Dijit Tabs, and in those tabs I have some Dojo Text boxes and Fields. Some of my Dojo Tabs load when the page is loaded, and some load only when clicked on.
My issue is that I cant get the Tabs that load only when clicked, to work with the Dojo modules.
Its hard to explain, so I made a simple example to help. I have included as much around the code that I think may have any effect on the outcome.
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Works Outside of a Tab: <input class="tundra" id="outsideworking" name="outsideworking" type="text" dojoType="dijit.form.DateTextBox">
<br><br><br>
<div id="tab" dojoType="dijit.layout.TabContainer" style="width:50%;height:200px" >
<div id="tab-working" dojoType="dijit.layout.ContentPane" selected="true" title="Loads on Page Load">
Test working
<input class="tundra" id="working" name="working" type="text" dojoType="dijit.form.DateTextBox">
</div>
<div id="tab-notworking" dojoType="dijit.layout.ContentPane" title="Load On Click" preload="false" parseOnLoad="false" href="loadafter.php">
</div>
<div id="tab-simplenotworking" dojoType="dijit.layout.ContentPane" title="Load On Click with Simple File" preload="false" parseOnLoad="false" href="simple.php">
</div>
</div>
</body>
</html>
loadafter.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Outside of a Tab
Not working here:
<input class="tundra" id="notworking" name="notworking" type="text"
dojoType="dijit.form.DateTextBox">
</body>
</html>
simple.php
<input class="tundra" id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
Is anyone able to help point me in the right direction?
Thanks
gggggggg
In short, if you have set parseOnLoad as false, you need to parse the html fragment by yourself. And for your tab pages, if you clicked a tab, you may need to parse the tab page manually.
For example:
<div id='a'><input id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
</div>
You can use dojo.parser.parse(dojo.byId("a")) to render the widget.
Btw, you do not need to attach tundra class in every places of dijit widgets, it just need to be placed at the body tag,.
Try more sophisticated selector like dojo.query to pinpoint the exact Dom you want.
if you want to select a dijit for the parser you need to do it with dijit
dojo.parser.parse(dijit.byId("a"))
if you use dojo, it will select the dom node.
if you use dijit it will select the widget
Related
I am making a dependency graph of a rust project, whose documentation is emitted as pure html. I am wondering if there is a simple way to modify the html to insert an svg image in an interactive window with panning and zooming, the way it works on doxygen.
This is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="rustdoc">
<title>NeverEngine</title>
</head>
<body class="rustdoc">
<!--[if lte IE 8]>
<div class="warning">
This old browser is unsupported and will most likely display funky
things.
</div>
<![endif]-->
<h1 class="title">NeverEngine</h1>
<nav id="TOC"><ul></ul></nav><p><img src="./dep-graph.svg" alt="Dep graph" /></p>
<p>TODOs</p>
</body>
</html>
And the idea is to grab <nav id="TOC"><ul></ul></nav><p><img src="./dep-graph.svg" alt="Dep graph" /></p> and embed it into an element that allows me to zoom and pan.
I am a web developer and using Atom as text editor but I always have to change some autocomplete suggestions.
For example when I type html and pres tab it gives me this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
This result is not actually what so I manually change it like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="theme-color" content="#00FFF0">
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
So I did a research and everybody solves this kind of similar issues with snippets I am not asking how can I do it with snippet. I already know it. I want to change these codes from editor's current location. Possibly it locates somewhere in ~/AppData/Local/atom but I haven't found it yet. I want to reach that file and change related suggestions from there.
This is not only for html suggestion I also want to remove something from PHP suggestion and add some for JavaScript suggestion.
Any idea how this system works and how to do it ?
Thanks.
I am using EJS template.
Iframe tag is not working in firefox but it works in chrome.
Does anyone know what causes this or any steps I can take to prevent this from happening?
<!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="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="resources">
<meta name="description" id = "meta-data-description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="js/plugins/jquery-1.7.1.js?ver=12"></script>
</head>
<body>
<div id='base-container' class="dashboard-base-container">
<iframe id="report-iframe" class="org" src="http://gamling.com/dashboard/#/collection/classpage/12345678-1234-1234-1234-12345678/collection/12345678-1234-1234-1234-12345678?session_token=XXX&bgcolor=true">
</iframe>
</div>
</body></html>
I have PHP page in subfolder, /subfolder.
In root I have two files: index.html and demo.html.
demo.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div id="demo_wrapper">
<div id="themeslist">
<form action="" name="form" id="form">
<select name="select" onChange="MM_jumpMenu('parent',this,1)">
<option value="#">Select Theme</option>
<option value="http://127.0.0.1/themes/index.php?theme=1">Theme1</option>
<option value="http://127.0.0.1/themes/index.php?theme=3">Theme2</option>
</select>
</form>
</div>
</div>
</body>
</html>
and index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<frameset rows="100,*" framespacing="0" frameborder="no" border="0">
<frame src="http://127.0.0.1/demo.html" name="head_frame" scrolling="no" noresize="noresize" id="head_frame" title="head_frame" />
<frame src="http://127.0.0.1/themes/index.php" name="main_iframe" id="main_iframe" title="main_iframe" />
</frameset>
<noframes>
<p>Your browser does not handle frames!</p>
</noframes>
</html>
Source: http://www.entheosweb.com/website_design/jump_menus.asp
Now problem is when i select option in menu - it reloads whole page and frames dissapear.
What change to reload only selected frame (main_iframe)?
First of all you don't use iframe, you use the old fasion frameset. However,
In your form that handles the select menu, you have to set target attribute to be the name of the frame you wants the location open in it, as follows:
<form action="" name="form" id="form" target="main_iframe">
You have to choose the target to be suitable with the window name that you want to open it. i.e main_iframe or anything else.
So I found solution:
It was way too easy... just changed onchange action in select menu to:
onchange="window.open(this.options[this.selectedIndex].value, 'nameOfTargetFrame')"
and removed whole *MM_jumpMenu* code. Thanks for tips, I wouldn't found it without them :)
Hi I was doing a simple expanding slider with jquery
and somehow the slider would expand to the full-width
of the window, then shrink to the desired width I assigned it to do ..
(if you reload the page a few times, it comes up sometimes)
the problem seems to disappear switch the loading order
of the and between jquery and my external stylesheet
but I am not sure why, I am wondering if anyone knows ????
here is the code that's causing the problem
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
after switch the order of and
the expanding issue disappear:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
Because scripts should always be loaded after static assets?
Most browsers render line by line from top to bottom so a change made on one line can be changed again on the next line.
If one loads the script first then the style will change the script.