Is there a way to use a different HTML markup to populate the caption text in a Nivo Slider? For search engines I don't want the content to be stuffed in the title attribute of the image tags.
Currently:
<img src="/image.jpg" title="Blah blah paragraph..." />
I would like something like this:
<img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div>
There's an easier way to do it.
NivoSlider supports HTML captions. See documentation here:
http://docs.dev7studios.com/jquery-plugins/nivo-slider
Set up your html caption in a div outside the #slider with display:none like this:
<div id="htmlcaption" class="nivo-html-caption" style="display:none">
<strong>This</strong> is an example of a <em>HTML</em> caption.
It even has a link.
</div>
Now, in your slide image set the title attribute to the id of the caption element:
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
When the slider runs, it finds the referenced caption and copies it to the active caption div and animates it for you. No need to change the javascript at all.
Open up your jquery.nivo.slider.js, on line 94 is the processCaption function. You can change this instead of looking at the 'title' attribute to anything you want.
For example
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.parent().find(".nivo-title").html() != '' && vars.currentImage.find(".nivo-title").html() != undefined){
var title = vars.currentImage.find(".nivo-title").html();
if(title.substr(0,1) == '#') title = $(title).html();
...
}
}
Thanks to Alexander for pointing me in the right direction! The following worked:
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
var nivoMyTitle = vars.currentImage.parent('.nivo-imageLink').find('.nivo-title'); //class of container with paragraph
if(nivoMyTitle.html() != '' && nivoMyTitle.html() != undefined){
var title = nivoMyTitle.html();
if(title.substr(0,1) == '#') title = $(title).html();
The HTML:
<img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div>
The CSS:
.nivo-title{display:none;} .nivo-caption p{font-size:12px;}
Related
so I'm trying to pass the value of "x" here which will generate the random value.
<script>
var result = Math.random().toString(36).substring(2,5);
window.onload = function() {
document.getElementById("x").innerHTML=result;
}
</script>
I want to pass the value to my html code, in the mailto subject. so when people click the link, it will automatically open the default mail and send the email to info#legianbeachbali.com with the subject "Special Promotion + (random code)"
<p style="color: #5b5b5b; text-align: left; id: x;">
<a title="Book Now" href="mailto:info#legianbeachbali.com?subject=Special%20Promotion%20"+x>Book Directly with Us</a></p>
I tried to call the value on id and put "x" in the subject but as I expected, it doesn't work. could you guys please help me? I need to know how to show the value in the subject email.
Thanks in advance.
First remove + x from your HTML i.e, href attribute of your a tag.
Then add id to you a tag mailTo in this case (as shown below).
$(function() {
var result = Math.random().toString(36).substring(2,5);
var href = $("#mailTo").attr('href')
var newHref = href + result
$("#mailTo").attr("href", newHref)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Book Now" id='mailTo' href="mailto:info#legianbeachbali.com?subject=Special%20Promotion%20">Book Directly with Us</a></p>
My question is similar to that one:
Dijit Menu (bar) with link
I'm using Dijit Menu as in following listing:
<div data-dojo-type="dijit/Menu">
<div id="menuItem" data-dojo-type="dijit/MenuItem">
urlLink
</div>
</div>
But link is not working as it blocked by dojo.stopEvent in _onClick().
The question is:
How to remove dojo.stopEvent and make link inside <div id="menuItem" data-dojo-type="dijit/MenuItem"> work properly?
The issue:
I need to put inside <div id=menuItem"> some code, which has to receive onClick event.
P.S. Originally this is XPages code.
Well I fell in same problem, saw this post and the related other, but wasn't satisfied with the "onclick" solution :
it didn't work (for me) with keyboard navigation
it imposes to a add script element (onclick=...) in the declarative zone which is not what I expect for unobtrusive JavaScript
Finaly I digged further in dojo and decided to directly use the href attribute of first sub-node in the handler. My script section (derived from dijit menus tutorial) is then :
<script>
require([
"dojo/dom",
"dojo/parser",
"dojo/dom-attr",
"dojo/query",
"dijit/registry",
"dijit/WidgetSet", // for registry.byClass
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuBar",
"dijit/MenuBarItem",
"dijit/PopupMenuBarItem",
"dojo/domReady!"
], function(dom, parser, domattr, query, registry){
// a menu item selection handler
var onItemSelect = function(event){
dom.byId("lastSelected").innerHTML = this.get("label");
var achild = query("a", this.domNode)[0];
if (achild != null) {
var href = domattr.get(achild, "href");
if ((href != null) && (href != '') && (href != '#')) {
window.location.href = href;
}
}
};
parser.parse();
var setClickHandler = function(item){
item.on("click", onItemSelect);
};
registry.byClass("dijit.MenuItem").forEach(setClickHandler);
registry.byClass("dijit.MenuBarItem").forEach(setClickHandler);
});
</script>
That way I don't have to change anything in a menu of type
<ul><li>...</li></ul>
that works with JavaScript disabled, and links work fine with mouse and keyboard navigation when JavaScript is enabled. Simply don't forget the "class='claro'" in body element ....
What about this:
<div data-dojo-type="dijit/Menu">
<div id="menuItem" data-dojo-type="dijit/MenuItem"
onclick="window.location('http://url.com')">
urlLink
</div>
</div>
Working jsfiddle:
http://jsfiddle.net/KuyYX/
I want to get the value of the selected item of a radiobutton List using javascript.
My code is:
<asp:RadioButtonList runat="server" ID="Radio" RepeatColumns="3" CssClass="textfont">
<asp:ListItem Value="1" Selected="True">First</asp:ListItem>
<asp:ListItem Value="2">Second</asp:ListItem>
<asp:ListItem Value="3">Third</asp:ListItem>
</asp:RadioButtonList>
And this is my Javascript code:
<script type="text/javascript">
function sendParameters() {
var Id = '<%=HiddenField1.Value%>';
var ddl1 = document.getElementById("Radio").checked;
</script>
How to proceed?
First of all please view the source of the resulting web page and post the resulting radio button html. This will make it easier to answer because then the question comes down to plain HTML and jQuery.
The Reason is asp often changes the name of the ID, unless you add ClientIDMode="Static" to your control.
Once that is done this should do it:
var chosenValue = $('input:radio[id="Radio"]:checked').val();
alert(chosenValue);
I'm new to Orchard and have watched both the Pluralsight "Orchard Fundamentals" and "Advanced Orchard" tutorials. Its a great platform, but I'm having a hard time wrapping my head around a couple of things.
I'd like to create a blog showcase banner on the home page only that rotates blog posts on the site. I have the HTML sliced up and functioning on an HTML template. The banner looks like this:
http://arerra.com/news-slideshow.jpg
So far I have done the following:
I've created a Blog called "Articles" and have placed a single post in there for testing.
Added a Layer called "ArticleList" where I have placed a Widget for "Recent Blog Posts"
I've created a custom layout for the home page called "Layout-Url-HomePage.cshtml" in my theme.
In my Theme "Views" folder, I have created a file called "Widget.Wrapper.cshtml" with only #Display(Model.Child) in it to remove the <article><header/><footer /><article> tags globally from the widgets.
Added a file in "Views > Parts > Blogs.RecentBlogPosts.cshtml" to control the layout of my shape. The code is the following:
#using Orchard.ContentManagement;
#{
IEnumerable<object> blogPosts = Model.ContentItems.ContentItems;
}
#if (blogPosts != null) {
<div class="container news-slider">
<ul class="slide-images">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
ContentItem item = post.ContentItem;
<img src="/Themes/MountainWestHoops/Content/img/placeholder-700x380.jpg" alt="#title" class="active" />
}
</ul>
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string body = post.Body;
ContentItem item = post.ContentItem;
<div class="featured-story threeD active">
<h1>#title</h1>
<p>#body #Html.ItemDisplayLink("READ MORE", item)</p>
</div>
}
<aside>
<ul class="tabs">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string url = post.Url;
ContentItem item = post.ContentItem;
<li><h3>#title</h3></li>
}
</ul>
<div class="ad-three-day-trial">
<img src="/Themes/Content/img/placeholder-260x190.gif" />
</div>
</aside>
</div>
}
My HTML is rendering properly, but none of the values that I have specified are showing up.
I am using the "Shape Tracer" module to see what template is being used. What is funny, is that the #Html.ItemDisplayLink("READ MORE", item) is rendering the article's URL, and if I replace the "READ MORE" with the string title, the title renders properly.
What am I doing wrong here that is causing strings to not display? Am I missing a larger point and misunderstanding the fundamentals? The tutorials seems to say that you can simply move around parts, but in this case, I need to have very specific markup for this slider to work.
Seems like your source was http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
That is a rather old post, and the way the title is handled has changed since then.
The DisplayLink works because the only correct property here is post.ContentItem, which is what that API takes. post.Title and post.Body on the other hand are very likely null, which is why you see nothing. To access the title, you can use post.ContentItem.TitlePart.Title and to get the body, post.ContentItem.BodyPart.Text.
in this example its replace the div container with other element but its get the other element from the yui function how can i make same example but with replace two divs in the html
HTML
<div id="demo">
<p><em>Click me.</em></p>
</div>
Script
YUI({ filter: 'raw' }).use("node", function(Y) {
var node = Y.one('#demo p');
var onClick = function(e) {
// e.target === node || #demo p em
var tag = e.target.get('parentNode.tagName');
// e.currentTarget === node
e.currentTarget.one('em').setContent('I am a child of ' + tag + '.');
};
node.on('click', onClick);
});
You mean, You'd like to replace another div or select another div?
In this example, em is selected and then its content is changed by setContent( "your new content" )
You can just select the e.currentTarget (the node or #demo p div) and setHTML() and build your div inside like string for example <div>content<div>, this is just one out of millions of ways to accomplish this.
have a look to this: http://www.jsrosettastone.com/