The following (very simple, not fantastic) JS script is being used in one of my client's Bigcommerce carts. It's designed to pick up a given BC customer group, and check the status of a given element (a radio button), then either show a given selector, or let it remain hidden. It works fine in every browser except IE, where it runs as normal, but never shows the selector, even when the console shows no errors. (Why is it running on a one-second interval? Because BC loads the cart four pieces at a time, but from the same page. Whee!)
Is there a JS function being used here that IE doesn't support? I've reviewed all the functions, and I'm not seeing anything, but you know how blind you can get from staring at the same code for a few hours.
[edit: It appears IE is picking up the keyphrase in the script, even though innerText isn't supposed to do that. But at least I'm a step closer to a solution!]
<script>
window.onload = setInterval(hideCC, 1000);
function hideCC ()
{
/* Hide CC payment option for below listed groups only */
/* Add new customer groups with comma-separated list (i.e. [39,42,87]) */
var customergroup = [27,32,22,65,2,69,72,74,79,78,87,84,60,61,52,53,54,55,56,57,58,59,62,63,70,83,8,5];
/* Hide CC payment option for those using International Freight */
var intlFreight = document.documentElement.innerText.indexOf('International Freight');
/* Check state of wire transfer button; if it's checked, we don't need to do any of this */
var wireChecked = document.getElementById("radio-bankdeposit").checked;
if (wireChecked == true) {
return;
}
else {
/* If the customergroup belongs to one of those listed above OR the text "International Freight" appears on the page, that will trigger this if */
if(customergroup.indexOf({{{customer.customer_group_id}}}) > -1 || intlFreight > -1 ) {
/* console.log({{{customer.customer_group_id}}}); */
document.querySelector("#micro-app-ng-checkout > div > div > main > ol > li.checkout-step.checkout-step--payment.optimizedCheckout-checkoutStep > div.checkout-view-content > form > fieldset:nth-child(1) > div > ul > li.form-checklist-item.optimizedCheckout-form-checklist-item.form-checklist-item--selected.optimizedCheckout-form-checklist-item--selected").style.display="none";
}
}
};
</script>
Here's the jQuery version of checking for the string within the "shippingOption-desc" class. Hopefully this will get around the issue with IE and innerText :)
var intlFreight = $('.shippingOption-desc').text().indexOf('International Freight');
Related
I use a WordPress plugin to add via shortcodes one, two or three 'fontsampler' objects per specific page that each incorporate a text box and a font select box per fontsampler object. The JavaScript hides all select boxes via CSS except the last one.
In Chrome and Edge there is never any problem but in Firefox mostly all the select boxes show and sometimes just the last (F5 always shows all select boxes, ctrl F5 gives variable results).
The webserver also uses Litespeed cache and goes via Cloudfare CDN but I can't see this is relevant since only a Firefox issue.
NB I also tried the code and just the plugin on a vanilla wordpress test server (so no server caching) and didn't see the issue so I'm not sure how to proceed.
Here is the code if this helps:
jQuery(document).ready(function( $ ){
$("body").on("fontsampler.event.afterinit",".fontsampler-wrapper" , function () {
// ‘this’ is div.fontsampler-wrapper.initialized NB all 3x fontsamplers are initialised on first event but not drawn on page e.g. fontpickers (event fires up to three times)
//first count the number of fontsamplers on the page
var fsCount = $($(document).find(".fontsampler-interface")).length;
//check to see if last fontsampler has fully initialised (painted elements on page) else end event and wait for next
var fsStub=".fontsampler-id-";
var fsLast=fsStub+fsCount;
if ($($(document).find(fsLast)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0] !== undefined) {
var fontsampler2Exists = $(document).find(".fontsampler-id-2").val();
var fontsampler3Exists = $(document).find(".fontsampler-id-3").val();
if (fontsampler3Exists !== undefined) {
//Three lines
// $(fs).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
$($(document).find(fsStub+1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
$($(document).find(fsStub+2)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
}
else if (fontsampler2Exists !== undefined) {
// Two lines
$($(document).find(fsStub+1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
}
else {
// One line so don't hide any font picker
}
}
I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!
I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!
I just found out that my script is working fine in Chrome, but not in FireFox - and I can't figure out why.
This is the site in development: www.fireflycovers.com
The script should execute when one of the round green buttons is clicked. (scrolls the window to the next container)
The script looks like this at the moment:
$('.scroll').css('display' , 'block');
$('.scroll').on('click', function(e) {
var container = $(this).parent();
// Scans if last container in group
while (document != container[0] &&
container.find('~.col, ~:has(.col)').length == 0) {
// If so, search siblings of parent instead
var container = container.parent(),
nextdiv = container.nextAll('.col, :has(.col)').first();
}
// Back to first .col (when no next .col)
if (nextdiv.length == 0) {
nextdiv = $(document).find('.col:first')
};
// Animates scrolling to new position
$('body').animate({scrollTop:nextdiv.offset().top}, 1000);
return false;
});
});
Did you try debugging at all? As in, putting console.log statements throughout your method to see what the values of things are at certain times and watching it execute? Anyway, does using this help at all?
$('body,html').animate({scrollTop:nextdiv.offset().top}, 1000);
Verified from Animate scrollTop not working in firefox
You need html because firefox behaves differently when it comes to overflow.
A new "google related" bar shows up at the bottom of my website. It displays links to my competitors and other things like maps, etc. It is tied in with users using the google toolbar. If anyone has any ideas on how I can disable from displaying on my web side I would sure appreciate it.
Taken from http://harrybailey.com/2011/08/hide-google-related-bar-on-your-website-with-css/
Google inserts an iframe into your html with the class .grelated-iframe
So hiding it is as simple as including the following css:
iframe.grelated-iframe {
display: none;
}
Google removed div and frame names and put everything to important so original answer no longer works on my site. We need to wait for the iframe to be created and then hide it by classname. Couldn't get .delay to work, but this does...today anyway.
$(document).ready(function() {
setTimeout(function(){
$(‘.notranslate’).hide();},1000);
});
Following javascript code tries to find the google related iframe as soon as the window finishes loading. If found, it is made hidden, else an interval of one second is initialized, which checks for the specified iframe and makes it hidden as soon as it is found on page.
$(window).load(function (){
var giframe = null;
var giframecnt = 0;
var giframetmr = -1;
giframe = $("body > iframe.notranslate")[0];
if(giframe != null)
$(giframe).css("display", "none");
else
giframetmr = setInterval(function(){
giframe = $("body > iframe.notranslate")[0];
if(giframe != null) {
clearInterval(giframetmr);
$(giframe).css("display", "none");
} else if(giframecnt >= 20)
clearInterval(giframetmr);
else
giframecnt++;
}, 1000);});
Find the parent DIV element that contains the stuff in the bar. If it has an id or name attribute, and you can control the page CSS then simply add a rule for the element, i.e. if you see something like
<div id="footer-bar-div".....
then add a CSS rule
#footer-bar-div {display:none ! important}
This will not work if the bar is inside an iframe element, but even in that case you should be able to hide it using javascript, but you will need to find the name/id of the frame, i.e.:
var badFrame = document.getElementById('badFrameId').contentWindow;
badFrame.getElementById('footer-bar-div').style.display='none';
if the frame has a name, then instead you should access it with:
var badFrame = window.frames['badFrameName']
There is also a chance that the bar is generated on-the-fly using javascript. If it is added to the end of the page you can simply add a <noscript> tag at the end of your content - this will prevent the javascript from executing. This is an old trick so it might not always work.
I have the following script to mimic "freezepane" functionality in html, like in excel, where the right side and the header are both scrolled when the user scrolls the results table.
fnAdjustTable=function(){
var colCount=$('#firstTr>td').length; //get total number of column
var m=0;
var n=0;
var brow='mozilla';
jQuery.each(jQuery.browser, function(i, val) {
if(val==true){
brow=i.toString();
}
});
$('.tableHeader').each(function(i){
if(m<colCount){
if(brow=='mozilla'){
$('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td
$(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
}
else if(brow=='msie'){
$('#firstTd').css("width",$('.tableFirstCol').width());
$(this).css('width',$('#table_div td:eq('+m+')').width());//In IE there is difference of 2 px
}
}
m++;
});
$('.tableFirstCol').each(function(i){
if(brow=='mozilla'){
$(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight()-1);//for providing height using scrollable table column height
}else if(brow=='msie'){
$(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight());
}else{
$(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
}
n++;
});
}
fnScroll=function(){
$('#divHeader').scrollLeft($('#table_div').scrollLeft());
$('#firstcol').scrollTop($('#table_div').scrollTop());
}
The problem is that when iterating through the "tableFirstCol" tds, the error to stop running the script pops up. Is there some more efficient way to do this?
Essentially the script is resizing each top header and side pane to match the width in the first row/column. If I run my report with a large date range (the side header), the script pops up, usually when there are about more than 30 side header rows.
Any help appreciated!
You need to cache your selectors:
var tableDiv = $('#table_div'),
divHeader = $('#divHeader'),
firstcol = $('#firstcol'),
tableFirstCol = $('.tableFirstCol'),
tds = $('td', tableDiv);
You can use for your column selectors .eq(n).
Don't use $(this).css("height", n) when this.style.height = n; is easier and faster.
This:
$('.tableHeader').each(function(i){
if(m<colCount){
/* ... */
}
m++;
});
should be:
$('.tableHeader').each(function(i){
if(i<colCount){
/* ... */
}
});
and I'm not entirely sure you would even need the i<colCount check (but I'd have to see the HTML).
The browser sniffing is probably not necessary. Try applying a reset stylesheet and a valid doctype or use HTML5Boilerplate.
If you HAVE to browser sniff: you could just use:
if($.browser.mozilla){
/* ... */
}
else if ($.browser.msie){
/* ... */
}
else{
/* ... */
}
You could also condense that code down quite a lot. Look up the DRY principle.
Also, as for setting the height of the tableFirstCol, couldn't you just set the height of the row instead?
You could generate the HTML with id tags for each column and row. Then just select by the name instead of using the complicated selectors.
I would say that $('#table_div td:eq('+colCount*n+')') is a complicated selector, while $('#row1') is much easier.
Also - I believe what you are doing for a browser check will not work. The code you have iterates through all properties for the detected browser and sets the brow value to the last one. Instead of the loop you have, use something like $.browser.webkit to check for webkit and $.browser.msie to check for IE. As your code is now, I think you will always be executing the else case. See here for more on the jQuery browser object: http://api.jquery.com/jQuery.browser/