I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.
Related
How I can take any given webpage and make everything look tinted a certain color. Basically, if you take google and tint it orange, it should look something like this:
The way that I have been trying to accomplish this is by adding a div at the VERY END of a webpage's body tag. Basically, this is what I do:
<head>
stuff that goes in head...
</head>
<body>
all the content of the webpage...
<div style="position:fixed;height:100%;width:100%;
left:0px;top:0px;opacity: 0.5;">
<div style="height:100%;width:100%;position:static;
background-color:orange"></div>
</div>
</body>
Unfortunately, what happens when you do this in Google looks like this:
As you can see, the top bar of Google's webpage is not impacted by the tint in this second picture. This is just one example of my code not working, the chat conversations nor the header bar of facebook gets tinted by my code. I'm sure there are plenty of cases where my code does not completely tint the whole page. I am not sure if adding a div to webpages is the right way or maybe I should just try something with javascript. If it isn't clear, I want to be able to tint the webpage in the browser, NOT by screen capturing it and editing the image in a program as I have done with the first image.
In the end, what I need for my project is to be able to manipulate the visual output of a webpage in many strange ways (stretch the page, dim it, blur it, make it look fisheye, make it shake like the screen is shaking, etc.). Essentially, I want to learn how to have as much control over a webpage as possible. Even if you can't help me achieve this, if you can help me with the current issue of tinting the webpage in any way, I would appreciate it.
You need a few more css styles:
position: fixed; /* keeps the screen covered durning scroll */
z-index: 100000; /* puts it on top of everything */
top: 0;
left: 0;
opacity: .3; /* so we can see through it */
pointer-events: none; /* so we can click through it */
Update
Regarding the last part of your question, you should be applying classes to <body> Then you dont have to insert divs.
For example, here's a way to do the tint by just adding tint class to the <body> tag
.tint:after {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
opacity: .3;
pointer-events: none;
background: orange;
width: 100%;
height: 100%;
}
.tint.dim:after {
background: black;
opacity: .6;
}
For animations, check out Animate.css
You need z-index in your case, since some of its elements have their z-index specified.
Mine works great with,
.oranged {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: orange;
opacity: 0.4;
z-index: 1000;
}
<div class="oranged"> </div>
Or on-the-fly..
<div style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: orange;z-index: 1000;opacity: 0.4;"></div>
I'd like to create a bit of embeddable code that a user can drop into their website that will load some Javascript. If some conditions are met, I'd like to add a small header to the top of the site, pushing down the rest of the content. Is there a simple way to do this that'll work on most websites?
I understand how to load and execute the JS - I guess I'm just wondering what the HTML/CSS would look like on both my header, and what would need to be altered on the user's site.
Have you considered using a floating header on top of their websites as opposed to shifting their entire website down? I think that'd be significantly easier.
That way you could just smack a div anywhere like so:
<div id="header">Whatever content</div>
<style>
#header {
left: 0px;
top: 0px;
width: 100%;
height: 30px;
background-color: black;
z-index: 1;
overflow:hidden;
min-width:280px;
position: fixed;
}
</style>
Or you could remove the position: fixed if that's too annoying and just make sure your div is on top.
jsFiddle
There is the bootsrap navbar: http://getbootstrap.com/examples/navbar/
Maybe solve your problem.
There is a a single element of a web page that I absolutely MUST have sit in a precise location on the page, and there seems to be a 14px height differential between Chrome and FF which won't allow me to situate the graphic uniformly between the two. I used a conditional statement for IE9 and IE8, but now the problem exists with Chrome and FF.
I don't have access to the main head section or main global CSS for this site, unfortunately, and there is not a global reset of 0 on the margins. Even if it were possible for me to do so, there have been so many hacks and fixes, that it would be counter-productive to do a global reset.
So after messing around with musical chairs of this object, I think my final solution (although not very elegant to do for just ONE graphic) is to write a style sheet for the margin-top of this image (actually a div with an image background), and have javascript detect the browser and feed the style-sheet accordingly (i.e. - if it is FF then render this CSS, or if it is Chrome then render this CSS).
Unfortunately I cannot show the page, but my CSS for the element is:
#telescope {
background: url("my-image.png") no-repeat scroll 0 0 transparent;
height: 102px;
position: absolute;
right: -48px;
margin-top: 748px;
width: 98px;
z-index: 1;
}
Try putting this at the top of your css:
* {
margin: 0;
padding: 0;
font-family: "Open Sans", 'Consolas', sans-serif;
}
html, body {height: 100%;}
I know similar questions have been asked on this but I haven't managed to take any advice from those and get something working. A lot of advice on this topic is also geared towards making full-page background images, which isn't what i'm trying to do.
I am trying to get a background image to stretch horizontally to fit a specific div. The div itself containts child divs with content which should be displayed over the top of the background.
I have html like the following:
<div class="parent">
<div class="child">
<h3>My Header</h3>
<p>A link</p>
<p>Some content</p>
</div>
</div>
and css like this:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
}
.child{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
parent-bg.png has a gradient fill left to right and is 60 x 142 pixels, which is why I want it to stretch to fit the parent div rather than just use repeat-x (the gradient looks odd when repeated).
The CSS3 background-size:cover property does exactly what I want, but of course doesn't work in IE for versions older than 9. I was curious to see if I could find a solution that works in IE 8 and 7.
I had a look at quick play with this jquery plugin but couldn't get it working: https://github.com/louisremi/jquery.backgroundSize.js#readme. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.
another solution i found which works for the browsers i'm targeting (IE 7 +, last couple of versions of firefox and chrome) and more, involved using browser prefixes like so:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
}
.footer_inner{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
#rgthree's solution is probably more comprehensive in terms of browser coverage though, and involves an excellent working demo.
Where there's a will, there's a way. You should employ a progressive enhancement technique to get the best experience. And here's how you should build this (JS Fiddle Below):
First, have an absolutely positioned <img> under your content which can have a width & height set to 100% so it stretches across.
Next, for browsers that support Background Size hide the aforementioned <img> tag and set the background on .parent with a repeat-y and a background-size:100% auto;
Finally, for browsers that support CSS Gradients use them for the background-image of your .parent
Here's a JSFiddle: http://jsfiddle.net/rgthree/k5gk7/
The JS Fiddle above works across all relevant browsers (the gradient image was randomly taken from google images and is different colors than the CSS Gradients, but you get the picture). It uses Modernizr for capability testing.
If you are not aware of Modernizr, I can't recommend it more for projects like this. It is a library which uses javascript that test for modern browser capabilities and adds classnames to the <html> tag so you can progressively enhance your webpages.
I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast