I'm using DD_belatedPNG to fix transparent PNGs in IE6; at a certain point I noticed that all fixed PNGs started disappearing a second after the document loaded. Something along these lines: page loads, 1 second passes, the transparency becomes viewable and the PNGs almost immediately disappear. Any clue on what the cause is and how to fix? Thanks!
UPDATE: the elements are still in place, so if one of the PNGs was a link, it is still clickable.
<script src="/scripts/plugins/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
</script>
As long as the alert is in place they are there, once OK is clicked, they are gone.
For those who are interested, this was being caused by as script loading stuff from fonts.com... I set it to defer, and it fixed the issue. Sweet!
Can you try calling DD_belatedPNG.fix() only when the page has finished loading, then see if the problem goes away? Attach an event handler to window.onload like so:
<script>
window.onload = function() {
var PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
};
</script>
Related
I'm using the following script to inject a svg in my html body:
Meteor.startup(function() {
$('body').prepend('<div id="svg"></div>');
$('#svg').load('images/svg/sprite/sprite.svg');
});
This works as intended but things go wrong when I manually reload the page in my browser. But only when there's a parameter in my route. When there's no paramater in my route I can refresh all I want without any problems.
Router.route('/test') // all OK!
Router.route('/test/:_id') // current template gets rendered multiple times and app finally crashes
I can't seem to wrap my head around this. Why is this happening? And how to fix this?
The load path needs to be absolute.
$('#svg').load('/images/svg/sprite/sprite.svg');
On my jsf page at some point I send a message to the growl component.
<p:growl id="growlLong" for="growlLong" showDetail="true" life="10000" sticky="false"/>
Once the 10sec is over, or dismissed by clicking the X, the issue that occurs is the element below the growl is not selectable. By inspecting the components on the page, looks like the actual div stayed there and blocks the content below it.
<?xml version="1.0" encoding="UTF-8"?>
<div class="ui-growl-item">
<div class="ui-growl-icon-close ui-icon ui-icon-closethick" style="display: none;" />
<span class="ui-growl-image ui-growl-image-info" />
<div class="ui-growl-message">
<span class="ui-growl-title">Success!</span>
<p>Configuration successfully saved.</p>
</div>
<div style="clear: both;" />
</div>
So, the question is - how do I make this to go away and keep the content below still usable?
Here is the screenshot of the issue, as seen with "inspect element", blue boxes are existing links, red box is the dismissed growl. Inside the blue box, we can't click the part that is covered by the red box.
This topic might be older but I just recently stumbled upon it:
The reason that the showcase is working but my version was not was that I gave the .ui-growl CSS class a height AND a width. In the showcase, the size of the container is only defined by its content and thus 0 if there are no items to display.
I moved my height definition to .ui-growl-item (which is more appropriate anyhow) and now it's working like a charm.
While the it would be desirable to be able to tell growl to not leave behind the <div id="growlLong_container"> structure in the DOM, the simple solution is to just select it and remove it using your favorite method to manipulate the DOM.
The ID appears to be the ID you passed to growl: id="growlLong" + "_container". With a DOM ID it is a simple matter of selecting it and removing it.
Yes, it would be nice to be able to get growl to not leave it in there. However, there is a point of diminishing returns vs. the amount of effort you spend trying to find a solution. It appears to be well past the point where you should just use a hack and remove it. Make a note about it, move on. Leave a comment in the code that this is why you are making the DOM manipulation. A possibility rather than removing teh <div> is to adjust the z-index such that it is below that of the UI elements. Another possibility is to add display:none; to the style. Obviously, code it such that if the <div> is not there nothing goes wrong. Verify that the next use of growl still performs correctly.
Ask on the Growl discussion group. Submit it as a bug with growl. If a way surfaces to make growl not leave something like this in the DOM revisit the code and apply it.
As to removing it, if you have JavaScript available it is as simple as:
document.getElementById("growlLong_container").remove();
To be more specific we really need more information about your code and the environment in which you are running.
A "solution" that should remove the <div>:
Hopefully you will receive an answer which allows the elements to be hidden/removed by growl. However, there does not appear to be one at present.
The following script should wait around checking every 250ms to see if the <div id="growlLong_container"> has been entered into the DOM. Once the <div> has been entered into the DOM, the script will wait 10s. If the <div> exists after the 10s it will be removed. The script is a hack. But it should work.
You will need to place it such that it makes it onto the page, either enclosed in tags (as are here), or in a file without the first line:<script class="code" type="text/javascript"> and the last line: </script> removed. If you use a separate file you will need to have it included in a similar manner as you do jquery.js, foundation.js, foundation.topbar.js and foundation.tooltip.js.
<script class="code" type="text/javascript">
(function () {
"use strict";
const maxGrowlTime = 10000; //In milliseconds
const checkFrequency = 250; //In milliseconds
var intervalTimer=0;
var foundGrowl=false;
function dismissGrowl() {
var growlId;
growlId = document.getElementById("growlLong_container");
if(growlId) {
growlId.parentNode.removeChild(growlId);
}
foundGrowl=false;
setGrowlCheckInterval();
}
function checkForGrowl() {
var growlId;
if(foundGrowl) {
return;
}
growlId = document.getElementById("growlLong_container");
if(growlId) {
foundGrowl=true;
clearInterval(intervalTimer);
setTimeout(dismissGrowl, maxGrowlTime );
}
}
function setGrowlCheckInterval() {
intervalTimer = setInterval(checkForGrowl, checkFrequency );
}
setGrowlCheckInterval();
})();
</script>
My hope is that you find an answer that does not require a hack such as this. However, this should solve your problem, at least to an extent. With the script, the prevention of using those controls will last for at least the entire 10s up to 10.25s even if the user dismisses the growl early. With the two screenshots mentioned in the comments it would probably be possible to change the script such that it detects if the user dismisses the grow and then remove the <div> immediately. This would make it more responsive to user input.
This solution assumes that the <div id="growlLong_container"> does not exist in the DOM prior to your issuing the <p:growl id="growlLong" and that it is not needed afterwards. This is very likely because the ID of the dive appears to be composed of the ID you pass the growl.
Mainly, this issue looks like a bug or incompatibility issue between components.
I seemed to have developed an issue with placemark descriptions not displaying when clicked. The balloon opens, and by the size it looks like the text might actually be there but it's not displaying. The page is fairly dynamic, with multiple kml's loading, so I wonder if somewhere I killed the placemarks in the code? They display fine in the earth app, so I'm assuming it's something with the plugin or the way I'm loading the kml.
Here's an example: http://tour.frederickwildman.com/jaboulet Any help or advice on how to proceed would be very helpful. Thanks
It is hard to be sure as I can only intermittently reproduce the problem but I think there are two possible issues.
Firstly, you balloons are having their content scrubbed be the earth api. You can confirm this by looking at the mark-up of an open balloon. You will see something like the following where content has been removed.
<!--
Content-type: mhtml-die-die-die
-->
Secondly, the balloons appear to be having an issue resizing due to the content.
To overcome these issues you can choose to handle the balloon events yourself. You can then call getBalloonHtmlUnsafe() for the balloon content scrubbing and
setMaxWidth() and setMaxHeight() for the resizing. e.g.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
// exit if not a placemark
if(event.getTarget().getType() != 'kmlPlacemark') return;
// cancel the default behaviour
event.preventDefault();
// get the un-scrubbed content and show the max-sized balloon
var content = placemark.getBalloonHtmlUnsafe(),
balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(event.getTarget());
balloon.setContentString(content);
balloon.setMaxWidth(800);
balloon.setMaxHeight(600);
ge.setBalloon(balloon);
});
I may not be using the proper terminology but hopefully I get my question across properly. What I'm wondering is if it's possible to "delay" the "creation" of a specific div, rather than just delay the FadeTo or Show jquery command.
I ask because I'm using the Vimeo API which is completely mind-boggling and frustrating (at least for me - it's a source of endless shame and I wallow in self-pity when attempting any such Vimeo API coding). What I'm trying to do is just delay the autoplay of the iframe code for an embedded Vimeo video. The problem is that I have the div containing the vimeo iframe set to hide for a good three seconds after the page loads before it fades in, but since it's just hidden the video starts playing anyway before the visitor can actually see it. I'm just using &autoplay=1 for the vimeo embed...
So, I suppose the only other solution besides getting this confusing Vimeo API to try to delay the video that way is to be able to just use a jQuery command to delay the vimeo iframe from even loading/being created on the page, until the container div fades in.
If this is possible I will bless my lucky charms. And double points if someone answers in the next few hours! Thanks so much!!!
I just editted my answer and applied it to fit your code you provided:
So what I did here is: 1) load jquery into your page2)when jquery sees your div with id="div" as 'ready', it will fire an alert that says loaded (you can remove this it was just for testing purposes), and then delay the src from loading in your iframe for 2 seconds (2000 miliseconds)
3) So you can change the 2000 to whatever time you want, and make sure the "player_1" matches your iframes id
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document.getElementById('div')).ready(function()
{
alert('loaded');
setTimeout('document.getElementById("player_1").src="http://www.youtube.com/v/82CYNj7noic?autoplay=1"', 2000);
});
</script>
<div id="div" class="div">
<iframe class="iframe" id="player_1" > </iframe>
</div>
Does this work for you?? I hope I've helped!!
I noticed that the Buffer app for chrome does things a little differently with a floating div when the extension icon is clicked. How is this achieved?
I don't believe they do this in a new window since I am not seeing an addition window being spawned.
Basically what I need is a thickbox to be displayed when the icon is clicked.
Any insight on how this is done would be appreciated.
They're using an api from that background page, to listen to the click event for when the browser action button gets clicked.
Here's a link to that API page:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {'file': 'createPopup.js'}, function callBackStub(){})
});
createPopup.js
You're html will be in a string. I personally recommend writing this like this:
var widgetHtml =
'<div id="main"> '+
' <p>some stuff goes here</p>'+
'</div>';
Then as your html grows, you can do a column edit of the beginning quote and end '+
Ok, now what you'll want to do is put your html in an iframe, but without setting a src property. Like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = widgetHtml;
WHY? So your stuff doesn't take on styles from the rest of the page.
Um, and then you can do a translateX or transition left/right position to slide the element into the page.