I have a list on top of my page that has a few different countries on it. I need to have an #anchor that will pop half way down the page to the country picked. However the countries down the page are pulled from a Database and are listed by HyperLinks in a repeater.
<td align="center">
<ul style="list-style-type: none;">
<li>USA </li>
<li>Canada </li>
<li>Australia </li>
</ul>
</td>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hlCountryName" runat="server" Style="color: #6D94B8; font-size: 20px; font-weight: bold; margin-bottom: 5px; padding-left: 10px;"></asp:HyperLink>
And inside the DataList1_ItemDataBound method in the C# section I did:
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
Yet when I click on the link at the top of the page I am not taken anywhere. I am wondering what I could be missing in my code? Or if I have miss understood how to do this altogether? Any help is appreciated. Thanks!
You should just try to replace this line :
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
with :
hlCountryName.Attributes.Add("name",drCountry[Common.Data.Country.Constants.countryName].ToString());
Related
Style
<style>
ul{
list-style-image: url('../8iAbk7rjT.png');
}
</style>
Coding
<ul>
<asp:DataList ID="dd" runat="server">
<ItemTemplate>
<li><a href="/Pages/index.aspx?category=<%#Eval("id") %>">
<%#Eval("name") %></a></li>
<hr />
</ItemTemplate>
</asp:DataList>
</ul>
How to Get an image As UL style in asp.net.
Any solution??
There is nothing special to do in asp.net for this. It's CSS matter. Your code is fine, just check for image url whether it's correct or not.
ul{
list-style-image: url('http://forums.androidcentral.com/images/smilies/cool.png');
padding: 0 0 0 30px;
margin: 0 0 0 15px;
}
I'm creating a webapp that is able to view on the phone while it fits nicely to screen. I have so far tried it by changing the CSS of the respective webapp. Initially it fits nicely like this below making any selection to the dropdownlistbox.
However, making a selection that is filled with images/text, the layout change drastically.
This is my CSS code where i re-size the parent layout, which is ContentPlaceHolder as shown below
#ContentPlaceHolder
{
position:absolute;
margin:0px;
width:100%;
left:0px;
}
I have inserted this contentplaceholder css attribute in the masterpage via this tag
<div id="ContentPlaceHolder"></div>
The layout of the all the details below is categorize as headerbody.
#headerbody
{
margin-top:50px;
position:absolute;
left:0%;
margin: 0px;
width:100%;
}
The 3 textbox shown in the picture also has a width:100% attribute in it as shown below.
<asp:TextBox ID="txtOR" runat="server" ReadOnly="True" TextMode="MultiLine" Height="80px" Width="100%"></asp:TextBox>
Prior to my knowledge, as long as the parent layout which is contentplaceholder is 100%, shouldn't the picture extends beyond 100%? It works perfectly on my desktop but not on my opera emulator. Would appreciate if anyone can enlighten me on this.
Regards.
UPDATE
By reducing the size i have fixed for the images, it fix nicely to my mobile emulator. However, the picture is a little too small. Is it possible all 5 picture to fit nicely to screen?
As an alternative, try using:
<div style="width:80%;overflow-y: visible">
<ul style="width:100%">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>
</div>
overflow-y: visible; will add horizontal scroll bar to the container div.
#ContentPlaceHolder
{
position:absolute;
margin:0px;
width:100%;
left:0;
right:0;
}
I am working on a website (C#, .Net 3.5 Framework) and looking for an alternate of Popup window to avoid the popup blocker settings of browsers or in other words want to remove the dependency of popup blocker for Website. Many users disable them because they don't like it.
I am using Master page for Menus and common interface of website.
But all the requirements are same.
Overlapped window
Common Interface/component that can be used to display the content of other HTML/ASPX page
Value can be passed and returned to the Opener Window.
Which is the best option for this scenario?
Thanks.
Your best bet is javascript, maybe modal plugin of jquery, but... The problem is, that it isn't 100% reliable as well. Many people disable javascript or maybe don't have a browser with that js (some older mobile phones etc.).
I have found a way, as an alternate of popup window.
Style Sheet (Popup related CSS)
Purpose: CSS for popup window
.PopupOuterDiv
{
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
.PopupInnerDiv
{
position:fixed;
background-color:#ffffff;
z-index:50;
left:25%;
right:25%;
top:25%;
border-right: #0066ff 5px solid;
border-top: #0066ff 5px solid;
border-left: #0066ff 5px solid;
border-bottom: #0066ff 5px solid;
font-family: Arial;
}
.PopoupTitle
{
background-color: #0066ff;
height:25px;
color: white;
}
.PopoupButton
{
color: #ffffff;
width:20px;
border:white 1px solid;
background-color: #663300;
}
Master Page
Purpose: Contains the Common code for popup
1. Create 1 Div for Outer faded Effect
2. Create Div as container or popup Window
3. Create Iframe inside a container DIV and assign the URL.
<div class="PopupOuterDiv" runat="server" id="PopupOuterDiv" style="display:none;"></div>
<div class="PopupInnerDiv" runat="server" id="PopupInnerDiv" style="display:none;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="PopoupTitle">
<td id="PopoupTitle"></td>
<td align="right">
<input class="PopoupButton" type="Button" value="X" onclick="closePopup();" />
</td>
</tr>
<tr style="height:8px;" ><td></td></tr>
<tr>
<td colspan="2">
<iframe id="PopupIframe" src="" runat="server" height="300px" width="480px"></iframe>
</td>
</tr>
</table>
</div>
JavaScript to open and close the Popup
function closePopup()
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = 'none';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = 'none';
}
function openPopup(PopupTitle, PopupURL)
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = '';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = '';
document.getElementById('PopoupTitle').innerText = PopupTitle;
document.getElementById('<%=PopupIframe.ClientID%>').src = PopupURL;
}
Content Page
Call the popup window from any content page.
openPopup('My Custom Popup', '../aspx/User.aspx');
I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.
I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either
Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.