I’m working on asp.net web site in .net 4.0 framework (VS 2010) in Win XP SP2.
In site.master page I have a control and it is populated dynamically. All is well in populating the control, but when mouse is hover on this menu item, it displays correct, but it pushes the content of page below (in my example, the content of “MainContent” is pushed below).
I tried changing the property of div, but no joy.. any help will be much appreciated.
Content of Site.Master
**<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="mnuMain" runat="server" BackColor="#FFFFCC" CssClass="menu">
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
</asp:Menu>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="footer">
</div>**
Sample code to add it dynamically
**MenuItem item = new MenuItem();
MenuItem item1 = new MenuItem();
item.Text = "Main Menu";
item1.Text = "sub menu1";
item.ChildItems.Add(item1);
mnuMain.Items.Add(item);**
You have got a clear on the div that wraps the menu. Instead of clear the wrapper should be floated.
Is there any CSS relate to the mark up above?
Related
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I have several links on a page. I want to create a modal alert window for each link letting people know they are leaving the site. (It's a requirement for our website.) The code I am using will only allow one modal open on a page. Can you help me figure out how to get a different modals to open for each link?
Here's the javascript:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
The HTML:
<p><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>
The HTML for the Modal:
<div id="overlay">
<div>
<p align="left">You are about to leave the website.</p>
<p align="left"></p>
<p align="left">Click here to <a href='#' onclick='overlay()'>cancel</a></p>
</div>
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');
I have a ASP.NET MVC2 application with a master page. The master page renders the site layout divs as follows:
<div id="wrapper">
<div id="column1">
{contentplaceholder}
</div>
<div id="column2">
{contentplaceholder}
</div>
</div>
In my View, I would like to apply a classname to the wrapper div, so when viewing the homepage, the wrapper div would be:
<div id="wrapper" class="homepage">
</div>
or on the contact page it would be
<div id="wrapper" class="contact">
</div>
Ideally I would like to set this variable in the view aspx page, rather than in a controller action. What would be the cleanest way to achieve this? I was thinking something along the lines of:
In Master page:
<div id="wrapper" class="<%=WRAPPER_CLASS%>">
</div>
and then in View:
<% WRAPPER_CLASS = "contact"; %>
(obviously the above example doesn't work, but does anyone have any good ideas?)
Why not try this, within the master page:
<div id="wrapper" class="<asp:ContentPlaceHolder ID="page-class" runat="server" />">
</div>
and in the aspx view
<asp:Content ID="page-class-content" ContentPlaceHolderID="page-class" runat="server">
homepage
</asp:Content>