I have a jCarousel setup that has users click thumbnails to replace a larger image. It works fine in Webkit, but clicking the smaller thumbnails in Firefox opens the image in a new window. Thoughts?
The problem Len was having was jCarousel was returning the error:
Error: jCarousel: No width/height set for items. This will cause an
infinite loop. Aborting...
The error text is pretty self-explanatory. This is usually fixed by either explicitly defining the width or height of the item in HTML or CSS (whichever is appropriate for the element), or using the init option itemFallbackDimension when initializing jCarousel in your Javascript file. For example:
$('#myItems').jCarousel({
scroll: 1,
vertical: true,
itemFallbackDimension: 150
});
The itemFallbackDimension will be the width if your carousel is horizontal, or height if it is vertical (IIRC).
Related
I'm working on a grid where I'm using output_style = false for elements containing content. Those elements are made into squares using a simple javascript function. While the grid works as intended, I find that in Safari and Chrome, the width of some of the elements is off by a pixel until I resize the browser. If I resize back to the original size, it still works. This is not the case in Firefox, where it works perfectly when the page is loaded. Is this a known bug, and is there anyway around it?
Solved using $(window).resize(), which is called 1 second after the page has completed loading. Does the trick.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I made an adaptive theme with Drupal 7.22, which works very fine. Unfortunately the size of the iFrame's opened by Colorbox are not adaptive.
To open them, I do the following:
<a class="colorbox" href ="http://mydomain.tld?width=800&height=700&iframe=true">Link</a>
But the width and height properties are hard-coded. How can I specify different values for the width and height properties based on the browser aperture/screen definitions?
For example, all screens which have a width between 0 and 1024px should have a colorbox iFrame with the following properties:
width=800px
height700px
and all screens which have a resolution greater than 1024px should have a colorbox iFrame with the following properties:
width=500px
height400px
Do you have any suggestion on how to make these adaptive?
Take a look at jRespond:
https://github.com/ten1seven/jRespond
that might be the easiest way to accomplish what you are looking for.
Background
I have a standard three column layout where the first column is floated left, and the third column is floated right. The first column needs a full-height background.
This layout is for a template, so any of the three columns could have the longest content.
I can't change markup source order, so display:table solutions are not possible.
I can't add any DOM nodes.
The layout is centered with a minimum and maximum width, so I can't attach a vertically-repeating background image to the page with the built-in background color.
It needs to look OK in IE7, but IE8+ needs support.
Solution
To achieve the full-height left column, I created a pseudo-element on colLeft. That pseudo-element has fixed-positioning set to the viewport bottom, 100% height, and placed behind the left column. This solution is awesome because:
IE8+ supports pseudo-elements.
The pseudo-element is attached to the left column, so if the template doesn't have a left column, the background naturally isn't there.
By not setting a left or right attribute, the fixed-positioned pseudo-element stays with the left column (good for the centered layout).
Here's an example on CodePen.
(Make sure that the Document Mode is following the Browser Mode when viewing CodePens in IE).
Problem
In IE8 the full-height left column background only extends down to the initial viewport bottom (the fold).
I created another test with a new leftColBg node instead of the pseudo-element. This works as expected in IE8, meaning that the fixed positioning should work.
Here is the best explanation that I can find on IE8 and generated content: Why does a filter gradient on a pseudo element not work in IE8?
I think IE8 is incorrectly positioning the generated content, because it's not an "object" that contains content. Can anybody better explain this IE8 bug? Is there a fix?
I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.