Develop Reference

Onclick not this

I have created a function for a sidebar that slides down the first href when clicking on this and then anything that was not this would slide up. This worked fine until I needed to call the function using "onclick" which then meant not $(this) would not work as it can only call (this) . I am using tagbuilder so can only call one unique event listener.
JS
$(".foo > a").each(function () {
$(this).click(function () {
$(this).siblings(".sibling").slideToggle();
$(this).toggleClass("active");
$(".foo > a").not(this).siblings(".sibling").slideUp();
$(".foo > a").not(this).removeClass("active");
});
});
C#
a.MergeAttribute("onclick", "Click.call(this)");
Not this to target the sidebar and slide not this up

To not add CSS class to the current target, just remove the current CSS and add to its siblings.
$(".foo > a").click(function () {
$(this)
.removeClass('active')
.siblings()
.addClass('active');
});
.foo {
display: flex;
}
.foo a {
border: 1px solid black;
color: black;
padding: 15px;
margin: 15px;
text-decoration: none;
}
.foo a.active {
background: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">
Link1
Link2
Link3
</div>

Highlighting duplicate <ul></ul> menu navigation's

I am attempting to design a site for someone who wants both the Contact Us page in the bottom portion of the menu and above their logo in the top right corner.
As such here is the client code:
This is the top menu above the logo:
<ul class="topnavigation" style="width:1000px; border-bottom-style: none; height: 40px;">
<li class="highlight" style="width:100px; height: 40px; font-family:Calibri; float:right;">Contact Us</li>
<li style="width:100px; height:40px; font-family:Calibri; border-left:1px solid white; border-right:1px solid white; float:right;">Home</li>
</ul>
And this is the menu under the logo:
<ul class="navigation" style="width:1000px; height:40px; border-bottom:none;">
<li style="width:150px; font-family:Calibri; height: 40px; border-right:1px solid white;">About Us</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Applications</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Features and Benefits</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Technical Specs</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Contact</li>
<li style="width:145px; font-family:Calibri; border-right:none; height: 40px;">Recognition</li>
</ul>
To highlight which page the user selected I used some javascript (which I have been trying to learn lately) and CSS
JavaScript:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$('.navigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
});
CSS:
ul.navigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.navigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.navigation li a:last-child{}
ul.navigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.navigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.navigation li.highlight a
{
color:white;
}
ul.navigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
a, a:visited
{
color:#000;
}
ul.topnavigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.topnavigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.topnavigation li a:last-child{}
ul.topnavigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.topnavigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.topnavigation li.highlight a
{
color:white;
}
ul.topnavigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
With this implementation if the user clicks on any page it highlights the page. But if they click on the Contact Us in the top corner is only highlights the Contact Us in the bottom menu and not the top menu. I found that strange and is a question in itself for me because I would expect it to highlight the top portion and not the bottom portion. (If anyone can answer that as well I would appreciate it - because I don't see how it is recognizing it).
So, how can I have both the top contact page navigation and bottom contact page navigation highlight at the same time. I am assuming that this will be done with java script and not on the C# code.
I have attempted to combine the two such as
$('.navigation li a' & '.topnavigation li a').each(function () {
but realized this probably wouldn't work because it is indexing. Although I am not sure. I attempted to set them as an "if equivalent" so if both href were the same then it would highlight them. Nothing I have done has worked (although amusingly I have gotten some odd results highlighting other navs).
So, any suggestions? Point me in the right direction? Something I am not seeing or how can this be done? Is this going to be needed to be done in C#? Can JavaScript do it?
Please let me know. This is the first question I have asked so I am frustrated on this.

You really don't need an each here, nor do you need to combine selectors unless you're doing something special based on their root class. You just need a way to match things up. Here is a demo - http://jsfiddle.net/jayblanchard/AEY5h/
EDIT: The original code still works (you need to remove e.preventDefault(); for your site)
$('li a').click(function(e) {
e.preventDefault(); // just for this demo
var thisHREF = $(this).attr('href'); // get the href of the clicked item
$('li').removeClass('highlight'); // remove all the classes
$('a[href="' + thisHREF + '"]').closest('li').addClass('highlight'); // add the class to the items that have the same href
});
To highlight the elements where your page matches up add the following (outside of the above block)-
var currentPage = location.pathname.substring(1);
$('a[href="' + currentPage + '"]').closest('li').addClass('highlight'); // adds highlight to current page element
In the fiddle I have replaced the location info with jsfiddle's info so that both Contact Us elements are highlighted - http://jsfiddle.net/jayblanchard/AEY5h/1/

You can combine jQuery selectors using a comma like this:
$('.navigation li a, .topnavigation li a').each(function () {
Notice that the comma is included inside the single quotes.

jQuery errors, Remove default .highlight class from list-items
In your .topnavigation menu, don't provide preselected .highlight classes.
You have a preselected item with class .highlight, which may be why it appears that your script is working to highlight the item in your .topnavigation menu, but not your .navigation menu.
Also, your jQuery has some errors and I recommend combining selectors since the .each() function is the same for both.
This corrected version should do the trick (if there are no preselected items with .highlight):
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a, .navigation li a').each(function () {
if (str.indexOf($(this).attr('href').toLowerCase()) > -1) {
$(this).parent().addClass("highlight");
}
});
});
Example JSFiddle: http://jsfiddle.net/gfullam/0rppzomt/

The correct way to combine multiple selectors into one with jQuery is not like this:
$('.navigation li a' & '.topnavigation li a')
but rather like this:
$('.navigation li a, .topnavigation li a')
Here's a link to more documentation on the multiple selector usage. Make that change in your javascript and you should properly be selecting all the elements you're trying to target.

javascript/jquery modal popup dialog MVC 4 / render partial view

I have been using the DevExpress PopupControl. They look nice and pretty but they do not display the scrollbars on iOS/Android devices. So I want to come up with an alternative. My immediate use is just for displaying a partial view, read only and a close button.
I am not familiar with jquery so I am having a hard time piecing together all the different posts about this topic.
My index.cshtml is a portal with many different partial views. One of the partial views is a list of clients. The client name is a link to client detail. This is where I need the popup dialog.
Partial view with client list (note the link calls a javascript function passing the ID I want to view:
<table style="text-align: left;">
#if ((Model != null) && (Model.Items != null))
{
foreach (WebMVC.Models.VisitDetails p in Model.Items)
{
sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');
<tr>
<td style="width: auto">
#Html.DevExpress().HyperLink(
settings =>
{
settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
settings.Properties.Text = #p.NameNumZone;
settings.Properties.ClientSideEvents.Click =
string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
}
).GetHtml()
</td>
</tr>
}
}
</table>
current javascript in index.cshtml that handles the popup:
<script type="text/javascript">
var _clientId;
function MethodClient(clientid) {
_clientId = clientid;
popClient.PerformCallback();
popClient.Show();
}
function OnBeginCallbackClient(s, e) {
e.customArgs["clientid"] = _clientId;
}
<script type="text/javascript">
popClient is the current dialog that I want to replace. I would like the dialog to be a specific height regardless of the content size.
example of the partial view to be displayed in the dialog:
#model WebMVC.Models.ClientDetail
#{
DateTime now = DateTime.Today;
int age = now.Year - Model.Birthdate.Year;
if (Model.Birthdate > now.AddYears(-age))
{
age--;
}
string sBirthdate = Model.Birthdate.ToShortDateString() + " (Age: " + age + ")";
}
<div id="contentDiv">
<span class="display-label">#Html.DisplayNameFor(model => model.NameNumZone):</span>
<span class="display-field">#Html.DisplayFor(model => model.NameNumZone)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Sex):</span>
<span class="display-field">#Html.DisplayFor(model => model.Sex)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Birthdate):</span>
<span class="display-field">#Html.DisplayFor(model => #sBirthdate)</span>
<br />
<span class="display-label">#Html.DisplayNameFor(model => model.Address):</span>
<span class="display-field">#Html.DisplayFor(model => model.Address)</span>
<br />
</div>
Controller:
public ActionResult Details()
{
string id = "";
if (!string.IsNullOrEmpty(Request.Params["clientid"]))
id = Request.Params["clientid"];
int clientid = 0;
if (id != "")
clientid = Convert.ToInt32(id);
ClientDetail cl;
if (clientid != 0)
ClientDetail cl = GetClientDetails(clientid);
else
ClientDetail cl = new ClientDetail();
return PartialView("ClientPopupPartial", cl);
}
Can I have one popup and render different partial views (maybe by adding a hardcoded param such as area = 1, area = 2 to the method client call)? Or should there be one popup for each area of detail (client, visit, directions...).

