toggle effect horizontal in td using JavaScript

toggle effect horizontal in td using JavaScript - javascript

In my application has master page. One of the content place holder has design as
<table>
<tr>
<td width='170px'> -------td1
<table>... header label</table>
</td>
<td width=85%>--------------td2
</td>
My requirement is
when click on header label td1's width set as 1% and td2's width set as 99% and the page adjust automatically as per width.
when again click the header label the width need to set as original .
how to achive this...
Here's what I have so far:
$(function () {
$('.style1').click(function () {
$(".style2").slideToggle();
});
});
<style type="text/css">
.style1 { width: 182px; }
.style2 { width: 99%; }
</style>

$(function () { $('.lblStyle').click (function () {$(".style1").slideToggle();}); });
<style type="text/css">
.style1
{
width: 12%;
}
.lblStyle
{
width: 99%;
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td valign="top" align="center" class="style1">
<table border="0" cellspacing="0" cellpadding="0" style="width: 170px">
<tr>
<td style="width: 170px">
<asp:Image ID="imgHeader" runat="server" ImageUrl="~/App_Themes/RIBO/Images/logo_header.png"
Width="170px" Height="80px" Style="display: none;" />
</td>
</tr>
<tr>
<td class="menu_header">
<asp:Label ID="lblMenuHeader" runat="server" Text="" EnableTheming="false" Width="170px" />
</td>
</tr>
<tr>
<td>
<ul class="inner_menu">
<asp:Panel ID="Panel2" runat="server" Width="170px" Height="100%">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</asp:Panel>
</ul>
</td>
</tr>
<tr>
<td style="background-image: url(../RIBO/App_Themes/RIBO/Images/hd_menu_bottom.png);
background-repeat: no-repeat;">
</td>
</tr>
</table>
</td>
<td width="95%" valign="top" align="left">
<asp:Label ID="lbldummy" runat="server" Text="Test" CssClass="lblStyle"></asp:Label>
<iframe runat="server" id="ifrmMainContent" name="ifrmMainContent" src="MyPage.aspx"
frameborder="0" marginheight="10px" marginwidth="1px" style="overflow: scroll;
height: 800px; width: 100%; margin-left: 0px; margin-top: 0px;"></iframe>
</td>
</tr>
I have achieved with the above code. with two styles. Instead of lbldummy how to use image with appropriate arrow marks!(If hide will display right arrow, when want to hide left indicate arrow).

Related

Displaying '.hidden' elements using JQUERY

I have this asp and HTML code:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td rowspan="4">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="7">
<input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" />
</td>
</tr>
<tr>
<td>text:</td>
<td rowspan="4">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>text:</td>
<td><%# Eval("Text") %></td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Javascript code:
$('.toggleRow').on('click', function () {
$(this).closest('table').children('.hidden').show();
return false;
});
When batten with class toggleRow clicked the javascript fired but I do not get any result (i.e I expect the hidden row will be displayed but the not).
Any idea why?

Since you have a table and tr, even though you are not creating tbody the browser will put all the tr elements in a tbody, so your selector $(this).closest('table').children('.hidden').show(); will not be able to find the tr as children of the able.
So try
$(this).closest('table').find('tr.hidden').show();
You also will have to add the toggleRow class to the button
<input type="button" id="btnToggleRow" value="B" style="height: 30px; position: relative; float: left;" class="toggleRow"/>

To display the row which are hidden use below code.
$('.toggleRow').on('click', function () {
$('.hidden').css("display","block");
return false;
});

how to allow a script to fire just after clicking on a link to show a dialog

I am working on a web application that will show a dialog box after clicking on a link. the problem is that the dialog height is very small when using IE10 as follow:-
Now the whole problem is with the inner style height = 45px. Because if I manually change the value to be 450px instead of 45px using the F12 developer tools, the dialog will be rendered correctly.
after trying many approaches the only option that works is to set a timer that fires each 2 seconds to reset the height, as follow:-
var interval = null; //Defines the start interval variable
$(document).ready(function () { // jQuery needed for this
/* People Picker Fix Starts */
if (navigator.appVersion.indexOf("MSIE 10") > -1) { // IE 10 Specific condition for People Picker Bug
interval = setInterval(adjustPeoplePicker, 2000);
}
/* People Picker Fix Ends */
});
function adjustPeoplePicker() {
if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
$('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
$('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
//clearInterval(interval);
}
}
but i do not want to keep firing the script each2 seconds , so i modify my script to only fires when a user clicks on a link that have an imag, as follow:-
<script type= "application/javascript">
var interval = null; //Defines the start interval variable
$(document).ready(function () { // jQuery needed for this
$('a img').on('click', adjustPeoplePicker); /* People Picker Fix Ends */
function adjustPeoplePicker() {
if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
$('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
$('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
//clearInterval(interval);
}
}
}});
</script>
but this will not work, and the height will not be changed.
so can anyone advice on this please?
Thanks
EDIT
here is part of the markup for the dialog :-
<tbody><tr>
<td width="16" height="16"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
<td width="100%" height="20"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
<td width="15" height="8"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
</tr>
<tr>
<td width="15"> </td>
<td width="100%" height="20"><span><table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody><tr style="width: 100%;">
<td class="ms-descriptiontext" style="white-space: nowrap;"><label for="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox"><b>Find</b> </label></td><td style="width: 100%;"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryTextBox" class="ms-pickersearchbox" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox" accesskey="S" style="width: 100%;" onkeydown="var e=event; if(!e) e=window.event; if(!browseris.safari && e.keyCode==13) { document.getElementById('ctl00_PlaceHolderDialogBodySection_ctl07_queryButton').click(); return false; }" type="text" maxlength="1000" alwaysenablesilent="true"></td><td><div class="ms-browseimage"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryButton" title="Search" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryButton" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderDialogBodySection$ctl07$queryButton", "", true, "", "", false, false))' type="image" alt="Search" src="/_layouts/15/images/browse.png"></div></td><td><select name="ctl00$PlaceHolderDialogBodySection$ctl07$viewPicker" class="ms-pickerdropdown" id="ctl00_PlaceHolderDialogBodySection_ctl07_viewPicker">
<option value="">List View</option>
<option value="">Detailed View</option>
</select></td>
</tr>
</tbody></table></span></td>
<td width="15"> </td>
</tr>
<tr><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td><td class="ms-descriptiontext"><span id="ctl00_PlaceHolderDialogBodySection_ctl09"></span></td><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td></tr>
<tr>
<td width="15"> </td>
<td class="ms-descriptiontext" style="color: red;">
<span id="ctl00_PlaceHolderDialogBodySection_ctl08"></span>
</td>
<td width="15"> </td>
</tr>
<tr height="100%">
<td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
<td height="100%">
<table width="100%" height="100%" class="ms-pickerresultoutertable" id="ResultOuterTable" style="height: 202px;" cellspacing="0" cellpadding="0">
<tbody><tr height="100%">
<td class="TreeContainer" id="SearchArea" style="height: 100%; vertical-align: top; display: block;">
<div class="ms-pickertreediv" id="MetadataTreeControlTreeSearch" style="height: 45px;"><ul class="TmtTree" id="MetadataTreeControlTreeSearch_ul"><li id="0"><div class="treenodediv" id="_Div2"><span id="_ImgContainer"><img width="16" height="1" tabindex="-1" class="ti" src="/_layouts/15/Images/blank.gif"></span><img width="4" height="20" title="Icon" id="ICN_2" alt="Icon" src="/_layouts/15/Images/blank.gif"><span class="tnn" id="TXN_2"><span class="ms-input" id="TXC_2"><span tabindex="0" id="LBL_2"></span><input tabindex="0" class="ms-input display-none" id="IPT_2"></span></span></div><ul id="0_ul"></ul></li></ul></div>
</td>
<td class="TreeContainer" id="BrowseArea" style="width: 0px; vertical-align: top; display: none;">
<div class="ms-pickertreediv" id="MetadataTreeControlTreeBrowse" style="height: 0px;"></div>
</td>
<td class="ms-verticalAlignTop" id="ResultArea" style="width: 60%; vertical-align: top;">
<div class="ms-pickerresultdiv" id="resultcontent" style="height: 45px;"><table class="pickerresulttable" id="resultTable" style="width: 100%; border-collapse: collapse; background-color: white;" hidefocus="true" border="0" cellpadding="0" cellspaceing="0" EditorControlClientId="ctl00_PlaceHolderDialogBodySection_ctl05"><tbody><tr class="ms-pickerresultheadertr"><th class="ms-ph" SortOrder="Asc">Display Name</th><th class="ms-ph" SortOrder="Asc">E-mail Address</th><th class="ms-ph" SortOrder="Asc">Title</th><th class="ms-ph" SortOrder="Asc">Department</th><th class="ms-ph" SortOrder="Asc">Presence</th><th class="ms-ph" SortOrder="Asc">Work Phone</th><th class="ms-ph" SortOrder="Asc">Location</th></tr><tr tabindex="0" class="ms-alternating" id="row0" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|..." DisplayText="test" IsResolved="True" Description="i:0#.w|ddd\**"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test#test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Network Support Manager</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Network</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test2#test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|addd"><td class="ms-pb">ttttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">test#test.net</td><td class="ms-pb">Network Support Manager</td><td class="ms-pb">Network</td><td class="ms-pb">test#test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row1" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|test" DisplayText="tttt" IsResolved="True" Description="i:0#.w|test"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Head of Support</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">IT Services</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|test"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="tttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">FAl-test.net</td><td class="ms-pb">Head of Support</td><td class="ms-pb">IT Services</td><td class="ms-pb">test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row2" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|atttt" DisplayText="tttt" IsResolved="True" Description="i:0#.w|attt"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">COO</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Directors</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|ad-tttt"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">tttt</td><td class="ms-pb">COO</td><td class="ms-pb">Directors</td><td class="ms-pb">tt</td><td class="ms-pb"></td>
//code goes here for the dialog options
</td></tr></tbody></table></div>
</td>
</tr>
</tbody></table>
</td>
<td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
</tr>
<tr>
<td height="14"><img width="1" height="5" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
</tr>
<tr id="ctl00_PlaceHolderDialogBodySection_EditorRow" style="display: none; position: absolute;">
<td width="15"> </td>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td><input name="ctl00$PlaceHolderDialogBodySection$AddSel" disabled="disabled" class="ms-NarrowButtonHeightWidth" id="ctl00_PlaceHolderDialogBodySection_AddSel" accesskey="A" onclick="addSelected_Click();" type="button" value="Add ->"></td>
<td width="10"><img width="4" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
<td width="100%"><span id="ctl00_PlaceHolderDialogBodySection_ctl05" aria-live="polite" aria-relevant="all" style="width: 100%; display: inline-block;" showentitydisplaytextintextbox="0" eeaftercallbackclientscript="" invalidate="false" allowtypein="false" showdatavalidationerrorborder="false" prefercontenteditablediv="true" moreitemstext="More Names..." allowempty="1" nomatchestext="<No Matching Names>" value="" removetext="Remove" editoroldvalue=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$hiddenSpanData" id="ctl00_PlaceHolderDialogBodySection_ctl05_hiddenSpanData" type="hidden" value=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$OriginalEntities" id="ctl00_PlaceHolderDialogBodySection_ctl05_OriginalEntities" type="hidden" value="<Entities />"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityKey" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityKey" type="hidden"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityDisplayText" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityDisplayText" type="hidden"><table class="ms-usereditor" id="ctl00_PlaceHolderDialogBodySection_ctl05_OuterTable" style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tbody><tr valign="bottom">
<td valign="top"><table style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td id="ctl00_PlaceHolderDialogBodySection_ctl05_containerCell"><div tabindex="0" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_upLevelDiv" role="textbox" aria-haspopup="true" style="height: 20px; -ms-overflow-x: hidden; -ms-word-wrap: break-word;" spellcheck="false" aria-multiline="true" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onclick="onClickRw(true, true,event,'ctl00_PlaceHolderDialogBodySection_ctl05');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" ondragstart="canEvt(event);" oncopy="docopy('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onpaste="dopaste('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onfocusin="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onfocusout="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" name="upLevelDiv" autopostback="0" prefercontenteditablediv="true" rows="1"></div><textarea name="ctl00$PlaceHolderDialogBodySection$ctl05$downlevelTextBox" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_downlevelTextBox" style="width: 100%; display: none; position: absolute;" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onfocus="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" rows="1" cols="20" autopostback="0" renderascontenteditablediv="true"></textarea></td>
</tr>
</tbody></table></td>
</tr><tr>
<td><span class="ms-error" id="ctl00_PlaceHolderDialogBodySection_ctl05_errorLabel"></span></td>
</tr>
</tbody></table></span></td>
</tr>
</tbody></table>
</td>
<td width="15"> </td>
</tr>
</tbody>

To fix the problem, why not just use CSS:
.ms-pickerresultdiv[style]{
height:auto !important;
max-height:350px !important;
}
Or just
.ms-pickerresultdiv[style]{
height:350px !important;
}
If you need to increase the size of the parent table cell, this should do it:
#row2 td:last-child{
height:350px;
}
Or based on your script, override these two elements:
#MetadataTreeControlTreeSearch,
#resultcontent[style]{
height:350px !important;
}
Although I can't find the #MetadataTreeControlTreeSearch element within your posted code.
Here's a fiddle with all that
Either of those should override the inline style.

a style property on an element will not be set by the browser automatically. some other part of your application code is setting the div's style height property to 45px. the style property has priority over other stylesheets.
try to isolate and remove that code.

how to switch two tables on different image click on first row using html

I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?

Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});

