I can't make a gallery work with magnific popup. When I click on a picture I receive “The image could not be loaded”.
Here is the html file listing images:
<div class='container'>
<div class='picture'><img src='images/gallery/a.jpg'/></div>
<div class='picture'><img src='images/gallery/b.jpg'/></div>
<div class='picture'><img src='images/gallery/c.jpg'/></div>
<div class='picture'><img src='images/gallery/d.jpg'/></div>
<div class='picture'><img src='images/gallery/e.jpg'/></div>
</div>
Here the jquery code:
$.get( 'html/gallery.html', function( data ) {
$('#page_content').append(data);
$('.container').magnificPopup({
type: 'image',
delegate: 'div',
gallery:{
enabled: true,
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
tPrev: 'Previous (Left arrow key)',
tNext: 'Next (Right arrow key)',
tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
}
});
I tried to change the "delegate" value to 'div' or 'img' but no result. (I followed this Magnific popup: getting "The image could not be loaded" and image url is undefined)
Thanks for help :)
Well problem solved...
Magnific popup needs a href attribute in order to work.
Solution :
<div class='container'>
<div class='picture' href='images/gallery/a.jpg'><img src='images/gallery/a.jpg'/></div>
<div class='picture' href='images/gallery/b.jpg'><img src='images/gallery/b.jpg'/></div>
....
</div>
Related
Help me please with this question.
Did not see the context menu after executing this code.
file: Grid.js
export default class Grid{
btnAddClick(){
browser.wait(async()=>{
await browser.executeScript('document.querySelector(".Grid--Head--leftButton-plus").click();');
return EC.presenceOf(element(by.css('.item-invoice_form_add_simple_position a')))
&& EC.presenceOf(element(by.css('.contextmenus')));
},
browser.params.timeWaitSelEl,
'Element "menu point Add position" too long in the DOM.');
}
}
test file: test.js
it('test', ()=>{
let grid = new Grid();
grid.btnAddClick();
expect(element(by.css('.contextmenus')).isDisplayed())
.toBeTruthy('contextmenu');
expect(element(by.css('.contextmenus')).isPresent())
.toBeTruthy('cont');
});
html templates:
HTML
<div class="contextmenus"><ul style="z-index: 1000000;">
<li class=" tab-elem item-invoice_form_add_rate_expense_type"><a cid="c855">Добавить</a></li>
<li class=" tab-elem item-invoice_form_add_simple_position"><a cid="c857">Добавить позицию</a></li>
</ul></div>
HTML
<div class="Grid--Head--leftButton theme-color--before Grid--Head--leftButton-plus" style="width: 23px;">
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
<div class="Grid--Head--leftButton--helper theme-color"></div>
</div>
I have no code that adds inline styles to div.size-option, but the first one has random inline styles added to it. No where else in the code does anything mess with these elements. The overall setup is too complicated to reproduce in a codepen.
return <div id="options-container">
{ctrl.model.map(function(model) {
return <div class='size-option-container'
onclick={() => { if(model.inStock()) vm.select(model.id()); }}
option={model.id()}>
<div
class={'size-option' +
(model.isSelected() ? ' selected': '') +
(model.inStock() ? '' : ' option-out-of-stock')}>
<span class='size'>{model.name()}</span>
</div>
</div>
})}
</div>
Compiled:
return m(
'div',
{ id: 'options-container' },
ctrl.model.map(function (model) {
return m(
'div',
{ 'class': 'size-option-container',
onclick: function onclick() {
if (model.inStock()) vm.select(model.id());
},
option: model.id() },
m(
'div',
{
'class': 'size-option' + (model.isSelected() ? ' selected' : '') + (model.inStock() ? '' : ' option-out-of-stock') },
m(
'span',
{ 'class': 'size' },
model.name()
)
)
);
})
);
Output:
<div id="options-container">
<div class="size-option-container" option="1428">
<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
</div>
<div class="size-option-container" option="1366">
<div class="size-option"><span class="size">M</span></div>
</div>
<div class="size-option-container" option="1351">
<div class="size-option"><span class="size">L</span></div>
</div>
<div class="size-option-container" option="1447">
<div class="size-option"><span class="size">XL</span></div>
</div>
<div class="size-option-container" option="953">
<div class="size-option"><span class="size">XXXL</span></div>
</div>
<div class="size-option-container" option="1016">
<div class="size-option"><span class="size">XXXXL</span></div>
</div>
<div class="size-option-container" option="1070">
<div class="size-option"><span class="size">4X</span></div>
</div>
<div class="size-option-container" option="1117">
<div class="size-option"><span class="size">5X</span></div>
</div>
</div>
Specifically the first size-option-container:
<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
UPDATE
Random changes to the class styles periodically stop adding the inline styles.
UPDATE 2
Adding style='' to div.size-option solves the issue.
UPDATE 3
Changing the HTML around a little I now have a new random style:
<div class="small-4 columns" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;"><div class="size-option-container" option="1428"><div style="" class="size-option"><span class="size">S</span></div></div></div>
Since the code you've posted doesn't involve the style property at all and Mithril is a totally unopinionated about styling, it's clear to me that this is down to external code modifying the contents.
If you're using a modern web browser, you can use DOM breakpoints to identify the script that's causing these modifications. Using Chrome, for example:
Add a config function to the wrapping element and stick a debugger statement in it:
return <div
id="options-container"
config={function(el,init){
if(!init)
debugger
}}
>
Open developer tools by hitting F12 and (re)load the page running your script: the browser will pause script execution immediately after the element is generated by Mithril.
Chrome will show you the value assigned to the el parameter of the config function: right-click it and 'Reveal in navigator' - or right-click the element as it appears in the browser and 'Select' it.
In the elements panel, right-click the element that gets strange styles applied to it, and select 'Break on...' > 'Attributes modifications'.
Hit F8 to resume script execution (it should still be paused from landing on the debugger statement.
The browser will pause script execution whenever a script attempts to modify the attributes of the element in question, and reveal the line of code doing it. When this happens, it will probably be a generic attribute modification method jQuery or similar. By hitting Ctrl+., you can move back to the function that called this one, successively, until you reach a line of code from your source code.
The problem is that the TabConainer inside the Dialog is empty after opening although selected="true" is given (see the screenshot below). The content is called with dojo/html html.set(node, contentHTML, {parseContent: true});
When changing the tab by clicking on another one the content appears and the class "dijitVisible" is set for this div as it should be from the beginning. The attribute nested="true" is necessary since otherwise three select bars are shown over the tabContainer.
What can I do so that the content appears from the start on?
<div data-dojo-type="dijit/Dialog" id="formDialog" data-dojo-id="formDialog" title="Edit member data">
<div id="formContent" class="dijitDialogPaneContentArea" data-dojo-attach-point="formContent">
</div>
</div>
Update:
Here is the whole javascript for getting the content
getForm = function(formID, urlAction){
var contentHTML;
var xhrArgs = {
url: urlAction,
handleAs: "text",
load: function(data){
contentHTML = data;
},
error: function(error){
contentHTML = text_error_unexpected + ": " + error;
},
handle: function(error, ioargs){
var node = dom.byId(formID);
html.set(node, contentHTML, {parseContent: true});
}
}
var deferred = dojo.xhrGet(xhrArgs);
};
Update 2:
This is the content that gets called and inserted in the above div "formContent" (I thought I make the description as simple as possible and lost some details on the way)
<div id="form" data-dojo-type="dijit/form/Form" data-dojo-attach-point="form" encType="multipart/form-data" action="#">
<div style="width: 450px; height: 370px;">
<div data-dojo-type="dijit/layout/TabContainer" nested="true">
<div data-dojo-type="dijit/layout/ContentPane" title="Personal data" selected="true">
Content 1
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Detailed data">
Content 2
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Contact data">
Content 3
</div>
</div>
</div>
</div>
Have you tried calling either dialog.resize() or tabcontainer.layout() after adding it to the dialog?
I am not sure as to how the code below will place contents inside the first ContentPane (title="Personal data"). I am assuming that the parameter formID = "form"
html.set(node, contentHTML, {parseContent: true});
I can suggest an alterantive.
Use an id with the content pane as shown below.
<div id="content1" data-dojo-type="dijit/layout/ContentPane" title="Personal data" selected="true">
Content 1
</div>
Then use dijit/registry to get the contentpane widget in the handle function call as shown below.
handle: function(error, ioargs){
var content= registry.bId(formId); // over here formId = "content1"
content.set("content","<p>This is content for <b>Personal Data</b></p>");
//content.set("content", contentHTML);
}
EDIT 1
This is may be one possible solution.
#Richard had suggested dialog.resize(), which I did try to put it after the html.set code but it would not work.
What I have noticed is that the html.set takes some time to execute and the dialog.resize() does not work because it is
called before the completion of the html.set call.
html.set also complicates the issue as it does not provide any handle (promise object) to let us know when it has finished execution.
so the below solution uses a setTimeout call to delay the execution of the dialog.resize(). Hence would advice to put the value of delay time depending upon some actual UI testing.
Modified code.
handle: function(error, ioargs){
var node = dom.byId(formID);
html.set(node, contentHTML, {parseContent: true});
var dialog = registry.bId("formDialog");
setTimeout( function(){
dialog.show();
dialog.resize();
},2000) // time delay of 2 seconds
}
I am using Dojo 1.8.3
I want to develop a Customizable Form using dnd. I have a list of form elements in the left dojo/dnd/Source and the container in the right dojo/dnd/Target which is supposed to generate dijits when I drop on it.
<div class="normal" style="width: 99%; height: 99%;" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
<div data-dojo-type="dijit/layout/ContentPane" class="normal" style="width: 30%; height: 80%;"
data-dojo-props="splitter: true, region: 'left'">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools" data-dojo-props="copyOnly: true"
class="container" style="width:99%;">
<div class="dojoDndItem" dndtype="heading">Heading</div>
<div class="dojoDndItem" dndtype="textbox">Text Box</div>
...
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container"
style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">
<div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
<script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script> </div>
</div>
</div>
In my js function transform_item, I am doing this:
this.transform_item = function(){
var dragged_items = arguments[3].selection;
form_items.forInSelectedItems(function(item, id, map){
var dnditem = dojo.byId(id);
switch(item.type[0]){
case "textbox":
var textbox = new dijit.form.TextBox({
name: "textbox",
value: "This is a TextBox"
}, "textbox_text");
// HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX
require(['dojo/parser'], function(parser){
parser.parse('textbox_text');
});
break;
}
});
}
At this point I'm getting an error when I drop over the Target :
dojo/parser::parse() error
TypeError: root is null
var node = root.firstChild;
How can I make Dojo generate, for example a dijit.form.TextBox when I drag an "textbox" dndtype?
Solved: I have just inserted the textbox in the wrong parent, textbox_text does not exist.So No need of parse();
Here's the flow of my problem:
I have one modal dialog, when I open a new dialog, it would open contentOne.jsp inside the modal dialog. When I click on a link on contentOne.jsp, the modal dialog refreshes and open contentTwo.jsp with my href reference. Then I close the dialog. When I open the dialog again, it would open contentTwo.jsp not contentOne.jsp. I tried destroyDescendants, destroyRendering.... but they didn't work.
I have a header that has a link to open a modal dialog like the following:
<div style="position: relative;right: 50px; top: 15px;">
<a onclick="dijit.byId('selectEquipmentInfo').show(); return false;" href="" />Add Equipment</a>
</div>
<%-- start equipment info dialog link --%>
<div id="selectEquipmentInfo" style="display:none;" name="selectEquipmentInfo" dojotype="dijit.Dialog" draggable="false" title="Select Equipment">
<div style="width:870px; height:400px; padding: 10px; overflow-y:auto;" href="">
<%# include file="../../StoreInfoArea/ProductFamilyDisplay.jspf"%>
</div>
</div>
This should open a modal dialog. Inside my ProductFamilyDisplay.jspf, I have an item linked to another jsp page on 'href' like the following
<div id="productFamily" class="productFamilyContainer">
<div id= "prdctFamilyRow" class="productFamilyColumn">
<c:forEach var="equipmentInfo" items="${equipmentTestList}" varStatus="status">
<c:out value="${equipmentInfo.value}" /><br />
</c:forEach>
</div>
This will render on the same modal dialog, and it's being controlled by this javascript:
<script type="text/javascript">
dojo.addOnLoad (function(event){
dojo.connect(dijit.byId('selectEquipmentInfo'), 'onClick', clicked);
});
var clicked=function(event) {
var dialog=dijit.byId('selectEquipmentInfo');
var contentNode=dialog.domNode;
var node = event.target;
var attrId = dojo.attr(node, "id");
if (attrId =="dijitCloseLink" || attrId == "dijitCloseImg") {
dialog.set('href','');
} else {
if("a" == node.nodeName.toLowerCase()){
dialog.href=node.href;
dialog.refresh();
dojo.stopEvent(event);
}
}
};
</script>
I am not able to locate code to destroy the Dialog. Try given below code. Put this code in the div where you are creating the dialog.
dojo.connect(selectEquipmentInfo, "hide", function(e){
dijit.byId("selectEquipmentInfo").destroy();
});