hoverintent not working in IE8 - internet-explorer-8

I have something like this:
$('li',$dcVerticalmenuObj).hoverIntent(config);
var config = {
interval: 100,
over: megaOver,
timeout: 0,
out: megaOut
};
function megaOver(){
$container.css(containerPosition).show();
}
but the hover function not working in IE 8.

i know what happen..my jquery is outdated i guess..once i replace it with the latest version http://code.jquery.com/jquery-1.10.2.min.js thn everything working fine

Related

Angular 6 open select programmatically

I'm trying to open select option using javascript in angular 6
const dropDown = document.getElementById(id);
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropDown.dispatchEvent(event);
Also tried like
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.open();
}
but it is not working. I have searched and found results for material and for ionic. But how can I open in angular 6?
I was able to achieve this on an angular app using
document.getElementById('shippingRates').click()
If you're doing some model updates in your app just before you expect the drop down to be opened, then consider delaying this call with something like
window.setTimeout(() => document.getElementById('shippingRates').click(), 100);
I dont think it is possible, but you can achieve this by setting the size of the select and having it float using position:absolute.
<div style="position:relative">.<select style="position:absolute;top:-8px;left:-20px" onClick="onAssign(this)">
<option>a</option>
<option>b</option>
<option>c</option>
</select></div>
function openMySelect(){
document.querySelector(‘#mySelect’).size=YOUR_OPTIONS.length;
}
function onAssign(data,select){
select.size=1
// your logic
}
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.focus();
}
Use focus() it will work.

How to run on browser start

I'm new to Firefox addon development.
I have the following code:
var windows = require("sdk/windows").browserWindows;
windows.on("open", function() {
// do stuff
});
But this only runs for windows created after the browser is started, not the first one.
How can I fix this?
I know I could just copy the code outside of the open event, but then it also runs when the addon is installed and I don't want that.
I found the answer here.
exports.main = function (options, callbacks) {
if (options.loadReason == "startup") {
// do stuff
}
};

Joomla 3.2 breaking masonry function

I setup a website running on Joomla 3.1 and I am using a masonry script that works perfectly:
// Masonry for boxes
function adjustments() {
$('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
I am first loading the JS file jquery.masonry.min.js found on masonry.desandro.com as well as the latest jquery.min.js file from the JQuery repository.
This has been working perfectly until I installed the latest update to Joomla, upgrading it from 3.1 to 3.2. Now, the masonry function will not work regardless of how I try to call it or position the JS files. I only get this error:
Uncaught TypeError: Cannot call method 'masonry' of null
At this point, like the tree said to the lumberjack, I'm stumped. Anyone else having this issue and/or have any ideas how to fix it?
The Joomla 3.2 release updated some jQuery elements, removed more MooTools dependencies and saw the introduction of com_ajax so you probably experiencing a conflict.
More specifically, you are probably experiencing a JQuery conflict and need to use noconflict() you can read how to adapt your script to use jQuery in noconflict() mode here
Something as simple as this may work:
// Masonry for boxes
function adjustments() {
var $j = jQuery.noConflict();
$j('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
Similar to cppl's answer with specifing you want to basically ensure you're using JQuery for your script, you can do this:
function adjustments() {
JQuery('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
This ensures the JS selection is done with jQuery and not with Mootools or any other JS.

jquery - on("change", function() not working in IE 9

I am having some issues with a jquery on function that works in all browsers except IE.
jquery code is as follows:
$('#FormIndustryId, #FormIndustries').on("change", function () {
if ($(this).val()) {
$.getJSON('/categories/list_categories/industry_id:' + $(this).val(),
function (cats) {
if (cats !== null) {
populateCategorySelect(cats);
}
});
}
});
From a front end point of view this can be tested here: http://www.beanclaim.com/ - there is a field with the label of industry selection which is the dropdown with #FormIndustries assigned to it, it should when an industry is selected update the second dropdown with the ajax content. Chrome, Firefox and Safari it works but it seems to do nothing in IE.
Any ideas what I am doing wrong? Thanks
It's because only in IE do you have this code execute:
// IF IE (BROWSER) USE jQUERY TO SET THE PLACEHOLDER
// -------------------------------------------------->
if ( $.browser.msie ) {
$("#TemplateName").placeholder();
$("#FormIndustries").placeholder();
}
But, that returns this JS error:
SCRIPT438: Object doesn't support property or method 'placeholder'
and stops your JS from executing properly. I don't know what placeholder is (and neither does IE :) ), but if you fix that, the page works just fine in IE.
Write the same exact function, but make a copy using:
$('#FormIndustryId, #FormIndustries').on("click", ...

Google Visualization (PieChart/LineChart) Jquery Ajax Firefox issue

I have run into a bug with firefox and have searched all over and have not seemed to find the answer to an issue I have been having.
My program works great in Chrome and IE, but the iframe charts are not working in firefox.
I'm using a handler and then jquery.ajax to grab at the data and run the script.
jQuery.ajax({
url: jQuery(this).attr("href"),
data: data,
dataType: 'script'
});
data = all the information for a piechart and all the information for a table. The table is fine, but the pie chart iframe is empty. If I hit the backspace button then the piechart will show up. It's almost like the piechart is overshooting in firefox.
the data looks like this except with my own data. This is getting passed from the handler to the ajax call
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
Has anybody else come across a similar issue? I know the data is passed right and everything is received, but it just seems like Firefox is not playing nice with the iframes.
If anyone has any suggestions or thoughts, that would be great
Thanks
I had the same problem on FFox only.
I solved wrapping everything in a function and calling it with a small setTimeout
function drawChart() {
//...
}
setTimeout(drawChart, 200);
Just few hours after I read your post that the problem is only in FF i found the solution. Import JQuery on your page
<script src="../GoogleJs/jquery-1.4.2.min.js" type="text/javascript"></script>
then add a tag
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
drawVisualization()
}
});
where drawVisualization() is the drawing function.
It works like charm...
p.s. thank you for noticing that FF was the problem
I had the same Issue with Firefox last week and a combination of both answers worked for me just fine as well. A difference is that I'm using $.load instead of an iframe, so there is no need for me to include jQuery in the pgae fetched by AJAX of course.
In chrome the following worked on the AJAX page:
<script>
google.setOnLoadCallback(drawChart, true);
</script>
In Firefox this didn't work however, so I simply used:
<script>
$(document).ready(function() {
function drawChart() {} // omitted
drawChart();
});
</script>
Which worked for me in both Chrome 22 and Firefox 16.0.1

Resources