You could write your HTML like this:
<div id='english' style='display: none'>
[your complete english HTML]
</div>
<div id='french' style='display: block'>
[your complete french HTML]
</div>
And for your buttons:
<img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;">
For the french version. The english switches the display attribute, of course.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button id="bt1">In English</button>
<button id="bt2">In French</button>
<div>
<div id="one">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>English</td>
<td>c#</td>
<td>MVC</td>
</tr>
<tr>
<td>English</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>English</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
<div id="two" style="display:none">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>French</td>
<td>PHP</td>
<td>MVC</td>
</tr>
<tr>
<td>French</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>French</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
</div>
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('one','two');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('two','one');
});
</script>
</body>
</html>
Instead of button you can replace your image.
<div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>

Jquery click runs only once on web page - Web Forms C#

On my login page I want to display a simple table row that says loading. I put a simple script tag with a jquery function in the aspx page to show the table row when the login button is clicked. Everything works fine the first time the user clicks the login button. The login button and table row to display are inside an UpdatePanel container.
When the user clicks login again , with good or bad credentials, the table row does not display.
Here is my code on the page:
<%# Page Language="c#" AutoEventWireup="false" StylesheetTheme="Theme1" Codebehind="Default.aspx.cs" Inherits="....Default" %>
<%# MasterType VirtualPath="~/..." %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css" media="screen">
* {margin:0;padding:0}
html,body{height:100%}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<div style="height: 100%; width: 100%; display: table; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td valign="middle" align="center">
<form id="frmLogin" runat="server" autocomplete="off">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="Panel1" runat="server" Width="371px" BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="upLogin" runat="server" RenderMode="block" UpdateMode="always">
<ContentTemplate>
<table cellpadding="0" width="100%" style="background-color: white" cellspacing="0" border="0">
<tr>
<td colspan="2" align="right" class="reportHeader" style="height: 30px; padding-right: 10px">
<%= this.VersionName %>
</td>
</tr>
<tr>
<td valign="middle" style="height: 140px" class="Yellow">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td colspan="3"><b>Please Log In:</b></td>
</tr>
<tr>
<td>Username:</td>
<td><b><asp:TextBox Width="150" ID="txtUserName" runat="server" AutoCompleteType="Disabled" /></b></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox Width="150" TextMode="password" ID="txtPassword" runat="server" AutoCompleteType="Disabled" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="left" style="height: 30px; background-color: #f2dcac;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="bottom" style="padding-left: 5px">
<a class="menuLink" href="email.aspx">I forgot my password</a></td>
<td align="right" valign="bottom">
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" /></td>
</tr>
</table>
</td>
</tr>
<tr id="trInvalidLoginMessage" visible="false" runat="server">
<td align="center" colspan="2" style="background-color: #f2dcac;">
<font class="pageError">Invalid login. Please try again.</font>
</td>
</tr>
<tr id="trLoading" visible="False" style="display: none; text-align: center">
<td align="center" colspan="2" style="background-color: #f2dcac">
<font class="pageBodyBold"><h3>Loading...</h3></font>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
Sys.Application.add_load(page_load);
function page_load() {
var txt = $get('<%= this.txtUserName.ClientID %>');
txt.focus();
}
$(function () {
if (<%= Page.IsPostBack.ToString().ToLower() %> == false) {
$("#trLoading").css("display", "none");
$("#loading-div").css("display", "none");
}
$("#btnLogin").click(function () {
if ($("#trLoading").css("display") == 'none') {
$("#trLoading").css("display", "inline");
}
else {
$("#trLoading").css("display", "none");
}
});
});
</script>
</body>
</html>
Is it possible to get a jquery click event handler to work on the login button?

