I'm trying to figure out how to apply a loading image <div> behind each of my images. With help from a previously answered question here, I was able to do this for my pages with a CSS&JS slideshow. Now I just want it to work with any basic image. I've tried to wrap my images in divs and apply it the same way, but I don't think I am understanding the full process here. My issue may be with how I wrap my images and text with the <p> tag to get them aligned properly.
Rather than try and post all the snippets of code that come together to make my slideshow work, I'll just refer to the beta version of the website in question: http://www.gwassociates.com/beta
I would like to be able to add the loading icon to the static images on the "Team" and "Contact" pages. You can find examples of the working effect on the "Home", "Profile" and "Press" sections.
The <div class="loading load-style"> calls out my spinning loading icon as a div background image, I threw it in the "Team" page just to show it. The icon needs to load behind each thumbnail, just like in the slideshows of the other pages.
two problems I see here.
you are using a solid image and animating it. That's not the ideal method these days. Instead just post a gif and skip the animation. It will make older computers have better performance on your site.
Check out this free gif generator: http://preloaders.net/
Your image appears just fine. But it's appearing behind the image. Put a display none on the image and you'll see what I mean. Instead of putting the loader image as a background class put it inside the div as the backgournd of another div that is display:none normally and display:block when your spinner class is applied. Then your z-index will actually work and put the spinner in front of the image.
Rough (untested) code:
<div class="image-wrapper">
<img class="image">
<div class="spinner"> </div>
</div>
<style>
.spinner { display: none; width: 100px; height: 100px; position: relative; z-index: 10;}
.spinner.loading { display: block }
</style>
Also when your javascript adds the spinner class make sure your ajax call is async or the spinner won't be added at the right time.
A more thorough example: http://preloaders.net/en/ajax_loader_script
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I'm having some layout issues with a design I'm doing here:
http://testing004.compoundeyedesign.com/
I'm trying to replicate the video/search box layout on Airbnb's homepage. In fact, I'm using their video in my page at the moment. The problems I'm having are screengrabbed here. But basically they are:
How do I get the purple box with the form to overlap the video or at least appear without a gap?
How do I keep the video from getting so tall on desktop browsers that the purple box and text below gets pushed below the fold?
I've experimented with the CSS and HTML, trying to improve what I have, but what you see now is the best I can get. Any pointers to push this in the right direction would be welcome.
Thanks! Russell
If you want the purple box to be on top of the video, you need to use position: static;. Basically something like:
#purplebar {
position: absolute;
width: 100%;
top: 100px;
}
<div class="wrap">
<div id="video"></div>
<div id="purplebar"></div>
</div>
If you are just trying to connect the two elements (remove the white) use your inspect element tool to find out what margin/padding is causing the difference, and remove it.
I am developing a small site:
http://www.designbyantony.com/David%20Quigley%20www/index.html
(It's within a folder of my own site on my server)
I would like the footer div to follow on from the content at the end of each page ie: NOT to stick to the bottom of the viewport. I have managed this on all pages except it isnt working on the homepage - as per link above. I have spent a good day trying to fiddle with over:hidden etc but I'm not having any luck. I've a feeling it's something to do with the fact that the homepage uses a fullscreen image.
Bring the contents outside #header you are missing </div> after header. Remove position: fixed; from #homepage_content add z-index:-1 to #bg
i have replicated your html in jsfiddle. and set the background in css background: url.
footer seems to be in the bottom.
http://jsfiddle.net/btevfik/hDkQC/
Ok, i think i know what you are looking for.
Move the #homepage_content outside of the #header by removing the </div> after <!-- InstanceEndEditable -->. Instead add a </div> just before the first clear div.
Change the css code of #homepage_content to position: relative; or just remove the position: fixed.
I think you are looking for a transparent background color of the #homepage_content, right? To do this you must remove the bakcground-color of #homepage_wrapper and instead put white background-color on the #header div.
Hope it fixes it.
I am trying to create a simple black box that spans the top of my web page.
Currently I have this:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
Initially I tried making it a percentage, but it's far too complex for me.
I need to prevent the box from causing the page to scroll to the sides.
I'm sure this is a very simple thing, probably the main issue I am having is not knowing what to search for.
I have been googling for 2 hours now.
Yo can simply use overflow:hidden
example:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
Watch the demo: jsFiddle Live Demo
I am trying to create a simple black box that spans the top of my web page.
If you're trying to accomplish this then all you need to do is the following:
<div style="background-color:#000;height:10px;width:100%;"></div>
and place it directly under your opening <body> tag.
I'm confused as to why you are setting width:5000px; on a canvas, if you're expecting to make a canvas element wider than the viewport and still not allow scrolling then you need to set overflow:hidden on the body element.
body {
overflow:hidden;
}
If the unwanted scrolling is due to user pressing arrow keys in your application, then you should be telling the browser that you are handling the arrow keys yourself by executing:
event.preventDefault();
in the handler for keyboard events.
Additionally html {overflow: hidden} might work too.
I have following problem. I've integrated facebook send/like buttons to my website and when i click send, it overlaps with the underlying div.
Since I'm really no CSS guru, i would like that you point me in to a direction where i can find a solution for this problem.
Thank you
the problem is that the div with class box-center & div with class box have the css property overflow: hidden; so anything that's bigger then the div when is loaded will not be shown
but the problem if you remove that is that the box above will be messed up. But that can be resolved by adding (just before closing the div):
<div class="clear"></div>
and in css
.clear {clear:both}
edit: This should give you a better picture (for a bigger preview -> http://i.stack.imgur.com/nvsJW.png)