insertBefore and IE7 - javascript

First apologies, the pages I working on a behind passwords, I hope this is enough but if you'd like more code, just ask!
I've got a webpage that list events, each event is a complex set of elements all wrapped in an relative positioned div, an eventRow.
When adding a new event, I find where it should be placed and use:
document.getElementById('eventRows').insertBefore(div, document.getElementById('eventRow' + id));
div is the new event row, id is the id of the event I want to insert before!
This works perfectly in Chrome, Safari, Firefox and IE8, but in IE7 it goes wrong - the new event row seems to be placed correctly, but the rows that surround it aren't correctly moved out of the way, leaving a mess of overlapping text.
After a while I found this can be fixed, after the insert, using the code:
$('eventRows').innerHTML = $('eventRows').innerHTML;
So I've almost solved it, but I'm not very happy, any thoughts on the following questions:
Should I just do this as it seems to work?
Should I only do it if the browser is IE7?
Should I find a better fix?
Many thanks
Ben.

You can try forcing a redraw. There are a few ways that I can think of:
The one you describe
node.className = node.className is reported to work although I've never tried it.
Append a text node
Add a class and then remove it.
Make other style changes and then remove them (padding, border, margin)
Append a text node:
function redraw(node) {
var doc = node.ownerDocument;
var text = doc.createTextNode(' ');
node.appendChild(text);
setTimeout(function() {
node.removeChild(text);
},0);
}
Add/Remove a class
function redraw(node) {
node.className += ' redraw';
setTimeout(function() {
node.className = node.className.replace(/\sredraw$/, '');
}, 0);
}
This code is untested since I don't have IE7
These methods also exist in the various libraries out there. For Ext it's Element.repaint(). There is a force_redraw plugin for jquery: http://plugins.jquery.com/content/forceredraw-102. I'm sure there are others, I just don't know about them.

After much playing I've plumped for the following:
function redrawElement(e) {
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) && new Number(RegExp.$1) <= 7) {
e.innerHTML = e.innerHTML
}
}
Many of the other ideas nearly worked, but not quite, the padding idea worked once, but caused a nasty jump with the timeout, this does't seem to clause any issues with performance - so why not! :-)
Thanks for your help!!

Related

DOM change - no effect. Effect visible only if changed with timeout

Weird problem. I'm modifying shop template:
https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/
At this moment when you hover product's picture there will show "add to cart" button. This is .
Under picture there is price
I prepared code:
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
Nothing happens. This code work only if I set timeout:
setTimeout(function() {
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
}, 10000);
Of course timeout it's not a solution. I was trying to find out minimal time to obtain best behavior but it's impossible. I have feeling that every browser (and version...) needs personalized time setting.
I thought that after 24-hour break I will get some brillant idea, but that doesn't work, no more ideas.
--- EDIT ---
OK, thanks for pointed mixed common js with jquery - I will correct that later.
jQuery(document).ready(function(){
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
console.log(el);
});
});
That's logical that var from should be inside ready but this still doesn't work. No effect.
If I use in loop console.log it will return for me html code of el.
--- EDIT ---
Thanks. While testing I noticed something. I wanted append element .woocommerce-Price-amount.amount to element .product-button-wrap. But how can I do that if element .product-button-wrap isn't originally in source? This object is created dynamically (I don't know how).
-- EDIT --
OK. I checked JS files and found code adding to DOM .product-button-wrap so I putted my code there and now everything works. Thanks for help.
The problem is because you're running your code before the DOM has loaded. You need to retrieve the elements within the document.ready event handler.
Also note that you have an odd mix of native JS and jQuery methods. I'd suggest using one or the other, like this:
jQuery(function($) {
$('.woocommerce-Price-amount.amount').each(function() {
$(this).parent().parent().find('.product-button-wrap').append(this);
});
});
Also note that .parent().parent() should be replace by a single call to closest(), but I can't give you an exact example of that without seeing your HTML.

Scroll event won't fire what so ever

