I am trying to have an interactive list element with a title and description.
I have an action link and a p tag.
<li>#Html.ActionLink((string)Model.Date.ToShortDateString(), "Details", new { id = Model.id})
<p style="padding-left: 15px;">#Model.RecordType</p>
</li>
Is it possible to also make the description 'clickable'? The title is in the correct place, but if the user were to touch the description on accident, it would not trigger the action link.
This li is enclosed in a <ul data-role="listview">
The problem was when I was testing it in a browser. When testing on a mobile device, this problem does not exist.
Related
I want to add tooltips for some "Categories" box in Zendesk, so when the user hang over one box then I can show a tooltip with more information about the "Category".
Problem is that I'm trying to use IF statement like this:
{{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic' }}
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#if href == 'url_to_compare' }}
<a class="tooltiptext">tooltip_text</a>
{{/if}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
As this IF is inside of a {{#if}} of the categories I want to select in this example only one link using the href to see if the mouse is over or not the box.
I already tried to add a helper in the script.js file but looks like it's not working, I remember that there was a way to use this IF and IS to be able to solve it.
Thanks!
I get a lot of help on this, at the end I found that the better way to solve this is using a {{#is}} statement, So it's possible to use {{#is name "Category Name"}} {{/is}}
And this option will do a comparation between the name of the Category and the name you are looking for, if the value it's equal then you can do something inside, if not then you can use an {{else}} between and do another thing over there.
{{#is name "Category Name"}}
<div class="tooltip1">{{name}}<span class="tooltiptext">{{excerpt description}}</span></div>
{{else}}
<span class="blocks-item-title">{{name}}</span>
{{/is}}
I used the "Excerpt description" to add the value of the tooltip inside Zendesk, and no need to add it manually in the home_page.hbs code.
I added 3 different tooltips and working fine now. Thank you all!
I had a bot that would apply on indeed.com jobs. It would collect jobs then apply to them one by one. However, indeed recently made things a lot harder. Used to be able to just locate the button's id and use that but now the id is dynamic: changes from different job positions.
Does anyone know how it is possible to link to the "Apply Now" button (not really a botton) if the code below is:
<a class="indeed-apply-button" href="javascript:void(0);" id="indeed-ia-1532137767182-0">
<span class="indeed-apply-button-inner" id="indeed-ia-1532137767182-0inner">
<span class="indeed-apply-button-label" id="indeed-ia-1532137767182-0label">Apply Now</span>
<span class="indeed-apply-button-cm">
<img src="https://d3fw5vlhllyvee.cloudfront.net/indeedapply/s/14096d1/check.png" style="border: 0px;">
</span>
</span>
</a>
Many ways to click that element, the 3 simplest would probably be
click_link('Apply Now') # find link by partial text and click it
click_link(class: 'indeed-apply-button') # find and click link by class
find('span', text: 'Apply Now').click # find span by text and click in it
in my case I had to select an option shown using js-chosen library inside an iframe. So, its not a regular select tag. So had to do following to select:-
within_frame(find("#cci_form")) do
find('#showing_listing_id_chosen').click
find('[data-option-array-index="2"]').click
end
But, no luck using
find('.active-result[data-option-array-index="2"]').click
or
find('li[data-option-array-index="2"]').click
I am developing an ASP.NET MVC web application.
On one of my pages I have tabbed the information that looks like this:
Tabbed Content
My ActionLink looks like this:
#Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", null, null, "Documents", new { id = Model.InternID }, null)
Now when I hover over the link in my application it has the correct syntax with the InternID and fragment but when I click on it.. it sends me to the Tab that says "Applicant Profile", not "Documents"..
When I hover over the "Documents" tab it has the same url as when I hover my actionlink in my application.
Is there a way to fix this?
In addition to Chris Patt's answer.
You need to explicitly enable the specific tab you want.
First you need to pass one more param in your url querystring to represent which tab to be selected.
#Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords",
new { id = Model.InternID ,tab="documents" }, null)
and in your RecordView() action method, you will accept this, set it to ViewBag so that you can read it in your razor view.
public ActionResult RecordView(int id,string tab="profile")
{
ViewBag.CurrentTab = tab;
return View();
}
and in your view, on the document ready event , we will read this value and use that to show a specific tab.
$(function() {
var tab = "#ViewBag.CurrentTab";
$('.nav-tabs a[href=#'+tab+']').tab('show');
});
Assuming your tab link's href values are "#profile" and "#documents"
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Profile
</li>
<li role="presentation">
Docs
</li>
</ul>
Simply appending the fragment to the URL doesn't do anything to activate a particular tab. JavaScript "tab" libraries merely utilize fragments for graceful degradation: if JavaScript is not enabled, clicking the "tab" will jump you to the right portion of the page where the tab content lies, because of the way page anchors work. However, you are responsible to inspecting the fragment in the URL, if it exists, and activating the appropriate tab. How to activate the tab depends on your particular solution, which you haven't given us any information about, though.
I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.
I'm just starting out with MVC, and I'm trying to build a sample, proof of concept page for mvc interaction with jquery-mobile. I've searched for an answer on this, but I don't think I know enough yet to formulate proper queries.
On my view, I am trying to generate output that functions like this (sampled from the jqm demo site) :
<ul data-role="listview" data-inset="true">
<li><a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
</ul>
So, I'm working it like this :
#foreach (var item in Model) {
<li>
#Html.ActionLink( LargeExpandedMultiContentText, "Edit", new { id = item.SysID })
</li>
}
My question, which I don't know a simple way of asking, is, how, in MVC terms, do I fill the variable, so that the href generated by ActionLink() matches the style I've sampled from the jqm website?
I've tried this, and while it almost works, I'm sure its not the 'right' way, especially when I get to a spot of pulling "Steven Weber" and other strings out the the item/Model...plus it encodes the text, but I'm sure there's a way to deal with that easy enough.
#foreach (var item in Model) {
<li>
#{ String txt = "<h3>Stephen Weber</h3><p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p><p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> <p class=\"ui-li-aside\"><strong>6:24</strong>PM</p>";
}
#Html.ActionLink( txt, "Edit", new { id = item.SysID })
</li>
}
Thanks, I appreciate your help
Brian
I'm not sure it's possible to use Html.ActionLink to build such a complex action link. That said, the Html Helpers are just supposed to be helper functions to make your life easier by giving you shortcuts to render HTML in ways commonly required. You don't need to use them. In this case, I think instead you should use a normal html tag, and Url.Action to create the correct URL.
If you wanted to include this information within an enumerable model I'd probably do something like:
#foreach (var item in Model) {
<li><a href="#Url.Action(item.Action)">
<h3>#item.Name</h3>
<p><strong>#item.Title</strong></p>
<p>#item.Message</p>
<p class="ui-li-aside"><strong>#item.Time</strong>#item.TimePeriod</p>
</a></li>
}
Note: the function you were looking for to display contents without encoding them is #Html.Raw
In answer to my other 'half question' I found this resource...
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx
I believe the "razor delegate" item there at the bottom would fit the need I had.
#{
Func<dynamic, object> b =
#<strong>#item</strong>;
}
#b("Bold this")