I have a small web-app I'm developing for myself.
When I click the add button, it calls some .load functions to return the error message and the updated table.
However, it causes the gradients to look like this (look around the error message and to the top left/right of the table):
The gradient is set to the background of the containing div (The grey one inside the green one). The jQuery loads in a single <p> for the message and a <table> for the table.
I can't see why this would happen to the gradient, as it works fine on the initial page load (before jQuery updates it).
Is there anyway to force the background to 'refresh'? It fixes itself if you inspect element or change to a different tab then back to this one.
With the limited information provided, I would assume it is less an issue with the "background gradient" and more an issue of the elements in the foreground having an opaque and/or colored background being overlaid on top of the background gradient.
Have you styled the <p> in question to have a transparent background, or is there a background color being applied to it (either directly or inherently)?
Please provide more info (the CSS and a bit of HTML) for the problem for a better answer.
Related
Most browsers support scroll-bouncing on websites so that when you scroll to the top or bottom of a website it "bounces", instead of abruptly stopping.
Normally the extra area exposed when the page "bounces" is plain white, but you can apply a background-color element to the <html> tag, and this extra area will take on that color(You can see this described, and in action here: Example Site)
Here you can see the scroll-bouncing with a custom color, instead of the white:
The effect I want to achieve is that when the page bounces, the scroll-bounce area has a background-image, instead of just plain color. I think this effect could look nice with some simple icons tiled with the branding of the site. I remember seeing this effect a few years ago on css-tricks.com, but I don't know how the effect was achieved, or if the way it was done has since been deprecated.
From what I understand, it's not possible to add a background-image property to the <html> tag, but is this possible through a work-around? Perhaps cancelling out scroll-bounce behavior with the overscroll-behavior property, and creating a similar looking effect with javascript when you scroll above or below the edges of the page?
Not sure if this will work (as i haven't tried it), but you can take an image element with position: absolute/fixed (absolute or fixed depending on where your img tag is placed) and set - bottom: <height of the image> and left: 0. This way the image technically exists above the viewport and will only by visible if you tried to scroll past the navbar which will cause the bounce effect.
I want to make a background made up of particle-slider using particle.js.
I have my div blocks, headers blocks, and some cards (containing info) on the page to display upon the background.
Since I have that particle-slider in the background and at the same time I have those blocks upon the slider, I am not able to hover upon the background particle-slider to show the particle-diffusion effects because those blocks are upon it. Because of those blocks I am unable to trigger the particle-diffusion effect when hovered upon it.
This illustration shows the background particle-slider logo and the blocks upon it (highlighted using pesticide extension):
I have already tried to put that background to front (by adding the background code after all those blocks`s code) and then set the z-index to a negative interger....but that was a foolish way.
Please suggest something to fix my problem.
If your blocks element do not have any click or hover event you can use following css to block elements to disable pointer events.
By adding following CSS even on hovering on blocks, the background hover will be triggered
.blocks {
pointer-events: none;
}
I brought a very simple approach to solve my problem.
I simply put that background particle-slider in front of all divs/blocks, and I just decreased that opacity to 0.1 . Now it looks like a background (although is in the top of all blocks).
I maybe wrong in my approach here but I created an HTML5/Javascript container that uses javascript to glow the text and to use a countdown. I was however able to achieve the iframe result i was seeking after great difficulty but the only thing is that the background color of the page on which i have the widget if you will is in red color so now wherever the iframe is being embedded it moves around the widget and shows the background color.
I thought of changing the color to white but that still has problems with the positioning so I am wondering if there are something that i need to fix on the page OR how do i make sure only the part i want from the page is embedded?
Without more information this is a long shot but try to put a background-color:transparent; on the offending widget or simply do not use a background color on it so that is does not overflow your desired space.
[CLOSED]
On this page, there is a div box which holds a code example, where a certain line is supposed to be given a background color. This background color is actually done by using regular expressions to replace a start and end symbol with the code to make a div with our red background. This works fine, we have our red background, the regular expressions are doing their work.
However, if we scroll over a bit in code box, we notice that the red background color stops where the actual edge to the code box is (but we can scroll over, so it's not the end). This should illustrate what I mean:
I've tried pretty much every CSS value I could think of with firebug, including trying every possible overflow option. With width, if I manually give an absolute width, it can extend it further, but this won't do because the background coloring is generated automatically, with javascript using a method with good fallback in case the javascript fails to load or is disabled.
So, does anyone know a way to get those backgrounds extending all the way to the end? I considered counting the characters, but since the background colors often cover more than a single line, and even hundreds of lines on some other pages, it seems impractical and rather resourcy. A CSS method would be prefered, though should it come to it, I'll go with a javascript fix.
If you want to take a look at the page for yourself, feel free, that one is just a sandbox to show the specific problem, and the script that replaces certain comments with div elements to make this background image is found here.
Thanks in advance for any help and/or advice.
<pre> and overflow:auto doesn't play nice together, and is likely the base of your problem.
Try to use a <div> as scroll container instead.
So:
<div style="overflow: auto">
<pre>
...content...
</pre>
</div>
Instead of
<pre style="overflow: auto">
...content...
</pre>
How to create such (see image below) effect using pure HTML JS and CSS?
(source: narod.ru)
For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)
Well, this can be done with CSS Gradients.
But, i am not sure if that is supported in all browsers.
For cross-browser support, use this library.
You need a different approach.
Check out this url: http://www.eyecon.ro/colorpicker/.
As you can see when you move slider up and down it changes the background of the picker div.
But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
..because parent div is using the actual colour:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.
And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.
So in the theoretical code:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))
Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.
I think this may require an image (which could be set through CSS to the background of whatever container you wish to put this in), but I don't think you'll be able to do this with pure scripting.
Technically speaking you can change your background-image using CSS. Getting it to tile properly left to right means creating the image at a width which makes the borders between horizontally repeated (background-repeat: repeat-x) images seamless, so that it will look like each diagonal line picks up on the left side where diagonal on the image to the right leaves off.