kinda new here
so I've been trying for the past 2hr to position an iframe and just couldnt get it right (or anywhere near that...)
my goal is to position an iframe of amazon just where "Hello, [name]" is written.
first I couldnt set an iframe because of their Same origin policy but I guess some pages aren't protected, like this one: http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending
positioning the iframe on my account information just seem impossible (tried margin-left, right, divs and everything)
my goal would be somewhat like this - http://i.stack.imgur.com/gQwyn.png
While I'm a little skeptical about what this is for, I'll provide an answer for it anyways.
So you can't exactly target the location of where your iframe's initial screen will show up at (as it will always default to the top left corner if I'm not mistaken) but you can move the iframe itself around.
Knowing that, it's possible to create an iframe effect over the iframe itself.
You'll have an iframe that will be large enough to capture the button at first glance (which 1260px wide and 300px high is good enough)
You will then move the iframe to position the button to where you would like it to show up in using an absolute position and the top and left style.
Then create a new div to contain that iframe and give it a width and height to what the button's size would be and then remove the ability to scroll with overflow: hidden; and remove the scrolling by stating it within the iframe tag scrolling="no".
You should then have the same results as below:
#my-div {
width: 128px;
height: 55px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -42px;
left: -884px;
width: 1260px;
height: 300px;
}
<div id="my-div">
<iframe src="http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" id="my-iframe" scrolling="no"></iframe>
</div>
Related
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
I am creating a site here, to replicate the functionality of Chanel's website.
Currently the re-sizing works width wise but when it comes to height I can't for the life of me get it to work correctly so that the image is centered and just a bit above the footer. All my images are 1920 x 1080 just as Chanel has. Also Chanels site if you scroll just a bit down it pulls the bottom half up automatically where as I only got it to work with just the button.
When I view the page on an iPad only about 75% of the site shows up. I thought it was do to the more buttons padding but that was not the issue.
Thanks!
Also Chanels site if you scroll just a bit down it pulls the bottom
half up automatically where as I only got it to work with just the
button.
This is because the div at the top is fixed or absolute. The "bottom half" probably has a top margin of 100% that only becomes visible on scroll.
It "pulls up automatically" via javascript; if you turn javascript off acts normally. To do that, they probably use something like document.body.onscroll = function() { ...animation... }.
The CSS for the div#languages.popin (id = languages, class = popin) is as follows:
.popin {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 600px;
margin-top: -300px;
margin-left: -450px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
z-index: 150;
overflow: hidden;
}
I assume by following that, you'll get similar results. Try out firebug, or a variant thereof, and inspect the elements to find parts you may have forgotten.
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.
I'm using the Google Charts API which renders charts using an <iframe>, however there's an large amount of white space on both the bottom and top parts which I'd like to remove. I've been attempting to do this in a variety of ways (explained below), but can't seem to get it to work out how I want it to;
My HTML markup
<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div
The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.
My CSS Styling
#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}
#chart-contents {
margin-top: -45px;
}
#chart-nav {
margin-top: 15px;
padding: 0px 15px;
}
The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it's still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.
However, this doesn't seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.
So far I've tried;
Use of negative top, padding-top and margin-top properties.
Positioning of absolute and relative in conjunction with top.
Using the clip property in conjunction with a relative position.
I'm starting to think that this is something that perhaps isn't possible without further elements or javascript?
Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!
If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google's API use of AJAX, it's rather difficult.
You could always place the previous element on top of your iframe so it looks like it's starting sooner than it actually is. This obviously works for an element coming after the iframe as well.
All you need to do to achieve this is to give the element position: relative.
Preview: http://jsfiddle.net/Wexcode/XyVGr/
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.