I am trying to repliace google's homepage as part of an html and css course I started. I can't figure out how to add a shadow on the search box when the page loads, just like with Google's website.
Also, when hovering the top-right image, it changes the transparency but this should not be happening. How can I take remove that effect?
Page is here:
https://odiseon.github.io/google-homepage/
Looked at your code, this what causes issue on hover
header a:hover {
opacity: 0.85;
}
You can do something like this
header a.user-link:hover {
opacity: 1;
}
Looking at the google page behavior, it starts off with the class that has box-shadow and then after first mouse click it's removed.
You can use JavaScript.
window.onload
and then add the classname to your input field.
use the below code as a reference.
index.html
<input type='text' class='input'>
app.js
window.onload = (event) => {
document.styleSheets[0].insertRule('.input:focus{
box-shadow: 4px 4px 4px 0 (0,0,0,0.2);
}', 0);
}
Related
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 0.7;
--iron-overlay-backdrop-background-color: black;
}
</style>
This method set the overlay's opacity and all their childs. And if I want to set childs' opacity? I want 1 to (child) dialog's opacity
.dialog {
opacity: 1;
}
related question
I'm not sure I understand your question, but let me try this: If you wish to style the overlay for a particular dialog, you do so on the body of the page that holds the paper-dialog, as you can see in this pen. The CSS used is
body {
--iron-overlay-backdrop-opacity: 1.0;
--iron-overlay-backdrop-background-color: red;
}
While the paper-button and the paper-dialog are in another custom element, this approach works if both elements are instead in a plain HTML page. Look at how I'm handling a general error dialog in my app. If I put the CSS above on that page, it would work like the pen.
This is the HTML
<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>
This is the CSS
.navs:after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #0d0d0d;
opacity: 0.5;
transform: scaleY(0);
transform-origin: 0 100%;
transition: all .2s ease-out;
}
.navs:hover:after{
transform: scaleY(1);
}
.navs:active:after{
background: #FFFFFF;
}
I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?
Option one
You can give your element a higher z-index. This will move your button above the overlay, so you will be able to click it
Option two
You can disable all mouse events on your overlay using pointer-events:none; so the click event will 'fall through' it and the button will register it
Edit: Use pointer-events when you can, let z-index be your backup plan. If you fall back to it, I suggest that you don't use it inline, but write a specific selector for it in your CSS.
use span instead of before and after,
something like
<a href="my link"><img class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>
the span will not cover the clickable region
It could be many different things...
Definitely try to check if you've used any z-index properties for other elements that are the parents of the element.
I encountered the exact same problem and I fixed it by troubleshooting:
what I did was pull up a javascript file and console log the target className of where I was clicking (can be done by:
window.addEventListener('click' , (e) => {
const target = e.target.className;
console.log(target);
})
)
Once I did that, click on the button that doesn't seem to be working. Make sure to add a class to your button before this and check if the class is displayed properly. Sometimes, in my case, I had to move the console out of the window.
From this, I found my SVG Animation was actually taking up invisible space that covered the button. All I had to do to fix this problem was give the SVG a z-index of -1.
Hope this helped! I know I took a long time to find a solution so I hope my solution can help others too.
Note: Also check your pointer events (make sure it isn't set to none) for the button and other elements
I have a site where I set the background image and color of the body tag via CSS. I hide it with the inline style display: none; so that optimizely has time to run and do any customizations without causing a flicker. This has worked till recently when the flicker came back but we haven't changed anything that seems related. I was debugging it and saw that in Chrome (Version 45.0.2454.101 (64-bit)) the background image and color are still displayed even though the body is display: none;. In firefox, safari, and IE11 the background is not displayed.
Here is some code to illustrate the issue:
<html>
<head>
<style>.background { background-color: red; }</style>
</head>
<body class="background" style="display: none;"></body>
</html>
I googled but couldn't figure out why. Any ideas?
To be clear the question is about why this happens on the body tag. I am open to alternate ways to hide the background image but wont consider them the answer.
Per the W3 CSS2 spec,
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. User
agents should observe the following precedence rules to fill in the
background: if the value of the 'background' property for the HTML
element is different from 'transparent' then use it, else use the
value of the 'background' property for the BODY element. If the
resulting value is 'transparent', the rendering is undefined.
According to this, if you set a background-color or background-image on the body, but don't set a background-color other than transparent on the html, then the html will use the body's background. So when you hide the body, the html will still be using it's background.
DEMO
var hideButton = $('#hide-body');
var toggleBGButton = $('#toggle-html-bg');
hideButton.on('click', function() {$('body').hide()} );
toggleBGButton.on('click', function() {$('html').toggleClass('bg')} );
html {
background-color: transparent;
}
html.bg {
background-color: orange;
}
body {
background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-color: blue;
}
body.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide-body">Hide body</button>
<button id="toggle-html-bg">Toggle <html> background-color</button>
i am making a website for my college as a project.To show you i have hosted the same on a free
hosting site. link http://vivace.net23.net/ .Now in the informal section of menu i wanted to put a pop up modal here is the fiddle..http://jsfiddle.net/karn21/73QXx/.
Click Me
<div id="openModal" class="modalDialog">
<div>
X
</div>
</div>
But on click it is not working.Please help me
Instead of setting it as a target, you could set an onclick event for the Click Me button that triggers a JavaScript function to append the id target to the div (or another class). Then, change .modalDialog:target to .modalDialog.target. Then, just remove the class when the close button is clicked.
New Fiddle: http://jsfiddle.net/73QXx/2/
That shouldn't interfere with your hastag scrolling script.
Also, if you still wanted it to appear as a link, you can add this:
CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
This line is only supported by IE11+:
pointer-events: none;
Here is an alternative that you can add using an HTML IF to check if the version is IE10 or less:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
on the elements on the page*/
New Fiddle for IE9 (and many other versions including anything that the old version can support): http://jsfiddle.net/73QXx/3/
However, the downside and why this should not be used for anything except IE9 or lower (which is possible with HTML IF) is that the box suddenly appears instead of fading in.
Firefox doesn't display tooltips on disabled fields.
The following displays tooltip in IE/Chrome/Safari except Firefox:
<input type="text" disabled="disabled" title="tooltip text."/>
Why doesn't Firefox display tooltip on disabled fields? Is there a work around this?
Seems to be a (very old, and very abandoned) bug. See Mozilla Bugs #274626 #436770
I guess this could also be explained as intended behaviour.
One horrible Workaround that comes to mind is to overlap the button with an invisible div with a title attribute using z-index; another to somehow re-activate the button 'onmouseover' but to cleverly intercept and trash any click event on that button.
I guess you are using some frameworks like bootstrap. If so, it add pointer-events: none to the 'disabled' element, so all the mouse events are ignored.
.btn[disabled] {
pointer-events: auto !important;
}
can fix the problem.
You can work around this with jQuery code like:
if ($.browser.mozilla) {
$(function() {
$('input[disabled][title]')
.removeAttr('disabled')
.addClass('disabled')
.click(function() {return false})
})
}
The z-indexing thing could be done like this:
.btnTip
{
position: absolute;
left: 0%;
right: 0%;
z-index: 100;
width: 50px;
/*background-color: red;*/
height: 17px;
}
(…)
<div style="background-color: gray; width: 400px;">
Set width of the tip-span to the same as the button width.
<div style="text-align: center;">
<span style="position:relative;">
<span class="btnTip" title="MyToolTip"> </span>
<input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />
</span>
</div>
Left and right helps positioning the host on top of the disabled element.
The z-index defines what kind of layer you put an element in.
The higher number of a z-layer the more ‘on top’ it will be.
The z-index of the host and/or the disabled element should be set dynamically.
When the disabled element is disabled you want the tooltip host on top and vice versa - at least if you want to be able to click your element (button) when it is NOT disabled.
I have faced the similar issue and i could fix it using juery and small css class, you would require to create two new span elements and a css class which are as follows
Just add these in a general js and css file which is used in all over the application or web site
.DisabledButtonToolTipSpan
{
position :absolute;
z-index :1010101010;
display :block;
width :100%;
height :100%;
top :0;
}
To display tooltip for disabled button in firefox browser.
$(window).load(function() {
if ($.browser.mozilla) {
$("input").each(function() {
if ((this.type == "button" || this.type == "submit") && this.disabled) {
var wrapperSpan = $("<span>");
wrapperSpan.css({ position: "relative" });
$(this).wrap(wrapperSpan);
var span = $("<span>");
span.attr({
"title": this.title,
"class": "DisabledButtonToolTipSpan"
});
$(this).parent().append(span);
}
});
}
});
Hope this helps,
Preetham.
You could use javascript. Use the mouseover event.
(A lot of libraries like JQuery and Mootools have tooltip plugins available. Using these you can even style the tooltips).