http://dev.goforadventure.com/?post_type=trips&p=108
Hello,
Please squeeze the browser closer together until you see the accordion form with the little arrows to the right.
There is a div with a featured background image above the set of tabs (this is Wordpress)
When the tabs are closed, the width of that image div depends on how much space the post title/h1 above it is taking - if I make that font size larger, the picture will stretch larger with it.
If you open the first or last tabs, they have a large amount of text in it - this also causes more of the photo to show.
I am assuming because the div has width:auto applied to it, it isn't showing that much background because the content in the accordions are hidden by default.
Any idea to trick the image div into thinking theres more space there so the image and accordion tabs will stretch across the entire browser while theyre closed?
Thanks so much!
If you remove the width:auto on the div that has the image and set it to 100%, you will notice nothing happens. Then we look at the container element of that div, the one that has id="content" and role="main" That div has float:left. Remove the float in your media queries, and it will show as you want.
Related
I am new to PHP and working for one small project. I want vertical image scroller. All images are fetching from database (sql). the problem is after the last image there is blank white space. this white space is visible till the last image reached to the TOP. I want continuous scrolling. after last image, first image should be in queue . Please help
Such UI effect should be taken care of on client-side using some jQuery plug-in such as Vertical Scrolling Image Gallery with jQuery and jQuery UI - Scroll Slider
I have a contact form displayed in an iframe in an overlay div that I have adjusted to fit the div within the guidelines of the div dimensions. There are no scrollbars showing when the div first appears. Then I fill out the form, hit send, and there is a moment right after I hit send that the vertical scrollbar appears, obviously while the form is sending, and then the scrollbar disappears again after I get the confirmation screen.
Now I don't really know where to start, except that I believe my css is good. I have two css files attached to my contact.php. I also have a process_form.php and three javascript files (two of which are jquery references). I don't want to paste all of them here because of all the code. Like I said, I have went through the css up and down, but I am not as experience with js or php to see if it is something in the code there. If anyone can point me in the right direction as to where to look, that would be great. If you want me to post a certain section of code, I will. But like I said, I don't want to just post random code here. In the image above, the top screenshot is before I hit submit, the second image down is seconds after hitting send, and then the last image is my confirmation. The scrollbar is only vertical for a second. And I have already applied the following class to my iframe, which does not help:
.restrict{
width: 700px;
height: 380px;
overflow-y: hidden;
}
What is peculiar about that also, is that I had to adjust the width of all the elements in my contact form perfectly to get it to fit into my display div because the vertical scrollbar kept showing anyways with the above class. So I am not sure why the overflow property wasn't working before I adjusted the width in my css of my elements, but I could not get rid of that vertical scrollbar until I got my form to fit inside my display div.
Any suggestion as to how I can just get the vertical scrollbar not to show up at all would be great if it is too difficult to examine my code to find the problem in the first place.
Instead of using css you can use html to hide scroll bars. Like this-
<iframe scrolling="no"></iframe>
I hope this helps.
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 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.