I have a small project I am doing, and am using Dojo for it. At the moment I can't get everything to load properly. I am trying to use the Tundra theme.
Essentially, the issue is that the TabContainer is missing tabs, has serif fonts instead of sans-serif, and shows all ContentPanes inside it instead of hiding ones in non-active tabs. The serif issue also applies to all other Dijit elements I try to create, however Dijit form elements seem to work a bit better (apart from font being incorrect, it has correct styling, and validation and other fancy stuff works fine).
The same issue appears when using the other Dijit themes, however the TabContainer border colour changes with each different theme which leads me to believe the Dijit theme may be loading correctly. Dojo seems to be correctly creating the Dijit elements though, looking at the Firebug output further below.
Complete copies of Dojo 1.3.2 dojo, dijit and dojox directories exist in js/dojo. All linked stylesheets and scripts are initially loading and the paths to them are correct (I've tested to confirm that with alert boxes in js and body colour changing in css).
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet">
<script src="js/dojo/dojo/dojo.js"></script>
<script src="js/script.js"></script>
</head>
<body class="tundra">
<div id="xmldiv">
</div>
<script language="javascript">xmlEnableDiv('xmldiv');</script>
</body>
</html>
js/script.js
function xmlEnableDiv(div) {
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
var tc = new dijit.layout.TabContainer({
}, div);
var cp1 = new dijit.layout.ContentPane({
id: "xmleditor",
title: "Editor",
content: "This is where the editor will actually go"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
id: "xmltext",
title: "Source",
content: "This is where the source will actually go"
});
tc.addChild(cp2);
}
Checking Firebug, I see the following (which to my eyes looks like it should):
<body class="tundra">
<div id="xmldiv" class="dijitTabContainer dijitContainer dijitTabContainerTop dijitLayoutContainer" widgetid="xmldiv">
<div id="xmldiv_tablist" class="dijitTabContainerTop-tabs" dojoattachevent="onkeypress:onkeypress" wairole="tablist" role="tablist" widgetid="xmldiv_tablist"/>
<div class="dijitTabSpacer dijitTabContainerTop-spacer" dojoattachpoint="tablistSpacer"/>
<div class="dijitTabPaneWrapper dijitTabContainerTop-container" dojoattachpoint="containerNode" role="tabpanel">
<div id="xmleditor" class="dijitContentPane" title="" widgetid="xmleditor" role="group">This is where the editor will actually go</div>
<div id="xmltext" class="dijitContentPane" title="" widgetid="xmltext" role="group">This is where the source will actually go</div>
</div>
</div>
<script language="javascript">
xmlEnableDiv('xmldiv');
</script>
</body>
The actual output (in Firefox and Chrome) is a box (the TabContainer) with a themed border. There are no tabs on the TabContainer, and both of the ContentPanes are visible at the same time (both with serif fonts).
The things I've tried without avail:
Doing a dojo.parser.parse() at the end of my init function
Trying other Dijits. They act similarly in that they seem to partially load. Every Dijit has serif fonts instead of sans-serif, but form elements and dialog are both showing correctly apart from the incorrect font
Thanks in advance, this is driving me nuts.
The solution was to add startup after creating the TabContainer.
Thanks to this post: http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/tabcontainer-labels-not-rendering-when-created-programatically
tabContainer = new dijit.layout.TabContainer({
}, div);
tabContainer.startup();
Another possibility is that adding TabContainer to a hidden element can have missing tabs, as described above, even after calling startup. The solution to this is to ensure that the TabContainer receives the resize event. You can try this yourself by finding the ID of the tab container, and then executing this in the console:
dijit.byId('dijit_layout_TabContainer_0').resize();
If your tabs appear, then you have a resize problem. Ensure that the parent container handles/passes the resize event to the tab container child. For example:
resize: function() {
this.tabContainer.resize();
}
Related
On our website we use a HubSpot registration form with custom styling that loads in a fancybox popup.
This is how it should look
Our problem is that we need to add an 'on click trigger' (see HTML and JS below) to load the dropdown with the right styling We want to form to work properly without the trigger. Without the click trigger it looks like below:
Also the dropdown isn't working when this form appears.
Our code looks like:
<div class="popup-mask">
<div class="popup sm" id="popup-gartner-get-in-touch">
<h4 class="section-title blue">Get in touch</h4>
<div class="download-form">
<div class="hubpop">
<div class="download-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
$('a[href="#popup-gartner-get-in-touch"]').click(function() {
hbspt.forms.create({
portalId: "538005",
formId: "190bdb23-c363-4d93-8189-9c7d28782017",
target:'.hubpop',
});
});
</script>
</div>
</div>
</div>
</div><!-- end popup -->
</div><!-- end popup-mask -->
My guess is that you are using some kind of jQuery plugin to style the dropdown. The problem is, your code for that is trying to style something that doesn't exist in the DOM until that trigger is clicked. What you should do is put that jQuery plugin code into the forms onReady function.
hbspt.forms.create({
portalId: '',
formId: '',
onFormReady: function($form) {
// YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
console.log($form.find('select'));
}
});
If you're just looking to style the form selects without using a jQuery plugin, you can use this tool to get the css needed to do that.
I'm displaying a grid within the dialog with no issues. But the problem is, dialog is blocking the entire page on the background. Is there anyway to avoid it? i.e. once dialog is displayed, user can still access the page elements like Tab etc..
It's possibile by using CSS. When you create a Dialog and give it the id property, it will create an underlying <div> that spans the entire page so you can't click anything except on that new underlying <div>. Luckily, you can hide such an element with CSS, and because the ID of the element is generated as #<ID of dialog>_underlay, you can simply do this like this:
require(['dijit/Dialog', 'dijit/form/Button', 'dojo/domReady!'], function(Dialog, Button) {
var dialog = new Dialog({
id: 'test',
title: 'Test',
content: 'Hello world'
});
new Button({}, 'btn').on('click', function() {
dialog.show();
});
});
/* "test" is the ID of the dialog, so I need to use #test_underlay */
#test_underlay {
/* Setting this property to none hides the element */
display: none;
}
<head>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: false"></script>
</head>
<body class="claro">
<button id="btn">Click me</button>
<input type="checkbox" />Can you still select me?
</body>
Instead of the Dialog you can use FloatingPane of Dojo. It works approximately the same way and you can use the objects under it.
I'm having trouble opening a dijit.Dialog from another dijit.Dialog. I've seen other posts here suggesting that it works fine as of Dojo version 1.5, but I'm using Dojo 1.6.1 and not having much luck. The Dojo documentation at http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ seems to suggest that this is supported where it says, "One important fact to know about dijit/Dialog is that instances are added to a "stack" so that you may have instances on top of one another."
When I call show() on a second dialog from one that is currently shown, the second dialog is barely visible for a moment and then the browser refreshes, leaving just the first dialog shown.
Here's a simple example:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.Dialog");
dojo.ready(function () {
dijit.byId("dialog1").show();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.Dialog" id="dialog1" data-dojo-props="title:'Dialog 1'">
I'm dialog 1
Open dialog 2
</div>
<div data-dojo-type="dijit.Dialog" id="dialog2" data-dojo-props="title:'Dialog 2'" style="visibility:hidden;">
I'm dialog 2
</div>
</body>
</html>
I have a feeling I'm missing something simple. Can anybody help me out? Ideally dialog1 would stay in the background while dialog2 appears on top of it as a modal dialog.
You have an anchor tag, it fires a document.location.href = "" since the onclick returns true.
See following:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Correct to
<a href="javascript:void(0); "
onclick="dijit.byId('dialog2').show(); return false ">
<!-- note 'false' -->
Open dialog 2</a>
If the onclick returns a true (the .show() does that) , then the expected behavior of an <a> is to be expected, youre clicking a link that will bring you to another page. While the hrefis a blank, then same page is reloaded.
I am using AnythingSlider to place content on this dev for a new site:
http://sitedev.lcadfiles.com/interactive_barrett.html
When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).
Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.
Had the same problem. A quick workaround (works for me).
eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.
<div id="slider_nest" style="visibility:hidden;">
<ul id="your_anythingslider">
...
</ul>
</div>
in the js code, change the style to visible when document ready. eg.(JQuery)
jQuery(document).ready(function($) {
$('#slider_nest').css('visibility', 'visible');
...
$('#your_anythingslider').anythingslider();
...
}
Hope it helps!
Update: add a slider mask with a loader gif.
eg. in the html, you will have something like below:
<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center; display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
<ul id="your_anythingslider">
...
</ul>
</div>
Now in the js (JQuery):
jQuery(document).ready(function($) {
$('#slider_mask').hide();
$('#slider_nest').css({'display':'block'});
...
OMG, this finally solved our problem! Thank you.
Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:
Add this before the shortcode in the header.php file:
<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>
Add this in the section of header.php file:
<script type="text/javascript">
$(document).ready(function(){
$('#slider_mask').hide();
$('.anythingSlider').css({'display':'block'});
}
Add this to the CSS file:
.anythingSlider {display:none;}
I'm trying to use Google's Closure library for the HTML editor. I created a goog.editor.SeamlessField but if I enter a word that is too long for the width, it puts a scrollbar in and covers the text. How do I fix this?
This appears to be happening only in Firefox. Here is some HTML that demos the problem:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='/closure-library/closure/goog/base.js'></script>
<script>
goog.require('goog.dom');
goog.require('goog.editor.SeamlessField');
</script>
<script>
function init() {
var d = goog.dom.getElement('div1');
var f = new goog.editor.SeamlessField(d);
f.makeEditable();
}
</script>
</head>
<body>
<div style='width:150px;'>
<div id='div1'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<button onclick='init();'>Create editor</button>
</body>
</html>
DOM fragments generated by this SeamlessField component differ for Chromium and Firefox. The former gets an classic div element, the later issues an iFrame. The scheme has something to do with how Firefox handles content-editable elements. By styling the iFrame, you should be able to avoid the scrollbar.