ive attached an image that illustrates my purpose.
http://postimage.org/image/9cmg2z8vv/
by default id like to have a big landscape or portrait image that is centered in the middle of the page. on click at the image a div should slide in from the right. the div should push the big image from center to left 50% of the screen, the big image should shrink to fit into the left 50% of the screen.
do you have any idea how to solve this?
Here is a crude javascript version. Not the best, but gets you started. I can't see your HTML, so I don't know what divs are inside other divs, but you can essentially do the same thing with transitions.
http://jsfiddle.net/jMwWK/1/
<div id="content">
<div id="holder">
<div id="image"></div>
</div>
</div>
<div id="slider"></div>
$(document).ready(function(){
setTimeout(function(){
$('#slider').animate({left: '-200px'});
$('#holder').animate({width: '50%'});
},1000);
});
Related
I can't seem to increase the size of the images in my carousel. I'd like the images to be larger. No matter what the size of the source image, they all appear the same size when I run the carousel. I suspect I need to increase the size of the viewport, but can't figure out how to do that.
function Work() {
return (
<Carousel fade indicators={false} controls={false} pause={false}>
<Carousel.Item interval={5000}>
<img
className="d-block w-100"
src={newsBlur}
alt="News Flash blurred"
/>
<Carousel.Caption style={styles.carouselCaption}>
<h3>
News Flash gathers news based on the user's
news category preferences.
</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
It turns out my images were actually displaying full screen, which is the default setting for the react-bootstrap carousel. My images were over a transparent background making them appear to only cover part of the screen. When I resized the image, the component just stretched it to fill the full screen, so it didn't appear to do anything. I needed to re-create my images with a different ratio of transparent back ground and viewable image.
I have a div with a specific size, which contains an iframe, sized 100%. This iframe loads an SVG-file that doesn't have height and width set, or is also sized 100%.
When zooming in IE or Chrome, everything is fine.
When zooming in Firefox, the following seems to happen:
The div is scaled up according to the zoom factor. The iframe is also scaled up because it fills out the scaled up div with its 100% size. The SVG in the iframe seems to be scaled up to fill the iframe, THEN the zoom factor is also applied to it so that it is now actually bigger than the iframe.
Example: https://jsfiddle.net/hz5ue94c/2/
<div class="wrapper">
<iframe class="frame" frameborder="0" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg">
</iframe>
</div>
Is there a way to stop Firefox from zooming the SVG?
Edit: I'm not sure if the problem is with the iframe or the SVG. If I have SVG directly in the div, the problem doesn't seem to occur, but I need to load the file into an iframe.
Thanks in advance!
I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
How do I resize the visible portion of my image inside postbox-inner? How do I resize the overall box of postbox-outer?
I'm basically looking for smaller images because a lot of them are invariably low-res and tend to pixelate in ugly ways, or alternately a way to resize my grid.
Preferably both.
<!--{block:Photo}-->
<div class="postbox-outer">
<div class="postbox-inner"
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" />
{block:Caption}<span class="desc">{Caption}</span>{/block:Caption}
</a>
</div>
</div>
<!--{/block:Photo}-->
As I understand it, you want the images to be displayed at it's best possible size. If it's a huge image you want it constrained within the div. If it's a small image you don't want it to fill the div. The best thing I could suggest is to set the max-width for the image to 100%. Here's the CSS rule:
img { max-width: 100%; }
Hopefully this should work out fine. Do let me know if this answers your question.
I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<img src="item.png" style="border:0; " />
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png
Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
It'd be easier to debug if you gave us a screenshot and some code. But it sounds like you might just need to position the background image within the element using background-position. You can use pixels, percentages or just top,bottom,left,right to place a background image wherever you want it within an element. http://www.w3schools.com/css/pr_background-position.asp. You might also want to look into image sprites for rollover effects. You would place the original and rollover images onto one file and simple change the background-position on hover.