So I have the css link here:
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
Now, in this current state the styling doesn't show up at all. I've looked into what others have said and tried:
take off rel="stylesheet"
change to "text/html"
check the paths
put it in public folder regards to express
add <base href="/">
etc..
still I'm having issues.
If I have text/css, I get mime errors.
my file path below:
app.js:
var express = require("express");
var app = express();
var request = require("request");
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));
app.get("/", function(req, res) {
res.render("search");
// res.render("location");
header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
*
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
*
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
href="https://fonts.googleapis.com/css?family=Josefin+Sans:600|Open+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<script
src="https://kit.fontawesome.com/3870ba704e.js"
crossorigin="anonymous"
></script>
<title>tv guide</title>
</head>
<body>
search:
<%- include('partials/header') %>
<section class="container-fluid content">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="fas fa-tape">filmraid</i>
</a>
</nav>
<h1>Search for a Movie</h1>
<form action="results" method="GET">
<input type="text" placeholder="search term" name="search" />
<!-- <br />
<input type="radio" id="usMovies" name="location" /> US
<input type="radio" id="ukMovies" name="location" /> UK -->
<br />
<input type="submit" />
</form>
</section>
<%- include('partials/footer') %>
I'm wondering if I'm missing something else here.
Thanks for taking a look.
Solved this problem by:
creating a new public folder since
http://localhost:3000/assets/lib/css/styles.css
was unreachable.
Related
This is fragment from View file:
#{
ViewData["Title"] = "qwerty **Николай**";
}
<div class="row">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Николай Петюх</h1>
</div>
</div>
And this is output fragment in browser:
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>qwerty **Николай**</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/lib/foundation/css/foundation.css" />
<link rel="stylesheet" href="/css/app.css?v=drh6roXOzy8LX0aJC9iKPBtj4DtYf06wh1r9I6IvZA0" />
</head>
<body>
<div class="grid-container">
<div class="row">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Николай Петюх</h1>
</div>
</div>
</div>
</div>
Anybody knows how to prevent cyrillic characters encoding to &#XXXX;?
Resolve problem by adding to Startup.cs next code:
services.Configure<WebEncoderOptions>(options =>
{
options.TextEncoderSettings = new TextEncoderSettings(UnicodeRanges.All);
});
in ConfigureServices class.
File Structure in eclipse
Css files are not loading at run time so that i lost my design which i did. Below is my code for login page but the thing is am getting links for css files which are not loading if i click that link that file will open in the eclipse IDE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Login Page</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" action="login" method="get">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="userName" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<!-- Login -->
<input type="submit" value="login" />
<br>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Registration Yourself
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Student</li>
<li>Parent</li>
<li>Teacher</li>
</ul>
<p>Forgot your password ?</p>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
I think this is because it is unable to find out that location in root directory
For the Welcome page no need to add ../
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
keep like this
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/js/sb-admin-2.js"></script>
I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.
Relevant HTML/Javascript code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.
To set class attribute you should use className instead of class,
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
Example
I've got an issue with a website rendering differently on different machines with the same setup...
I've tested the site on 6 different machines all running IE8 (8.0.7600) on win7 and get 2 variants of how IE wants to display the site. Some machines put about a 10px margin at the top of the page lowering the whole layout and others don't add this.
All the machines are same spec, same OS, same IE version, all running in same combination of IE8 browser mode and IE8 standards mode.
Has anyone else come across this problem before? - Seems incredibly stupid to display differently on the same setup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">
<head id="ctl00_Head1">
<title>
Sign in / Register
</title>
<meta property="fb:page_id" content="199610020055520" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=0.55" />
<link rel="shortcut icon" href="http:///Images/my/fav-icon.ico" />
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="JavaScript/Prototype1.6.0.3.js"></script>
<script type="text/javascript">
var submitCount = 0;
</script>
<script type="text/javascript" src="JavaScript/Utils.js"></script>
<script type="text/javascript" src="/Service/Utils/MasterUtils.ashx?proxy&v=2"></script>
<style type="text/css" media="screen">
#import url("css/reset-v1.css");
#import url("css/my/960-framework.css");
#import url("css/my/base-v5.css");
#import url("css/my/question-v1.css");
#import url("css/my/personalMentor-v1.css");
#import url("JavaScript/My/css/custom-theme/jquery-ui-1.8.5.custom.css");
</style>
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/my/ie9.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/my/ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/my/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/my/ie6-and-down.css" />
<![endif]-->
<style type="text/css">
<!--
#import url("/Service/Utils/dynamic-css.ashx");
-->
</style><script language="javascript" type="text/javascript">/* <![CDATA[ */ function PageLoad() { } Event.observe(window, 'load', PageLoad, false); /* ]]> */</script></head>
<body>
<noscript><p style="border:1px solid #FF0000; color:#FF0000; margin:1em; padding:0.5em; text-align:center;">NOTE: Many features on this website require Javascript and cookies. You can enable both via your browser's preference settings.</p></noscript>
<form name="aspnetForm" method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_MainContent_btnLogin')" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATEFIELDCOUNT" id="__VIEWSTATEFIELDCOUNT" value="2" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA4NTA2OTA2Nw9kFgJmD2QWAgIDDxYCHghvbnN1Ym1pdAUUcmV0dXJuIHN1Ym1pdEZvcm0oKTsWAgIBD2QWBgICDxYCHgRUZXh0BXo8dWwgY2xhc3M9InRhYk5hdiI+PGxpPjxhICBjbGFzcz0ibmF2SXRlbUluYWN0aXZlIiBocmVmPSIvQ29tbXVuaXR5L05ld3NMYXRlc3QuYXNweCIgPjxzcGFuPkNvbW11bml0eTwvc3Bhbj48L2E+PC9saT48L3VsPmQCAw8WAh8BBYcBPGRpdiBjbGFzcz0ibmF2Ij48dWwgY2xhc3M9InRhYk5hdiI+PGxpPjxhICBjbGFzcz0ibmF2SXRlbUFjdGl2ZSIgaHJlZj0iL0xvZ2luLmFzcHgiIHRpdGxlPSIiID48c3Bhbj5TaWduIEluPC9zcGFuPjwvYT48L2xpPjwvdWw+PC9kaXY+ZAIGD2QWDAIDD2QWAmYPZBYCZg8WAh8BBcECPGRpdj48ZGl2IGNsYXNzPSJncmV5QmxvY2siPg0KPGgyIHN0eWxlPSJtYXJnaW4tdG9wOiAwcHg7Ij5TaWduIGluL1JlZ2lzdGVyIG5vdyB0byBlbnRlcjwvaDI+DQo8cCBzdHlsZT0ibWFyZ2luOiAwcHg7Ij5JbiBvcmRlciB0byBoYXZlIHlvdXIgZW50cnkgaW5jbHVkZWQgaW4gdGhpcyBtb250aHMgcXVpeiBwbGVhc2Ugc2lnbiBpbiBub3cuICBJZiB5b3UgZG9uJ3QgYWxyZWFkeSBoYXZlIGFuIGFjY291bnQsIHRoZW4geW91IGNhbiA8YSBocmVmPSIvTG9naW4uYXNweD9SZWdpc3Rlcj1UcnVlIj5jcmVhdGUgb25lIG5vdzwvYT4uPC9wPg0KPC9kaXY+PC9kaXY+ZAIHDw8WAh4PVmFsaWRhdGlvbkdyb3VwBQdteUxvZ2luZGQCCQ8PFgIfAgUHbXlMb2dpbmRkAg0PDxYEHghDc3NDbGFz" />
<input type="hidden" name="__VIEWSTATE1" id="__VIEWSTATE1" value="cwUIdGV4dEJveDEeBF8hU0ICAmRkAhUPDxYCHwFlZGQCGw8PFgIfAgUHbXlMb2dpbmRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYFBRhjdGwwMCRMb2dpblN0YXR1czEkY3RsMDEFGGN0bDAwJExvZ2luU3RhdHVzMSRjdGwwMwUiY3RsMDAkTWFpbkNvbnRlbnQkcmJFeGlzdGluZ01lbWJlcgUdY3RsMDAkTWFpbkNvbnRlbnQkcmJOZXdNZW1iZXIFHWN0bDAwJE1haW5Db250ZW50JHJiTmV3TWVtYmVykV9abJNHuNgL441+VmD4iPEq9Bg=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=zU9aq3bbkSvgw3OYU-u5XFkq0l4LoCwHFr9S5FOsIgQVsWYiTTdCYCijlA302CHGLHx0sg2&t=634210400612724343" type="text/javascript"></script>
<script src="/WebResource.axd?d=Zk81Z4C8G8DXldNoGNf8Z_2GBJ9XiOXkOI4Ay2XZRVzPq7F3j9b2z81RMiPp3nNPN7nzoTMK-pD_jEIu2e2oyFf9pS41&t=634210400612724343" type="text/javascript"></script>
<script src="/WebResource.axd?d=0sLRI7n71fW27LNCWM9O6iqOy8v2tNXXti8hupDC0T78K82IErLD8Soi4XyPIWiwFfmJpw2&t=634210400612724343" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;return submitForm();
return true;
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLI7Y+4DgLh8vmTCAL+4L5OAr7C0K8NAu3vp7YPAtqmqyECwfzBkwoC78603ggCzaPcqwwCkZyKvQ8C09GzpwF2P6jZYvvVKVJpSY9a6RmiD4Hm5Q==" />
</div>
<!--// LOADING TAB SURROUNDING DIV SET TO DISPLAY NONE AS NOT RETURNING LOGIC BREAKS THINGS //-->
<div style="display:none">
<div id="loading" class="loadingTab" style="display: none;">Loading...</div>
</div>
<div class="container_12">
<!--// LOGO //-->
<div class="logo grid_8">
<a href="/Dashboard/Default.aspx">IMAGE<a>
</div>
<!--// SIGN IN/OUT & MY PREFS TABS //-->
<div class="topRightControls">
<div class="grid_2"> </div>
<a id="ctl00_LoginStatus1" class="grid_2 signInOutTab" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl02','')">Sign In</a>
</div>
<!--// PRIMARY NAV BAR //-->
<div class="primaryNav grid_12">
<ul class="tabNav"><li><a class="navItemInactive" href="/Community/NewsLatest.aspx" ><span>Community</span></a></li></ul>
</div>
<!--// SECONDARY NAV BAR //-->
<div class="secondaryNav grid_12">
<div class="nav"><ul class="tabNav"><li><a class="navItemActive" href="/Login.aspx" title="" ><span>Sign In</span></a></li></ul></div>
<IMAGE style="float: right; margin-top: 6px;" />
</div>
<div class="clear"></div>
<!--// OLD SIDEBAR NAV //
<div class="sideMenuNavigation">
</div>-->
<!--// MAIN CONTENT //-->
body {margin-top: 0;}
in an IE8 conditional style sheet fixed it - simple but bloody confusing as to why it would render differently within the same browser - thanks for the help folks
I'm going slightly insane here. I've been trying to figure out what is the problem for the past 24 hours, but I simply can't figure out what is wrong.
I have an article submission framework. First the user inputs some article text fields, then he uploads 2 pictures, then he crops them. The problem occurs when I try to crop the images - the submit button simply doesn't work. I click it and nothing happens.
However this only happens in IE.
In FF and Chrome it works flawlessly.
This is the aspx code of the CropImages view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Admin/Site.Admin.Master" Inherits="System.Web.Mvc.ViewPage<dr_teman_MVC.Models.ImagesUploadModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image1.originalImageAddress)%>" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image2.originalImageAddress)%>" alt="cropImage2" id="crop_target2" "/>
</div>
<% using (Html.BeginForm("ArticleCreated", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "<%= Html.Encode((Model.newArticle.ArticleID).ToString()) %>"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
<%} %>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="htmlHead" runat="server">
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server"></asp:Content>
do you need the code of any other part? (the relevant models? the controller?)
The aspx page is displayed, with the pictures. The cropping mechanism works - I can select the crop region in both images. But in IE, when I click on submit, nothing happens. I added a breakpoint to the relevant controller (Admin/ArticleCreated), but it doesn't even get there (the code does reach the controller which calls this aspx view, and passes all the information as expected).
So, does anyone know why IE is causing me such problems?
Any suggestion would be welcome, I am really stumped here...
Thank you,
Tom
This is the HTML source as shown in IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Dr. Joseph Teman - Discover The Beautiful You
</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Framework CSS -->
<link id="ctl00_Link1" rel="stylesheet" href="../Content/blueprint/screen.css" type="text/css" media="screen, projection" /><link id="ctl00_Link2" rel="stylesheet" href="../Content/blueprint/print.css" type="text/css" media="print" />
<!-- Site Specific CSS -->
<link id="ctl00_Link3" href="../Content/theme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!-- Import buttons plugin -->
<link id="ctl00_Link4" rel="stylesheet" href="../Content/blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
<!-- Import link-icons plugin -->
<link id="ctl00_Link5" rel="stylesheet" href="../Content/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery.imgareaselect-0.9.2/css/imgareaselect-animated.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</head>
<body id="ctl00_Body2">
<div class="contentbg">
<div class="headerbg">
<div class="container mainwrap">
<div class="header">
<div class="copyright">
<p>Copyright information here</p>
</div><!--/copyright-->
<div class="sitename">
<h1>Dr. Joseph Teman</h1>
<h3>Discover The Beautiful You</h3>
</div>
<ul class="nav">
<li class="about">ראשי</li>
<li class="about">הוסף מאמר חדש</li>
<li class="about">ערוך מאמר קיים</li>
</ul><!--/nav-->
</div><!--/header-->
<div>
</div>
<div>
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="/images/articleImages/146/1.jpg" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="/images/articleImages/146/2.jpg" alt="cropImage2" id="crop_target2" "/>
</div>
<form action="/Admin/ArticleCreated" enctype="multipart/form-data" method="post">
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "146"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
</form>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</div>
<!--footer-->
<div class="footer">
<ul class="nav">
<li>ראשי</li>
<li>אודות</li>
<li>התחבר</li>
<li class="last">מאמרים</li>
</ul>
<p align="left">Copyright © Dr. Joseph Teman 2010</p>
</div><!--/footer-->
</div><!--/container mainwrap-->
</div><!--/headerbg-->
</div><!--/contentbg-->
</body>
</html>