Div with image over another div - javascript

I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/

add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.

try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem

I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}

The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.

Related

Keep divs positioned relative to image

I am trying to create a "map" with divs over cities. I got the map in .svg format and using it as background with background-size: cover. I need the "city-divs" to stay positioned relative to the image (for example London div should be always over London position on my image). I can half-achieve this making the "city divs" absolute and then positioning it using vh and vw. However, if I resize the window or check on different computer, it messes up.
I guess pure css is not the correct way on doing this. Is there a way of achieving this or am I going completely wrong direction?
Closest I got was using this solution found on stackoverflow http://jsfiddle.net/fmenrd4z/ . This works for divs in the center of image just about right. Divs more to the left / right won't work as good.
Currently, I'm using this code.
HTML
<section id="map">
<div id="london">london</div>
<div id="paris">paris</div>
</section>
CSS
#map {
background-image: url(../img/maps/map.svg);
width: 100vw;
height: 90vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#london {
position: absolute;
left: 31vw;
top: 35vh;
}
#paris {
position: absolute;
left: 60vw;
top: 73vh;
}
I suppose there must be solution for this problem. I've been searching the web for whole day today but didn't found anything.
I'm up for choosing completely different way of doing this. (Is there some javascript library etc..?)
Thanks in advance!
This will never work because you position the divs dimensions that are always changing depending on the screen it is displayed.
There is one of way of doing it by giving a fixed height and width of section #map in pixels for large screens and adding some media queries for mobile screens.
#map {
width: 600px;
height: 300px;
}
#media (max-width: 1024px){
#map {
width: 300px;
height: 150px;
}
}

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??
The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/
I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

Responsive image slider to fill div height

I'm trying to get a responsive image slider. It musts:
Fill the height of a div
Overflow on width
Be centered
It should be similar to http://www.niraalpina.com. I'm looking for a cross-browser compatible CSS solution that doesn't involve fixed dimensions.
I've uploaded the site to http://test5.twinzebras.com/, please have a look and let me know what I'm doing wrong.
Your best bet is to use a setup like this:
HTML
<div class="container">
<div id="img1"></div>
<div id="img2"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
}
#img1 {
background: url('../img.jpg') no-repeat center center;
background-size: cover; // also give 'contain' a go
}
If cover doesn't do what you want, try contain — I'm not quite sure which you're looking for.
Note: this solution relies on having a fixed-height div around the .container: This is entirely reliant on the rest of your site's setup, so we can't do much to help you there.
You can set width and height to 100% in img
#img1 {
background: url('../img.jpg') no-repeat center center;
width: 100%;
height: 100%;
}

Toggling position fixed and static

I have 2 columns. The right column is a normal scrollable pane of content. The left hand column, with classname sticky is the column I'm trying to toggle between fixed and static positioning. It must remain fixed in view as you scroll through the right hand column until the end. When you get to the end of the right hand column (and the next section becomes visible) the sticky div's position must change to static and scroll normally with the page. The following section must scroll in the same manner (normally) until it reaches the top of the browser window where the current sticky div in view changes to position fixed.
HTML:
<section>
<div class="c-2 sticky"></div> /* Background image */
<div class="c-2">
<p>Any volume of content. Must cater for long and short pieces</p>
....
</div>
</section>
CSS:
.content {
width: 100%;
overflow: hidden;
float: left;
padding-left: 130px;
position: relative;
}
.c-2 {
position: relative;
width: 50%;
left: 50%;
overflow: hidden;
background: #e4f;
}
.c-2.sticky {
background: url(img/holder.jpg) fixed top center no-repeat #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
left: 0;
width: 60%;
}
The JS is where I fall down, I just don't know how to begin to do this. I've tried using StickyKit but without any luck. I have a JSFiddle here: http://jsfiddle.net/6HPX5/
Hello please view this demo and tell me if something like this is what you want http://jsfiddle.net/6HPX5/130/ then i can make a better explanation about this.
You'll need to put an "anchor" in where the new section begins and then with jQuery, you'll want to see the position of this element, and then once you determine that the anchor is visible use jQuery(id).css() option to change the position.
OR another alternative would be to track scrolling, and when the element on the left needs to move, use animate to move it off the screen.
UPDATE
http://api.jquery.com/css/ - to change the position attribute.
http://api.jquery.com/scroll/ - to detect scrolling
http://api.jquery.com/position/ or http://api.jquery.com/offset/ - to get the position of your anchor.
And then you add this:
jQuery(window).scroll(function(e) {
//track scrolling
});

CSS/JavaScript to crop image

How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,
Picture before :
I want the highlighted location on the following image to be viewed :
Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales,
AND how to resize is after cropping ?
Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/
One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.
Here's an example of the approach:
HTML
<div id='crop-the-cats'>
<img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>​
CSS
#crop-the-cats {
width: 100px;
height: 80px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -60px;
left: -70px;
}
​See http://jsfiddle.net/Da9CT/
Another approach is to use the image as the background of the image and reposition it using background-position:
HTML
<div id='crop-the-cats'></div>​
CSS
#crop-the-cats {
width: 100px;
height: 80px;
background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
background-position: -50px -60px;
}
​See http://jsfiddle.net/Da9CT/2/
You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit
Let me know if that helps!

Categories