I am trying to make 100% height for custom google searh iFrame height. I am not able to control the height. When ever the result displays the iFrame height shows 1860. Below the results it shows big gap. But I want to make the height 100%. It should be automatically control the height depend on the results.
Please check below link
http://code.google.com/intl/en/apis/customsearch/docs/ui.html#layout
Please let me know if anyone knows solution for this issue.
Thanks
Place this under the adsense search code
<script type="text/javascript">
try{document.getElementsByName('googleSearchFrame')[0].height=1100;}catch(e){}
</script>
Change the "height" to whatever you want. This is a known problem with adsense custom search. But the problem is, since google now shows images next to results, the box might be stretch and it gets cut off.
Related
Many websites use this, but https://modsquad.com/ was the first example I found. When you visit the site their background image (video in this case) is the full width and length of whatever screen you are viewing it on, directly below it is separate content, but you only see the video prior to scrolling down. How do you achieve this? In my search for the answer to this question I have only seen examples that set the entire html background to a certain image, which is not what I am looking for. Thanks in advance for help.
Visit here : https://modsquad.com/ , and open console, you can see what they do.
When the browser is resized, the video(or image) changes its height.
You can do it via javascript, read this question : JavaScript - Get Browser Height
When I embed a long gist (in this case of a Jupyter Notebook), the resulting box on my website has vertical scrollbars. I'd like to avoid these scrollbars and just have a longer page (in the same way it's on the actual gist website). Is there any way to do this, with CSS or otherwise?
I'm basically looking for the exact opposite to
Make Gist embed scrollable
Note that specifying a minimum height in CSS does not work: It produces a white box of the correct size, but the content is still scrolling in the top part of that box only
As I can check, the embed code inserts an iframe and there is no simply way to detect the height of that document (cross-domain).
This might help: Resize Cross Domain Iframe Height
But keep in mind that the workarounds are overkill, I think.
I've looked and there doesn't appear to be another post the is exactly what I am looking for, and I am on a deadline to make this work so lets see if I can explain it better.
We have one page in development on a Drupal site that uses Panels and Views Slideshow. There are a lot of absolute and fixed position elements because of where they need to be on the page. The parent div needs to have a width and height of 100% to fill the page. Keeping in mind that the point of this page is to not have scrollbars and present everything to the user no matter what screen size they are on. So I have media queries cleaning up elements where need be on certain screen sizes.
Though when a user uses their browser to zoom into the page, the elements start shifting and stacking on top of each other. I believe this is because the 100% height/width is adhering specifically to the window size and doesn't expand beyond the window when a user zooms in.
I was able to fix it by removing the 100%'s and replacing them with pixels, but this becomes an issue because if the screen isn't the correct height or width, then you have scrollbars and the user doesn't immediately see everything on the page.
Is there any JavaScript or anything that can utilize the 100% height/width and allow them to expand beyond the page, and turn on scrollbars, during Browser Zoom?
Keep in mind that if a user is zooming in, its OK for the page to spill off and scrollbars to show, but the default screen this is not allowed.
I hope this is OK to show but an example of a page that uses Javascript to scale the entire page is pretty much what I can see myself needing but don't know how.
http://www.ammunitiongroup.com/
Any help appreciated and the quicker the better of course :)
This should help. Lets you detect the browser zoom level in mordern browsers.
https://github.com/yonran/detect-zoom
Example page:
http://htmldoodads.appspot.com/dimensions.html
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.
Anyone know what is this technology called? Any idea how this can be done? Thanks in advance.
You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.
JSFiddle:
http://jsfiddle.net/WLEzw/
Make your browser window bigger and smaller and you will see more and less pears.
That is just CSS based.
An example of what you want to accomplish from a friend website redesign
shrink and wide the browser so you can see the effect
You can also use JQuery to moniter whether browser window is resized, through $(window).resize function. And you'll have to call details of the products shown either using Ajax or with iframe by reloading the page within iframe with more products.
The code to be written inside browser's resize method will be as follows.
$(window).resize(function() {
//Your code on resizing the browser.
});