I'm trying to create a qtip containing a set of icomoon icons. My issue is that the first time the qtip is rendered, it appears displaced from where it's supposed to be.
The content is embedded in my html with display: none and, apparently, the icons are not rendered until after the qtip is created. Therefore, icons are not taken into account for defining the initial width of the qtip and this causes the wrong offset.
When displaying the qtip next times, it doesn't happen anymore as the icons are already rendered and then the width is calculated correctly.
I'm wondering if my approach is simply wrong and there is a more proper solution of defining the content of the tooltip, or hacks are my only option.
Here I have a that depicts my case:
jsFiddle
If you are loading your qTip2 code when the document is ready, try to load with the window, like as follow:
$(window).load(function() {
// Your code here
});
Related
after searching deeper in many questions and in many examples I couldn't get it working. I've trying anything written in any example.
I want to add an image inside a popup marker without using the amazing Leaflet.photo plugin this time.
My problem is that the image goes away from the popup boundaries the first time I open it out. After closing it and open it again, the image fits perfectly within the boundaries.
The same as it happens in this example example
I also tryed to hack the CSS class in following way instead of write custom options as in the example source code.
.leaflet-popup-content img { max-width:234px !important; height:auto; width:auto !important; }
Nothing changed though, the result is the same as in the example shown.
Any suggestion?
Thanks a lot
What may happen is that the image takes some time to download, hence Leaflet does not know the correct size to give to the popup container.
Then on second opening, the image is fetched from browser cache, and Leaflet can properly compute the popup size.
You can try a delayed myPopup._updateLayout() call to have Leaflet re-evaluate the popup container size once your image is downloaded. E.g. attach an onload listener to your image element, with a callback that calls the _updateLayout() method on the popup.
See also leafletjs adding scrollable pop up?
Well the main problema that I have is that I can't make the fullCalendar from Arshaw to fit inside the div that I've assign to it. The div container has a height of 300px. But when I try to put the calendar inside that space, it renders a huge Calendar. When I open the browser console the height that it has is over 1500px. I've tried the height parameter, the container height, tried injecting css to the tags and nothing seems to work, I also deleted each jquery call and other scripts running in my page and just left the scripts that FullCalendar needs. At last I moved the calendar right after the tag and it worked. I'm guessing the problem is the calculation of tables' height and that leads to have a bad calculation of each box insisde the table.
here are the pictures in case you guys don't understand: http://s1383.photobucket.com/user/dortegalizardo/library/
Thanks in advance.
I found the problem. On some point I don´t know why I had on my css
.myclass p{margin 20px 0;}
That was causing the problem with the height on each box of the calendar. The calendar was inside a div that was inside another div that had the class above.
I've been trying to get a proper 'inner zoom' jQuery plugin to function on my webshop's category page. Because i'm limited in my skills, not every one of them seems to work as easy.
However, i've found one that met my needs;
- The image thumbnail and large image are the same link source, just a width/height readjusted
- The zoom appears inside the image's 'frame'
- No 'magnifying glass' type of zoom with like 40x40px, the entire picture needs to enlarge at once
- Short, simple code
It's regarding this plugin: http://www.jacklmoore.com/zoom/
It works fine, except it only works on one image at a time (per page). When I copy the same code more than once, it only works on the first image.
How do I get it so that it works an unlimited number of times? Or perhaps any other type of zoom plugin that meets my needs?
I hope someone can help me out.
Best,
Dave
As it's explained on the plugin page, the zoom function can only be applied to images that are wrapped in some HTML tag. I think what you're trying to do is to apply the zoom function to a container that contains several images and therefore it only works for the first image.
What you could try to do is use the second code example, which should wrap the images and then apply the zoom function, but be careful so it doesn't break the styling:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
If you could provide some code from your page which shows the images and their HTML containers, it would be easier to help you out with more specific jQuery code.
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)
I have a page where the following occurs:
some stuff is rendered. static content, and content meant to be enhanced with javascript.
some of the divs are instrumented for enhancement via jquery in $()
some of these 3rd party scripts measure the divs they are putting content into so they know how to render it.
in the meantime, as other divs are enhanced, sometimes the page gets long enough that a scroll bar appears. that means the page just got thinner and the measurements that the plugins made are now incorrect.
some divs get enhanced with the wrong width.
ugliness!
If I resize the browser, everything "snaps" into place where it should be.
I can see 2 solutions which I don't like.
somehow force the browser to re-layout everything after every enhancement.
force a vertical scrollbar. http://ryanfait.com/resources/forcing-vertical-scrollbars/
This has to be a fairly common issue. Are there other tricks or suggestions?
KISS method : force the vertical scrollbar to be there.
Forgot to mention, you can also simply use this :
html {overflow-y: scroll;}
You could force the scrollbar to always appear in CSS, or you could set your jQuery code to execute when the page has fully loaded instead of when the DOM is ready, example below:
$(window).bind("load", function() {
// code here
});
This may result in 'jerkiness' as content gets rendered, then is shuffled around as the script configures it for the viewport size.
Personally, I'd just force the scrollbar. Most visitors wouldn't even notice it was there all the time anyway.