I would like to make a Dropdownmenu, but It is not that easy, because I am working with panels.
This is my menu. I've got the nav= menu and then I got a panel for the menu and one for the submenu. The submenupanel is not displayed by default.
Now I wan't a block which comes down, when I hover over the pnlMenu.
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
</div>
This is my css code which I have. What I also need is a selector which changes an other div. I don't know if it is really posssible that it works like that, but isn't anything which should display the Dropdownmenu, I only wanted to look if I can select like that.
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
Because I am working with the masterpage, there's code which gets generated.
This is my html code:
This will not work
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
because it assumes that #pnlSubmenu is a child of .menu_link which it is not.
In fact #pnlSubmenu is a sibling of #pnlMenu so you may need to rethink the approach.
I suspect that the interactivity may need javascript given the HTML's current structure as there is no CSS selector that will allow you to affect the submenu div by hovering a link in the the first menu div
Related
I am using <asp:ScriptManager> and link in master page which require <Form> tag but issue is here that i have included already <form> tags in all the child content pages.
I know i just need to include <form> tag just in master page and remove from all child pages but unfortunately its not possible because there are so many content child pages which connected to this master page and also each child <form> tags contains different classes like horizental inline etc.
So i just want that i just want to include <form> tag only in master page if form tag not exist in content/child page.
If i use both in master and child/content, its showing error, its must 1 form tag.
Master page
<form id="Form2" runat="server" novalidate="" role="form" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h3>Session Idle: <span id="secondsIdle"></span> seconds.</h3>
<asp:LinkButton ID="lnkFake" runat="server" />
<cc1:modalpopupextender id="mpeTimeout" behaviorid="mpeTimeout"
runat="server" popupcontrolid="pnlPopup" targetcontrolid="lnkFake"
okcontrolid="btnYes" cancelcontrolid="btnNo"
backgroundcssclass="modalBackground" onokscript="ResetSession()">
</cc1:modalpopupextender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Session Expiring!
</div>
<div class="body">
Your Session will expire in <span id="seconds"></span> seconds.<br />
Do you want to reset?
</div>
<div class="footer" align="right">
<asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
<asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
</div>
</asp:Panel>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</form>
I just want to use form tag only if not in child page. how can i tackle this situation,
Thanks,
As far as I know, the ASP.NET WebForms do not support multiple form elements with runat="server" attribute. So, there is no work around to this as it is something hard coded into the project.
Anyhow, if there are suppose a thousand child pages that also have form element with runat="server" attribute, and you are too lazy to replace all of them one by one, Then you can use Visual Studio's text replacing feature and can change the form element to a div element. For that you just need to press Ctrl + H which will open a little window on top right corner asking for the text that you want to replace and another text that you want to have instead of that. See:
Notice in the screenshot I have shared, I am selecting Current Project from the drop down menu. This will search and replace every text with <form to <div in the project.
And once it has replaced all the tags starting with <form to <div then you can modify the closing text of the form tag by replacing </form with </div. Now you only have left one page.
Now, there is only the MasterPage left that you can replace back the div to form. So, this way you are manually changing only one page.
You need to click the second button that will replace all the values. There are other options to handle the find and replace that you can use as well. But, unfortunately, you cannot have multiple form tags with runat="server" attributes on it.
PS
It won't cause problem with the designs that you have and classes such as horizontal inline will be applied to those divs instead of forms and will be rendered same as the forms were being rendered on the UI.
It is always a good approach to take a backup before modifying things in bulk or changing something that is crucial and could cause a lot mess.
I am using asp.net. and I have a div which should be organised in dynamic manner. Meaning I want to organise the div in dynamic manner. My divs are
<div id="LatestReviews" runat="server">
LatestReviews
</div>
<div id="PopularListings" runat="server">
PopularListings
</div>
<div id="Headlines" runat="server">
Headlines
</div>
<div id="LatestEvents" runat="server">
LatestEvents
</div>
<div id="NewJobs" runat="server">
vNewJobs
</div>
<div id="LatestClassifieds" runat="server">
LatestClassifieds
</div>
<div id="NewWishes" runat="server">
NewWishes
</div>
<div id="SalesAndDiscounts" runat="server">
SalesAndDiscounts
</div>
I want the LatestClassifieds should come in first place and LatestReviews to Come in place of LatestClassifieds and so on and so forth. I want to do it by C# code. I have a datatable which has the sequence of ordering div for the page. According to the Sequence I want to organise DIV. I Find to cut paste for the textbox but not the asp control. Is there any solution for cut paste Divs in C#?? any solution are surely appretiated.
There is something else you can try to archive the same;
Add the Sequence/Priority column in you DB for each of the category.
Then wile fetching the data for DB short as per Sequence/Priority and then add it to HTML using c# code.
The advantage here is that you will be able to change the location/occurrence of any item without changing you code.
Hope it helps...!!!
I'm not able to hide the in code. I have given Id to div also I have given runat server property to it but on running the code Div is visible . Please help.
My code is like this :
<a href="RoomTypeView.aspx">
<div class="dash-thum-bg" id="rt" runat="server">
<img src="../App_Themes/Akeel/images/thumb-1.gif" />
<span>Room Type</span>
</div>
In code I am writing
rt.visible=false
Try to wrap your div around a panel. Then u can hide the panel in the code behind.
<asp:Panel runat="server" id="divtohide">
<a href="RoomTypeView.aspx">
<div class="dash-thum-bg" id="rt" runat="server">
<img src="../App_Themes/Akeel/images/thumb-1.gif" />
<span>Room Type</span>
</div>
</asp:Panel>
code behind
divtohide.visible = false;
You can use javascript -
function hideMyDiv()
{
document.getElementById('rt').style.visibility="hidden";
}
Add a style -
.hidden {
display:none;
}
Now call it by codebehind
i have a accordion control(using jQuery) on the page. When I insert accordion into an updatepanel, set a button outside the updatepanel as its trigger and click on the button the accordion stops working. If I remove the updatepanel, it starts working.
Why?
How can i fix this error?
Do i have to re-instantiate the accordion script/plugin, If yes then how?
<script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
},
onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="applemenu">
<div class="silverheader">Dynamic Drive</div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader">JavaScript Kit</div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader">CSS Drive</div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader">Coding Forums</div>
<div class="submenu">
Some random content here<br />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
When elements are removed from the DOM their event handlers go with them, even if you replace those with identical elements. You need to re-initialize the event handlers, or look into using jQuery's .live() functionality.
You need to maintain the structure of the Jquery widget.
I achieved what you want by surrounding the controls I want within the sub-divs of the accordion div with update panels.
Hence, you should maintain the following structure:
Accordion Div
Heading 3 caption for the sub div 1
div 1
update panel
div 1 contents that will be refreshed using Ajax technology.
And so on, of course you need the Script Manager so don't forget to insert one :)
I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<h1>My Header Information</h1>
<hr />
<p>Some text for everyone!</p>
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1 tag but in other cases I could have 1 tag, 1 tag, 3 tags, and a HTML table. How can I make that work?
Yes, you're thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.
Now in your case, you'll probably want the text to be customizable, am I right? So you'll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the #Control directive) will look something like:
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<asp:Label runat="Server" id="label1" />
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
Alternatively, you could do two labels -- one for the header, one for the main text. Or even just have the header be runat="Server" itself.
Next, you'll write a little bit of code in the .ascx code-behind file to expose the label's (or labels', as the case may be) Text property. This would probably look something like:
public string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
If you're in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.
Edit
Addressing the update to the question:
One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1
tag but in other cases I could have 1
tag, 1
tag, 3 tags, and a HTML table. How can
I make that work?
The exact same technique, assuming that the content you're referring to is what's within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you're using MVC.
Another left field approach - create a user control but use jQuery to round the corners for you:
<div class="roundcorner">
<h1>My Header Information</h1>
<hr />
<asp:Label runat="Server" id="label1" />
</div>
Issue the following in javascript:
$(document).ready(function(){
$('div.roundedcorner').corner();
});
This eliminates all your extra div's and you can still have a user control that you use at will on the server.
(I know I'm going to get in trouble for this from someone)
If its just static content you can just put it in a separate file and INCLUDE it
<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->
(File name, extension and location are arbitrary)