Jqplot "failed chart" option? - jqplot

I am using jqplot and for the life of me I can't get it to work on IE8 or IE7. Nevermind I would be happy for it to just work on IE9, Firefox Etc, but I need a message to be displayed if the chart is not successful.
I tried placing a message in the div tags of the chart div, but the problem is that the contents of the div remain even if the chart is rendered.
So is there a way to handle an event of the chart successfully being displayed on which I can write code to hide the message asking them to upgrade their browser?

I know it is late and everything but I do not like unanswered questions :)
To solve this one I would use a simply wrap of try catch around the plot painting method.
This I am presenting in the following jsfiddle.
Tested on IE7, IE8 and IE9 and only for 9 it does not display an alert suggesting a browser update.
The second option that I could think of is to have a div displaying the update suggestion at start then if the plot is created successfully use the postDrawHooks to remove the div. The method use sample:
$.jqplot.postDrawHooks.push(function(){
//code removing the div goes here
});

Related

Slick + Shopify theme causing strange behavior

Live site is here: www.wiivv.com
Here's a video of the issue: http://imgur.com/a/JEFne
On mobile, buttons are skipping around when you scroll. I think the issue may have something to do with Slick Carousel.
How would you troubleshoot an issue like this?
Looks like Slick is adjusting the height of your slideshow div according to the device you are using. It doesn't know to adjust the height for your second button.
The height adjustment to the div is usually done via Javascript. You can adjust the JS code to suit your buttons or put some CSS media queries in place to override what the JS is putting on your div.

css3pie not working for all elements

I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.

How to get rid of scrollbars in firefox 8.01

I have a webpage that calls up a fancybox contact form. it works perfectly in Internet Expolorer .... perfect padding .. perfectly centered .. no problem.
In Firefox, however, the same form when called up has scrollbars both horizontally and vertically. Any size adjustment to the window produces the same result. Even if you remove ALL content ... its the same result.
Being relatively new I have search and found no solution to the problem and have tried EVERY available answer listed on the internet. what am I missing? You can view a test page to see what I mean at http://www.e-scapez.com/test/test.html.

IE8 Standards mode: onclick handler on div does not fire

In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.

Disabling interstitial graphic when using cfdiv binding

Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}

Resources