I have two links on my page and the views are changing according to it. The default view is the iPhone view and the other one is the tablet view. The link for the iPhone has the below CSS
.current-device{
border: 1px solid #999;
}
and it appears like,
The HTML code is,
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ></a>
<div class="mobile-preview" ng-class="tabletView ? 'tabletView' : '!tabletView'" >
<div class="mobile-wrapper" >
<div class="mobile-simulator" overflow="scroll">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}" ></me-tablet>
</div>
</div>
</div>
I want to give the same styling for the tablet link when it is clicked and remove the styling from the iPhone link, likewise change the style of the clicked link, but the default link style should be as it is when loading and should change when the user clicked the other link. I tried doing it but I could only do for hover over, the default style for the link does not appear in that way.
You can use ng-class to achieve this.
<a class="mobile-icon" href ng-click="tabletView=false" ng-class="{'current-device': !tabletView}"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ng-class="{'current-device': tabletView}"></a>
Related
I have a question why using tag a I can click the whole row on the right is clickable as well?
on the back row on right side this area is clickable even through there no link any way to remove this clickable area ?
<a id="back-page-btn" class="back-btn d-flex" href="">
<i data-feather="arrow-left-circle"></i>
<p class="mx-2 my-auto">Back</p>
</a>
I realize this html code I am able to click on the white background on the back row is there a way to only use link to be clickable but not the white background.
Simple fix was remove d-flex class and change as using p to label to wrap it up with /a
<a id="back-page-btn" class="back-btn" href="manageUsers_api.html"><i data-feather="arrow-left-circle"></i>
<label style="cursor: pointer;"class="mx-2 my-auto">Back</label></a>
I'm trying to have a custom nav-link indicator for the active link like [this][1] but i'm stuck on how I should go about it.
I was thinking about adding a custom div with the color but it doesn't make much sense to me since i'm trying to override the active class in bootstrap. How can I achieve this?
[1]: https://i.stack.imgur.com/9ZtP3.png
A quick fix would be to create a .current class. Then apply the current class to the link of the page that you are on.. Something like
CSS.
.current{
color:#09f;
border-top:3px solid #09f;
}
HTML - HOME PAGE (index.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Then on the next page you add the class to the next link. So for page 2 it will look like this
HTML - ABOUT (about.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Removed the current class from home link and added it to the second link. And on each page you add the class to the link of the page you are on.
<a routerLink="/dashboard">Dashboard</a> can i remove hyperlink ?
when i use
<button routerLink="/dashboard">Dashboard</button>
it works like what i want
but i want to add routerLinkOptions and it shows button error!
my aim is to remove hyperlink from screeen when hovering on link
In your component.css file, add the following CSS class,
.anchor-style {
text-decoration: none !important;
cursor: default !important;
}
In your component.html file, add the anchor-style class to your anchor HTML element.
<a class="anchor-style" routerLink="/dashboard">Dashboard</a>
If this does not answer to your query, you can try the following,
Apply the RouterLinkActive to an ancestor of a RouterLink.
<div routerLinkActive="active-link-styles" [routerLinkActiveOptions]="{exact: true}">
<button routerLink="/dashboard">Dashboard</button>
<button routerLink="/home">Home</button>
</div>
This will set the active-link-styles class on the div tag if the url is either '/dashboard' or '/home'.
You can call a function on the click event. Which in turns navigates to the desired screen.
In component.html file,
<button (click)="navigateToDashboard()">Dashboard</button>
In component.ts file, navigateToDashboard() { this.router.navigate(['/dashboard']) }
I built a simple site as part of teaching myself HTML, CSS and JQuery. You can see it here: http://davideyre.co.uk
It was working fine for a while, but now in the 'contact' div several of the images have disappeared. The blue email image remains and the mouseover works to switch to the black email image, but the Twitter, LinkedIn and Google images are not displaying at all.
When I looked at them using the Inspect Element plugin on Firefox, it appears that an img class is being applied to these three icons. This code shows the first list item (the email icon) and the second list item (the Twitter icon) with the img class applied to it.
<div id="contact">
<ul>
<li class="menuimage">
<a target="_blank" href="mailto:david#davideyre.co.uk">
<img width="60" height="60" src="http://davideyre.co.uk/images/email_blue.png" data-other-src="http://davideyre.co.uk/images/emailblack.png">
</a>
</li>
<li class="menuimage">
<a target="_blank" href="http://twitter.com/davideyre">
<img class="qzsombkdzpaqphznltst" width="60" height="60" src="http://davideyre.co.uk/images/twitter_blue.png" data-other-src="http://davideyre.co.uk/images/twitterblack.png">
</a>
</li>
I have no idea how this img class is being applied to the images.
Many thanks to MarkB, IAteYourKitten and Bondye. It was the Adblocker in Firefox. :)
I wonder why you are using the class menuimage. You don't use it in your CSS.
I would try adding some styling to the menuimage class in CSS to see if you can affect the styling of the list tag. Or remove the menuimage class from the list tag and add it to the image tag item, and try to add styling.
I am attempting to alter the hover functionality of a KendoUI button. The HTML looks like the following:
<div class="div-vertical-delimitor div-float-left"></div>
<a id="a-draw-point" class="k-button single" title="Point">
<img id="img-draw-point" src="../Images/DT_DrawPoint.png">
</a>
</div>
The issue is, I'm not seeing a k-state-hover class being activated when I hover over the button. However, the button does change when hovering over it.
When hovering over other objects on the page such as toptab links I see the k-state-hover being applied when mousing on top of the link.
Any help would be appreciated. I'm new to CSS and KendoUI.