I'm trying to implement Google's Fastbuttons described here for tables with a two-row layout.
The fastbuttons get bound on the table-rows with:
var buttons = document.getElementsByClassName('evtFastbutton');
for (var i = 0; i < buttons.length; i++) {
var fastbutton = new FastButton(buttons[i], function () {
var urlstr = 'xyz';
window.location.href = (urlstr);
});
}
If one of the rows is clicked it should change the background-color of either the previous or the next row and itself and open a new page.
While using Chrome or Firefox on Android or PC it all works great.
In Safari on the IPhone it is not changing the background-color but opens the new page.
I am not sure what is not working, the change of the background-color or the fastbutton.
Does anybody have had similar issues or a possible solution for this?
You can find the full code in this fiddle:
http://jsfiddle.net/tofeld/9Lu54yrr/1/
PS: I already tried the solutions suggested at this question: Google FastButton clicks twice on iOS
I found the solution of my problem.
As described here the rendering was not done before the javascript to change the page was executed.
So if anybody experiences a similar issue, try to do:
window.setTimeout(function(){window.location.href=('new/location');},0);
instead of
window.location.href=('new/location');
Related
I'm quite nooby in using Cobalt. I try to create a simple app (just couple of pages) using HTML, CSS and JS. Static content looks fine in Cobalt. But mouse clicks and events from keyboard aren't handled. I mean code like
document.addEventListener("keydown", e => { do something });
//or
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
document.location.href = URL_PAGE;
});
}
works in Chrome, but doesn't work in Cobalt. When I click something or press buttons on a keyboard - just nothing happens. For now I haven't found how to handle user events to make them work in Cobalt.
Any help would be very appreciated.
Thank in advance,
Evgeniy
Appears that I just had errors in my script. I fixed them and now everything work fine. Sorry for a false alarm.
The past few weeks I've been working on a website which is live now. It can be seen here: http://www.momkai.com/
This website works fine in all browsers I tested it in except one: Safari. When I open this website in Safari 10.1 and hover over the first paragraph, this is what I see:
This is correct. The first word of each line of text should be underlined. Hovering of the lines results in this styling:
So far everything is going well. Now I reload the page and I see this:
The underlines are way to wide! I've logged the offsetWidths and they are just completely wrong. This is the code which I use to retrieve the widths:
const parentParagraph = this.el.parentNode.parentNode;
let selfIndex;
let siblingUnderlineWidth;
this.underlineWidth = this.el.querySelector('.js-text-block-link-text-highlight').offsetWidth;
this.siblings = [].slice.call(parentParagraph.querySelectorAll('.js-text-block-link-text'));
this.siblingUnderlineWidths = [];
for (let sibling of this.siblings) {
if (sibling.isSameNode(this.underline)) {
selfIndex = this.siblings.indexOf(sibling);
} else {
siblingUnderlineWidth = sibling.querySelector('.js-text-block-link-text-highlight').offsetWidth;
console.log(siblingUnderlineWidth);
this.siblingUnderlineWidths.push(siblingUnderlineWidth);
}
}
this.siblings.splice(selfIndex, 1);
I've also added two screenshots of the console.log's to demonstrate how the values differ:
I'm experiencing this behaviour in Safari 10.1 on desktop and Safari for iOS. I've no idea what's going wrong so I hope someone can help me. Thanks in advance!
I'll be happy to provide more code if required.
I have found that when something CSS changes after I refresh, it is usually a loading order issue.
For example I was using
document.addEventListener('DOMContentLoaded', runsWhenReady);
But sometimes the offsetWidth would be wrong.
Figured out this we because the CSS file wasn't fully loaded, which changes how the offsetWidth is.
Chrome and Safari handle caching differently, which is why it would be different on refresh.
So I switched to:
window.addEventListener('load', runsWhenReady);
Which only fires after everything including CSS is loaded and it solved the issue.
On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.
Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.
I am having problem with appending a div with an image to a page after clicking a link.
Here is my script, which on document.ready() adds the event.
var handler = function () {
$('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>");
//$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content");
}
$(document).ready(function () {
for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) {
if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") {
ls[i].onclick = handler;
}
}
})
The problem here that it doesn't work in Chrome while in Firefox and IE its working perfectly. After some digging i found out that it actually adds the div but doesn't show the image. (Tested it with adding the div on the beginning of the page, everything moves down and the div is empty)
I have tested it also adding it directly to page and then it works good but it's not what I'm looking for unfortunately.
Here is my css class:
.loading-graphic
{
background: url('~/Content/ico/loading_big.gif') no-repeat;
}
Got no idea what is causing the problem. Anyone got an idea? ;/
Honestly sometimes Chrome screws up. I have had issues with Chrome and background images, but it was only my computer. Try it on a different computer Chrome browser, it might not be the same.
The other thing I would suggest is, have your div coded already instead of appending it. So basically have it on the html code and position it out of sight, then when you need it, just move it to the right position.
It was the background position; also increased z-index, attached to body, and prevented other invisibility reasons.
var handler = function () {
$('body').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:50%;left:50%;margin:-100px 0 0 -100px;z-index:99999;background-position:center center;display:block !important;\"></div>");
}
Completely restated my question:
Problem: Losing reference to an iFrame with Mozilla firefox 3.6 and 4.0
More info:
- Works fine in internet explorer 8 64-bit and 32-bit version.
How to reproduce? In Mozilla: Open the editor accordion menu. Click the 'editor openen' link, in the editor fill in some random text, then click 'bestand opslaan'. Fill in a name and click on 'save'. The content of the editor will be downloaded in HTML format.
Close the save file dialog box by clickin outside of it or on the specified buttons. Click on the 'bestand opslaan' button again and try to save your content to a file. You'll see nothing happening.
The problem isn't there in IE8. Try opening it in there.
Firebug tells me this the second time you open the save dialog:
iFrame.document is null
Example Link: http://www.newsletter.c-tz.nl/
More info:
- switched from thickbox to colorbox to try and resolve this issue and because thickbox isn't supported for a long time now.
- colorbox gives me the same problem so I don't think it is this.
- tried googling for iframe reference error and like, found nothing.
- tried putting the iframe code outside of the div that is called by the colorbox script, it retains it reference but not when I put it back inside that div.
Thanks to: JohnP who offered to open a 'hunt' on this.
Edit:
I thought maybe the saveFile.php file was causing trouble to the parent of the iframe but after removing it from the action variable in the editor.php script it still fails with the same error after you open the dialog for a second time.
Can someone maybe write a script that iterates through iframes by name and when the rignt iframe is found reference it to a var? I want to try it but don't know how..
I can't explain why it's work the first time for Firefox, but in Firefox the function to used for get iframe is different of IE : How to get the body's content of an iframe in Javascript?.
So, replace your JavaScript function "saveToFile" to this :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
var iFrameTag = document.getElementById('saveAs_Iframe');
var iFrame;
if ( iFrameTag.contentDocument )
{ // FF
iFrame = iFrameTag.contentDocument;
}
else if ( iFrame.contentWindow )
{ // IE
iFrame = iFrameTag.contentWindow.document;
}
var inframeEditorFileName = iFrame.getElementById('editor_filename');
var inframeEditorContent = iFrame.getElementById('editor_textarea');
editorFileName.value = saveAsFileName;
inframeEditorFileName.value = saveAsFileName;
inframeEditorContent.value = currentContent;
iFrame.editor_self.submit();
}
I replace the function with Firebug and it's works for me.
Update :
You can also used a crossbrowser solution, more simple, thanks to jQuery :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
editorFileName.value = saveAsFileName;
$("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
$("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
$("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}