After some more searching, I found a solution posted in this answer.
Link to question
The solution was to use the OnClientClick attribute for the button and also disable submit behavior.
Code for button:
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Logging in...';" UseSubmitBehavior="False"/>

Open a ModalPopupExtender on an UpdatePanel using javascript

I'm trying to open a ModalPopup with JavaScript, and i've searched here on stackoverflow and the general advice seems be to use something like this:
$('#inputAdd').live("click", function () {
$('#addRow').show();
$find('<%=mpeIndications.BehaviorID %>').show();
});
Where #inputAdd is an html input image that i have in the ModalPopup, its objective is to show a row (#addRow) where a TextBox is shown. However, when i click on the #inputAdd button, it show the row, but then the ModalPopup hide, I think the reason maybe because there is an UpdatePanel that include the ModalPopup, I am right? In that case which may be a solution? I've putted some of the code I've in the .ascx. Thanks.
<table class="content-box">
<tr>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upAppointments">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" />
<asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;">
<table class="content-box">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>
<asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px">
<table style="width: 100%; border: 0;">
<tr>
<td style="width: 30%; vertical-align: top;" rowspan="2">
<asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound"
DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" />
</td>
<td style="padding-left: 10px;" class="contentBox">
<table style="width: 100%;">
<tbody id="showTable">
<tr>
<td id="indicacionestd" runat="server">
Indicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
<tr>
<td id="contraindicacionestd" runat="server">
Contraindicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
</tbody>
<tbody style="display: none;" id="addRow">
<tr>
<td style="text-align: left; white-space: nowrap;" class="colSepGran">
Nombre:
</td>
</tr>
<tr class="filSepGranRA">
<td class="colSepGran">
<asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox>
<act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars"
FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName"
ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd"
title="Adicionar perfil">
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png"
id="inputAddSimple" title="Adicionar indicación" />
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit"
title="Editar perfil" />
</td>
<td>
<asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
</act:ModalPopupExtender>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>

Then try this approach:
Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)
<a href="#" style="display:none;visibility:hidden;"
onclick="return false" ID="dummyLink" runat="server">dummy</a>
Add the ID of the hidden link to the ModalPopupExtender
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground"
TargetControlID="dummyLink"
CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
Showing the modal popup
$find('MyMPE').show();
http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm

Model Dialog Asp.Net With Jquery

We Keep Coding

JavaScript is the programming language of the Web.

toggle effect horizontal in td using JavaScript - javascript

Related

Displaying '.hidden' elements using JQUERY

how to allow a script to fire just after clicking on a link to show a dialog

how to switch two tables on different image click on first row using html

Jquery click runs only once on web page - Web Forms C#

Open a ModalPopupExtender on an UpdatePanel using javascript

Categories

Resources