CSS Background Position when using :target - javascript

Ok so I've done some looking around and couldn't find a good enough answer to this question.
Basically what I'm trying to do is minimize my websites header when a button is clicked.
Heres the CSS: http://emstectest.site44.com/style.css
I've been playing around trying to get this to work but here's the problem, I'm trying to make the background image, which is a dark blue divider colour which seperates the header and body move up when the expand link is clicked (using :target on the #header style).
But I've tried something like:
#header:target { background-position: center -300px; }
but the only thing that actually moves the background image is when I do:
body { background: url (PATH) repeat-x center -300px; }
Any help on this would be greatly appreciated. I'm holding back on using Javascript on this due to my lack of knowledge in the area; that and the fact that I want load times to be the main priority.
Another question as well as this would be: is there also a way to animate this process using -webkit- or would I have to use Javascripting again?
Thanks in advance.
- James

From the w3schools.com
Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Look at an example here
Your image has a fixed width of 440px so if you are trying to reduce the height if it you'll need to adjust it's proportions.

Related

Is it possible to add a background image to the scroll-bounce area in html?

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.

Align div to image-border

I wanted to ask if it's possible to create 'transition' between two images like this:
using css/javascript?
The thing on top is a div with it's content and background image (sand/water) and i have some other div on bottom (also with some content and background-image) that needs to be split using that 'wave' (which is .png file).
Things i tried to do was using 'wave' as a border-image, which obviously didn't work. I found out that i probably have to use tools like http://bennettfeely.com/clippy/ to create some shapes for both top and bottom divs, but it's going to take a lot of time and may not be responsive.
Thanks in advance.
Yes, this is possible. You simply need to use multiple background stacking.
e.g.
background: url('images/wave.png') no-repeat center, url('images/beach.jpg') no-repeat center center/cover;
Where the wave png file must have its semi-transparency so it can show the beach below it.
EDIT: The aim of OP's question is to clip the image so that it can take only the wave's area. That is achievable trough the use of clip-path. More information about this can be found at CSS Tricks.

One Background Image, Multiple Divs

I am going to explain my question with a series of images.
A div container will have the following background image:
On top of the image, there will be tile like divs:
My goal is to make the background image visible to only the tiles, and the rest hidden:
Any help is greatly appreciated, thank you!
Use the background-attachment attribute like in the following fiddle:
http://jsfiddle.net/1ovd3cnk/1/
each image block gets the following:
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
edit: was setting margin on row instead of conatiner
Sorry reply like this, I don't have reputation enough to add comment in other comments, but making some adds to the earlier answer:
The image shifted could be fixed using:
background-size: cover;
But remember that cover property isn't supported in old browsers.
http://caniuse.com/#search=background-size
So if you want cross old browser compatibility I recommend you to try javascript and do some maths using the width and height from your elements to adjust de background image position.

Javascript Ad Conflicting With Drop Down Menu

Apart from repositioning is there anything that I can do to avoid the following that is described in the image
Here is a live link to the website audio visual reviews.
I have tried using javascript to hide the ads when the search list is displayed but it doesnt work.
Is this something that a css rule could fix.
Once again thanks in advance!
play with z-index.
be carefull, it works ONLY with ABSOLUTE and RELATIVE positions.
for the flash object, beware to have wmode=transparent.
wmode opaque is not working for z-index
You may set z-index to the popup window to be higher than the z-index that you will put on the div or whatever is holding your ads elements. I guess you are searching for:
#PopUpDivOrElement {
position:relative /*or position:absolute*/
z-index:20;
}
#addsDivOrElement {
position:relative /*or position:absolute*/
z-index:0;
}

HTML/CSS/JS Visible Element with no "Presence"

is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.

Categories

Resources