making background inactive when a button is pressed - javascript

When i click a user name on twitter background it becomes inactive and dark.just like that:
I want to make my website's background inactive when a button is pressed, how can i do that?
Note: and i want to now which solution should i use make a box appear/disappear middle of my site when a button is pressed?i am doig something like this.
//in css
.visible{
display: inline;
}
.hidden {
display: none;
}
//in jquery
$("#div1").click(function() {
$('#div2').removeClass("visible").addClass("hidden");
}

This is called a lightbox.
First hit should make you happy: https://www.google.nl/search?q=lightbox

You are trying to build lightbox. Just show fullscreen div with semi-transparent background color for this.
Simple solution:
CSS:
.lightbox {
display:none;
position: absolute;
z-index:10;
background-color: rgba(255,255,255,0.7);
}
HTML:
Show lightbox
<div class="lightbox"></div>
</body>
JQuery:
$("a").on("click",function(){
$(".lightbox").css({'width':$(document).width()+'px','height':$(document).height()+'px'});
$(".lightbox").show();
return false;
});

Related

Salesforce - Display hover text when hovering on the standard lightning button that is disabled

Salesforce -
I have a standard lightning button on the salesforce page. There are some conditions to show the button and to disable it. When the condition doesn't satisfy then I need to disable the button and when we hover on that disabled button, we should be able to see some text. I am using lightning web components.
HTML:
<template if:true={disableButton}>
<lightning-button icon-name="utility:custom_apps" label="button" icon-position="left"
onClick={doSomething} title="button is disabled" disabled></lightning-button>
</template>
Js code:
if (conditionNotSatisfied=== true){
this.disableButton = true;
}
The functionality of disabling the button is working but when I hover over the disabled button, the text is not displayed.
Can someone help me with a suggestion on how to display the text on the disable button when I hover on it?
You won't be able to achieve this with the lightning-button LWC component, however Salesforce does have some great documentation on their Lightning Design system, so with a little bit more code, we are able to accomplish what you are asking for.
YourComponent.html
<span class="tooltip">
<button class="slds-button slds-button_neutral" disabled={disableButton} onClick={doSomething}>Neutral Button</button>
<span class="tooltiptext">Tooltip text</span>
</span>
YourComponent.css
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
Here is an image of the above code that I just ran in my own project. When I hover over the button now, I get a little popup on the side. This of course can be styled to your liking.
Sources:
Salesforce Lightning Design System (Buttons)
W3 Schools CSS Tooltip
I know this is post old, but I just found it while trying to achieve the same and here's my solution with the less customization I found
So I have my lightning-button
<lightning-button
type="submit"
label="Unlink Dev Ticket"
onclick={handleButtonClick}
disabled={isButtonDisabled}
title={disabledHelpText}
class="tooltip"
></lightning-button>
Dynamically setting the isButtonDisabled and disabledHelpText in the controller. And make sure you clear the disabledHelpText when the button is enabled
And then, for this to work, you also need to fix the pointer-events to visible. Because it's set to none on disabled buttons. Need to override it on the lightning button
So for the tooltip css class:
.tooltip {
pointer-events: visible!important;
}
And that's how it looks like
I hope this will help other members in the future

Toggle Div combined with CSS-Hover

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>
I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.

How to keep the background color persistent in css active?

I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.

Javascript Change class does not behave properly

I've used a javascript to change the image on a menu list item (from css class)when its clicked.
Its supposed to change from "menu_grey" to "menu_red". It does happen but its momentarily switched back to the same class. This is what I have in HTML:
<li %WELCOME_ACTIVE%><a id = "menuClicked" class='menuHome' href='%AuthProgram%'>%lang("lang_customer_framework_home")%</a>
<script>
document.getElementById("menuClicked").onclick=function() {
var className = document.getElementById("menuClicked").className
document.getElementById("menuClicked").className = "menuClicked"
};
</script>
</li>
As this is an alteration of the design in a pre-developed website and the layout of the menu is defined in CSS, i dont want to make a new menu and design as i would then risk to destroy rest of the design. The CSS class looks like this:
#menu li a.menuHome
{
background: url('../graphics/SevenCustomer/ikoner/hjem_gra.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
And for menuClicked:
#menu li a.menuClicked
{
background: url('../graphics/SevenCustomer/ikoner/HJEM_rod.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
So the question is:
How can I make the image stay "red" after clicking home ?
Suggestions are appreciated :)
The page navigates away, you would need to set it on the serverside or on the page that loads. The next page has no clue that you added a class to it. It does not care since it is a brand new page.
Just stop the event from firing when someone clicks on the link. There are several ways to do this, here's a few suggestions:
how to stop page redirect

How to hide visited links after a click to button?

There are a list of links on a page and some of them are already visited by me. I have to make them invisible after any action(checking a checkbox, clicking button, etc).
I tried to use jQuery: $("a:visited").hide(300); but it doesn't seem to work.
UPD: So, the scenario is:
1) the user clicks a button;
2) all the visited links disappear.
jsFiddle example
You can try full CSS method :
a:visited { display: none; }
Or
a:visited { visibility: hidden; }
Or you can use a plugin method : Visited Plugin by Remy Sharp
Usage in jQuery :
$('a').visited().addClass('visited');
With CSS :
.visited { display: none; }
Or
.visited { visibility: hidden; }
ok, so try this
in your css file
.foo a:visited{
display:none;
}
in your javascript
$('button').on('click', function(e){
$('ul').addClass('foo');
})

Categories