i don't need default layout of unipager so took the custom transformation. how to render the page numbers in ascx transformation
my code is following
<div class="container text-center">
<li><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></li>
<li><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></li>
<li class="active">1<span class="sr-only">(current)</span></li>
<li><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></li>
<li><span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span></li>
</div>
it rendering like
but it not rendering remaining pages
Anyone tell me what mistake i did or solution to render next pages like Above
Uni pager requires a list of transformation
Result you're getting is exactly what you have in markup.
<li><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></li>
Above line should be First page transformation
<li><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></li>
Previous page transformation
<%# Eval("Page") %>
Pages transformation (this is what you're missing)
Just continue like this other transformations.
Hope this helps
Related
I have a page where I want the data to be showed in multiple tabs (and the data may only be loaded when clicked on the tab):
View
#model project.Models.AdminModels.Module
#{
ViewBag.Title = "Module";
}
<h2>#ViewBag.Title: #Model.Name</h2>
<div class="ui secondary pointing menu">
<a class="item" asp-controller="Module" asp-action="Details" asp-route-id="#Model.ID">
Details
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Menus
</a>
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Other tabs
</a>
</div>
<div class="ui segment" id="content">
</div>
Is their a way that I can load the data in the content div, without reloading and redefining the whole page?
I am new in ajax.
I am trying to get value and want to fill in html code snippet.
I have html code and json object that has value.
Now I want to show the specific value in the different-different part of html code.
Here is my html code:-
<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation | Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> atul.gupta#bajajfinserve.co.in</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
Reward
Incentive
Movement
Leaves
LnD
</div>
On success of ajax I am getting the value now I want to fill it in my html code.
Please help me.
You can use a library (like knockout) to do that, or you can use jQuery to create the elements:
$("<div>").append("some text").appendTo("body"); //creates a div, append some text and...
If you already have a success event in your ajax, you could grab an empty DOM element and set its content.
document.getElementById('placeholder').innerHTML = jsonData.myProperty;
You should use innerHTML in javascript.
Set some ID on the element you need to update:
<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>
Then update it with your json value:
document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;
I'm trying microdata for breadcrumbs on a development site, and I've followed Google's own example, but for some reason the actual breadcrumb doesn't preview in the Structured Data Testing Tool
This is how my code looks like:
<div class="back" xmlns:v="http://rdf.data-vocabulary.org/#">
<h3>
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Steaks And Game
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Wagyu Steaks
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">Tenderloin - Filet Mignon
</span>
</h3>
<div class="clear"></div>
</div>
And this is what the Structure Data Tool is showing me:
It's showing URL under the title instead of the breadcrumb links.
This is an example showing the breadcrumb links:
The test page is here
And the preview of the page using the Structured data tool is here
site is built using Asp.Net
I've tried a number of things like:
Using the › sign instead of ::
I've even copy pasted Google's own example code for microdata breadcrumb implementations:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
I've copy pasted the entire source code of the page on another page on a linux server and amazingly that validates correctly. I really don't know what to do further. Any advice would be appreciated.
I found a way to use the current Schema.org markup for valid breadcrumbs. It is important to not just append the breadcrumb links one by one, but to nest them and give all but the first one the 'child' itemprop.
<p id="breadcrumbs">
<span itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Green Dresses</span>
</span>
</span>
</span>
</p>
This is exactly how it works with Data-Vocabulary.org, it just uses the more current Schema.org markup instead. This will tell the search engines how your breadcrumbs are connected.
Use This SCHEMA strcture
**
Use this for Microdata for breadcrumber
**
<div class="breadcrumbs">
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
<a href="index.html" title="Go to Home Page" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href="product.html" title="Product" itemprop="url">
<span itemprop="title">product name</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href=".finalproduct.html" title="final product" itemprop="url">
<span itemprop="title">final product</span>
</a>
<span>></span>
</li>
<li class="category6"><strong>Final Product view</strong></li>
</ul>
</div>
**
Important: It also used for SEO Purpose
**
enter link description here
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>
I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1