I need to "slide in" a (background-)image in a div.
When I load the page, some div with a bg image or image inside it (and overflow?) needs to go from invisible/width=0 to 100px width. This needs to ease in.
Can anyone please help me out with the js?
<div style="overflow:hidden; width:100px; height:40px;">
<img src="someimg.png" height="40" width="100" />
</div>
This uses jquery on document ready.. For easing can use the standard jquery 'linear' but I included the jquery.easing plugin where you can have different easing options.
http://jsfiddle.net/DyW7M/1/
$(document).ready(function () {
$('#makeitlong').animate({ width: '400'}, 2000, 'linear');
});
Related
I'm using react-bootstrap button and fortawesome/react-fontawesome for the icon. I'm setting the button height and width using this code
#button-size{
height: 1vh;
width: 1vw;
}
then I'm inserting the icon inside the button using this code
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} />
</Button>
but my problem is the icon goes outside of the button. How can I center the icon inside the button
Using viewport measurements for height and width on the Button to control its size won't work well in this setup especially when you are using font icons (also, apparently, in the library you are using they generate the output as svg). I suggest you control the size of the button through padding or pixel measurements.
Example:
#button-size {
padding: 6px 20px;
}
In addition, If you need to adjust the size of the font icon you can do that using the size prop or you can use CSS font-size
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} size={"5x"}/>
</Button>
CodeSandBox: https://codesandbox.io/s/angry-drake-5pexo?file=/src/App.js
If you absolutely must use the viewport measurements on your project, which I highly discourage, you can opt to assign position-relative to the button and style the font-icon component as necessary to center.
Example:
export default function App() {
const customFontIconStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
};
return (
<Container>
<Button id="button-size" className="position-relative">
<FontAwesomeIcon icon={faFacebookF} style={customFontIconStyle} />
</Button>
</Container>
);
}
I am trying to place a circular image into a button using the following styles and HTML:
.team-assign-pic {height: 32px; width: 32px}
<button class="team-assign" type="button">
<img alt="image" class="team-assign-pic" src="img/a1.jpg"> Treavor M.
</button>
What is happening is that the image is constrained to its 32x32 pixel shape, but it's actually getting "lifted" up by what looks like 1px above its own positioning so it's true size on the page would be something like:
{height: 33px; width: 32px}
Screenshot of the issue
This is a bit tricky for me to verbally explain so I've attached an image - its subtle, but it's driving me crazy!
How do I keep it from "lifting" above its own size and position?
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help
Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.
It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});