Text is not visible in IE6 - asp.net-mvc-2

I'm doing a site (asp.net mvc2) that should work in IE6 as well.
On a page I inject a control as partial view.
<div id="LocationContainer">
<% Html.RenderPartial("../Shared/EditTemplates/ContactInfoTemplate",
new ContextAwareViewModel<ContactInfoViewModel>()
{
ProcessStep = ProcessStep.Configure,
Model = Model.ContactPerson
}); %>
</div>
It contains following snippet of code:
<div style="margin-bottom: 10px;">
<%= Html.CheckBox(Model.Model.ContactType + ".IsDTBranch",
Model.Model.PersonViewModel.IsTDBranch,
new { #class = "tdBranchChkBox"}) %>
<%= Html.Resource("Resources, ThisIsTDBranchLabel") %>
</div>
That gives in the end this html:
<div style="margin-bottom: 10px;">
<input class="tdBranchChkBox" id="EventContact_IsDTBranch"
name="EventContact.IsDTBranch" type="checkbox" value="true" />
Il s'agit d'une succursale de la TD
</div>
After all of this IE6 doesn't render text. But text is there and appears when I start to select area where it should be.
Does anybody know how it can be cured?
Thanks.

Long story short:
In this case, a height correction seems to have done the trick. The Holly Hack involved adding the following code to the CSS file:
/* Hides from IE5-mac */
div#content
{
height: 1%;
}
/* End hide from IE5-mac / /— Holly Hack for IE 6 Peekaboo bug —*/
The explanation for this code can be found on the John and Holly website.
Taken from here http://www.bpwrap.com/2005/08/the-internet-explorer-6-peekaboo-bug/
Thanks a lot author.

Related

Why are my dots removed when i post a form?

When I post my form, the points in my double are removed.
Does anyone have any idea what this is?
My model field:
[Display(Name = "Domeinnaam prijs:")]
public double DomainNamePrice { get; set; }
My HTML to fill the field in a form:
<div class="row">
<label class="col-lg-3" style="margin:auto; font-size: 120%;" asp-for="DomainNameLine"></label>
<div class="col-lg-9">
#Html.CheckBoxFor(i => i.DomainNameLine, new {#id = "DomainNameCheckbox", #name = "DomainNameLine", #onclick = "DomainNameCheck()"})
<span asp-validation-for="DomainNameLine" class="text-danger"></span>
</div>
</div>
<div id="DomainNameField" style="display:none;">
<div class="row">
<label class="col-lg-3" style="margin: auto; font-size: 120%;" asp-for="DomainNamePrice"></label>
<div class="col-lg-9">
<input asp-for="DomainNamePrice" class="form-control" />
<span class="text-danger" asp-validation-for="DomainNamePrice"></span>
</div>
</div>
</div>
For example, when I enter 14.99. I get 1499 as a result.
The form field
The result
Can someone help me?
Set this in your web.config
<system.web>
<globalization uiCulture="en" culture="en-US" />
You appear to be using a server that is setup with a language that uses comma's instead of decimal places. You can adjust the culture to one that uses the comma's in a way that your application is designed, such as en-US.
or you can add this statement on the page:
<%# Page uiCulture="en-US" culture="en-US" %>
Hope this helps.

CoffeeScript eco - run code on event

I have the following code inside index.eco
<% for drawing, index in #drawings: %>
<li class="span4 well">
<div style="margin-bottom: 10px;">
<h3 style="margin-top: 0;"><%=drawing.name%></h3>
</div>
<div>
<a href="#/drawings/<%=drawing.id%>">
<img src="<%=drawing.cache%>" style="background-color: white; border: 1px solid #ddd">
</a>
</div>
<div style="margin-top: 10px; text-align: right;">
<button class="btn btn-danger delete" data-id="<%=drawing.id%>" style="display:inline;">Delete</button>
</div>
</li>
<% if (index + 2) % 3 is 0: %>
This code is working fine, although I now want to have it executed, each time an event is triggered. I found how I can listen for events using this:
<% Spine.Model.bind('Model:fileLoad',(map) => console.log("triggered")) %>
Although I cannot find how I can apply the same method, in order to execute the first snippet when the event is fired. I tried adding a function signature on top of snippet and then inline it, as well as some other approaches but none is working. The complete index file can be found here, although I guess that is not relevant. Any comments are welcome.
What this code does is populate the interface based on existing drawings. Although drawings only become available few seconds after the page has finished loading, so I want to execute this code once I make sure that the Models are available.
Update
I have added a function definition, although I am not sure if its correct. 'trig' is printed on event, although the view does not change.
<% #fetchModels= -> : %>
<% console.log("trig") %>
<% for drawing, index in #drawings: %>
. . .
<% end %>
<% Spine.Model.bind('Model:fileLoad',#fetchModels) %>
THe changes had to be done in the Controller rendering the index.eco file. From there I had to bind to an event, and when that event is fired call #render function.

How to Show or Hide the date using asp classic

Im using a form to give the user the option to show or hide the date on a webpage, either yes or no.
I am using cookies to store the option but i can find or figure out how to display or not display the date on the page.
I have been trying to process the yes or no option using an IF statement that will then be used as a css stylesheet for the webpage.
Maybe im going about it all wrong.
Regards
Trev
EDIT STARTS HERE
My code so far (not working, dont even know if im on the right track)
Code in the css/asp processing style sheet called styleCookieProcess.asp
<%
date= Response.Cookies("usedate")
If(date= "yes") then
Response.Cookies("wantdate") = "date()"
ElseIf(date= "no") then
Response.Cookies("wantdate") = "None"
End If
%>
And this is the code in my Webpage:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleCookieProcess.asp">
<title>About Us</title>
</head>
<body>
<p>Current Date <%
Response.Write(Response.Cookies("wantdate"))
%></p>
<P ALIGN = "CENTER">
<IMG SRC = "Images\About_Us.png" HEIGHT = "250" WIDTH = "715">
</P>
<TABLE ALIGN = "CENTER">
<tr>
<th>
<DIV ALIGN = "CENTER">
<P>
We have been around the block and back and have the t-shirt to prove it!
The Glad Rag Team
</P>
</DIV>
</th>
</tr>
</TABLE>
</body>
</html>
Regards, Bubs
try this
<%
date= Response.Cookies("usedate")
If(date= "yes") then
Response.Cookies("wantdate") = "date()"
Else
Response.Cookies("wantdate") = "None"
End If
%>

iScroll 4 performance on iOS

I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.

updating dom text based on click in jquery

My Simple HTML Structure:
<html>
<body>
<p id="5">
My Text Qoted Here -
<span class="author">Author </span>
<br>
<span class="uptext">20</span>
<img class="im" class="upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
<img class="im" class="downimg"
src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
<span class="downtext">5</span>
</p>
</body>
</html>
as can be seen there are two images, and i want to change the count of the image based on which image is clicked.
i write the following jquery code for it:
$(function() {
$(".upimg").click(function(e) {
e.preventDefault();
alert("here1");
curr_val = $(this).closest(".uptext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".uptext").text(nos);
});
$(".downimg").click(function(e) {
e.preventDefault();
alert("here2");
curr_val = $(this).closest(".downtext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".downtext").text(nos);
});
});
But it does not seem to respond.
You can find the fiddle here
Your <img> tags have two class attributes:
<img class="im" class="upimg"
Try changing that to
<img class="im upimg"
Also, the closest() method returns the closest parent element, not an adjacent sibling, so to find the correct uptext element, you need to use:
$(this).prev().text()
you cant use 2 class attribute
you have to do like that
<img class="im upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />