I am using orbit for slideshow requirements, however I am not able to add captions.
The documentation says this :-
<div id="featured">
<img src="overflow.jpg" alt="Overflow: Hidden No More" />
<img src="captions.jpg" alt="HTML Captions" data-caption="#htmlCaption" />
<img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>
I am using haml and doing something like this :-
.container
.row
.two.columns
=render "left_navigation"
.ten.columns.destination_tabs
.contianer
.row
.ten.columns
%h3 Featured Destination
%hr
-if #preferred.blank?
%h5 No Featured destinations currently
-else
#featured
-#preferred.each do |destination|
-destination.destination_photos.each do |photo|
=image_tag(photo.picture.thumb_large.url, :alt =>"html captions", :data-caption => "#htmlCaption")
.orbit-caption#htmlCaption
="sfsdf"
This obviously gives error because I cannot give a syntax like :data-caption I tried lot of stuff but couldn't get it right yet can anyone help?
You can use arbitrary strings as symbols by simply quoting them:
:"data-caption" => "#htmlCaption" #note the quotes around data-caption
Related
I have an app that is using ngx-bootstrap to show a tooltip on mouseover. I want to test that the content, which is dynamically added, shows properly. In order to do this I have a test that looks like this:
it(shows the right tooltip', fakeAsync(() => {
fixture.debugElement.query(By.directive(TooltipDirective))
.triggerEventHandler('mouseover', null);
tick();
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.tooltip-inner')).nativeElement)
.toBe('the tooltip text');
}
This results in an error that indicates that fixture.debugElement.query(By.css('.tooltip-inner')): "Cannot read property 'nativeElement' of null"
If I print out the content of fixture.debugElement.nativeElement I get this:
<div id="root1" ng-version="5.2.9">
<my-component>
<div ng-reflect-tooltip="the tooltip text">
<img src="images/test.png">
</div>
<bs-tooltip-container role="tooltip" class="tooltip in tooltip-right">
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner">the tooltip text</div>
</bs-tooltip-container>
<my-component>
</div>
The important take away is that the html exists - it is just not accessible by the DebugElement.query.
My current solution to get the spec passing is to change the expect to:
expect(fixture.debugElement.nativeElement.textContent.trim())
.toBe('the tooltip text');
This works, but it is a hack that will fall to pieces if I run into a similar situation with multiple tooltips (for example). Has anyone been able to handle this in a better way? Am I not setting this spec up correctly?
I am using gmaps4jsf jar file and getting dynamic marker on google map. marker having some information and once i click on marker then get the popup and i wrote there "Click me!" i want to provide link on marker data
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point2.latitude}" longitude="#{point2.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
you want to write somthing like this,
<m:htmlInformationWindow htmlText="Click <a href='info.xhtml' target='_blank'>me!</a>" />
target='_blank' means you link will be open in new tab if you want to open same tab then you can remove the target.
but in jsf you can't acheive symbol without & operater so you need to like this where < means "<" and > means ">"
<m:htmlInformationWindow htmlText="Click <a href='info.xhtml' target='_blank'>me!</a>" />
Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it.
You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work.
DEMO
First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to have to deal with all of the potential style conflicts or having your users download another large css file. Really all that is needed is a reference to the Foundation version and namespace, so just add the following to your css:
meta.foundation-version {
font-family: "/5.4.5/";
}
meta.foundation-data-attribute-namespace {
font-family: false;
}
The second issue is with your markup. You have the data-equalizer-watch attribute applied to the containing .col-sm-4 element, but you have your border on the child element with the class latest-news-item. So change your markup to be:
<div class="row" data-equalizer>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
</div>
As you can see in the demo, I was able to get your test page to work with these changes, but I was also able to dramatically reduce the foundation.js file size by using the Custom option on the Foundation Download page and just building a js version with the equalize plugin only. The minified version was 31K. If you're not planning to use any of the other foundation plugins, you might consider using a custom file.
That said, for folks that are looking for an alternative lighter-weight approach, it might be just as easy to write your own jQuery such as by adding a class to the row you want to equalize (I called it 'equalize') and then add:
var row=$('.equalize');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
Wrap it in a function and you can call it on resize as well if that is important to you.
I have a Sitefinity 7.0 installation. I've added a custom content type, which includes a field for a single, required, image.
I created a custom template for this content type. On the site you can click on examples for how to add your fields to the widget template. This is what it gives me for the 'Picture' field:
<%--The following namespace should be registered at the top of the control if it doesn't exists--%>
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Images" TagPrefix="sf" %>
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" TagPrefix="sf" %>
<sf:ImagesView ControlDefinitionName="ImagesFrontend" runat="server" MasterViewName="ImagesFrontendThumbnailsListLightBox" Title="" UrlKeyPrefix="">
<RelatedDataDefinition RelatedFieldName="Picture" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.GIARRecipients.GiarRecipient" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
</RelatedDataDefinition>
<ControlDefinition ControlDefinitionName="ImagesFrontend" runat="server" ProviderName="OpenAccessDataProvider">
<Views>
<sf:ImagesViewMasterDefinition SortExpression="" ViewName="ImagesFrontendThumbnailsListBasic" runat="server">
</sf:ImagesViewMasterDefinition>
<sf:ImagesViewMasterDefinition SortExpression="" ViewName="ImagesFrontendThumbnailsListLightBox" runat="server">
</sf:ImagesViewMasterDefinition>
<sf:ImagesViewMasterDefinition SortExpression="" ViewName="ImagesFrontendThumbnailsListSimple" runat="server">
</sf:ImagesViewMasterDefinition>
<sf:ImagesViewMasterDefinition SortExpression="" ViewName="ImagesFrontendThumbnailsListStrip" runat="server">
</sf:ImagesViewMasterDefinition>
<sf:ImagesViewDetailDefinition ViewName="ImagesDetailView" runat="server">
</sf:ImagesViewDetailDefinition>
</Views>
</ControlDefinition >
</sf:ImagesView>
This is way too much and the markup produced uses <ul><li>, even though it's always exactly one image. Ideally, I want it as simple as <img src='<%# Eval("Picture") %>' />
What is the simpliest way to add a single image to a Sitefinity template?
For the image fields on custom content types, you can limit the number of images by clicking on the "Limitations" tab when adding the field. Select "Only 1 image can be uploaded or selected"
.
The control that gets used in the template is instead is a Sitefinity Images control:
<sf:ImageControl runat="server" Title="" UrlKeyPrefix="" ProviderName="OpenAccessDataProvider" >
<RelatedDataDefinition RelatedFieldName="OneImage" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.Solutions.Solution" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
</RelatedDataDefinition>
</sf:ImageControl>
And the markup that gets rendered is a image tag wrapped in a div:
<div class="sfimageWrp">
<img id="ctl09_ctl00_ctl00_detailContainer_ctl03_0_ctl00_0_ctl00_0_imageItem_0" title="ootb" src="/images/default-source/default-album/ootb.png?sfvrsn=0" alt="ootb">
</div>
I choose Ben's answer as correct, but an alternative I found in the mean-time may also be worth mentioning.
<img src='<%# ((Telerik.Sitefinity.Libraries.Model.Image)Eval("Picture")).Url %>' />
I am trying to get CAPTCHA working on the eForm plugin. I have added the input form field:
<label for="cfCaptcha">Captcha:<br />
<img src="[+verimageurl+]" alt="verification code"><br />
<input id="vericode" name="vericode" class="text" type="text">
and I have added
&vericode=`1`
to the eForm call.
and have added the Template Variable [+verimageurl+] to my template.
However, when I preview the form all I see in the image area is <img src="" alt="verification code">
Would anyone know what I am doing wrong?
Did you get this fixed?
Check that you ended the label code. Run it through w3c code checker too.
A few times I have left a element un-closed and it breaks the whole thing.