I am creating a calculator using ASP.NET and JavaScript. When the user clicks the button, right now trying to get it to work for button 7, it calls a javascript function in order to see if the user clicked the clear button, the back space button, or if they clicked a number button. If it is a number button, the function is suppose to add the number to the textbox. For example, if the user clicks 7 then clicks 8, then clicks *, and then clicks 1, the text box will display: 78*1. I can't get the javascript function to work. I am currently just trying to get it so when button 7 is clicked, it adds the 7 to the text box. Below is my code:
<script>
var maxInputLength = 20;
function checkButtonClick(clickedValue)
{
var buttonValue = clickedValue.value;
var inputStr = document.getElementById('inputBox').value;
if (buttonValue == 'C')
{
document.getElementById('inputBox').value = "";
}
else
{
if (inputStr.length < maxLength)
{
var num = 6;
document.getElementById('inputBox').value = inputStr + buttonValue + num;
}
else
{
//document.getElementById('msg').innerHTML = "Maxmum length is " + maxInputLength;
}
}
return false;
}
document.getElementById('inputBox').readOnly = true;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main" class="main">
<div id="content" class="content">
<h3 id="h3">Simple Calculator</h3>
<div id="calculatorDiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<asp:TextBox runat="server" CssClass="inputBox" disabled="disabled" ID="inputBox"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum7" runat="server" Text="7" CssClass="CalcButtons" OnClientClick="return checkButtonClick(7)" />
</td>
Ok so I started writing many comments I figured I'll just sum this up in an answer.
Several things in your code didn't wire up for me. You had maxLength which is undefined.
Also, you should take the value straight from the function and not with the .Value, like this:
function checkButtonClick(clickedValue)
{
var buttonValue = clickedValue;
// rest of code
}
Please see Fiddle Demo Here for a demonstration.
Related
I've tried a few things , but not versed enough in coding to get it done myself obviously
I setup a jsfiddle here - https://jsfiddle.net/7ojfmxn2/17/
I have a show tabs function to display tab content below , i have a header text for the tabs and i'd like to change that text to the name of the current tab each time one is clicked "League Tabs" i'd like renamed to Tab 0 , Tab 1 , Tab 2 ect , whenever one is selected, any help ?
function show_tab(tab_id) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
I'm not sure it is what you're asking for, but if you want substitute "League Tabs" with the Tab name, you could do as follows
1- give an ID to the span where the tab header is stored , for example id=tabheader
2- in the part of code where you set the visible tab, also set the content of that span (the element with id=tabheader)
Here's the code
HTML
...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....
JS
....
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
var tabheader = document.getElementById("tabheader");
tabheader.innerHTML="tab " + counter;
}
...
See updated fiddle
https://jsfiddle.net/7ojfmxn2/30/
EDIT
If you want the title LEAGUE TABS be displaied at the beginning, you've to comment your init code in a way no tab is selected.
/*
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
*/
EDIT 2
To avoid showing all tabs you can use
show_tab(-1);
instead of
show_tab(0);
see fiddle https://jsfiddle.net/7ojfmxn2/50/
EDIT 3
In the case you want to see the 'main' tab name on page load, having anyway the tab 0 loaded, you may
1- change the show_tab, adding an input param. This boolean param determines what to show (main tab name or displaied tab name ), as follows
function show_tab(tab_id, show_main_tab_name) {
.....
//here is where the tab title is displaied
var tabheader = document.getElementById("tabheader");
if(show_main_tab_name){
tabheader.innerHTML="LEAGUE TABS";
}
else {
tabheader.innerHTML="tab " + counter;
}
....
2- call on init the show tab with the param set to true
(I put your original function)
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0,true);
}
See my new fiddle https://jsfiddle.net/7ojfmxn2/55/
You need to set an id on the title of the element that contains the tabs, so you can later select it and change it's content.
Then you can pass a 2nd parameter to your show_tab function which would be the tab title you want to display.
Here's the updated code (I had to delete the CSS to be able to post it here due to post size limits)
Here's the working Fiddle with all the CSS https://jsfiddle.net/7ojfmxn2/39/
function show_tab(tab_id, tab_title) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
document.getElementById('tab_title').innerHTML = tab_title || 'LEAGUE TABS';
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
<div id="contentframe">
<div id="withmenus">
<div class="myfantasyleague_tabmenu"><span id="tab_title">LEAGUE TABS</span>
<input id="sub100" type="checkbox">
<label for="sub100"><span></span></label>
<ul id="homepagetabs">
<li id="tab0" onclick="javascript:show_tab('0', 'Tab 0');"><a class="no-sub">Tab 0<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab1" onclick="javascript:show_tab('1', 'Tab 1');"><a class="no-sub">Tab 1<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab2" onclick="javascript:show_tab('2', 'Tab 2');"><a class="no-sub">Tab 2<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab3" onclick="javascript:show_tab('3', 'Tab 3');"><a class="no-sub">Tab 3<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
</ul>
</div>
<div id="tabcontent0" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 0 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent1" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 1 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent2" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 2 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent3" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 3 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
Add an id to your HTML's <title> tag, like so:
<title id="myTitle"></title>
Using jQuery you could just do this:
$('#myTitle').html(this_tab.className);
With JavaScript it would be
document.getElementById("myTitle").innerText = this_tab.className;
I'm just starting Angular JS and trying to have a scrollbar appearing as I add an element in the list which would be populated in the box of the contents.
I installed ng-scrollbar from here. https://github.com/asafdav/ng-scrollbar
HTML:
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
JavaScript:
(function () {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
It's part of my code so it might not fully make sense. But the way it works is that if I pressed the addImageButton, it would add a row which will add a row on the web. And conversely, removeImageButton will delete a row which will show on the web immediately. I need a scroll bar appearing once it reaches the height 100px. I checked the last answer of the ng-scrollbar is not working with ng-repeat
as well but it didn't work. Would be great if I could get some help with the detailed explanation. :) Thanks!
Figured out! I need to put the broadcast method in addRow and removeRow methods. Also, I had to put the out from the
Trying to develop javascript that redirects the user back to the home page after they submit their name and email. The order should go like this:
1.) User clicks "Request a Brochure..."
2.) This window opens up in Portrait format, 400 x 350. User fills out name and email and clicks "Submit"
3.) User is redirected back to the original page, text now reads "Request Submitted..." and the fill out form window is closed.
Currently, if the user clicks the "Request A Brochure..." hyperlink they are lead to a new page (rather than a new window opening up on top of this page). Here is my HTML for that:
<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="castaway.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
<font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
<font face=arial>
<a style="text-decoration:none"
onClick="change_color();" href="#">Romantic</a><br><br>
<a style="text-decoration:none"
onClick="change_color2();" href="#">Adventure</a><br><br>
<a style="text-decoration:none"
onClick="change_color3();" href="#">Relaxation</a><br><br>
<a style="text-decoration:none"
onClick="change_color4();" href="#">Family</a><br><br><br><br>
<a style="text-decoration:none"
href="form.html" onClick="window.open(this.href,'targetWindow',
'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes,
resizable=yes,width=400, height=350');
return false;">Request Submitted...</a>
</font>
</td>
<td align="center"><img id="rom_main" src="orig_main.jpg">
<br><i>Your Vacation Awaits!
</tr>
</center>
</body>
</html>
</DOCTYPE>
And here is the Javascript for the Index. All it does is change the text/hyperlink colors when clicked:
function change_color(){
document.body.style.color = "#FF0066";
document.body.style.background = "Thistle";
document.getElementById("rom_main").src = "rom_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "#FF0066";
}
}
function change_color2(){
document.body.style.color = "blue";
document.body.style.background = "#87CEEB";
document.getElementById("rom_main").src = "adv_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "blue";
}
}
function change_color3(){
document.body.style.color = "green";
document.body.style.background = "#CCFF99";
document.getElementById("rom_main").src = "rel_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "green";
}
}
function change_color4(){
document.body.style.color = "brown";
document.body.style.background = "#66CCFF";
document.getElementById("rom_main").src = "fam_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "brown";
}
}
Then, here is the HTML for the form:
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="form.js"></script>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body leftmargin=0 rightmargin=0>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post"
onsubmit="return validateEmailForm();" action="form.html">
<div id="name-field">
Name:<br>
<input id="name" name="textname" size=35 >
</div>
<br><br>
<div id="email-field">
E-mail:<br>
<input id="email" name="textname" size=35 >
</div>
<br><br>
<input type="submit" name="button1" value="Submit">
</td>
</tr>
</center>
</body>
</html>
The Javascript for the form:
function validateEmailForm(){
var name = document.getElementById('name');
var email = document.getElementById('email');
var error = false;
var focusElem;
if(name.value.length == 0){
error = true;
var nameField = document.getElementById('name-field');
nameField.innerHTML = nameField.innerHTML + " *Name is required";
focusElem = name;
}
if(email.value.length == 0){
error = true;
var emailField = document.getElementById('email-field');
emailField.innerHTML = emailField.innerHTML + "
*Email is required";
if(focusElem == undefined){
focusElem = email;
}
}
if(error){
focusElem.focus();
return false;
}
return true;
}
var form = document.getElementById("emailform");
form.addEventListener("submit", function(){
window.location.href = "index.html";
});
And the CSS for the form:
#errors {
clear:both;
color: red;
}
To start with, I don't know where the Javascript would go that would open form in Portrait mode - does it go in the js file for index or for form? Thanks for any help/direction/advice!
Basically, when your form is submitted, you need to change the window.location.href property to the URL you want the user to be redirected to (your home page in this situation).
var form = document.getElementById("emailform");
form.addEventListener("submit", function(){
window.location.href = URLofTheHomePage;
});
Make sure to replace URLofTheHomePage with the actual URL of your home page.
Here is what I would recommend. It seems you can write code so I would not feed you details.
Onclick() of "Request A Brochure", Open up a Modal with your html in it. You can use something like following css for Modal
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000; }
On submit of form - send data for processing and fire an event.
Keep "Request a Brochure" html element to listen to this event and update its content only when event occurred not when dialog is cancelled.
Instead of event, you can also have a callback method which gets called from validateEmailForm() after it validates data. In this callback you can change the contents of your home page without reloading it. for e.g.
validateEmailForm(function() {
// update html element content
});
function validateEmailForm()
{
if (data valid) {
callback();
}
}
I'm trying to show/hide table rows with the help of buttons.
With the script I'm using now I'm only I'm only able to make one button and only able to show/hide one row.
I want to make more buttons where each button when pressed will show/hide a row. Also I want the button text to change between Info▼ and Info▲ as the first one does in my script.
If I have understood it correctly I should use classes instead of divs but I tried to do that without result.
If anyone could help me out with my script so I can produce more buttons where each one will show/hide a unique row when clicked on I would be grateful.
http://jsbin.com/tovicefu/1/edit This is a simple version of my layout. So when I press the first info button the row below should appear with one image.
Same with the other info button but it displays another row further below.
My script.
<script>
var button_beg = '<button class="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Info▼', hide_button = 'Info▲';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
<table>
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>`
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>
</table>
You can use a combination of css and javascript. In this jsBin I used a data-attribute to identify 'hideable' rows.
Css:
tr[data-hide="true"] td {
display: none;
}
Javascript to toggle visibility:
function toggleRowvisibility(e) {
var tbl = document.querySelector('table')
,rows = tbl.rows;
for (var i=0;i<rows.length; i+=1){
var hidable = rows[i].getAttribute('data-hide');
if (hidable) {
rows[i].setAttribute('data-hide', /false/i.test(hidable));
}
}
}
This problem seems to be odd to me and I can't seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:
<form id="form1" method="get"> <!-- Note: No Action property -->
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
</td>
</tr>
</table>
</div>
</form>
MyJS file is as:
<script type="text/javascript">
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.open(url);
//window.location = url; //Doesn't work
//window.location.href = url; //Doesn't work
//self.location = url; //Doesn't work
//top.location = url; //Doesn't work
}
</script>
As you can see, it doesn't redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form... > tag, I don't put the action property in it. I don't want to open a new browser, just redirect to the new url within the same browser.
Is there a way to redirect it?
Don't use the form tags. Or, set the "type" attribute of your button to be "button", not "submit". The form submits when you click the button, but you don't want that to happen. Either removing the form or changing the button should fix improper redirection. When you don't specify an action, I'm pretty sure the default is the current URL.
Ok, just an idea. As you haven't set the action parameter, the default behaviour of a submit button is to reload the same page. You alter that behaviour by handling its onclick. Maybe there is a conflict that can be resolved by having return false; at the end of the click handler, which prevents the default action for that event.
Here
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = which.txtAll.value;
var morestring = ""; //More data manipulation here.....
return CONSTANT_SITE_TARGET + allWords + morestring;
}
<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
to elaborate on a comment:
<script>
window.onload=function() {
document.getElementById("Submit").onclick=function() {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll".value;
var morestring = ""; //More data manipulation here.....
location = CONSTANT_SITE_TARGET + allWords + morestring;
}
}
</script>
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
Try one the options for redirection below. I commented out three of them so that the code stays valid, but you may play around with either and see if it suits your needs.
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.location.href= url;
//window.navigate(url);
//self.location(url);
//top.location(url);