I am running into a problem and I trying to solve it in the only way that comes to mind. The problem is I am trying to take content that is attached to a image button, but the content is hidden and show it next to the button with a background image when the user hovers over it. Here is when the problem comes in, I have the background image currently as just an image(img tag), so I can stretch it by adjusting the height/width. I want to be able to lay the content on top of that image: For example:
<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>
so with jquery I use disregard simple syntax errors
var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
function(){
mem=$(this).find(".Content").html();
$("#backgroundDiv").html(img+mem);
}function(){
});
The above does the intented, which is add all the content after the div img, which is what I'm stumped at, I want to be able to make the background img tag the actual background for the content. If I try to set the background-image in css to the url for the div. The image doesn't make the background as larger enough. Keep in mind I am under ie 6 for some cases but only as far as ie 8 for most cases.
So what I have tried was using css to change the z-index for the image and the content as so: but doesn't work:
#backgroundimg{
z-index:-100;
position:absolute;
}
.Content{
z-index:100;
position:relative;
}
i would use a different approach.
Structure your content like this:
+ DIV (position static / relative)
+ IMG (position relative)
+ DIV (position absolute)
+ "contents"
So you could work without any JS if i understood the question... See an example here:
http://jsfiddle.net/meo/h64w4/4/
<script type="text/javascript">
$(document).ready(function(){
var img= $("#backgroundDiv").html();
$(".ContentDiv").mouseover(
function(){
$("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
/* Use the following line if you want to scale the "background" image to the content */
$("#backgroundDiv").css('height',$(this).find(".Content").height());
});
});
</script>
<style type='text/css'>
#backgroundDiv{
position:relative;
height:auto;
width:auto;
}
#backgroundimg{
width:100%;
height:100%;
}
.addedContent{
position:absolute;
top:0;
left:0;
z-index:999;
}
</style>
If you weren't using a terrible browser, css3 could lend you a hand.
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]
http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Related
we are using a large image as a background for a div after loading the page if we hover on that div we are getting blank for a few seconds why is that? Can we have a solution for that? I need a solution without using a sprite image because I need to alter that image in responsive
.hexagonal{
background: url(/images/service-bg.jpg) no-repeat;
}
.hexagonal:hover {
background: url(/images/service-bg-over.jpg) no-repeat;
}
<div class="hexagonal">
<ul>
<li>test1</li>
<li>test1</li>
</ul>
</div>
because this image is large it's taking time to load it and that is why you see blank for a few seconds when you hover the element.
In order to fix it, you'll have to preload those images you need when hovering. there are some ways to do it and there are a few suggestions in the comments for JS solutions but I think using the CSS way is more suitable since you won't need the JS part.
In order to preload images using CSS, you can set the content of the after pseudo-element of the body to those images and then hide the element.
body::after{
position:absolute;
width:0;
height:0;
overflow:hidden;
z-index:-1; /* hide images */
content: url(/images/service-bg-over.jpg); /* load images */
}
I'm making a website with a number of "floating" images one each side of the screen. Pages range in height between about 900-3000 pixels, so I've created floating images to cover this area.
The problem is, that even if a page is only 900 pixels high, the page will see the floating images as objects on the page and make scrolling to them possible.. making the page much longer than needed.
From what I could gather on StackOverflow. Absolute elements shouldn't count into the flow of the document, but clearly these are. I've also seen answers involving usage of overflow:hidden, but this doesn't seem to have the desired effect at all.
Maybe the only way would be to create the images depending on the page height using javascript?
here is the WIP of the site in question: http://apa.smars.se
If you want a CSS only solution here is what you should do:
Add position:relative; and margin:0 to the <body> element.
Add next element as a first element in your <body>:
<div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">
Move the <div class="botleft ..."> and <div class="botright ..."> elements to that div.
By applying position:relative to the <body> element and adding to it another element with position:absolute; left:0; top:0; width:100%; height:100% you are telling that element to "track" the size of the <body> element. And by adding overflow:hidden; hides the bottom-overflowed images.
The downside in this solution is that you may see cut images at the bottom of the page. Well, nothing is perfect :)
Here is how your DOM tree should look like after this change
To see the results immediately you can run following code from browser's console:
d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";
When you give an absolute position to an element it becomes absolute related to the first relative element that contains the absolute element.
And because the default position for elements is static, you may have to change it for the container element (maybe the body in your case).
Good luck!
this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow
I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?
Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)
Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.
Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.
I'm trying to do this:
!!! just learned I cant submit images because I'm new...
I have placed the image which
perfectly describes the problem on
Diino: Link to Diino folder (18,9kb) together with example files (html,css etc).
The moving DIV has this CSS:
div.linkr-bm {
float:left;
height:1px;
overflow:visible;
position:relative;
top:68px;
z-index:2;
}
The DIV with the height value has this CSS:
.entry-tags {
float:left;
font-family:Calibri;
font-size:small;
font-weight:bold;
line-height:1.6;
margin:0;
padding:0;
width:400px;
display:block;
}
Moving the DIV with the CSS works statically, BUT I can not get it to move with jQuery after page load using this script:
jQuery(document).ready(function(){
$('.entry').each(function(){
var height = $(this).children('.entry-tags').height();
$(this).children('.linkr-bm').css('top', height);
});
});
The DIVs iterate six times / page
The DIVs have Classes (no #ID)
To clarify: This is a hack because I don't have access to the DIV order and therefor have to move this DIV in place after it has been rendered. The problem is that the div with the tags can change from one to probably three rows. So that is why the offset have to be calculated.
I really appreciate any help I can get. Thank's!
try with this code:
jQuery(function(){
jQuery('.entry').each(function(){
$(this).find('.linkr-bm').css('top', $(this).find('.entry_tags').height() + 'px');
});
});