On my aspx page I have the following list items/divs. Is there a way to make the tab in position 1 (divReferralTab) the selected tab on page load by referencing the div or the list item?
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liReferralTab" runat="server">Referral</li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
</div>
If I understand you right, you can try setting the z-index of the control you need first.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
If you want the referral "bullet" first then try just listing it first:
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liReferralTab" runat="server">Referral</li>
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
Related
I am using a Repeater to display rows of data from my SQL Server database. I wish to display each row of my data in separate HTML divs. At the moment it displays all my data (all rows) in the div I have placed the repeater. How do I separate it its seperate divs?
Any suggestions please? :)
<div class="deal-info">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="rptr">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Just wrap each item in a <div>:
<li>
<div><%#Eval("Name")%></div>
</li>
You can use <AlternatingItemTemplate>
So:
<div class="deal-info">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="rptr">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="rptr2">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
I have this code:
<header id="mainHeader">
<div id="logo">
<img src="images/logo.jpg" alt="" />
</div>
<div id="callus">
<p>
<img src="images/callus.jpg" alt="" class="fl" />
</p>
</div>
<nav>
<ul id="nav">
<li class="links">Home</li>
<li class="links">About Us</li>
<li class="links">Portfolio</li>
<li class="links">Services</li>
<li class="links">Contact Us</li>
</ul>
</nav>
</header>
I have put it in a user control called header.ascx and declared it in a web.config file. Its working fine when i am calling it from any page which is on the same directory level. But once i call it from a subfolder the logo image disappears and links doesn't work.
Try calling the image src from your sites home directory. If your images folder is in your sites home directory, then you need a slash in front of it..
<img src="/images/logo.jpg" alt="" />
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I can't seem to figure out how to change the height of list items in a jquery mobile navbar. I've looked through all the css and tried changing everything I've found but nothing has worked so far. Hope someone can help!
Here's the code:
<div data-role="page" data-theme="a">
<div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
<div data-role="navbar">
<ul class="custom-navbar">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
Here's a link to see how it's rendering. The 7 items at the top (the days of the week), as you can see have lots of space above and below them inside their borders. I want much less space there.
<ul class="custom-navbar ui-grid-f">
<li class="ui-block-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></li>
<li class="ui-block-b" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></li>
<li class="ui-block-c" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></li>
<li class="ui-block-d" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></li>
<li class="ui-block-e" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></li>
<li class="ui-block-c ui-block-f" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></li>
<li class="ui-block-g" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></li>
</ul>
There is your initialized grid. You can see that I added padding-left: -5px to all but the first <li> element to take away the space between them. I would either use a class to add the margin to the elements or if you are targeting browsers that support CSS3 then you can use the :nth-child() selector to get all but the first <li> element.
Update
Here is how to change your code so that it will look like the above code after jQuery Mobile initializes it:
<ul class="custom-navbar">
<li>Sun</li>
<li style="margin-left: -5px;">Mon</li>
<li style="margin-left: -5px;">Tue</li>
<li style="margin-left: -5px;">Wed</li>
<li style="margin-left: -5px;">Thu</li>
<li style="margin-left: -5px;">Fri</li>
<li style="margin-left: -5px;">Sat</li>
</ul>
How can we hide all list element from first form in following html structure using mootools
<form method="post" action="/signup" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>First Name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Last name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<form method="post" id="user_form_login" action="/login" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>Uername
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Password
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
This is completely untested and I switched to jQuery a while ago so there might be a cleaner way to do this, but this should give you a basic idea.
If you are trying to select multiple elements use the mootools dollars method.
If you were to append an id to the first form you could do something like this...
$$('#form1 li').setStyle('display', 'none');
OR
If you do not want to add an id tag this might work.
var firstForm = $$("form").getFirst(),
listElements = firstForm.getChildren('li');
listelements.setStyle('display', 'none');