I have a given two link on side navbar. but It's not working why?
Here is my code:
Admin.Master
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
Create User
Security
<%--Link 3--%>
</div>
<div class="w3-main" style="margin-left: 200px; padding-top: 50px;">
<div class="w3-container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
UPDATE
<asp:LinkButton ID="linkCreateUser" runat="server" PostBackUrl="https://www.google.co.in/?gws_rd=ssl" CssClass="w3-bar-item w3-button">Create User</asp:LinkButton>
<asp:HyperLink ID="HyperLink1" runat="server" Text="Create User hyper" NavigateUrl="CreateUser.aspx" CssClass="w3-bar-item w3-button" ></asp:HyperLink>
Security
It appears on chrome browser for above code
Chrome browser
<a id="HyperLink1" class="w3-bar-item w3-button" href="CreateUser.aspx">Create User hyper</a>
<a id="linkCreateUser" class="w3-bar-item w3-button active" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$linkCreateUser", "", false, "", "https://www.google.co.in/?gws_rd=ssl", false, true))'>Create User</a>
Security
Jquery Click event
$('.w3-sidebar a').click(function (e) {
e.preventDefault(); // it's not working because of this. But how can I set class = active for clicking link?
$('.w3-sidebar a').removeClass('active');
$(this).addClass('active');
})
Try using asp.net control either it works or no like:
<asp:LinkButton ID="linkCreateUser" runat="server" PostBackUrl="CreateUser.aspx" CssClass="w3-bar-item w3-button">Create User</asp:LinkButton>
<asp:HyperLink ID="linkCreateUser" runat="server" Text="Create User" NavigateUrl="CreateUser.aspx" CssClass="w3-bar-item w3-button" ></asp:HyperLink>
if still not working please share final html of anchor tag by inspect element which is showing on web page?
if your pages are in root of the project just put "/" before your internal link:
Create User
Security
Related
I make a simple bootstrap dropdown to do a registration or login. Inside the dropdown we have text and button like "dont have account? register", "already have account?
login". The register and login are buttons for changing form. But when the button clicked the dropdown is closed and we have to click to open the dropdown again to see/use the other form. I wanted to prevent this bootstrap dropdown from closing when these buttons inside it are clicked. The dropdown is inside app.component and the form is inside app.parent. I'm using angular cli typescript.
//component.ts
changeForm() {
this.isNewUser = !this.isNewUser
}
<!--app.component.html-->
<div>
<ul class="nav navbar-nav">
<li class="dropdown">
REGISTER/LOGIN <span class="caret"></span>
<ul class="dropdown-menu">
<app-parent></app-parent>
</ul>
</li>
</ul>
</div>
<!--parent.component.html-->
<div *ngIf="isNewUser">
<p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p>
<p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p>
<form (ngSubmit)="onSignUp()">...</form>
<h4 class="text-primary">Already have an Account? <button type="submit" href="#" class="btn btn-primary btn-xs" (click)="changeForm()">Log In</button></h4>
</div>
<div *ngIf="!isNewUser">
<p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p>
<p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p>
<form (ngSubmit)="onLoginEmail()">...</form>
<h4 class="text-primary">Not have any Account yet? <button type="submit" href="#" class="btn btn-success btn-xs" (click)="changeForm()">Register</button></h4>
</div>
Just found the answer by using event.stopPropagation(); function and put it inside my changeForm() function.
changeForm() {
this.isNewUser = !this.isNewUser;
event.stopPropagation();
}
If you have included jquery in your app project then write in your component file var $ as any; then in your changeForm function you can write $("#dropdown").addClass('open'); where you have to give id attribute to your as dropdown.
Before i start i want to to say many thanks in advance for your help. So, in my case i would like to open ui-sref link inside a bootstrap modal, meaning display the ui-sref in the modal. Below my code:
<ul class="friend-list">
<li class="bounceInDown" style="margin-left:5px;" ng-repeat="conversation in ctrl.conversations" ui-sref-active="active" ui-sref="user-app.inbox.messages({ convID: conversation.id })">
<a class="clearfix" style="cursor: pointer;">
<img ng-src="{{conversation.author.image}}" alt="user and company profil image for messages" class="img-circle" style="margin-right: 15px;"></img>
<div class="friend-name">
<strong>{{conversation.author.name}}</strong>
</div>
</div>
</ul>
This ui-sref link will open the column that contain the messages.
I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.
Desired behaviour:
I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)
<div>
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="ele in arr">
<accordion-heading>
<div>
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
<span >
link
</span>
</div>
<div style="text-align: center;">
<span>{{ele.b}}</span>
</div>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
Plnkr
You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"
The trick is to call Event.stopPropagation() inside ng-click handler of anchor:
link
Here's an updated plunker.
use
ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag
instead of
ng-click="fn1()"
This Might not work on plunk try it in your code.
When using accordion-heading, everything in it will be turned into an <a> tag.
Your code will be rendered in brower
<h4 class="panel-title">
<a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
<div class="ng-scope">
<i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
<span>
link
</span>
</div>
<div style="text-align: center;">
<span class="ng-binding">2</span>
</div>
</div>
</a>
</h4>
This is solution https://stackoverflow.com/a/14202514/3901308
I have an asp.net website which is having a left hand menu added to it and have hit an issue as I have found that I am doing a lot of code duplication (which is bad I know). What I want is for the left hand menu to be added to my Site.Master file rather than me having to add it to every single page.
I can do this, but the left hand menu is then displayed on the "Home" page which I don't want so i was thinking that i need some sort of IF statement but I don't know how I can do this as I cant look at the URL as when the user hits the page its the standard naming (e.g. http://www.webaddress.co.uk/)
My left hand menu is a scrolling nav-stacked which is working fine so I will also need to add the JQuery for this to the Site.Master I think.
Current HTML for my 'About Us' page
<asp:Content ID="AboutBodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<div class="follow-scroll">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li class="active"><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<h2><%: Title %>.</h2>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
</div>
<script type="text/javascript">
(function ($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 75;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function (event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
})(jQuery);
</script>
</asp:Content>
The HTML code below is what I thought of for my Site.Master but as I said it needs to not be displayed on the "Home Page".
<div class="container body-content" style="padding-top: 25px">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<!-- 'IF' statement to go here so not displayed on Home page -->
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/About">About</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/Session/pg1">Session</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9" style="padding-right: 0px">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
To solve all the issues, I added an ID and a runat="server" to the container for the menu, and then I could access it in the code behind:
div class="follow-scroll">
<div ID="Sidebar" runat="server" class="col-sm-3 hidden-xs" style="padding-left: 0px">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
Then, in the codebehind for the master page, I can do something like:
C#:
protected void Page_Load(object sender, EventArgs e)
{
var URL = Request.Url.PathAndQuery;
if(URL == "/default" || URL == "/default.aspx")
{
this.Sidebar.Visible = false;
}
}
This uses PathAndQuery from the HttpContext.Request.Url property, which is a Uri object.
Then I was able to move my JQuery to my site.master file also
I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website.
Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.
So my question is if it is possible to "embed" a html page in a specific section of another page.
For example I could have my sidebar be "static" and load in a login.html file in a specific div.
And having one html file with all the pages would be very hard to maintain and organise.
Is that possible in some kind of way?
EDIT: As requesting, I'm adding the most relevant code I already have
<ion-side-menus>
<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<!-- Knop toggleSidebar -->
<button class="button button-icon" ng-click="triggerSidebar()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col" col-50>5 + 8 = </div>
<div class="col" col-25><input type="number" placeholder="13"></div>
<div class="col" col-25><button class="button button-small">Controleer</button></div>
</div>
</ion-content>
</ion-side-menu-content>
<!-- End Main page -->
<!-- Sidebar -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
</ion-side-menu>
<!-- End sidebar -->
What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file
You can solve it using angular UI-routing:
$stateProvider
.state("menu", {
url: "/menu",
abstract: true,
templateUrl: "views/menu.html"
})
.state('menu.combinedPage1', {
url: '/combinedPage1',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded1.html",
controller: "EmbeddedController1"
}
}
})
.state('menu.combinedPage2', {
url: '/combinedPage2',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded2.html",
controller: "EmbeddedController2"
}
}
})
Here "menu" is abstract state and contains embedded views that controlled by router.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="EmbeddedContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
You can do it by using frames :) with only html the following code will help
<html>
<head>
<title>Multiple Pages</title>
</head>
<FRAMESET cols="20%, 80%">
<FRAME SRC="sidebar.html">
<FRAME SRC="content.html">
</FRAMESET>
</html>
also you can do it with php like this
#side_bar{
background-color: red;
width: 200px;
height: 100%;
float: left;
}
<div id="side_bar">
<?php
include_once('sidebar.html');
?>
</div>
You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:
sidebarCode.php:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
The new page:
<!--Specific Did You Want-->
<div>
<?php include 'sidebarCode.php';?>
</div>
Inside <ion-side-menu-content> you can load scripts via the ui router.
So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !