I am trying to display an image on my home page. MY Index.cshtml code looks as follows:
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<h4>View results by:</h4>
<ul id="friend">
<li>#Html.ActionLink("Countries", "Countries", "Home")</li>
<li>#Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
<img id="banner" src="oly1.jpg"/>
</div>
For some reason, though, the image does not show on my page. I have the image saved to my desktop, and when I did the same thing for another project (using an image saved to the desktop), it worked with the same syntax. I was using pure html, though.
Any ideas?
Try this:
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<h4>View results by:</h4>
<ul id="friend">
<li>#Html.ActionLink("Countries", "Countries", "Home")</li>
<li>#Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
<img id="banner" src="#Url.Content("~/oly1.jpg")"/>
</div>
~ refers to the root of your web site. If you have your image file at the root, then use the above path. If your image is inside Content/images, use ~/Content/images/oly1.jpg.
Example:
Related
I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.
I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.
I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.
I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#flags">A
<i>Alfa</i></a></li>
<li><a href="#flags#B">B
<i>Bravo</i></a></li>
<li><a href="#flagsC">C
<i>Charlie</i></a></li>
</ul>
</div>
</div>
<div class="ui-page" id="flags">
<header class="ui-header">
<h2 class="ui-title">Select Flag</h2>
</header>
<div class="ui-content">
<a id="A">A-Alfa</a><br>
<a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
<a id="B">B-Bravo</a><br>
<a><b>International Call Signals</b><br></a><br>
<a id="flagsC">C-Charlie</a><br>
<a><b>International Call Signals</b><br>Affirmative</a><br>
</div>
</div>
Any help would be hugely appreciated
Not the cleanest solution but i ended up using a javascript function to achieve my goal.
function loadPage2(flagSelection) {
window.localStorage.setItem("flagSelected", flagSelection);
location.href="flagsPage.html";
}
triggered by;
<li><a onclick=loadPage2("#A");>A
<i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
<i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
<i>Charlie</i></a></li>
and on the second page;
var flagSelection = window.localStorage.getItem("flagSelected");
function jumpToFlag() {
location.href="#";
location.href=flagSelection;
}
const load = () => {
console.log("load event detected!");
}
window.onload = jumpToFlag();
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together
I use kendo view ,
my html code is :
<div id="permission" data-role="tabstrip" data-animation="false">
<ul class="bd-doc-navigation-tabstrip tabstip-header" data-freezable="false">
<li class="k-state-active">
<p>Rigs</p>
</li>
<li>
<p>Actors</p>
</li>
</ul>
<div id="permission-tabstrip-1"></div>
</div>
but after rendering page instead of "permission-tabstrip-1" I see "permission-1".
I dont know whats going happen . I havent used "permission-tabstrip-1" anywhere else .
I changed :
<div id="permission" data-role="tabstrip" data-animation="false">
to :
<div id="permission-tabstrip" data-role="tabstrip" data-animation="false">
In an ASP.NET MVC project I would like to display a brief message to the user, eg. 'Hello, username!'
i the navigational bar, if the user is signed in. I'm using the standard bootstrap layout, and trying this, but it appears weirdly. I'm not sure what CSS ot HTML to change. Here's what I'm trying.
#if (Session["Username"] != null)
{
<ul class="nav navbar-nav navbar-right">
<li>Hello, #Session["Username"]</li>
<li>#Html.ActionLink("Logout", "Logout", "Home")</li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Register", "Register", "Home")</li>
</ul>
}
That's in my _Layout page. The right text appears, but it's kind of off-centre and dark, not easily visible. How can I make it appear just like the actionlinks?
You can use htmlAttributes to change the style
<li>#Html.ActionLink("Logout", "Logout", "Home", htmlAttributes: new { #style="font-size:small;color:blue" })</li>
<div class="container-fluid">
<div class="sidebar left">
<div id="app-navigation" class="well">
<h5>Administration</h5>
<ul class="administration-list">
<li class="user">User</li>
<li class="emails">Emails</li>
<li class="settings">Settings</li>
<li class="logs">Logs</li>
<li class="help">Help</li>
</ul>
<h5>Managing tools</h5>
<ul class="tools-list">
<li class="ressource"><i class="icon-home icon-white" </i>Ressources</li>
<li class="playlist">Playlist</li>
<li class="schedule">Schedule</li>
<li class="stations">Stations</li>
</ul>
</div>
</div>
</div>
I don't understand why my icon doesn't show up. I'm starting a new project and decided to try out initializr with bootstrap. Just can't make those icon appear. It's seems there's an invisible icon just before my text... I have check the documentation too, here. I also checked within my boostrap.less, sprites.less and variables.less (everything seems okay...).
My variable are correctly set and my image (PNG) are in my ../img folder.
// Sprite icons path
// -------------------------
#iconSpritePath: "../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
The file variables.less is at the bootstrap folder, so you need one more level to get to root.
Try to set the path to:
#iconSpritePath: "../../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../../img/glyphicons-halflings-white.png";
In the newest Bootstrap icons are included with the new class glyphicon:
<i class="glyphicon glyphicon-heart"></i>
In some cases that will probably be the problem.
I had to copy the img folder from bootstrap in the less folder... or you could change the variable to point to root/img folder.
Open the rewrites.php file in the 'lib' folder. Add the following line within the function 'roots_add_rewrites($content)':
'assets/fonts/(.*)' => THEME_PATH . '/assets/fonts/$1',
The function should look like this:
function roots_add_rewrites($content) {
global $wp_rewrite;
$roots_new_non_wp_rules = array(
'assets/css/(.*)' => THEME_PATH . '/assets/css/$1',
'assets/js/(.*)' => THEME_PATH . '/assets/js/$1',
'assets/img/(.*)' => THEME_PATH . '/assets/img/$1',
'assets/fonts/(.*)' => THEME_PATH . '/assets/fonts/$1',
'plugins/(.*)' => RELATIVE_PLUGIN_PATH . '/$1'
);
$wp_rewrite->non_wp_rules = array_merge($wp_rewrite->non_wp_rules, $roots_new_non_wp_rules);
return $content;
}