I am trying to call colorbox with the following js:
$.colorbox({html: '<img src="example.com/some.jpg">some more html tags..',});
img is dynamically generated. the problem is that colorbox opens but with very tiny window. How to make colorbox justify the window automatically?
Do you know what size the image will be? If so, you could solve it by putting the dimensions on the <img> element:
<img src='example.jpg' width='500' height='500'/>
Related
I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.
I would like to display descriptive text, next to each image in a Colorbox gallery. I can give sufficient width to get me space around the image using the colorbox parameter 'width' and change some CSS to get the space to the left of the image. Now, I want to place text in the white space. All the content is generated dynamically but that does not matter for this question as the colorbox code itself is generated using PhP.
Any ideas of doing this without changing the colorbox JS code?
I am using an background image which is inside a header tag. The coding looks like this:
<div id "header">
<div id "logo">
<div id "nav">
</div>
</div>
</div>
The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it is re-sized proportionally.
The solution I have thought of is
background-size:auto;
I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.
What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.
Thanks
Try this:
background-size: 100%;
The best method I found to work was
min-width:100%;
The only way to resize background is with JavaScript.
The code using jQuery is here: https://gist.github.com/epoberezkin/5070642
I've implemented flexslider before, but this time it is not resizing when I view it in i-phone or i-pad. Also its not working when I'm resizing my browser window.
Please suggest any workarounds..
For now I've made it work by adding media query in flexslider.css file.
Thanks in advance for any help.
Finally I got it, the problem was because of Bootstrap framework. Elements with classname "span1/2/3.." in bootstrap don't resize beyond a fix browser width, even when using fluid structure. Because of that my flexslider div was not getting resized.
I just changed the fixed with of .span class from "px" to "%" and it started working.
I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.
The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?
EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.
Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?
I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.