i am trying to display a webpage within a webpage as you can see over here
http://www.yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the top and left part is my site, and the stuff that is the main content in the middle is a different site. i may not be doing it correctly since it is not displaying it at size that fits.
the main content page is:
http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm
You will struggle to make this work perfectly for the following reasons:
You're trying to fit an 800px wide web page into a 700px wide div.
You cannot access the child frame's DOM to manipulate it because it's on a different domain.
You cannot rely on a consistent height for the child frame. Although it has a fixed width, users with different accessibility settings (such as default font sizes) could cause text to wrap and adjust the height of the document.
Although you can overcompensate for point 3 by increasing the height of the iframe to allow for any extra height, you can't really deal with point 1 without changing the layout (mainly the width) of your site.
If I were you, I would look into other avenues of adding the functionality you're looking for. Maybe by contacting the site owner and seeing if they can accomodate your needs.
You are doing it correctly, the page won't fit as it's a fixed width of 800 pixels, it will not squeeze down to fit in your page. So only option for you is to stretch your content area to 800 pixels.
Remove the width and height properties of the iframe tag. Adjust the width style property in the style property so that it is the correct size for the page. It appears that you need to make the iframe wider.
<iframe src="..." frameborder="0" style="width:800px;height:480px;" />
Another option, of course, would be to remove the 'scrolling="no"' from the iframe tag to allow users to use the scrollbar to see the entire inner page.
Related
I am in the process of building a new site using wordpress 4.6.1. Out of the box it supports responsive images.
I have created a new theme and have simply added the loop to display the post content.
When I insert an image into a post it displays the image correctly but it isn't responsive i.e. it does not serve a different image dependant on the browser size.
The image HTML generated is as follows:
`<img
width="1110"
height="740"
src="http://digitaltestsite2.biz/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg"
class="attachment-large size-large wp-post-image"
alt="Feature Story"
srcset="
/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg 1110w,
/wp-content/uploads/2016/08/Feature-Story-600x400.jpg 600w,
/wp-content/uploads/2016/08/Feature-Story-768x512.jpg 768w,
/wp-content/uploads/2016/08/Feature-Story-250x167.jpg 250w,
/wp-content/uploads/2016/08/Feature-Story-500x333.jpg 500w,
/wp-content/uploads/2016/08/Feature-Story-350x233.jpg 350w,
/wp-content/uploads/2016/08/Feature-Story-700x466.jpg 700w,
/wp-content/uploads/2016/08/Feature-Story.jpg 1200w
"
sizes="
(min-width:1199px) 1110px,
(min-width:991px) 768px,
(min-width:767px) 590px,
(min-width:543px) 500px,
295px
"
`
(N.B. I have added a filter for the sizes attribute to enable more breakpoints.)
If I remove the width and height the image is responsive but wordpress seems to be generating this so I dont believe I should have to remove it.
I have tried and replicated this in both Chrome and Firefox.
Does anyone have any suggestions as to whether this is the correct behaviour and/or if I am doing anything wrong?
Thanks in advance for any input.
Testing this stuff can be tricky. For one, once Chrome (and I think Firefox and Safari, too) have a resource that is larger than they need in the cache, they will not load smaller ones over the network. For two, sizes can be fiendishly complex to mentally model...
Fixing it by removing width and height makes no sense, as I believe the parsed sizes size trumps the width when it comes time to determine layout width, and which resource to load out of the srcset.
I suggest:
Try clearing your cache between tests
Even if that solves it... whenever you're doing anything with responsive images feeding your page into https://ausi.github.io/respimagelint/ is always a good idea!
I put on responsive design on my yii site.
But as i add a link to the design page, this link's content does transpire in regular screen size, while it is missed when i emulate mobile size. Neither they work at my 4" android.
I try in FF and IE10 for different sizes. In FF 31.0 i tried down to 768x1024 precision - working, with less (539x544) - not.
Those links you may try yourself:
What's wrong?
Your links doesn't work because there are two elements with categories there.
One which is VISIBLE ONLY with large resolutions.
<div class="tar_category_vis tar_panel tar_open">...</div>
And OTHER which is VISIBLE ONLY to small resolutions.
<div class="tar_category">...</div>
The small one doesn't have URLs assigned.
I have a WYSIWYG editor, which is used to create articles. The articles are then inserted into a database. The article is then displayed on the main page. It consists of 2 major divs/parts. The top part is a div with fixed height and is used to display an image that is submitted by the WYSIWYG(that's the plan) for the specific article. So, user(with privilege) writes article, inserts/uploads an image(which is located on the server), article gets inserted into DB and the url of the image as well.
My question is how I should display it? Right now I'm thinking of pulling all the required fields from the database and placing the image url into the div and it will render as an image. This feels really clunky, so with my limited experience I wonder if there's a more elegant way to do it.
You're on the right track. Pull the image URL from the database, then pop it into an img tag within the div, OR apply it as a background on the div itself.
For sizing the image to fit in the div, specify either the height or width of the image. The other will automatically size, keeping the proper aspect ratio. This can cause problems with it fitting in the div of a fixed height, so you will want to set the CSS overflow property on the div to hidden, so that images do not overflow outside of it.
You mean storing the image path in a DB then echoing it in an tag?
There's nothing wrong with that... better than storing the image in the DB if that's what you were wondering?
I am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.
To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..
The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.
What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.
Thanks for your help!
Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS
First a set rule in css controls the width of the image (this wont change):
.pin .ImgLink img
{
max-width: 192px;
opacity: 1;
}
.PinImageImg
{
min-height:75px;
background-color:#f2f0f0
}
and then the HTML markup of each img tag controls the height (this changes for each image):
<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />
This way there is no popping of layout as each image is loaded by javascript.
I am trying to export some dynamic content into a PDF file with a small bit of page formatting.
I'd like to have the PDF pages have a small padding with a border and then inside that border, a small company logo should appear up the top right on each page.
Now the issue is that because the content is dynamic, the number of pages and content per page can vary. This means I can't manually create a DIV with a border and an image inside because the content could be more or less pages depending on what gets exported.
I'm trying to find a way to create a 'page background' for each PDF page and then in this background I would then draw up the borders and the logo and then have all the content superimposed on this customer background.
Is this even at all possible with DOMPDF? Or are there any alternatives that may provide a little more customisation like this?
jfoucher's method could be what you need, but if you need an HTML content and/or a logo on each page, you could also use DOMPDF from the SVN trunk, and use fixed positionning, like if the "CSS position fixed" example here.
This is indeed possible with dompdf.
What I do is simply set the following CSS properties (or similar) on the body:
body{
background-image:url('/assets/img/bg_pdf.jpg');
background-repeat:no-repeat;
background-position: 15px 1450px;
}
In this case, I am using it for a page footer, but change these values according to your needs. The pixels values are obtained by trial and error... The background is an actual image, which you'll have to create in an image editor.