|
I want to write a effect like this.
But I don't know how to do it.
could somebody taught me? thanks a million!
image
modified 16-May-17 5:05am.
|
|
|
|
|
Here is an example:
function emailValidator(element, alertMsg){
var emailvalid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(element.value.match(emailvalid))
{
return true;
}else{
alert(alertMsg);
element.focus();
return false;
}
}
element.focus() does not go back to the "Enter your email box" when a wrong email is enter, it goes to the next input box. Searched all over.
|
|
|
|
|
How is this function triggered?
You could try delaying the call to focus:
...
alert(alertMsg);
setTimeout(function(){ element.focus(); }, 100);
return false;
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi,
Have a JSON file. Made it to work in IE 7 and 8. But need to make it work on IE 6.
Here is the script added.
var results = document.getElementById("apps");
var apps = new XMLHttpRequest();
apps.open("GET", "js/books.json", true);
apps.setRequestHeader("Content-type", "application/json", true);
apps.onreadystatechange = function() {
if (apps.readyState == 4 && apps.status == 200) {
var data = JSON.parse(apps.responseText);
results.innerHTML = "";
for (var app_content in data) {
content += data[app_content].authorname;
results.innerHTML += content;
}
}
For IE 7 and 8 have Added these reference files
Is there any way to make it work in IE 6.
Thanks
|
|
|
|
|
The native XMLHttpRequest object was first introduced in IE7.
If you need to support ancient browsers like IE6, then you'll need to fall-back to the ActiveX version:
var apps;
if (window.XMLHttpRequest) {
apps = new XMLHttpRequest();
}
else {
apps = new ActiveXObject("Microsoft.XMLHTTP");
}
Using XMLHttpRequest in IE6 - Web APIs | MDN[^]
Alternatively, use jQuery[^], which handles this sort of thing for you. But you'll need to stick to v1.12, since that was the last version that supported IE6 and IE7.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
hy, I have typescript2 application. I use routing, su there are several separated components. Now here is a certain component where I retrieve JSON with html in it, render and it looks good. Now the problem is that there are some links it that JSON which renders but don`t work. I expected links to be working as fine as it works if you just staticaly add it to the template. Links should call functions that are in the same component which retrieves json from server.
I tried lots of examples on internet. But the result is errors or just rendering but nothing more.
There is only way I found to work is that when do this :
This component is in RouterModule.forRoot
@Directive({ selector: 'someevent' })
export class LibraryComponent implements OnInit,AfterViewInit {
@HostListener('click') button_pressed() {
this.getPeriods();
}
but the problem is that it works when I press everywhere on page. Not surprising, because IMO directive is decorated to the whole component in this case, not the exact element.
Then I tried to create separated class with directive as it should be, and I added ContentChild decorator because I need to get function (getPeriods()) as it is now in diferent component, but this doesn`t call function too, though no error found.
Can you help me in any ways?
modified 11-May-17 2:46am.
|
|
|
|
|
hy,
I have the following:
json file (fragment only):
"<span class=\"titel\">"
Component in ts:
styles: [`
titel {text-transform: uppercase;
color: #00467f;
font-weight: bold;
font-size: 14px;
}
`]
Now when I load the page the whole structure parses very well like
text , but for some reason text neither text becomes uppertexted nor color changes. Only works the style (like strong and links) in json file.
|
|
|
|
|
I am unsure of TS, but as far as I know, class names in CSS are prepended with a period ("."). So try that,
styles: [`
.titel {
text-transform: uppercase;
color: #00467f;
font-weight: bold;
font-size: 14px;
}
`]
Now try to run it and see if this works now.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
Hy,
I have angular2 typescript application with two language links and some menu items. All links and whole structure is on same app.component.ts . I use routing for menu. Now the problem is that I can`t change language after selecting one of the menu items, because IMO the component, the route looks for, becomes already used (after selecting menu), because I use links for changing language and menu items, which routes to the same components while having attributes routerLink. Is there any way to use the same component more than one time? All data we see after menu switch comes from database. So every routed component has its own text.
|
|
|
|
|
I wrote this little helper to make the textbox on a mobile device bigger when you select the textbox on a mobile phone.
I'm testing on an iPhone 6S+ large screen.
What exactly is touchend, say you touch the textbox and the keyboard comes up, "touchstart" which works fine, and my textbox gets larger;
but when I close the keyboard, the textbox stays large. I figured the touchcancel would fire or touchend.
$("input[type=text], input[type=password], textarea, select").on({
"touchstart click": function () {
zoomEnable();<br />
}
});
$("input[type=text], input[type=password], textarea, select").on({
"touchend touchcancel touchmove": function () {
setTimeout(zoomDisable, 500);
}
});
If it ain't broke don't fix it
|
|
|
|
|
So now the zoom works. but the zoom resets to normal after 3 seconds. I added the event and stopPropagation but it kills the code the the script dies.
I'm working off the production server on this, and the iPhone so I haven't figured out a way to detect script errors.
$("input[type=text], input[type=password], input[type=tel], textarea, select").on({
"touchstart click": function (event) {
event.stopPropagation(); event.preventDefault();
zoomEnable();
}
});
$("input[type=text], input[type=password], input[type=tel], textarea, select").on({
"touchend touchcancel touchmove": function () {
setTimeout(function () { zoomDisable(); }, 500);
}
});
If it ain't broke don't fix it
|
|
|
|
|
I don't understand why when touchstart fires, the keyboard loads and fires touchend.
And I can't find the event for when the keyboard unloads, it's not touchcancel.
$(":text, :password, input[type=tel], select").on({
"touchstart": function (event) {
$(this).css('border', 'solid 3px orange').val("touchstart");
event.stopPropagation();<br />
}
});
$(":text, :password, input[type=tel], select").on({
"touchend": function (event) {
$(this).css('border', 'solid 3px black').val("touchend");
}
});
$(":text, :password, input[type=tel], select").on({
"touchcancel": function (event) {
$(this).css('border', 'solid 3px red').val("touchcancel");
event.preventDefault();
}
});
If it ain't broke don't fix it
|
|
|
|
|
Quite literally;
touchstart is just touching the glass.
touchend is lifting your finger off the glass.
The keyboard has no event, it's just built into the OS.
So there goes my zoom textbox idea, but opens up the door on picture scrolling.
If it ain't broke don't fix it
|
|
|
|
|
Greetings again.
We have a couple of situations where we want our users to check a box before their order is submitted.
So far, when I click the submit button, checkbox validation is ignored.
Any ideas how to make this work?
<script type="text/javascript">
function ValidateCheckBox(sender, args) {
if (document.getElementById("<%=chkTerms.ClientID%>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').on("submit", function () {
ShowProgress();
});
</script>
//checkbox
<asp:CheckBox ID="chkTerms" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Check the box before you can submit your data" ClientValidationFunction = "ValidateCheckBox"></asp:CustomValidator><br />
//submit button
<asp:Button ID="btnSave" runat="server" Text=" Submit " OnClick="btnSave_Click" />
|
|
|
|
|
Try calling the Page_ClientValidate function before the ShowProgress function:
$('form').on("submit", function() {
if (Page_ClientValidate()) {
ShowProgress();
}
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thank you very much sir.
I used a hack which worked but I switched to your solution which is more elegant.
|
|
|
|
|
HI,
Please let me know hot can I capture the Browser close when the user close the browser from the close button on the top left side on the browser.
Thanks a lot
|
|
|
|
|
There is a difference in capturing and preventing the browser from closing. Since you only want to capture, you can consider quite a few of events; such as beforeunload, and handle them to just prompt them that you are going to close the browser.
window.onbeforeunload = function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
};
Although it may work in preventing the browser from closing as well, if you simply return null from within the function. Have a look here,
javascript - How to capture the browser window close event? - Stack Overflow
Also, in future, please also consider going through MDN documentation to see what of the APIs are available and how you can use them; WindowEventHandlers.onbeforeunload - Web APIs | MDN—read the note provided there, it mentions that the calls to confirm or alert may be ignored in this event.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
No event is raised that you can hook into via js.
|
|
|
|
|
onbeforeunload works. I use it.
There are two kinds of people in the world: those who can extrapolate from incomplete data.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
That doesn't just fire for closing the browser though, you don't know if it is firing due to page navigation or the browser closing.
|
|
|
|
|
True. Good clarification. I'm going to guess, and could be wrong, that the user wants to know when their app or page is closed.
There are two kinds of people in the world: those who can extrapolate from incomplete data.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
I have created a Dynamic XFA form using Livecycle designer 8.I'm using pdf.js to get the form fields.If i save the form as static i'm able to get the form fields using page.getAnnotations() of pdf.js but when i save the form as dynamic i'm not able to get the form fields.
|
|
|
|
|
Good day, I use web easy for my site.
I have a gallery that I have images and I want them to show a larger image on rollover. The script works but I would like for it to be centered on the page.
What do I need to add for this to happen?
<script type="text/javascript">wePop[~1520423684~]=new Image(); wePop[~1520423684~].src='[~C:\Saved Files\Home Works Etc., LLC\Website\Remodeling Pics Web\Kitchen\Joni Heffron\Kitchen1.jpg~]';</script>
<a href="[~C:\Saved Files\Home Works Etc., LLC\Website\Remodeling Pics Web\Kitchen\Joni Heffron\Kitchen1.jpg~]" onmouseover="wePopupImageOver(this,wePop[~1520423684~].src,[~320~],[~240~],'[~#aaaaaa~]','[~0px solid~]','[~#000000~]',[~10~]);" onmouseout="wePopupImageOut();">
Thanks...brook
|
|
|
|
|
To center the popup, depends on what that popup is. A plain-old JavaScript popup is based on the browser defaults, a custom made dialog is based on the settings of that framework. So if your popup, and since you have not shown where those wePop etc come from, there is very less that I can help with.
Ignore the following answer—I thought you were asking to place the script somewhere 
A script can go anywhere in your web application, from where it can be easily loaded and executed. One of the ways is to actually append the script element to your web page, where it is going to be used,
<body>
<!--
</body>
<script>
</script>
However, a good approach is to have a script in a separate file, its own file, and then link that script to the document by its location. Such as like this,
<head>
<script src="~/path/to/script.js"></script>
</head>
<body>
<!--
</body>
These are a few of the ways, that you can easily add the script to your document. The benefit of the second way, is that you can reuse the script in multiple pages, and this is the recommended way as well, you can then even link the script to your master layout page or theme file as well.
But just one thing; you would have to remove the hardcoded stuff, such as the hyperlink content etc, and then you can pass these elements and their values to the script for it to work.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
modified 7-Apr-17 18:38pm.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
