I am using an adaptive layout on my site by using media queries.
Now when I resize the browser window past a certain media query, the google map displays faulty (see image)
What I do:
CSS:
#googleMap2{display: none;}
#media screen and (min-width: 919px){
#googleMap{display: none;}
#googleMap2{display: block;}
}
HTML:
<div id="googleMap">[google-map-v3 width="920" height="550" .......]</div>
<div id="googleMap2">[google-map-v3 width="768" height="320" .......]</div>
You need to let the map know it's been resized:
google.maps.event.trigger( map, 'resize' );
Call this on the resize event for your page or container.
With this approach you can use a single map and resize it as needed, instead of having to switch between two or more fixed size maps.
This fiddle has a working example. I don't know what the rest of your page layout will look like, but to illustrate one common layout I put a top bar and sidebar in the page, with the map filling the remaining space on the bottom right. Try resizing the page and you will see it in action.
Related
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
I know such questions are galore in SO but I do not find a single solution to meet my need fully.
I am using fancybox jQuery plugin to create a thumbnail gallery ( non-responsive version : here- gallery is on the right side ) of images and slideshow as well.
The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (.project_gallery a - inline anchor has been made to display as block) for each image has the dimension 195x195px;
I want the images to stretch to the full of the div and be centered both vertically and horizontally.
In case you need any explanation of the last sentence above, I provide it below:
If the uploaded image has its width smaller then the height, the width should be set to fill the wrapper element fully in the horizontal direction. Even when the image width is resized to be equal to that of the wrapper, image height may not still fill the full height of the wrapper. So the image width still needs to be enlarged maintaining the aspect ratio. At a certain enlargement point, the image height fits the full wrapper height but the image width is then larger than the wrapper width. So the image needs to be placed in center of the wrapper in the horizontal direction. And the left and right side of the image may get cropped i.e: made invisible. The reverse thing should take place if we interchange the height and width of the image in the just-mentioned explanation.
And all those stuff I need to to do in a responsive design way.
EDIT:
HTML mark-up for the image gallery is below.The a element will be many as this is the wrapper of the image and .many images will be there.
<div class="project_gallery">
<a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name " class="inline_block" alt="image project"/></a>
...
</div>
EDIT2 : The responsive version being devloped is here now.
EDIT 3 : In case you do not like to look into any specific site, you can just consider the full question as below :
Responsive design thumbnail gallery : how to resize and place images with randomly varying aspect ratios in the center of the same sized wrapper divs (img_wrapper) both vertically and horizontally leaving no part of the wrapper unused ? The HTML markup and a bit CSS is below:
HTML:
<div id="gallery">
<div class="img_wrapper"><img src="..." alt="img"/></div>
//the above line will repeat as many images as are there.
</div><!-- end of id gallery-->
CSS:
<style>
#gallery{
width:70%
}
.img_wrapper{
width:25%;
float:left;
}
</style>
See if this helps get you started:
CSS
.fancybox img.inline_block{
margin-left:0 !important;
}
.project_gallery a{
width:100%;
}
.project_right img:first-child{
margin-left:0;
}
.project_gallery a{
width: 100%;
height: 100%;
}
It's possible you might need to add !important or extra selectors to some of these rules so that they will take precidence and overule the exiting defaults.
Regarding the behaviour you want for the background image filling the full div, I think the existing background-image:cover; setting should do what you want. If it doesn't, start by checking that your images are large enough to fill the div.
You mention that you want to do this is responsive way. Your page design doesn't appear to be responsive, for example the image in the top slider is hard coded at 1050px so this would prevent the page from collapsing in a responsive manner. Unless you moved from your existing fancy box plugin to something like a lightbox, I think it could be a challenge to get your existing gallery to be responsive.
Good luck!
I'm new to css and I produced what i thought was a nice webpage until i resized the browser window size. I don't know why this happening?
Could someone offer me some advice please. When I resize the window I would like the 'objects' to stay where they are but the window to resize. for example, if I drag the bottom corner of a window up and to the left I'd expect to see what was at the bottom right disapear and scroll bars to appear but the object in the top left hand corner would stay exactly where they are
Full webpage link
following links are html and one of my css codes
You will need to put a wrapper around your content to prevent the objects from moving around when you resize your browser/zoom in and out.
You will need to implement something like this..
CSS:
#Wrapper {
margin: 0 auto;
}
HTML:
<div ID = "Wrapper">
<!-- Content here you want to be wrapped into position -->
</div>
Without the rest of your code, I can't offer any other help, You've only supplied one of your style sheets.
I am using http://arshaw.com/fullcalendar/ FullCalendar to display events in my project.
Everything works fine except when i try to set width in calendar to achieve panning functionality.
Basically, i want to display fullcalendar in full size (using agendaWeek) on PC and if i switch to tablet or re size the browser i want calendar to re-size up-to 500px or 600px and after that it should crop i.e. overflow-x hidden so that i can pan to see the events.
I tried fixing the width of my calendar like:
<div id="calendar" style="width: 750px; overflow: hidden;">
</div>
but instead it stopped re sizing the calendar. I am not sure how to give a start to solve this problem.
There is a <style> tag in the main source code, which defines the width. Use % instead of px should do the resizing trick.
As for panning, I believe it is done with CSS and JS. Here is an example, you can just alter it as necessary.
http://openlayers.org/dev/examples/pan-zoom-panels.html
I've set up my stylesheet to have a container (#container) holding the header/content/sidebars/footer/etc and I've put that in a main wrapper (#mainwrapper). The effect I'm trying to achieve is similar to College Humor's website; the ads on the side. I'd like to have a division on the left and right of the container. What I've done is set it up like this.
<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>
Basically, I want to be able to put an image (or bg image) in the leftwall and rightwall divs, however, I don't want it to trigger the x-scrollbar. I only want it visible if the viewer's resolution is high enough. Otherwise, just display #container.
I've set them to float: left, so that they appear on the left and right of the container, but I'm a stuck as to how to make them appear as a background image.
The reason I want to do it this way is that I already have a background image and I want to keep it optimized. So, instead of having a large image that spans 960+ pixels (#container width), I can have 2 images that are 100px wide. (the width of #leftwall and #rightwall)
I hope this is understandable and thanks to anyone trying to help in advance!
Have a good day, Brian.
I understand what you want. These days new media queries has been added to make these type of design.
You can define it in your css files for a particular resolution or mobile devices.
#media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}
#media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>
Below is the link where you can learn how to use these queries.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Hope This Helps,
Cheers,
I am not sure what you want to achieve; maybe you could show how your css look like so far but have you tried by giving a min-width to the external containers?
I set up a fiddle with what I think you're trying to achieve, you'll just have to change some numbers to fit your needs: http://www.jsfiddle.net/KrfVR/14/
Adjust the size of the result box to see the side divs appear/disappear.