I have two css buttons on my homepage that are have an absolute position on them relative to an image. The problem I'm having is that they load a lot faster than the image does, so for a split second upon loading the page, the buttons are floating out in la la land until the image loads and they fall in to line.
Is there a simple fix to this or do I have to totally redo the positioning?
Easiest is to hide the buttons (display:none) initially, and use javascript/jquery to show onload.
jQuery example is to do:
$('#ImgReferenced').on('load',function(){
$('input[button]').show();
});
But the same can be done in javascript with an onload eventhandler.
Are you using the width and height attributes <img ... width="xxx" height="yyy">on the image element? That's how the browser can "reserve space" for the image and know its dimensions before the image is loaded. It needs this so it can draw something relative to the image.
Related
To make it more simple, i'm working on this site https://webdev02.amontagnana.it/ and on the 4th row we can see a text block and an embedded video.
I need to make the video's height just like the block on the left. (it has to be relative too because it has to be responsive to desktop and mobile)
Your site are loading and loading
If you are cover an entire DIV . you need to fixed position and increase z-index as much as possible.
you can simply add a custom class on tatsu-column-inner and add the background color black on it
See the attached screenshort
I just can't figure out why my background and div is not on its place on load up. Only after re-sizing the window. How can I load it differently? What could be the problem?
http://wear.gfg.me.uk/
Any idea?
I assume you are talking about the circular graphic that appears when you are not in full screen? I believe that behavior is specified at the link below and am not sure what you want to accomplish.
What do you mean when you say it's "not on its place"?
http://wear.gfg.me.uk/js/screen.js
You have a function call in screen.js to make the background image fullsize. It runs on resize and focus, but not when the dom is loaded. You either need to move the script to the bottom (guaranteeing that all elements including the .background element will be loaded when you first call backgroundResize() OR you can leave it at the top and call it when the dom is ready. You're already using jQuery, so you can do:
$(document).ready(function() {
backgroundResize();
});
I am using AngularJS to create a new table (with ngRepeat) when I receive new data via Ajax.
Part of each table row is an image.
Under certain conditions I want to display an overlay image (which is mostly transparent except for an icon indicating the condition) right on top of the main image.
I am currently using a js solution by assigning a handler to the load event of the image (obtaining the position of main image and setting overlay image to the same position).
That works but I have to use $apply to make sure all images are constructed in the DOM before I can attach the load event.
I was wondering if there is a pure html/css solution to the problem?
Simply make sure the overlay image is always in the exact same position as the main image.
The I can simply bind ngShow to the condition and avoid all js tricks.
ETA:
here's the relevant code snippet from the table (within the ngRepeat):
<div class="movie-cover">
<img class="movie-image" ng-src="{{movie.ImageUrl}}" onerror="this.src='#Url.Content("~/Content/images/titleimages/NoImage.jpg")'" />
<img class="selected-image dontshow" src="#Url.Content("~/Content/images/Selected.png")" data-hh-id="{{movie.ID}}" />
<a class="movie-link" href="{{movie.ImdbUrl}}" target="_blank">IMDb</a>
</div>
I want the image with the class 'selected-image' on top of the other one.
give this a try:
.movie-cover {position:relative;width:400px;height:400px;}
.movie-cover img {position:absolute;top:0;left:0;}
Well, one idea is that you can load first image as a cover background to a div and load second image inside that div with height:100%.
Edit
I realise this would also require js as you are loading it via ajax.
Second idea is that you can place both images inside same div with height 100% with absolute position and top, left set to 0 relative to parent div?
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
I was looking at this HTML5 website, http://www.danhigbie.com, and found the "background image's scrolling" fascinating. I looked through its Javascript but found no code changing the background image.
Save the webpage to disk and play around with the files better.js and better.cs. The background scrolling is being done in the better.js file by changing the css classes (which are defined in better.css)
I am using some jQuery to change the background positioning of multiplebgs based on the scroll position. Each background image element is positioned from the top with a percentage, this may be a bit hard to follow since there are so many background images per section. I take each background elements vertical position value and modify it based on the current scroll bar position. Hope this helps.
Turns out that the effect is done simply by declaring the background position of different "section" as fixed. Found a excellent article that explains how that effect work:
Icon that changes color when scrolling
Here is a javascript library that does this for you and seems to work really well:
http://stolksdorf.github.com/Parallaxjs/