I am trying to modify the default skin of DNN 9.3.2 to display the IconFile which I have set under page settings for each page.
To display the icon anywhere on a page I used
<img src="<%= Server.HtmlEncode(PortalSettings.ActiveTab.IconFile) %>" />
but it's not what I want.
It should appear like this:
Any ideas?
OK, solved:
<img src="[=ICON]" />
Related
I want to display images from sdcard in my Ionic application , But I got problem to show images with img tag.
View Code For My Application
<ion-content ng-controller="DigitalCatCtrl">
<div>
<img ng-src="{{myimg}}" />
<img src="{{myimgs}}" />
</div>
</ion-content>
Controller Code For My Application
.controller('DigitalCatCtrl', function($scope,$cordovaFile) {
$scope.myimg=cordova.file.externalRootDirectory + ".DigitalCatlog/ic_developmentworks.png";
$scope.myimgs="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png";
});
If I have pass the image path directly to img tag like following way, Image will show.
<img src="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png" />
Please suggest me what I did wrong or any other solution.
use
<img data-ng-src="{{myimgs}}" />
instead
<img src="{{myimgs}}" />
I'm trying to get to grips with Polymer version 1.0 but what I thought would be simple example is turning out not to be so. After after several hours of experimenting, and reading Polymer documentation I've not clue as to were I'm going wrong.
What I was trying to do is convert the Collapsing toolbar example from robdobson on GitHub to something that would work under Polynmer 1.0.
Here is the body of my code from within my index.html file
<collapse-toolbar query="(max-width: 500px)">
<div class="logo">
<a href="#">
<iron-icon icon="polymer"></iron-icon>
</a>
</div>
<paper-menu>
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</collapse-toolbar>
Here is the code from my custom element (collapse-toolbar.html) file:
<dom-module id="collapse-toolbar">
<template>
<content select=".logo"></content>
<template is="dom-if" if="{{smallScreen}}">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<content select="paper-menu"></content>
</paper-menu-button>
</template>
<template is="dom-if" if="{{!smallScreen}}">
<content select="paper-menu"></content>
</template>
<iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
</template>
</dom-module>
<script>
Polymer({
is: 'collapse-toolbar',
properties: {
query: String
}
});
</script>
What I'm seeing when I run this in a browser (Chrome) is the following:
If I open the index.html file with my browser window set to > 500px wide, what I see is the Polyer icon and the paper-menu, which is exactly what I expect.
If I reduce the width of the browser window to <500px, the paper-menu disappears and a hamburger menu appears along side the polymer icon. If I click on the hamburger menu, NO drop down menu appears.
If I now scale the window back to >500px, the hamburger menu disappears but my regular paper-menu does not come back.
If I load the page with the window at <500px to begin with, the hamburger menu appears, but does not operate and when I expand the window to > 500px the paper-menu also does NOT appear.
Hoping someone can put me on the right track.
Inside index.html, you should use <paper-menu class="dropdown-content"> to make the dropdown menu work.
I have still no idea how to replicate the functionality of the original collapse-toolbar in polymer 1.0.
UPDATE:
Use <template is="dom-if" if="{{!smallScreen}}" restamp="true"> to make the menu reappear after enlarging the window.
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario
i had created 4 Visualforce tab. and also implement that when user click on the tab at that time only respective page load. and it is working also. but problem is data of default page is loading but the data of included page is not loading with page. i had post my code here. so how can i load data when click on particular tab. ?????![enter image description here][1]
<apex:tab id="tab1" name="tab1" >
<apex:detail/>
</apex:tab>
<apex:tab id="tab2" name="tab2" >
<apex:include pageName="page2" />
</apex:tab>
`
You need to wrap your <apex:tab> components in an <apex:tabpanel> component, like so:
<apex:tabpanel selectedTab="tab1">
<apex:tab name="tab1">
<!-- put tab 1 content here -->
</apex:tab>
<apex:tab name="tab2">
<!-- put tab2 content here -->
</apex:tab>
<!-- etc -->
</apex:tabpanel>