I can position a background image using the background property in an input field but I want an action to trigger when it is clicked.
Can I trigger an action on a background image click?
I just want to place a small 'X' image over the right hand side of input which clears the input.
You can absolutely position a link over the <input> and then apply a text-indent to the <input> to make room for the image. For example:
<div id="outer">
<img src="http://placekitten.com/16/16">
<input type="text">
</div>
And:
#outer {
position: relative;
}
#outer a {
position: absolute;
top: 0;
left: 0;
}
#outer input {
text-indent: 16px;
}
Live demo: http://jsfiddle.net/ambiguous/TgaFf/
The outer <div id="outer"> is just there to give me something to apply position: relative to; absolutely positioned elements are positioned with respect to the nearest ancestor whose position is anything other than static. The text-indent on the <input> starts the input cursor 16px from the left side of the <input> and thus leaves space for the image. In the real world you would, of course, adjust the top, left, margins, paddings, ... to make everything line up properly and look pretty.
sorry i misunderstood your question, add a class to the input, and you can do it with a jquery click function or a javascript onClick
Maybe, if you can pass a class to it with Jquery/ js. Otherwise there are some CSS3 options like transitions - to animate, see www.css3please.com Depends what you're wanting to do?
<html>
<head>
<script type="text/javascript">
function callmee()
{
alert("call");
}
</script>
</head>
<body>
<input type="button" style="background-image:url(shahrukh2.jpg);" onclick="callmee()"></div>
</body>
i think, u want this..
regardz
Related
I want to make a button and next to it a div, but div should have relative position and be moved to the left, so this way it would overlap a button and it couldn't be clicked, so I wonder is there a way to do that? except putting a button into that div.
here is something what i'm trying to do:
div {
background-color:green;
width:200px;
}
input:checked+div {
background-color:salmon;
}
<body>
<input type=checkbox>
<div style="display:inline-block;width:200px;position:relative;left:-30px;">
<p>
text
</p>
</div>
</body>
So i just need to make input here clickable
Not a good way to solve it, but you could work with position: relative; z-index: 1 on your button. I would consider creating a different structure altogether, since this is really ugly and unmanageable. See https://jsfiddle.net/w6ymq758/
I have a button inside of a parent div. I would like the button to be in the upper-right of the div.
If the parent div had its CSS position set to relative, I would just make the button's position: absolute and top: 0px and right: 0px or something along those lines (right would actually be dynamically based on the size of the button).
The problem is, someone else made the div, it has no position attribute, and I can't change its style. How can I still position this button where I want it?
Example HTML:
<div id="someone_elses_div">
<button id="my_button">Hello World</button>
</div>
You could use the css calc() to calculate left margin for the button according the the div's width: FIDDLE
as you can see, almost all current browsers support calc(): CALC()
css:
#someone_elses_div{
background:red;
height:100px;
width:70%;
}
#my_button{
width:100px;
margin-left:calc(100% - 100px);
}
I'm not sure if this will help, but are you unable to change the parent's position due to not having access alone? If so, you could just use some jQuery to add the position.
$(document).ready(function () {
$('#someone_elses_div').css({
'position':'relative'
});
});
In the following HTML, the text input and the buttons are supposed to be positioned 380px from the top but it's further down the page. I noticed if I remove the image it's positioned in the right place or closer to it, I haven't pulled out a ruler yet. Why is this happening and how do I fix it?
<div style="position:relative;width:800px;height:792px;font-family:Arial;font-size:12px;margin:0 auto;left:8px;top:14px;background-color:#FFFFFF;">
<img name="Image712" src="https://www.google.com/images/srpr/logo4w.png" style="position:relative;display:block;margin:0 auto;top:217px;width:269px;height:95px;" />
<div name="HGroup714" style="position:relative;display:block;margin:0 auto;top:380px;width:220px;height:23px;">
<div style="display:inline-block;padding-right:2px">
<input name="Button715" type="button" style="position:relative;vertical-align:middle;width:101px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="Google Search" />
</div>
<div style="display:inline-block;">
<input name="Button718" type="button" style="position:relative;vertical-align:middle;width:113px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="I'm Feeling Lucky" />
</div>
</div>
<input name="TextInput721" type="input" style="position:relative;display:block;margin:0 auto;top:330px;width:50%;height:22px;font-family:Arial;font-size:12px;padding:0;border:1px solid #696969;" />
</div>
<style>
*,
*: before, *: after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<style>
*,
*: before, *: after {
outline: 1px dotted red;
}
</style>
UPDATE: I know it's inline CSS. Please ignore that for now.
Link to live example (thanks Mr Alien).
Instead of using position relative, which places you relative towards the location where you should be rendered, you want to use position absolute. Absolute is rendered in relation to it's parent, which is what you're actually looking for.
Position fixed does the same thing as absolute, except the 'parent' is the browser window.
I think this is what you're looking for: http://jsfiddle.net/fr6AY/1/
position:absolute;
margin:0 auto;
left: 0;
right: 0;
The problem is that as the image is a relative positioned element, the 'top' css tag applied to the 'HGroup714; element is from the bottom of this image, therefore the height of the image moves it down the page. If you wanted this to not affect the positioning of the lower elements you could simply remove the 95px height of the image from the 'top' tag on the Hgroup element.
Any relative positioning will cause your elements to be positioned relative to each other, so you much take them out of the page flow by using position:absolute, and removing any relative positioning from parent elements.
Suggestions to use position:fixed; would only work if the page were never to be scrolled - fixed positioning fixes it within the browser window, and scrolling keeps it at that same positioning, whereas absolute is not reliant on the position of other elements, but maintains it's place in the page.
If you want it 380px from the top of the window (not the page), you are looking for position: fixed.
If you want it 380px from the top of the page, try using position: absolute in the HGroup714 element.
I'm looking to clone the Google Instant "underlay/type ahead" type look, where what the system is predicting is grayed out and infront of what you are typing.
The technical part of it I am completely sorted, as well as representing the text. I simply am unable to work out how to do the CSS positioning and transparent textbox over the top of the gray text.
Anyone know how to simply do this?
I've tried to adapt code from other sources, but been unable to get the text with the gray text underneath a transparent textbox.
I believe you're looking for something like this. Keep in mind they need to be posiitoned together, so it's probably a good idea to wrap this in a div together.
HTML
<div class='top'>
<input type='text' id='gray'/>
</div>
<div>
<input type='text' id='type'/>
</div>
CSS
.top {
background:transparent;
position:relative;
}
input {
font-size: 14px;
width: 200px;
}
#type {
background: transparent;
z-index: 1;
}
#gray {
position: absolute;
z-index: -1;
color: silver;
}
Live Example
http://jsfiddle.net/r4jSR/
Edit
This positioning works by stacking a position:relative div on top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the div to collapse as it has no contents, and - as long as neither block element has a margin - the 0,0 coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.
I have a link to an anchor on my html page. When the link is clicked it causes the page to scroll to the anchor so that the anchor is at the very top of the visible part of the page. How can I make the page scroll so that the anchor will be in the middle of the page?
I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.
<span class="anchor" id="section1"></span>
<div class="section"></div>
then put the following css code
.anchor{
display: block;
height: 115px; /*same height as header*/
margin-top: -115px; /*same height as header*/
visibility: hidden;
}
Thanks, Phillip!
Place a <span class="anchor" id="X"> then style the anchor class like:
.anchor {
position: absolute;
transform: translateY(-50vh);
}
With -50vh the anchor will scroll in the middle of the screen.
html:
<a id="anchor">NEWS</a>
css:
#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}
worked fine for me
There is no straight way of doing this in pure html\css. It is possible though using js, by getting the element's top location and setting the page's top position to that element's position minus half of the page's height.
if you want without blank space do it like this:
<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>
but, you'll still have to regulate height from javascript
Extending off of charles.cc.hsu's answer, we can do this for elements of arbitrary height using the vh CSS unit, which is relative to the viewport's height.
HTML:
<span class="anchor" id="section1"></span>
<div class="section"></div>
CSS:
.anchor{
display: block;
height: 50vh; /* 50% viewport height */
margin-top: -50vh;
visibility: hidden;
}
vh is supported in in IE9 and up, so it's pretty safe to use.
Determine what part of your page you actually want at the top, and place the anchor there instead. You won't be able to change the way browsers interpret anchors - at least not without upsetting your users.
Since "middle of the page" is relative to the size of the user's screen and window at any given time, you are going to have to use Javascript to achieve this, as there is no way in pure HTML/CSS to get the vertical screen width.
I'd try putting a negative margin (or other positioning method) equal to half the page height on the target anchor tag.
Firefox supports setting a padding-top property on the named anchor. From there, you could set a cookie via javascript that contains the browser's dimensions, and adjust your padding-top accordingly server-side. To the end user, it would look like its pure html/css, but noam is correct in that a wee bit of JS is needed to get the browser's dimensions, since it doesn't give you this information without a little coercion.
$(window).on("load", function () {
var urlHash = window.location.href.split("#")[1];
if (urlHash && $('#' + urlHash).length )
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top-100
}, 1000);
});