Am struggling with proper syntax to change a link you go to onclick using javascript.
I have:
js:
function changeLink {
link = "page2.php";
document.getElementById('go').onclick= function() { location.href(link); };
}
html:
<button type="submit" name="submit1" style="width:100%;height:30px" onclick="changeLink();">Change Place To Go</button>
<div id="go" onclick="document.location.href='page1.php';">Click to go somewhere</div>
JS fiddle
Thanks for any suggestions!
Let's start with some common.js:
//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now let's do your main page, index.php:
//<![CDATA[
function direct(id, link){
E(id).onclick = function(){
location = link;
}
}
direct('button1', 'page1.php'); direct('button2', 'page1.php');
//]]>
HTML can look more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'common.css'; #import 'index.css';
</style>
</head>
<body class='njs'>
<div id='main'>
<input type='button' id='button1' value='button 1' />
<input type='button' id='button2' value='button 2' />
</div>
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='index.js'></script>
</body>
</html>
Your CSS on common.css:
body{
margin:0;
}
#main{
width:980px; margin:0 auto;
}
Your CSS on index.css:
#button1,#button2{
height:30px; width:300px;
}
Note:
You could use a CSS class instead of the comma separated ids. This is just to show you what the syntax should look like. You should know that onclick fires before form submission, therefore redirecting would happen before submission, so there is no point in using a submit button. There is really no point in having a form in your case, unless you can explain why. I would just use <a href='page1.php'>page 1</a>, and the like, so you don't even need to use JavaScript. You can use CSS to style a link into a button.
Related
Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
I have a ckeditor that currently has a height and width of auto, but I would like to make these parameters fixed. I first tried to set the rows and cols but this did not work:
<textarea id="editor1" name="editor1" rows="10" cols="10">
Example text goes here
</textarea>
Then I tried to use the config file with this code (which still doesn't work):
<script>
CKEDITOR.editorConfig = function(config) {
config.height = '100px';
config.width = '100px';
};
</script>
After using both of these methods, the height and width of the ckeditor is still auto (checked with chrome's inspect element feature)
My example: http://strawberrycv.com/test.php
The code to this page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="ckeditor/ckeditor.js"></script>
<style>
#ckeWrapper{
height: 700px;
width: 600px;
}
</style>
</head>
<body>
<form>
<div id='ckeWrapper'>
<textarea id="editor1" name="editor1" rows="60" cols="90">
the text goes here
</textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
hey i just started using this plugin but i think i got a clue for u:
find the api here: http://docs.ckeditor.com/#!/api/CKEDITOR.config
And look for the corresponding JS line that should go in the bottom ''
After you have defined the texarea JS takes over, so I'd say you need to do your editing in the JS instead of the CSS.
I am trying to use the jquery-mobile spinner but it doesn't seem to work
From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<i class='icon-spinner icon-4x'></i>"
});
but if i try running this, from application.html.haml or console, doesn't seem to work
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});
it displayes a shadow instead of my spinner :-? .
What am i missing here?
Thanks :)
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.
First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.
.ui-loader-default {
opacity: 1 !important;
}
And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here's a working example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.
i want to use Ext.net control in aspnet mvc 3 but i can not do that. Can you help me?
<h2>List</h2>
<div>
<% Ext.Net.TabPanel tb = new TabPanel() { ID="tb1", Height = 300 };
tb.Items.Add(new Ext.Net.Panel() { ID = "1", Title = "Test" });
%>
</div>
But no result return to me if i look page source result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/WebResource.axd?d=yZr1qXAiAzbIyuMwWFg4QLahCw7ja-r5MvwrWaYGNYBiSLompC1t3Dre6yVT_nX3dE_5QRW8Pq_M_mf3ckpaRofaHZG9JTWR4XNA3Qlk1l0lrRtAk7_XdSqezLOHVVzNAnFsM_Xvd-_Jkz3oAxnZR52Pj2Gx6OQ6XgRMpjV7wg41&t=634661604900000000" />
<title>
List
</title>
<style type="text/css">
html
{
background-color:Gray;
}
.column
{
float:left;
width:75%;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:750px;
}
</style>
<script type="text/javascript" src="/WebResource.axd?d=EEB3ci-aaYX0YFB1eKO9bNJxz21l7U6Xgp6gafhX-ELA3dqrXi0vJChPyMcsY02FqNHlDFzFUXhC1Wr20e23KQDHybExiJcMtk25sY6H14MJWhlFGE-pP5O0yfnfTY5rqctCxUyaF0PEA-FTaqBmsMnVHTwakoGf9vavE-17ugQ1&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=MC7em5dhNLnBAdrW93hZYkG4dXWQcASL6iXw2IQb1NzxHMGA11tPZfow93hy4T_4dZqotlxW-YF95RJptzY352oINWGWb6cJr4JvBvRDC0amtlBU65lPTxvQeag4qmgoBXQ3Y-KW6mtrxsiGMKkIRQ2&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=hG2uE2_g7tabtfNStz4lSLSwuXYXbXisubF7Fk7ezPJp9TZl2fyBJu3H-wYG-DS9JithBK3TA4ThRCkhX53y2HlV02jYOaX-dL8EVSpL2hvpa6PYag6EVudAnf_JzCoPcMqKXc2dJ0PFK5qP7XXZeQ2&t=634661604900000000"></script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ctl00$ResourceManager1",BLANK_IMAGE_URL:"/WebResource.axd?d=SanxrxztuPyOAwG7dcFi5HvB6yOoIwnKJN3sevUiXssgue_dNhgx0KWC2p7tE4ygV4N6_n3aqstZCgfhUs4nL5nCZggPLeFdFhYYgXln5EK0OaMOfRO77y22sclo4saMp9irYOG5hNb8NvsMMkgeqm9TCwonBfPgYchN-BVRq4c1&t=634661604900000000",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();});
//]]>
</script>
</head>
<body>
<div class="column">
<h1>Job Schedule </h1>
<h2>List</h2>
<div>
</div>
</div>
</body>
</html>
The code you have posted is WebForm syntax.
If you are using ASP.NET MVC Razor and the latest Ext.NET v2.x release, you can render all/any of the Ext.NET Components using Razor syntax.
The following sample demonstrates rendering a very simple TabPanel.
Example
#{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Examples</title>
</head>
<body>
#Html.X().ResourceManager()
#(Html.X().TabPanel()
.Height(300)
.Items(items => {
items.Add(Html.X().Panel().Title("Test"));
}));
</body>
</html>
Hope this helps.
Page.Controls is present only in web forms. I suspect that your control is for web forms, therefore it won't work with MVC.