Show a gif image over a section to take up the space - html

I am a total newbie at CSS. The problem I have is really simple.
<section>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
This is a part of my HTML code. Inside the div block I have a field and some script that helps me in uploading multiple files. What I want to do is show something like a grey-div-block over the section or div itself that takes up the space and shows a gif image while the files are being uploaded.
The problem: I don't know how to work out with css. I am looking only for some css classes that I can add to my code and do what I want. I know how to fix the jquery.

Use html like this
<div class="load">
<img src="../path">
</div>
And the css is
.load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;}
may it will help you

just insert wherever you want it placed.
<div class="loading">
<img src="loading.gif">
</div>

EDITED:demo with gif , here when you click on the button the popup appears and when you click on gray backgrond the popup dissappears.
Include your gif inside the div popup and ofcourse style it according to your needs , this will display a centered loading gif , use display:none to both the divs initially and then using some jquery try to make them visible , I hope it helps you

If I understand you correctly, you want something like a modal popup, but just over that section (not the whole page), showing progress image and preventing further clicks on the upload field? If so, then just use this:
<section>
<div id="modal" style="display: none"><img src="..."></div>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
You show it with:
document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');
And hide it again with:
document.getElementById('modal').setAttribute('style', 'display: none');

Related

How to Link another page, at a certain point HTML

So I want the button to link to page 2 at a certain height, like Wikipedia
I've tried linking it but it doesn't seem to do anything
<div class="button1">
<button><a id="#areas.html#location1"></a>Button1</button></div>
CSS
.button1 {
position: absolute;
top: 28%;
left: 22.2%;
}
Page 2
This is what you need.
Just use a button with link to another page then div or a and give it name="location1" to go direct to that section of the page.
Button to another page
<button onclick="location.href='areas.html#location1'" type="button">Button1</button>
If your area.html file
<div name="location1">
content
</div>
Okay after some trial and error and using the comments I think I fixed it allowing it to use the tag (also removed the hyperlink underline and color)
Credit for helping goes to Raptor & AlwaysHelping
This is linking button
<button> Button words</button>
This is the target div
<div id="locationlink1"></div>
And the CSS for color changing the hyperlink color to black
a
{
color: #000000;
}

How to change image with text into a button

I've designed a mobile video chat website UI in Sketch and used a plugin to convert the design into HTML and CSS. I need to turn what are now button images into actual buttons. Here is what the code looks like
I need to make this image with text into a button
</div>
<div class="startbutton">
<img anima-src="./img/iphone---during-chat-btn 1#2x.png" class="btn-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<div class="start">
START
</div>
<button> click me! </button>
.button {
background-image: url ('/image/img1.jpeg') no-repeat;`enter code here`
cursor:pointer;
}
Here you can add the image background to a button which full the button background with an image.
Wrap it in a button tag. Or, make it look like a button with padding and border.

Use CSS to access style custom attribute

I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference

How to change the Text on the image?

Below is the image, where I have text on the image. I am wondering on how the text on the Image can be changed. Actually someone else wrote the code and I am not getting. Please Help me out Friends.
And this is the code which is working on this.
<div class="TabsV">
<div id="Tab0" class="TabV Selected" style="height: 86px;">
<a style="background-position: -8px -12px; padding-bottom: 70px;" href="javascript: SelectTab(0)"></a>
</div>
<div id="Tab1" class="TabV" style="height: 116px;">
<a style="background-position: -40px 0px; padding-bottom: 100px;" href="javascript: SelectTab(1)"></a>
</div>
<div class="TabVEmpty" style="height: 50px;"></div>
</div>
It looks like the text is part of the image.
So you need to edit the actual images and change the text there.
If you look at the stylesheet used in that page you will find something similar to
.TabV a{
/*in here you will see the url of the image being used
background:...
or background-image: url('..');
*/
}
It looks like the image itself contains text and it is applied via the TabV class - notice how the background-position coordinates changes between one tab and the other.
If you look in your CSS file, you should see something like:
.TabV
{
background-image: url(...)
}
What you need to do, therefore, is to manipulate the existing image used as background and add the text you want to that image. Then you need to modify the background-position of the corresponding anchor element. One way to do that with jQuery is:
$('#Tab0').attr("background-position","-16px 20px;"); //-16px and 20px are just an example
Where #Tab0 is the css selector for the first tab. #Tab1 would be the css selector for the second tab... "#<something>" maps to id="<something>" in the html markup.
The technique itself is called CSS sprites. You can read more about this technique here.
You can not! You must edit those image files in an image editor. The text from the tabs isn't coded in the html code.

How to make a whole 'div' clickable in html and css without JavaScript? [duplicate]

This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.
If I have this which is what I want the result to do -
<a href="#">
<div>This is a link</div>
</a>
The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?
It is possible to make a link fill the entire div which gives the appearance of making the div clickable.
CSS:
#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
HTML:
<div id="my-div">
</div>
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
a whole div links to another page when clicked without javascript and
with valid code, is this possible?
Pedantic answer: No.
As you've already put on another comment, it's invalid to nest a div inside an a tag.
However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.
If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.
Update:
In HTML5, placing a <div> inside an <a> is valid.
See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)
Without JS, I am doing it like this:
My HTML:
<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
text of my link
</div>
My CSS:
.container{
position: relative;
}
.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
My solution without JavaScript/images. Only CSS and HTML. It works in all browsers.
HTML:
<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>
CSS:
.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}
.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html.
I'm not saying you should use it, but in HTML5 it's fine to use <div></div>.
The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).
jQuery would allow you to do that.
Look up the click() function:
http://api.jquery.com/click/
Example:
$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.
.clickable {
cursor:pointer;
}
Something like this?
<div onclick="alert('test');">
</div>
AFAIK you will need at least a little bit of JavaScript...
I would suggest to use jQuery.
You can include this library in one line. And then you can access your div with
$('div').click(function(){
// do stuff here
});
and respond to the click event.
we are using like this
<label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
</div>
</label>
<label for="2">
<div class="options">
<input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>
using
<label for="1">
tag and catching is with
id=1
hope this helps.