Active link loses style after reload - javascript

in my MVC app I have a left menu which I need the active link css to keep style after reload
in my css I have
.navleft li a:hover {
background: url('../Content/images/nav.png') no-repeat;
background-position: -232px 0;
color: #fff;
left: -6px;
padding: 19px 18px 19px 40px;
margin-top: -10px;
}
.navleft li a:active {
background: url('../Content/images/nav_active.png') no-repeat;
background-position: -232px 0;
color: #fff;
left: -6px;
padding: 19px 18px 19px 40px;
margin-top: -10px;
}
and in my view
<ul class="navleft">
#foreach (var item in Model.CLeftMenu.ToList())
{
foreach (var content in Model.LeftSiteContent.ToList())
{
if (item.LeftMenuID == content.LeftMenuID)
{
<li><a href="#Url.Action("Details", "LeftContents", new { id =
#content.LeftContentID })">#item.LeftMenuTitle</a></li>
}
}
}
</ul>
which dynamically builds the menu . The hover statement it works fine but no the active. When I inspect the page it renders
Services
It takes the class active by its own.
When I change my css to
.active {
background: url('../Content/images/nav_active.png') no-repeat;
background-position: -232px 0;
color: #fff;
left: -6px;
padding: 19px 18px 19px 40px;
margin-top: -10px;
}
it works. But then all the active links in my site takes this style (which is and the reasonable).
How can I achive this just for the leftmenu? Do I have to declare current as well? since I read that the pseudo code :active is just for the moment the user clicks on the item. I have seen this css class active after page reload but it doesn't work for me.
thank you

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released. The :active pseudo-class is commonly used on and elements, but may be used on other elements, too.
enter link description here
there is no :active
class need to be defined as .active
.navleft li a:active rename to .navleft li a.active {

Related

Styling React Modal with data attribute

I'm adding color themes (light/dark mode) to my application however, the styling does not affect my modal, built using react-modal. I am using data attributes and CSS variables to switch between themes, with the attribute within a div with class name App. The issue is that the React Portal that contains the Modal is a sibling element to the root div, which is the parent div to App. Thus, the Modal only inherits the CSS variables from :root and not from the [data-theme='dark'] data attribute. What would be the best workaround to this issue? I've thought of the following possible solutions:
Expanding the scope of the data attributes so that it lies in body, therefore encompassing the React Portal.
Setting the colors for the React Modal through JavaScript and getting the proper colors from other elements.
Reworking the way I am implementing different themes (least favorable solution as it works for all other parts of my application)
Screenshots of DOM:
Modal closed
Modal open
CSS:
:root {
--color-background: #F8F0E3;
--color-background-secondary: #E3EBF8;
--color-background-third: #E3EBF8;
--color-text: #000000;
--color-text-alternate: #757575;
--theme-color-strong: #FFFFFF;
--color-background-highlight: #6F7378;
--color-background-opaque: rgba(248, 240, 227, 0.75);
--color-link: #0000EE;
--color-button: #FFFFFF;
--okay-color: #F9E076;
}
[data-theme='dark'] {
--color-background: #121212;
--color-background-secondary: #181818;
--color-background-third: #caced3;
--color-text: #FFFFFF;
--color-text-alternate: #FFFFFF;
--theme-color-strong: #000000;
--color-background-highlight: #e6e6e6;
--color-link: #A5C9FF;
--color-button: #121212;
--okay-color: #d3c404;
}
.rating-modal{
top: 40px;
bottom: 40px;
border: 1px solid #ccc;
background-color: var(--color-background);
overflow: auto;
border-radius: 4px;
outline: none;
padding: 20px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 80%;
}
Using the CSS sibling selector, you can target and apply CSS to your modal portals.
Like
[data-theme='dark'] + .ReactModalPortal {
//your CSS to apply over ReactModalPortal div
}
And you can now target children of the ReactModalPortal div as follows
[data-theme='dark'] + .ReactModalPortal .rating-modal {
//your CSS to apply over class rating-modal div
}

Removing a filter from image links, while applying filter to links in the same div?

I am using huerotate to change colors of my text links in my div, the problem is, it is also applying to my image links. I have tried removing them from images only(what I want) but I just can't figure it out. Any ideas? (I have made a JS to have a button to change colors on my design, and I want the text links to change when it is pressed, but not have the images change.)
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a img {
filter: none !important;
}
The thing is, you are applying filter to a, but clearing the filter on img. This is the case for :has pseudo-selector, but its currently in draft, so there is no Pure CSS Solution. You need to take help of JavaScript, to reset the hue-rotate filter on all a that has img inside it.
let imgArr = document.querySelectorAll('.scontent a img');
[...imgArr].forEach((img)=>{
img.parentNode.style.filter = "hue-rotate(0deg)";
})
:root{
--links: #ff0000;
--hue-rotate: 90deg;
}
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
<div class="scontent">
Text Link
<img src="https://picsum.photos/200/200" />
</div>

Fade an image according to a condition and arrange them

In this website, when you scroll down to the badge section,I have "locked and unlocked" badges.
Issues:
Can I make the locked badges faded. (as in hover effect we see a faded image)
Can we make the unlocked badges appear first and locked badges at the end.
css and js related to the locked and unlocked section:
$.each($('.Portfolio-box'), function() {
var count = $(this).children('.has-badge').attr('data-count');
if (count > 0) {
$(this).children('ul.locked').hide();
$(this).children('ul.unlocked').show();
} else {
$(this).children('ul.locked').show();
$(this).children('ul.unlocked').hide();
}
});
.unlocked li:before {
content: '\2713';
display: inline-block;
color: green;
margin-left: -65px;
padding: 0 9px 0 0;
}
.unlocked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
.locked li:before {
content: '\274c';
display: inline-block;
color: red;
margin-left: -65px;
padding: 0 9px 0 0;
}
.locked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
Fiddle link of the entire site :https://jsfiddle.net/dkjz1z4k/1/
1.Can I make the locked badges faded. (as in hover effect we see a faded image)
Best practice is to add current status class to the element's container. In your case it could be something like this:
.locked-badge img {
opacity: 0.7;
}
.locked-badge .badge-img {
opacity: 0.7;
}
<div class="Portfolio-box locked-badge">
<img src="#" class="badge-img">
</div>
It's always better to give classes to all elements witch designed in CSS. It will save you many time in the future and prevent some issues.
2.Can we make the unlocked badges appear first and locked badges at the end.
Please check this topic Sort JavaScript object by key. Another alternative is to use lodash orderBy method.

How to remove jQuery-ui dialog title bar?

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.
How can i do this?
Based on this answer:
Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:
$("#id").dialog({
autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​
You can then use CSS to eliminate unnecessary margin, border and padding. For example:
.ui-dialog-titlebar {
float: right;
border: 0;
padding: 0;
}
.ui-dialog-titlebar-close {
top: 0;
right: 0;
margin: 0;
z-index: 999;
}
Here is a demo based on above code plus it adds the necessary styles using jQuery.
If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png i created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.
.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}
.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}
.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}
.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}
.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}
.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}
The way I see it, you have 3 options.
Yes, eliminate the titlebar completely and add a custom one that you can style to match the default one, using absolute positioning should be the key.
If you have the time, extend (not overwrite) the _create method of the dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 to do what you need
Work with CSS hackery to keep the titlebar there with a height of 0 for all elements but the close button.
Either one has their cons and pros, I would recommend #2 the best if you can, here's some info on how to work with widgets http://api.jqueryui.com/jQuery.widget/
This is How it can be done.
Go to themes folder--> base--> open jquery.ui.dialog.css
Find
Followings
if you don't want to display titleBar then simply set display:none as i did in the following.
.ui dialog.ui-dialog .ui-dialog-titlebar
{
padding: .4em 1em;
position: relative;
display:none;
}
Samilarly for title as well.
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display:none;
}
Now comes close button you can also set it none or you can set its
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
display:none;
}
I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery
here is syntax for this
$(".specificclass").css({display:normal})

