|
Please Provide me Book or Link which Covers Following Topics:
1. HTML/HTML5
a. HTML Page design using DIV based layout (no tables)
b. META Tags
c. Viewport
d. HTML5 Page design using <header>, , , and
2. CSS
a. Styling of elements using CSS
b. CSS properties – float, align, background, margin, padding, position, width, height
c. Pseudo classes
d. How to override CSS properties
e. Inline, embedded and external CSS
3. JavaScript
a. DOM Manipulation
i. Change content of the DIV based on some event
ii. Populate data inside a DIV using AJAX
iii. Show/Hide Elements
b. Event handlers
c. Timer functions – setTimeOut, setTimeInterval
d. AJAX and JSON
e. Cookies management
f. Debugging using Browser Console
g. JavaScript/CSS minification
Please suggest me link for the topics which are in bold letters.(Link/Book should cover Bold Marked Topics Mandatory.) Please reply asap.
|
|
|
|
|
|
www.w3schools.com/js/default.asp
|
|
|
|
|
I'm having a feedback box, which has to be at the right corner of the page and should scroll up and down with the scroll bar. But how to stop its flickering in IE and chrome CSS for that div is:
#showSurvey
{
position: relative;
width: 230px;
top: 190px;
float: right;
height: 60px;
}
and javascript to keep it at top is
var wintop = $(window).scrollTop(); if(wintop >= 190) {$('#showSurvey').css('top', (wintop + 10));} else{
$('#showSurvey').css('top', '190px');
}
Using this the div flicker a lot and it looks ugly can anyone please help
|
|
|
|
|
You need a trigger loaded on DOM Ready, to fire a function
So when the viewport changes, the trigger fires a function that changes the position of the box in the upper right corner.
So there are several bindings here. It took me awhile to figure out how to handle multiple events.
$("#txt_ac_state") is a hidden textbox that holds the state of the box, if the box is a tab on the right, or fully displayed.
$("#div_adContainer") is your box.
build_adContainer is a function that creates my box dynamically on the fly.
It's a really long piece of code to post, so I just posted the basics mechanics of my thought.
[Edit] Whoops, I posted the first prototype, this was the final bind code.
$(document).ready(function () {
viewportWidth = $(window).width(); viewportHeight = $(window).height; ac_state = 1;<br />
initiateBinding();
var $scrollingDiv = $("#div_adContainer");
$(window).scroll(function () {
$scrollingDiv
.stop()
.animate({
"marginTop": ($(window).scrollTop())
}, "fast");
});
});
function initiateBinding() {<br />
if (false === is_mobile_device()) {
build_adContainer();
window.addEventListener("resize", winResize);
document.body.onresize = bodyResize;
}
else {
build_adContainer_Moblie();
}
}
function winResize(e) {
viewportWidth = $(window).width(); viewportHeight = $(window).height;
obj_width = 180; obj_height = 612; obj_start = viewportWidth + obj_width;
ac_state = $("#txt_ac_state").val();
if (ac_state === "1") {
obj_x = viewportWidth - obj_width; obj_y = 150;
$("#div_adContainer").css('left', obj_x + 'px');
}
else {
obj_x = viewportWidth - 32; obj_y = 150;
$("#div_adContainer").css('left', obj_x + 'px');
}
e.stopImmediatePropagation();
}
function bodyResize(e) {
viewportWidth = $(window).width(); viewportHeight = $(window).height;
obj_width = 180; obj_height = 612; obj_start = viewportWidth + obj_width;
ac_state = $("#txt_ac_state").val();
if (ac_state === "1") {
obj_x = viewportWidth - 32; obj_y = 150;
$("#div_adContainer").css('left', obj_x + 'px');
}
else {
obj_x = viewportWidth - obj_width; obj_y = 150;
$("#div_adContainer").css('left', obj_x + 'px');
}
}
The intention of the posted code samples is for you to get a better idea of how to move your box without flickering, and to detect changes that you have not anticipated yet.
Your going have to figure out it out on your own how to implement your new code, but just take it one step at a time.
|
|
|
|
|
Thanks , but when the browser width is minimized this div overlaps other content.
I want this div to stay at its place and be visible if the the scroll it taken to its right.
Can you suggest ? plz
|
|
|
|
|
You said you wanted to fix the flicker.
The code was for reference only, fix or adjust the code to the positions you want.
|
|
|
|
|
Hi,
I have about
12 rows and each row contains 2 textboxes eg txtRateFrom txtRateTo.
Obviously, each textbox has a different name but it will always contain txtXXXFrom and txtXXXTo.
<table class="style1">
<tr>
<td>
<asp:TextBox ID="txtRateFrom" runat="server" </asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtRateTo" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtYieldFrom" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtYieldTo" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtCalFrom" runat="server"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtCalTo" runat="server"></asp:TextBox></td>
</tr>
The fields aren't required and user doesn't have to fill in any textbox or he can fill in just one textbox. If he fills in To he doesn't have to fill in From.
The range he can enter in the textboxes are from 0-100. So I assume that if he only enters a To number the From value is 0.
If he enters From number only I assume the to is 100.
I need to do a few validations.
Make sure only integers are entered as soon as user types text in the textboxes.
Check that it's in the correct range. User can't enter for example 101.
And make sure that the To field is bigger than the From field.
I need to show the user messages regarding the relevant error inside a validationsummary and also show * next to the td where the error occurs. If the error occurs for example in the txtratefrom textbox then next to Rate td i need to show Rate *.
What is the most efficient way of doing this?
Thanks
|
|
|
|
|
Custom Validation is better for this kind of validation at clientside 
|
|
|
|
|
Thanks. I know and this is what I am trying to do now. But I am unable to. How can I do this with customvalidation client side?
Thanks
|
|
|
|
|
I created a simple function
Greet (),
What goes inside the ()? If I leave it blank, when I call the function it works great. If I put something inside then it stops working altogether, even when I put the same thing inside.
I'm happy it worked, but I'm very new to this and want to understand fully the basics. Thank you so much for your help!
|
|
|
|
|
These links can give you an overview about JavaScript functions basics:
|
|
|
|
|
I just learned this myself. When you define your function Greet(), you need to define it with something inside the parenthesis so the function expects to get data to then be used in the function. So you would define Greet() instead as Greet(var). In this case var is any variable name you choose. Greet can then use var in the function for whatever purposes it needs. When you call Greet, you would put a string or other variable name inside the parenthesis: Greet("Sue") or Greet(namex). The function will then treat that as var.  Hope that was clear enough to help!
|
|
|
|
|
I have created a small web app using HTML5 + AngularJS to upload custom files(such as with extension .xyz). It works fine on Desktop browsers(IE, Firefox, Chrome). However on mobile browsers, it fails to detect the file and gives ‘Unsupported file format’ in android and iPhone only gives an option to select images. Is there a way we can upload the custom(.xyz) files using ‘input’ element with type=file? How can I make file upload mobile browsers compatible?
Praveen Raghuvanshi
Software Developer
|
|
|
|
|
I was using Blob to save a file.
var blob = new Blob([output], { type: "text/plain;charset=utf-8" });
saveAs(blob, "FileName.csv");
It stopped working in IE 11 for some reason on multiple computers. It still works in other browsers.
My question is either, 1) how can I get Blob working again in IE or 2) is there another way to save a file without using Blob?
Thanks
Brent
Brent
|
|
|
|
|
There is an issue we notice while trying to read browser version .
Issue is when we have window 7 machine and IE version is 11 user agent that we getting is same as IE 8 .
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322; ATT)}
While it should be
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
am i missing any setting in browser which need to be done ? can anyone also suggest is there is any alternate way to read the browser version since we are getting the wrong user agent.
|
|
|
|
|
- The Developer Tools setting overrides any document mode specified by a webpage. The setting remains active for the lifetime of the tab.
- In Internet Explorer 9, if the document is hosted in an iframe element, the document mode is determined by the document mode of the top-level webpage. Subdocuments cannot be rendered in IE9 mode unless the top-level document is also in IE9 mode.
- A meta tag with a value of X-UA-Compatible or a HTTP response header can override items in the Compatibility View Settings list and the doctype unless the X-UA-Compatible value is a Compatibility View setting, such as IE=EmulateIE7 or IE=EmulateIE8.
- The Compatibility View settings can force a webpage to be displayed in a less-standard document mode.
- The Local Compatibility Site list, the Microsoft Compatibility Site list and the Enterprise Mode IE Compatibility Site list can force a webpage to be displayed in other document modes.
- Group Policy settings override settings and force all webpages to be displayed in the specified document mode.
- If none of these rules apply, the
<!DOCTYPE> declaration determines whether the webpage renders in a standards mode, Almost Standards mode, or quirks mode.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
<script>
$(window).load(function () {
if ($('#TTest1').val(null)) { $('#TTest1').val("No"); }
</script>
Somewhat new to mixing in javascript or jquery into html, The goal is to test the values being passed into the form, and on some of those, if they are null? make the value = "No".
The result above is hit or miss, it sometimes works and usually does not. I can see the value coming from the sql management studio is null, i can put an alert within the test in my IF statement, and it never fires the message.
but another set of variables using the exact same syntax works fairly well. My question is how to manipulate the variable so that it tests it reliably and can set the value to string "No" if null?
I wondered if its doing a double-reference and because of this producing invalid results? i mean the statement tests the variable then writes it?
the variables are passed in from the c# view, and the edit form can change then submit and they get updated in the database. Well there seems to be some challenge in looking at a variable and testing it to be null.
javascript is ok to use it just has to be reliable and work every time.
|
|
|
|
|
Member 11733868 wrote: if ($('#TTest1').val(null))
The .val(value) version[^] of the val method sets the value of the matched elements to the specified value, and returns the set of matched elements.
Due to javascript's strange concept of "truthy" variables, the returned jQuery object will always be considered to be "true", and the code within the if block will always execute.
If you want to test whether the specified element's value is empty, you need to call val without passing any arguments, and then test the return value:
if ($('#TTest1').val() === '') { ...
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
ok thanks this is helpful, but its 3 equals signs?
it makes sense variablename.val() is equal to ...but 3 ===
i forgot about the truthiness factor. let me ask you from another angle, is the javascript and jquery able to run code thats mission critical? in other words is the execution predictable that it will run exactly as coded every time?
i want to understand, it seems like with browser/html it could run until interrupted by a mouse movement or ? and it could lose its place?
|
|
|
|
|
Quote: is the execution predictable that it will run exactly as coded every time?
100% sure it would run the same every time, unless your JavaScript engine tinkers with something else.
In other words, it is a standard language and alert(message) always pops out a dialog box instead of closing the window (which is done by using window.close()). I have never seen such thing ever happening.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
right, when i have code that works sometimes but not every time, i wonder what the engine is doing.
So, would you say that an application like controlling equipment would not be advisable with html/javascript? where it reads a value of something and takes action like sets a voltage that runs a motor, etc?
its okay if its like that, am just trying to be clear what its doing, how 'stateful' is it? i mean there are websites like amazon where you look at items and it may mess up but you just reload and go. if the html/javascript was running motors that moved mechanisms is it stateful and trustable to keep its place?
|
|
|
|
|
Yes they are totally trust-worthy and you can put your faith in it. It is just the browser that keeps tinkering, and the performance and other stuff depends on browser itself.
JavaScript would never do something that is not written, and would always do what is written.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
|
ok thanks for that. === is strict equality, nulls compare when they are null and undefined, == converts the types but hopefully converts a copy; so if it converts and you reference something more than once that got converted, it can be a problem is that what you mean?
I assumed strict equality, but will use this in the future. it seems that the javascript/html cannot be trusted for lambda type expressions like c#, just do everything a step at a time
i had done switch case, case yes, no, null, "" then default with the alert message "it should never get here". of course you can guess the message that shows up. value was no. or other code tested for null and would be true when the value was string 'no', and othertimes not.
but i think the answer is to separate the tests and not try to combine and hope the test will be run right.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