Example with a static dialog (No AJAX)
Define a div for your dialog content in a partial view:
#model ClientDetail
<h2>Client Detail</h2>
#Html.DisplayFor(m => m.NameNumZone)
#Html.DisplayFor(m => m.Birthdate)
...
Dialog trigger and partial view:
#p.NameNumZone
<div id="client-detail-modal">
#Html.Partial("ClientDetail", Model.Item)
</div>
Javascript:
$(document).ready(function() {
// setup the dialog
$("#client-detail-modal").dialog({
modal: true,
autoOpen: false,
height: 100,
width: 200
});
// bind the click event
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
$("#client-detail-modal").dialog("open"); // show dialog
});
});
Now if you have more than one client on a page you'll need a dialog per client. After a few clients it gets ugly. Instead, fill the dialog content dynamically.
Dynamic dialog content (AJAX)
Dialog container for your partial is empty initially:
<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>
Get the partial via AJAX:
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var clientId = $(this).data("clientId");
$.ajax({
url: "Client/Details/" + clientId,
type: "GET",
})
.done(function(result) {
$("#client-detail-modal").html(result).dialog("open");
});
});
Dynamic content (No AJAX)
Another way to fill the dialog would be to populate the data attributes of the trigger element then replace content using javascript.
<a href="#" class="dialog-trigger"
data-clientId="#p.Account"
data-birthdate="#p.Birthdate">#p.NameNumZone</a>
$(".dialog-trigger").on("click", function(event) {
var clientId = $(this).data("clientId");
var birthdate = $(this).data("birthdate");
// now replace content with new values
$("span.birthdate").text(birthdate);
});

Put this content in your style sheet
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
and in the code use the following
Open Modal
<div id="openModal" class="modalDialog" data-theme="c">
<div>
X
<h2>Pop up</h2>
<p>Pop up content. You can add your controls and content here</p>
</div>
</div>
this logic worked for me. Hope it works for you also.
Instead of using X for closing it is preferred you navigate to some parent page instead.

HtmlElement.invoke(“click”) doesn't work

I'm trying to create an application that can fill html form automatically using WebBrowser control(C#). There is a option list on the web page and I can get corresponding elements in the drop down box. But when I call the invokemember("click") methods, there is no responce.Below in the selection element of HTML
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
<a class="select" v="0" href="javascript:;">Not </a>
<a v="419000" href="javascript:;">insure</a></div>
Here is my codes,I find ScrollIntoView and Focus method is ok
HtmlElementCollection element_div=currentWindow.Frames[0].Document.GetElementsByTagName ("div");
foreach (HtmlElement item in element_div)
{
if (item.GetAttribute("classname") == "ddlcont" && item.Children.Count !=0)
{
item.Children[1].ScrollIntoView(true);
item.Children[1].Focus();
item.Children [1].SetAttribute("selected", "true");
item.Children [1].InvokeMember("Click");
}
}
I am appreciate that if anyone can help me to solve the problem. Thanks for your help!

You may have pasted wrong, but in your example div doesn't have a class.
Look:
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
should be
<div
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
(no > on the first line)

Try something like this instead:
Button1.GetType().GetEvent("OnClick").GetRaiseMethod().Invoke(Button1, EventArgs.Empty);
You may need to tweak the syntax a little bit, but this should put you on the right path.

'Please wait' screen between pages in C# ASP.NET. Best practice?

I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:
a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky
b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable.
c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event
d) Look into jquery or similar
Any thoughts?
Thanks!

I use Div with transparency, and its pretty cool and simple. Give it a try.
<div id="ModalPopup" style="visibility: hidden;">
<div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Procesando....
</div>
</td>
</tr>
</table>
</div>
To display the div, use this JavaScript:
document.getElementById('ModalPopup').style.visibility = 'visible';

I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.

you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.

please wait on page load in js can be used in any language give a try
in body place this code
<body>
<div id='loadingmsg' style='display: none;'></div>
<div id='loadingover' style='display: none;'></div>
</body>
in css
#loadingmsg {
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
}
#loadingover {
background: #23351f;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
js
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
showLoading();
}
else if (state == 'complete') {
hideLoading();
}
}
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingmsg').style.display = 'none';
document.getElementById('loadingover').style.display = 'none';
}
</script>