CSS Navigation Menu Using Sprite: How to highlight current page's tab/button?

I've built a CSS navigation menu using a sprite, very similar to the one on Apple's website. I've got it working fine, such that it changes to the right position on the image on hover and mousedown (all using CSS), but I'm having a hard time figuring out how to make a button stay highlighted once it's clicked. I have a row in my sprite for the "clicked" look, but there's no CSS that I know of to handle something that's selected. I want the buttons to turn to their "clicked" version, depending on which one has been clicked. I've explored some javascript solutions, using jQuery, but I thought there might be a better way.
The sprite I'm using is very similar to Apple's, found here.
Any help would be greatly appreciated. Thanks.
More Info:
So my menu currently looks like this in html:
<ul id="global_nav">
<li id="home_nav"></li>
<li id="systems_nav"></li>
<li id="users_nav"></li>
<li id="utilities_nav"></li>
<li id="reference_nav"></li>
<li id="metrics_nav"></li>
<li id="help_nav"></li>
<li id="info_nav"></li>
</ul>
Any my CSS is all here (sorry, it's long):
#global_nav
{
background: url("../Images/nav_bar.png");
height: 38px;
width: 979px;
padding: 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
#global_nav li
{
float: left;
}
#global_nav a
{
height: 38px;
display: block;
}
#global_nav #home_nav
{
width: 118px;
}
#global_nav #home_nav a:hover
{
background: url("../Images/nav_bar.png") 0px -37px no-repeat;
}
#global_nav #home_nav a:active
{
background: url("../Images/nav_bar.png") 0px -74px no-repeat;
}
#global_nav #systems_nav
{
width: 116px;
}
#global_nav #systems_nav a:hover
{
background: url("../Images/nav_bar.png") -118px -37px no-repeat;
}
#global_nav #systems_nav a:active
{
background: url("../Images/nav_bar.png") -118px -74px no-repeat;
}
#global_nav #users_nav
{
width: 117px;
}
#global_nav #users_nav a:hover
{
background: url("../Images/nav_bar.png") -234px -37px no-repeat;
}
#global_nav #users_nav a:active
{
background: url("../Images/nav_bar.png") -234px -74px no-repeat;
}
#global_nav #utilities_nav
{
width: 117px;
}
#global_nav #utilities_nav a:hover
{
background: url("../Images/nav_bar.png") -351px -37px no-repeat;
}
#global_nav #utilities_nav a:active
{
background: url("../Images/nav_bar.png") -351px -74px no-repeat;
}
#global_nav #reference_nav
{
width: 117px;
}
#global_nav #reference_nav a:hover
{
background: url("../Images/nav_bar.png") -468px -37px no-repeat;
}
#global_nav #reference_nav a:active
{
background: url("../Images/nav_bar.png") -468px -74px no-repeat;
}
#global_nav #metrics_nav
{
width: 117px;
}
#global_nav #metrics_nav a:hover
{
background: url("../Images/nav_bar.png") -585px -37px no-repeat;
}
#global_nav #metrics_nav a:active
{
background: url("../Images/nav_bar.png") -585px -74px no-repeat;
}
#global_nav #help_nav
{
width: 117px;
}
#global_nav #help_nav a:hover
{
background: url("../Images/nav_bar.png") -702px -37px no-repeat;
}
#global_nav #help_nav a:active
{
background: url("../Images/nav_bar.png") -702px -74px no-repeat;
}
#global_nav #info_nav
{
width: 163px;
}
#global_nav #info_nav a:hover
{
background: url("../Images/nav_bar.png") -819px -37px no-repeat;
}
#global_nav #info_nav a:active
{
background: url("../Images/nav_bar.png") -819px -74px no-repeat;
}
CSS doesn't know or care what page it's on. You have to track that and output the relevant markup yourself.
Self-Answer:
To do this I essentially followed the way Apple does it on their site. I set a div with a width of the sprite, and added an unordered list within this div. Each list item represents a button along the button bar. Within each list item there is a single anchor tag that href's to the page that I want to go to when the button is clicked. In the CSS, I have a class that refers to all anchor tags under a list item under the containing div, under it's div, as such:
#globalheader #globalnav li a
{
float: left;
height: 0;
overflow: hidden;
padding-top: 36px;
width: 118px;
background-image: url("../Images/nav/nav_bar.png");
background-repeat: no-repeat;
}
This defines a background image for each of the anchor tags. Now I need to define the background position for each anchor tag, so it shows the right button. I have CSS for each anchor tag. Here's the CSS for one of them:
#globalheader #globalnav li#systems_nav a
{
background-position: -118px 0;
}
Of course I have CSS to handle the hover over the buttons (a:hover) and for the mousedown over the buttons (a:active), but my original question dealt with how to keep it on the selected look for the button when I'm on a certain page. I'll start with the CSS. If I had 6 buttons, I made six more CSS classes, each one pertaining to the container div having a certain class. That class the container has will be based on the page I'm currently on (I'll explain in a minute). Also within the definition of that CSS class, I specify which anchor tag to change the background position on. As an example, if I click the "Systems" button on the page, I will dynamically add (via javascript) a class to the container div of "systems", and this CSS will be applied as a result:
#globalheader.systems #globalnav li#systems_nav a
{
background-position: -118px -108px !important;
}
The background position is the one that covers the "clicked" look for my button. Note the .systems part of the declaration that specifies that the #globalheader div must have a class of "systems". If this is the case, it changes the background position of only a single anchor tag: you guessed it, the one right under the "systems_nav" li. I wrote one of these classes for each of the buttons in the button bar. The second trick was writing the javascript to handle dynamically adding the class to the div depending on what page I was on. To do this, I put a hidden div on each page that looked something like this:
<div id="page_section" title="systems" style="display: none;"></div>
It's not displayed, has a generic id that each of these divs will have on each page on my site, and has a title specific to the page I'm on. In my javascript file, I wrote this (it uses jquery):
var $globalheader = $('#globalheader'); // container div to add the class to
var $page_section = $('#page_section'); // div whose title is the current page
$globalheader.addClass($page_section.attr('title'));
Voila. "systems" gets added as the class name to the "globalheader" div, and the correct CSS class gets applied, making only the Systems button look clicked.
This took a little work by looking at Apple's website, but this is how they do it, and I trust them. It worked for me.
Hope it helps anyone else having the same problem I was.
Do you use a server-side programming/scripting language like PHP/ASP/JSP? If so, then you can just render a CSS class conditionally. Here's a PHP example (you can get requested page in PHP by one of the $_SERVER variables):
<a href="somepage"<?php echo ($currentpage == 'somepage' ? ' class="active"' : ''); ?>>somepage</a>
If you don't use a server side language, then the only resort is JS/jQuery. Do something like following during onload (you can get requested page in JS by parsing the window.location):
$('a[href="' + currentpage + '"]').addClass('active');
The CSS class a.active should obviously shift the background-position so that it becomes "active".

Categories