I have a (fairly simple) issue and I'm breaking my head over it.
The issue is pretty simple - scroll event won't fire (ever).
I'm writing this angular project, so I've tried the following:
angular.element($window).bind('scroll', ()=> {
console.log('scroll!');
if (!scope.scrollPosition) {
scope.scrollPosition = 0;
}
// Alerting for test cause wtf is going on
scope.boolChangeClass = this.pageYOffset > 600 ? alert(true) : alert(false);
scope.scrollPosition = this.pageYOffset;
scope.$apply();
}
);
but nothing happened. (assume $window is intact and that i'm using webpack etc.)
This example works great if I change the scroll to click. weird.
So I've tried vanilla~~!
window.addEventListener('scroll',function(){
console.log('test')
})
This attempt works on every other website except mine (gotta admit it's classic).
So - has anyone ever dealt with this and knows what's going on?
I assume that some other element is consuming this event at early stage thus not letting it bubble up. Yet this is just an assumption.'
Would love to understand this :)
=== EDIT ===
I've tried to see all the fired events using monitorEvents(window) (using Chrome) and I see every event that's being fire except the scroll..
Looks like it's the body element that is scrolling. Try adding the following code in the console.
document.body.addEventListener('scroll', function() {
console.log('test');
});

if ($('.single-featured').width() < $(document).width())

I hope i got a simple question for you here. I went through google and stackoverflow search section, but hadnt quite the luck with solution ideas on my problem.
My problem is following, i need a banner to change second class if the width of the picture should dropt below the width size of the document. Generally i would use media queries but since it alawys depends just on the size of the picture i dont know how else i can get this to work then with js or jquery.
I don't rly know why it dosn't work. I executed all the errors i got on the console of Chrome and everyone that appeared on my editor... I generally use only html and css and can edit already existing js and jqueries. But this here is one of few codes i wrote on my own and i am kinda stuck...
$(document).ready(function(){
$('.single-featured').resize(function(){
if ($('.single-featured').width() < $(document).width()) {
$('.single-featured').removeClass('thumb-vh');
$('.single-featured').addClass('thumb-auto');
}
else {
$('.single-featured').removeClass('thumb-auto');
$('.single-featured').addClass('thumb-vh');
}
});
});
I appreciate any kind of solutions or explenations on that matter.
A couple of things:
resize doesn't fire on individual elements, it fires on window, so $(window).resize(...), not $('.single-featured').resize(...).
To get the width of the window, you want $(window).width(), not $(document).width().
Side note: It's not a good idea to constantly re-query the DOM. Do the query only when the results may have changed, and then remember the result:
$(document).ready(function() {
$(window).resize(function() {
// ^^^^^^
var featured = $('.single-featured');
// ^^^^^^^^^^^^
if (featured.width() < $(window).width()) {
// ^^^^^^
featured.removeClass('thumb-vh');
featured.addClass('thumb-auto');
} else {
featured.removeClass('thumb-auto');
featured.addClass('thumb-vh');
}
});
});

Equalizing within tabs Foundation 6

I can't figure out how to get it to work. The documentation seems a little sparser than last time and doesn't include examples. Any help would be appreciated.
http://foundation.zurb.com/sites/docs/equalizer.html#applyheight
$('.tabs').on('change.zf.tabs', function() {
// Trying to trigger equalizer to equalize
console.log('test'); // This is working
});
Update - I think this might be closer, but it's still not working
var elem = new Foundation.Equalizer($('.parent-row'));
$('.tabs').on('change.zf.tabs', function() {
elem.applyHeight();
});
Does your content equalize if your browser is resized? If so, you can try to force it on tab selection by adding Foundation.reInit('equalizer'); in your change.zf.tabs event handler.
Please note: I'm experiencing similar issues and found this to work..but it may not be the most optimal.

Cufon doesn't work inside javascript

I have the following problem.
I have some text within a javascript. I want the text to look nice, so I wrapped it with "h3" which carries a cufon canvas javascript modifier, so it will look different from the normal font.
However, text within Javascript doesn't seem to be affected by cufon.
I've tried a few things to make it work, but nothing seems to work.
This is the code:
jQuery.noConflict();
jQuery(document).ready(function($) {
var author = $('#author').val();
if( author !='' && $('#email').val() !='' ) {
$('#authorData').hide();
$('#authorData').before('<div id="welcome"> <h3>Welcome back, <strong>' + author + '</strong>! Edit »</h3></div>')
$('#welcome a').toggle(
function() {
$('#authorData').show(300);
$(this).html('Minimize »');
return false;
},
function() {
$('#authorData').hide(300);
$(this).html('Edit »');
return false;
}
);
}
});
My idea is to get the whole "weclome div" into the actual php and out of the javascript code and just leave a "redirector" in the javascript, but I'm not sure if that's possible at all.
Any ideas how to make this work?
My cufon script looks like this:
Cufon.replace('h1',{hover: true})('h2')('h3')('.stepcarousel .panel .caption .title');
P.S.: It kind of works in Internet Explorer, but not in Firefox. Very weird!
Thanks a lot for any advice and suggestions! :)
cufon doesn't work if element or parent is display: none ( you are using hide() ). Use visibility hidden instead.
You appear to be appending the content after the DOM is ready. You haven't shown in your code where you actually call the Cufon.now() method, but I'm assuming it's called before your elements are appended to the DOM.
If you check the Cufon API you will see the refresh method, which can be called to do precisely that:
Cufon.refresh();
You need to call the refresh method if new text is added to the document, or even if existing text changes (e.g. font size is increased).

Categories

Resources