I am working on a asp.net mvc5 project and I just noticed it doesn't allow me to use 'åäö' well it allows me to use these characters but it shows up like this. 'ä' and so on.
The weird thing I can use the characters in my nav bar but on a page it won't allow it.
This is my login page:
It should say "Användarnamn" and "Lösenord".
But it my navbar it works correctly..
this is my shared _Layout every site inherits from
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Treetop #ViewBag.Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
</head>
<body>
#if (User.Identity.IsAuthenticated)
{
<div class="page-header">
<div class="page-header-top">
<div class="container">
<div class="page-logo">
<h3>Treetop Innovation</h3>
</div>
</div>
</div>
<div class="page-header-menu">
<div class="container">
<div class="hor-menu ">
<ul class="nav navbar-nav">
<li>
#Html.ActionLink("Ny Rapport", "TimeReport", "Reports")
</li>
<li>
#Html.ActionLink("Rappotera frånvaro", "Absent", "Reports")
</li>
<li>
#Html.ActionLink("Rapporter", "Index", "Reports")
</li>
<li>
#Html.ActionLink("Inställningar", "Settings", "Reports")
</li>
<li>
#Html.ActionLink("Mina projekt", "Index", "Projects")
</li>
<li>
#Html.ActionLink("Begär semester", "Index", "Vacation")
</li>
</ul>
</div>
<div class=" hor-menu nav navbar-nav pull-right">
<ul class="nav navbar-nav">
<li><a>#User.Identity.Name</a></li>
<li>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
{
#Html.AntiForgeryToken()
Log off
}
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function () {
Metronic.init();
Layout.init();
Demo.init();
ComponentsPickers.init();
TableAdvanced.init();
});
</script>
}
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("scripts", required: false)
</body>
</html>
This is the view that does not work:
<body class="login">
<div class="logo">
<h3 style="color: white">Treetop Innovation</h3>
</div>
<div class="content">
#using (Html.BeginForm("LogOn", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "login-form", role = "form" }))
{
#Html.AntiForgeryToken()
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
</span>
</div>
<h3 class="form-title">Logga in</h3>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-user"></i>
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Användarnamn" })
</div>
#Html.ValidationMessageFor(m => m.UserName, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-lock"></i>
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Lösenord" })
</div>
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
<div class="form-actions">
<div class="checkbox" style="padding: 0 20px">
#Html.CheckBoxFor(m => m.RememberMe)
Kom ihåg
</div>
<button type="submit" class="btn green-haze pull-right">
Login <i class="fa fa-arrow-right"></i>
</button>
</div>
}
</div>
</body>
This is basically a encoding issue. read more There Ain't No Such Thing as Plain Text
Användarnamn = Användarnamn
and
Lösenord = Lösenord
You can use HTML Entities or ISO Latin-1 code for these special characters.
https://www.utexas.edu/learn/html/spchar.html
UPDATE
#Broam's answer which solved the issue
Short version: edit one file, select File -> Advanced Save Options.
Instead of changing UTF-8 to Ascii, change it to UTF-8. Edit: Make
sure you select the option that says no byte-order-marker (BOM)
You have to save the .cshtml file with the right Encoding.
File > Save MyFile.cshtml As...
Chose Save with Encoding...
Chose Yes to replace it.
Chose UTF-8.
Related
I am developing an e-commerce website using Node, Express, Mongoose, and Bootstrap, and I am experiencing unexpected behavior regarding "bootstrap.min.css.map".
I've seen it appear in the console with the following error: 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model "Product"'.
I am also seeing it appear as the text of a button. When I remove the link to the bootstrap.min.css in my header then the expected behavior returns, but then I lose the bootstrap styling on the page.
I've searched and have seen posts about removing the following from my code: /*# sourceMappingURL=bootstrap.css.map */ via not linked to bootstrap.css.map but shows in console, but I use the cdn to include the boostrap.min.css file, so I don't think it's possible for me to do that.
It also appears for me in the dev console: DevTools failed to load SourceMap: Could not load content for http://localhost:3000/products/sort/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
I reduced the code to the smallest way I can reproduce it. The following code will show navigation buttons for pages on the left and a dropdown for sorting on the right.
Upon changing the sort the button on the left will be overridden with "bootstrap.min.css.map" as shown in the following pictures :
This is how the button looks before I change the sort
This is how the button looks after I change the sort
The following is the routes and ejs, the routes are prepended by 'products'
const express = require('express');
const router = express.Router();
const userUtil = require('../utilities/user');
const Product = require("../models/product");
let foundProducts;
let page;
let pages;
router.get("/sort", (req, res) => {
//res.send('page = ' + page);
if (foundProducts.length > 0) {
console.log('we are in the sort');
sort.sortBy(foundProducts, req.query.sortBy);
return res.render("products/products", {
products: foundProducts,
query: "",
order: req.query.sortBy,
successMsg: "",
noMessage: true,
currentPage: page,
pages: pages
});
}
res.redirect("/products");
});
router.get("/:page", async(req, res) => {
try {
page = req.params.page || 1;
const limit = 10;
const products = await Product.find({})
.limit(limit * 1)
.skip(page - 1)
.exec();
const count = await Product.estimatedDocumentCount();
pages = Math.ceil(count / limit);
foundProducts = products;
userUtil.setAdmin(req);
const successMsg = req.flash('successfulMsg')[0];
res.render("products/products", {
products: products,
successMsg: successMsg,
noMessage: (successMsg) ? false : true,
order: "",
query: "",
currentPage: page,
pages: pages
});
} catch (error) {
console.log("The error is " + error);
}
});
router.get("/", async(req, res) => {
res.redirect("/products/1");
});
module.exports = router;
<!-- header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/main.css">
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- header end-->
<div class="container">
<div class="row text-center align-items-start mb-2" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-4 mt-4 mb-0">
<nav aria-label="Page navigation">
<ul class="pagination">
<% if (currentPage> 2 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
<% } %>
<% if (currentPage> 1 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) - 1 %>" aria-label="Previous">
<span aria-hidden="true"><</span>
<span class="sr-only">Previous</span>
</a>
</li>
<% } %>
<% if (pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) %>">
<%= currentPage %>
</a>
</li>
<% } %>
<% if (pages> 1 && pages > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) + 1 %>" aria-label="Next">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
<% if (pages> 1 && pages - 1 > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(pages) %>" aria-label="Last">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="col-sm-6 mt-4 mb-0">
<form action="/sort/" method="POST" class="float-right">
<div class="form-group " style="display:inline-flex;">
<label for="l-sort-by" class="mt-2 mr-2">Sort: </label>
<select class="custom-select selectpicker" name="sortBy" id="inputGroupSelect02" onchange="this.form.submit();" value="price_desc">
<option value="price_asc">Lowest Price</option>
<option value="price_desc">Highest Price</option>
<option value="name_asc">Name Ascending</option>
<option value="name_desc">Name Descending</option>
</select>
<input type="hidden" name="searched" value="<%=query%>">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$("#inputGroupSelect02 option[value='<%=order%>']").attr("selected", "selected");
</script>
<!-- footer -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>
</body>
</html>
<!-- footer end -->
The problem seemed to stem from the bootstrap version I was using. I was using version 4.4.1 and when I reverted to version 4.1.3 everything began working as expected. The reason I figured this out was because I went through my git history and realized at some point that I changed the bootstrap version. The problem didn't present itself until later but that hint put me in the right direction.
I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li>Build A Box</li>
<li>FAQ</li>
<li>Contact Us</li>
#if (User.Identity.IsAuthenticated)
{
<li>My Account</li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
<li></li>
}
}
else
{
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.TextBoxFor(m => m.Email, new { #class = "input-text", #placeholder="Email Address"})
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
#Html.PasswordFor(m => m.Password, new { #class = "input-text", #placeholder="Password" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
I have a mobile web app that uses Bootstrap. Everything looks fine on a desktop; however, when I pull up certain pages on an iPhone 4S, the nav bar is much narrower than it should be. Both of the pages that have this behavior have tables, so that may have something to do with it.
Screenshot:
My shared _Layout Razor view looks like this:
#using FCTech.Quotes.Helpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#RenderSection("Styles", false)
</head>
<body>
<header>
<div class="content-wrapper">
<div>
<nav class="navbar navbar-default col-xs-12">
<div class="container-fluid">
<div class="navbar-header float-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navLinks" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Home", "Index", new { controller = "Home" }, new { #class = "logo navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
#if (HttpContext.Current.User.Identity.IsAuthenticated)
{
<li>#Html.ActionLink("Quotes", "Index", new {controller = "Quotes", salesPerson = AccountHelper.GetCurrentUserFullName()})</li>
<li>#Html.ActionLink("Orders", "Index", new {controller = "Orders", salesPerson = AccountHelper.GetCurrentUserFullName()})</li>
}
#if (HttpContext.Current.User.Identity.IsAuthenticated && AccountHelper.AuthorizeAdmin())
{
<li>#Html.ActionLink("Shipments", "ShipmentSummary", new { controller = "Admin", salesPerson = AccountHelper.GetCurrentUserFullName() })</li>
<li>#Html.ActionLink("Bookings", "BookingSummary", new { controller = "Admin", salesPerson = AccountHelper.GetCurrentUserFullName() })</li>
}
<li>
#if (Request.IsAuthenticated)
{
#Html.ActionLink("Log Off", "LogOff", "Account")
}
else
{
#Html.ActionLink("Log in", "Login", "Account")
}
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<div id="body" class="content">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-right">
<p>v #typeof(FCTech.Quotes.MvcApplication).Assembly.GetName().Version</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("Scripts", required: false)
</body>
</html>
And the body of one of the views that is displaying incorrectly looks like this:
#using System.Linq
#model IEnumerable<FCTech.Quotes.Models.OpenQuoteModel>
#{
ViewBag.Title = "Open Quotes";
}
<head>
<title>
Open Quotes
</title>
</head>
<fieldset>
<legend>
Open Quotes
</legend>
#if (Model != null && Model.Any())
{
<table id="OpenQuotesTable" class="table table-responsive table-bordered table-condensed table-striped tablesorter">
<thead>
<tr class="header">
<th>
#Html.DisplayNameFor(model => model.QuoteNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.QuoteDate)
</th>
<th>
#Html.DisplayNameFor(model => model.Customer)
</th>
<th>
#Html.DisplayNameFor(model => model.City)
</th>
<th>
#Html.DisplayNameFor(model => model.State)
</th>
<th>
#Html.DisplayNameFor(model => model.EndUser)
</th>
<th>
#Html.DisplayNameFor(model => model.Product)
</th>
<th>
#Html.DisplayNameFor(model => model.TotalValue)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="#(item.QuoteDate < DateTime.Today.AddDays(-30) ? "red" : string.Empty ) ">
<td>
#Html.ActionLink(item.QuoteNumber.ToString(), "Detail", new { quoteNumber = item.QuoteNumber, productLine = item.Product, salesRep = item.SalesRep })
</td>
<td style="text-align: right;">
#Html.DisplayFor(model => item.QuoteDate)
</td>
<td>
#Html.DisplayFor(model => item.Customer)
</td>
<td>
#Html.DisplayFor(model => item.City)
</td>
<td>
#Html.DisplayFor(model => item.State)
</td>
<td>
#Html.DisplayFor(model => item.EndUser)
</td>
<td>
#Html.DisplayFor(model => item.Product)
</td>
<td style="text-align: right;">
#Html.DisplayFor(model => item.TotalValue)
</td>
</tr>
}
</tbody>
</table>
}
</fieldset>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
What am I doing wrong here?
In Bootstrap 3 you should wrap your table tag into a .table-responsive div.
<div class="table-responsive">
<table class="table">
</table>
</div>
http://getbootstrap.com/css/#tables-responsive
To expand on Samuel's answer,
This looks to be simply happening because Bootstrap's media query at that mobile level has a max-width on it with no hidden overflow while the table content exceeds this width.
Mobile tables are always a pain for front-end devs.
Other than the solution Samuel provided, you can always make your own custom media query to display the data in a cleaner way.
Personally, I suggest using jQuery DataTables for your display formatting. DataTables provides handling for smaller devices.
DataTables Responsive example
After having adding DataTables plugin and datatables responsive to your project, initialize it with this property turned on like this:
$(document).ready(function() {
$('#OpenQuotesTable').DataTable( {
responsive: true
} );
} );
I'm using HTML and javaScript .. I'm trying to build a chrome extension , which will display some info from the website in the popup
I need to get the page source of http://met.guc.edu.eg in the context of my web page and use it to get some of the "li" tags and do some work on them ( RegEx )
for example display the courses taken by student in web page -- By taking them from the http://met.guc.edu.eg .. and display them in a nice way in a pop up
Since there is no true answer to this yet, I will post the method I use - I do not know if it's the best way - but it works.
The reason XHR may not be the best idea is because it's not always going to give you the exact source of a certain tab - this way will.
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback)
{
if (request.action == 'getSource')
{
callback(document.documentElement.outerHTML);
}
});
background.html
chrome.tabs.sendRequest(tab.id, {action : 'getSource'}, function(source) {
console.log(source);
});
As asked for, here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Faculty of Media Engineering and Technology (MET) - The German University in Cairo
</title>
<!--[if gte IE 7 ]>
<!-->
<link type="text/css" href="Media/ResourceHandler.ashx?v=1&fileSet=homepage_css&type=text/css" rel="Stylesheet" />
<script type="text/javascript" src="Media/ResourceHandler.ashx?v=1&fileSet=homepage_script&type=application/x-javascript"></script>
<![endif]-->
</head>
<body onload="init();">
<form name="ctl00" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl00">
<div>
<input type="hidden" name="ScriptManager1_HiddenField" id="ScriptManager1_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTYwMjE2MTE1MA9kFgICAw9kFgICBw8WAh4LXyFJdGVtQ291bnQCAhYEZg9kFggCAg8VAgdOZXdzXzE3GFNtYXJ0U29mdCBhcmUgdGhlIGNoYW1wc2QCAw8PFgIeCEltYWdlVXJsBS1+L1JlcG9zaXRvcnkvTmV3c0NvbXBvbmVudC9TT3JpZ2luYWxGaW5hbC5qcGdkZAIEDxUB8QFBZnRlciBjb21wZXRpbmcgYWdhaW5zdCBDU0VOIGFuZCBCSSBjb21wYW5pZXMuIFNtYXJ0U29mdCBtYW5hZ2VkIHRvDQp3aW4gdGhlIFNvZnR3YXJlIEVuZ2luZWVyaW5nIENvbXBldGl0aW9uIGZvciBTcHJpbmcgMjAxMCBhZnRlciBkZXZlbG9waW5nIGFuIG91dHN0YW5kaW5nIG9ubGluZSB0b29sIGZvciBhdXRvbWF0aW5nIGFnaWxlIHNvZnR3YXJlIG1hbmFnZW1lbnQuIENvbmdyYXR1bGF0aW9ucyB0byBTbWFydFNvZnQhZAIFDxYCHgVzdHlsZQUNZGlzcGxheTpub25lOxYCZg8VAQBkAgEPZBYIAgIPFQIGTmV3c18xHE1lZGlhIEVuZ2luZWVyaW5nIGF0IHRoZSBHVUNkAgMPDxYCHwEFJn4vUmVwb3NpdG9yeS9OZXdzQ29tcG9uZW50L2xpYnJhcnkuanBnZGQCBA8VAfEBTWVkaWEgRW5naW5lZXJpbmcgYW5kIFRlY2hub2xvZ3kgYWltcyBhdCB0aGUgZXZvbHZpbmcgZmllbGQgb2YgbmVhcmx5IGFsbCBhc3BlY3RzIG9mIGluZm9ybWF0aW9uIGFuZCBtdWx0aW1lZGlhIHByb2Nlc3NpbmcuIFRoZSBzdHVkeSBwcm9ncmFtIGluICJNZWRpYSBFbmdpbmVlcmluZyBhbmQgVGVjaG5vbG9neSIgcmVzdHMgb24gdGhlIHNhbWUgZnVuZGFtZW50YWxzIGFzIGZvciBJbmZvcm1hdGlvbiBUZWNobm9sb2d5LmQCBQ9kFgJmDxUBE0Fib3V0L1Byb2dyYW1zLmFzcHhkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBR1Mb2dpblVzZXJDb250cm9sMSRsb2dpbkJ1dHRvbgUkTG9naW5Vc2VyQ29udHJvbDEkUmVtZW1iZXJNZUNoZWNrYm94BRxMb2dpblVzZXJDb250cm9sMSRNdWx0aVZpZXcxDw9kZmQFNkxvZ2luVXNlckNvbnRyb2wxJEhvbWVwYWdlVG9vbHNNZW51Q29udHJvbDEkTXVsdGlWaWV3MQ8PZGZk++EYs51/1WiGabXN2nlBpWq7B38=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
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=hjWzicBH57aDEOAXMpQVJQ2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=H0761Oq7Alukyw82KELp8-Txl2kQFm7sZfTkrcnjSDzxZz0PrQZLm48rbx9Jm7dI_LMT2zH0QUfg9RJVLEsm7Q2&t=633566901938396560" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetGqltgG2yF0m6QP4thTRHlI1&t=633432692861214540" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9NKqPW-jeqHS98DhHZ6Iy5ulSdcD3uOEBYcWmPxYVzi01PBdj_S7yBr5N-59MNCSkIHANMTKEfgCCoAEWIDetB9rztfIh11Bb3t4nicyu881&t=633432692861214540" type="text/javascript"></script>
<script src="/Default.aspx?_TSM_HiddenField_=ScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d1.0.10920.32880%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a816bbca1-959d-46fd-928f-6347d6f2c9c3%3a9ea3f0e2%3ae2e86ef9%3a9e8e87e9%3a1df13a87%3a4c9865be%3aba594826%3a757f92c2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('ctl00'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<!-- Page Container -->
<div id="container">
<!-- Header and Menu -->
<div id="headerAndMenu">
<!-- Title -->
<h1 id="logo">
<a href="http://www.guc.edu.eg" target="_blank">
<img src="Media/Images/HomePage/Logo.png.ashx" alt="The German University in Cairo" /></a></h1>
<h2 id="title">
Faculty of Media Engineering and Technology</h2>
<!-- Title -->
<!-- Menu -->
<div id="menu">
<div id="mainPart">
<div id="aboutMET" onmouseenter="opacity('aboutMETSubMenu',0,100,5)" onmouseleave="opacity('aboutMETSubMenu',100,0,5)">
<div id="aboutMETSubMenu">
<ul id="aboutMETSubMenuList">
<li id="programs"><a class="main" href="About/Programs.aspx">Programs</a> </li>
<li id="degrees"><a class="main" href="About/Degrees.aspx">Degrees</a> </li>
<li id="ourPeople"><a class="main" href="People/">OurPeople</a></li>
<li id="admission"><a class="main" href="About/Admission.aspx">Admission</a> </li>
</ul>
</div>
</div>
<div id="academics" onmouseenter="opacity('academicsSubMenu',0,100,5)" onmouseleave="opacity('academicsSubMenu',100,0,5)">
<div id="academicsSubMenu">
<ul id="academicsSubMenuList">
<li id="underGraduate"><a class="main" href="Courses/Undergrad.aspx">
Undergraduate Courses </a></li>
<li id="graduate"><a class="main" href="Courses/Grad.aspx">
Graduate Courses</a> </li>
<li id="courseCatalogue"><a class="main" href="Courses/">Course
Catalogue</a> </li>
<li id="research"><a class="main" href="Research/">Research</a> </li>
</ul>
</div>
</div>
<div id="extras" onmouseenter="opacity('extrasSubMenu',0,100,5)" onmouseleave="opacity('extrasSubMenu',100,0,5)">
<div id="extrasSubMenu">
<ul id="extrasSubMenuList">
<li id="activities"><a class="main" href="Activities/">Activities</a>
</li>
<li id="onlineTutorials"><a class="main" href="OnlineTutorials/"
>Online Tutorials</a> </li>
<li id="staffBlog"><a class="main" href="#">Staff Blog</a> </li>
<li id="showCase"><a class="main" href="#">Showcase</a> </li>
<li id="forum"><a class="main" href="Forum/">Forum</a> </li>
</ul>
</div>
</div>
<div id="agenda" onmouseenter="opacity('agendaSubMenu',0,100,5)" onmouseleave="opacity('agendaSubMenu',100,0,5)">
<div id="agendaSubMenu">
<ul id="agendaSubMenuList">
<li id="announcements"><a class="main" href="Agenda/Announcements.aspx">Announcements</a>
</li>
<li id="calendar"><a class="main" href="Agenda/">Calendar</a> </li>
<li id="policies"><a class="main" href="About/Policies.aspx">Policies</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Menu -->
</div>
<!-- /Header and Menu -->
<!-- Content -->
<div id="content">
<!-- Login -->
<div id="login">
<div class="homePageLoginDiv">
<div id="Div1" style="position: relative; top: 5px;">
<div>
<div class="tools-menu-header" id="login_label">
<img style="border-style: none; vertical-align: middle; padding-right: 5px;" src="Media/Icons/key_go.png.ashx"><span
class="label">Login</span></div>
<div class="tools-menu-body" id="tools-menu-div">
<label>
GUC Email
</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$usernameTextBox" type="text" id="LoginUserControl1_usernameTextBox" class="userNameTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginEmailRequiredFieldValidator" style="color:Red;display:none;"></span>
<span id="LoginUserControl1_LoginEmailFormatValidator" style="color:Red;display:none;"></span>
<label>
Password</label>
<div class="leftTBoxSide">
</div>
<div>
<input name="LoginUserControl1$passwordTextBox" type="password" id="LoginUserControl1_passwordTextBox" class="passwordTBox" /></div>
<div class="rightTBoxSide">
</div>
<span id="LoginUserControl1_LoginPasswordRequiredFieldValidator" style="color:Red;display:none;"></span>
<input type="image" name="LoginUserControl1$loginButton" id="LoginUserControl1_loginButton" class="loginBtn" src="Media/Images/HomePage/goButton.gif.ashx" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LoginUserControl1$loginButton", "", true, "", "", false, false))" style="border-width:0px;" />
<span class="checkbox"><input id="LoginUserControl1_RememberMeCheckbox" type="checkbox" name="LoginUserControl1$RememberMeCheckbox" /></span>
<label class="checkbox_label" for="LoginUserControl1_RememberMeCheckbox">
Remember me</label>
<a id="LoginUserControl1_forgotPasswordButton" class="forgotPasswordBtn" href="javascript:__doPostBack('LoginUserControl1$forgotPasswordButton','')">Forgot password?</a><span
style="margin-right: 3px;">Student?</span>Register</div>
</div>
</div>
</div>
</div>
<!-- /Login -->
<!-- Search -->
<div id="search">
</div>
<!-- /Search -->
<!-- News -->
<div id="news">
<!-- News Glider-->
<div id="newsGlider">
<div id="previousDiv">
<img src="Media/Images/HomePage/prev.png.ashx" id="previous" alt="Previous" onclick="my_glider.previous();return false;" /></div>
<div class="scroller">
<div class="content">
<input type="hidden" name="newsRepeater$ctl00$idHdnField" id="newsRepeater_ctl00_idHdnField" value="17" />
<div class="section" id='News_17'>
<h2 class="newsTitle">
SmartSoft are the champs
</h2>
<img id="newsRepeater_ctl00_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/SOriginalFinal.jpg" style="border-width:0px;" />
<p class="newsParagraph">
After competing against CSEN and BI companies. SmartSoft managed to
win the Software Engineering Competition for Spring 2010 after developing an outstanding online tool for automating agile software management. Congratulations to SmartSoft!
</p>
<div id="newsRepeater_ctl00_morelink" style="display:none;">
<a class="newsLink" href=""
target="_blank">more</a>
</div>
</div>
<input type="hidden" name="newsRepeater$ctl01$idHdnField" id="newsRepeater_ctl01_idHdnField" value="1" />
<div class="section" id='News_1'>
<h2 class="newsTitle">
Media Engineering at the GUC
</h2>
<img id="newsRepeater_ctl01_Image1" class="newsImage" alt="MET Stories" src="Repository/NewsComponent/library.jpg" style="border-width:0px;" />
<p class="newsParagraph">
Media Engineering and Technology aims at the evolving field of nearly all aspects of information and multimedia processing. The study program in "Media Engineering and Technology" rests on the same fundamentals as for Information Technology.
</p>
<div id="newsRepeater_ctl01_morelink" style="display: block;">
<a class="newsLink" href="About/Programs.aspx"
target="_blank">more</a>
</div>
</div>
</div>
</div>
<img src="Media/Images/HomePage/next.png.ashx" id="next" alt="Next" onclick="my_glider.next();return false;" /><!--<div id="nextDiv"></div> -->
</div>
</div>
<!-- /News -->
<!-- Footer -->
<div id="footer">
<h5 class="right">
<a href="Feeds/RSS.aspx">
<img src="Media/Icons/rss.png.ashx" alt="RSS" style="border-style: none; position: relative;
top: 3px; padding-right: 2px;" /><b>RSS</b> Feeds</a> <a href="Credits/robusta.aspx">
Credits</a>
</h5>
<h5 class="left">
Copyright © 2008 GUC. All Rights Reserved.</h5>
</div>
<!-- /Footer -->
</div>
<!-- /Content -->
</div>
<!-- /Page Container -->
<!-- Extra Divs -->
<!-- /Extra Divs -->
<div id="glider_script">
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('newsGlider', {duration:1.0, autoGlide:true, frequency:15});
</script>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator"), document.getElementById("LoginUserControl1_LoginEmailFormatValidator"), document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var LoginUserControl1_LoginEmailRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginEmailRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginEmailRequiredFieldValidator");
LoginUserControl1_LoginEmailRequiredFieldValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailRequiredFieldValidator.errormessage = "Email required.";
LoginUserControl1_LoginEmailRequiredFieldValidator.display = "None";
LoginUserControl1_LoginEmailRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailRequiredFieldValidator.initialvalue = "";
var LoginUserControl1_LoginEmailFormatValidator = document.all ? document.all["LoginUserControl1_LoginEmailFormatValidator"] : document.getElementById("LoginUserControl1_LoginEmailFormatValidator");
LoginUserControl1_LoginEmailFormatValidator.controltovalidate = "LoginUserControl1_usernameTextBox";
LoginUserControl1_LoginEmailFormatValidator.errormessage = "Must be in the form of user#student.guc.edu.eg OR user#guc.edu.eg";
LoginUserControl1_LoginEmailFormatValidator.display = "None";
LoginUserControl1_LoginEmailFormatValidator.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
LoginUserControl1_LoginEmailFormatValidator.validationexpression = "\\w+([-+.\']\\w+)*#(student.)?guc.edu.eg";
var LoginUserControl1_LoginPasswordRequiredFieldValidator = document.all ? document.all["LoginUserControl1_LoginPasswordRequiredFieldValidator"] : document.getElementById("LoginUserControl1_LoginPasswordRequiredFieldValidator");
LoginUserControl1_LoginPasswordRequiredFieldValidator.controltovalidate = "LoginUserControl1_passwordTextBox";
LoginUserControl1_LoginPasswordRequiredFieldValidator.errormessage = "Password required.";
LoginUserControl1_LoginPasswordRequiredFieldValidator.display = "None";
LoginUserControl1_LoginPasswordRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
LoginUserControl1_LoginPasswordRequiredFieldValidator.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailRequiredFieldValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailRequiredFieldValidator"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior, {"closeImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hefaIKnoyXSIFnFPdZX8u_dwAMV0u0RfKJgPDjFETh3g1&t=633887970297152468","highlightCssClass":"invalidInput","id":"LoginUserControl1_LoginEmailFormatValidatorExtender","warningIconImageUrl":"/WebResource.axd?d=E9XUtTpBpgn1nrqvm7JdsQNAiTSrs01kvYMfJ6_c6indZV0XUSo9nn5ewbqAXA5hpBwM9IEYB0L_JPlcVCV_StBVa8rc0SgI1L1ARCQ2e4o1&t=633887970297152468"}, null, null, $get("LoginUserControl1_LoginEmailFormatValidator"));
});
document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailRequiredFieldValidator'));
}
document.getElementById('LoginUserControl1_LoginEmailFormatValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginEmailFormatValidator'));
}
document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator').dispose = function() {
Array.remove(Page_Validators, document.getElementById('LoginUserControl1_LoginPasswordRequiredFieldValidator'));
}
//]]>
</script>
</form>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6040050-1");
pageTracker._trackPageview();
</script>
</body>
</html>
You can usually get the source for any website by hitting ctrl+u (at least for Chrome)
You need to read up on XHR.
See here: http://code.google.com/chrome/extensions/xhr.html
This will let you load the contents of http://met.guc.edu.eg into a variable.
Then you you need to read up on regexp, which would let you extract the information that you want.
It is almost impossible to give a full answer without actually doing it.
You may find it easier to load the content in an Iframe that you control the dimensions / scroll of.
I've a nav bar and when I click any tab in the nav bar, it takes me to that tab.
<section id="tabs">
<div class="mob-nav">
<div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist">
<!-- N add new class nav-tabs-scroll -->
<a class="nav-item nav-link" style="padding-top: 10px;"
ng-class="{ active: $index == 0 }"
id="nav-{{menuTab.menuURL}}-tab"
data-toggle="{{menuTab.dataToggle}}"
data-target="#{{menuTab.menuURL}}"
href="#{{menuTab.menuURL}}" role="tab"
aria-controls="nav-{{menuTab.menuURL}}"
ng-repeat="menuTab in menuList">
</a>
</div>
</div>
</section>
<!-- Tab Details -->
<section id="tabs">
<div class="">
<div class="">
<div class="mb-d-150">
<div class="tab-content py-3 px-sm-0 pl-0 pr-0"
id="nav-tabContent">
<!-- N removed py-3 class -->
<div class="tab-pane fade show"
ng-class="{ active: $index == 0 }"
id="{{menuTab.menuURL}}" role="tabpanel"
data-target="#{{menuTab.menuURL}}"
aria-labelledby="nav-{{menuTab.menuURL}}-tab"
ng-include="menuTab.colDef"
ng-repeat="menuTab in menuList">
</div>
<div class="tab-pane fade" id="changepass" role="tabpanel"
aria-labelledby="nav-about-tab"
ng-include="changePasswordTemplate">
</div>
</div>
</div>
</div>
</div>
</section>
Here's an example of menuList.
[{
menuID: "USER LANDING PAGE"
caption: "Dashboard"
parent: "root"
menuURL: "exampleModal"
cssClass: "fas fa-cog fa-lg"
cssParent: "nav navbar-nav"
aClass: "customerLandingPageTemplate"
SlNum: 98
colDef: "/js/templates/user-landing-page.html"
menuList: []
dataToggle: "modal"
},{
menuID: "USER QUERIES"
caption: "USER QUERIES"
parent: "root"
menuURL: "user-queries"
cssClass: "fas fa-comment-alt fa-lg"
cssParent: "nav navbar-nav"
aClass: "userQueriesTemplate"
SlNum: 100
colDef: "/js/templates/user-queries.html"
menuList: []
dataToggle: "tab"
}]
Here's the angularjs part which gives me the menuList:
GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
$scope.menuList = data;
console.log($scope.menuList)
});
When I refresh browser, it always takes me back to the USER LANDING PAGE no matter where I refresh. But on browser refresh, I need to reload the page where I was before refreshing.
You could use the session storage for saving the last state.
Internal code snippet does not allow to use session storage.
A working example on JSBin.
angular.module('app', ['ui.router'])
.config(($stateProvider) => {
const helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
const aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
.run(($state, $transitions) => {
$transitions.onSuccess({}, transition => {
sessionStorage.setItem('lastState', transition.to().name);
});
const lastState = sessionStorage.getItem('lastState');
if (lastState) {
$state.go(lastState);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<body ng-app="app">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>