On my site, I recently found a strange new automatically generated div. when I look at it in development tools in chrome I says:
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"><embed style="width: 1px; height: 1px;" type="application/x-shockwave-flash" src="http://www.ajaxcdn.org/swf.swf" width="1" height="1" id="_dp_swf_engine" name="_dp_swf_engine" bgcolor="#336699" quality="high" allowscriptaccess="always"></div>
I really don't know what it is, and where it's coming from.
I already had a similar problem and the div came from a chrome extension, check which extension can modify your pages.
Sometimes it will be automatically adding from your web hosting
server
If you are using an external plugins it will be coming from it
I could see you are using google fonts.... Try removing and check your site
You can run your website on a local server...
To hide the DIV, Try adding this css:
<style type="text/css">
dp_swf_engine {
display:none;
}
</style>
Thanks
On the document ready event :
var element = document.getElementById("dp_swf_engine");
document.body.removeChild(element)
if your div is directly in your body element else, find his parent for call removeChildFunction...
I hope that help !
Related
So I know in HTML you can do
<script src="myscripts.js"></script>
But is it possible to somehow link a html page? For example:
<html src="testing.html"></html>
Well, I'd use an iframe. The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Try this:
<body>
<iframe src="testing.html" frameborder="0" scrolling="yes"></iframe>
</body>
You'll also need some CSS, as follows:
body{
border: 0;
}
iframe {
width: 100vw;
height: 100vh;
}
So, building on the code above here's an example snippet:
body {
border: 0;
}
iframe {
width: 100%;
height: 100%;
}
<body>
<iframe src="https://example.com" frameborder="0" scrolling="yes"></iframe>
</body>
Hope I could help
There some ways you may try, but you may need to read bout it:
<template/> , placeholder tags for you to write new elements
Try using Javascript (limited that you must abide to CORs and also no inline scripts). E.g.
fetch('https://url.com/something.html').then(data => document.getElementById('x').innerHTML = data.text())
Use IFrames. <iframe src=""/>
Use some templating engine depending on languages, like
PUG/Jade (template generator),
Freemarker (Java),
React, angular (JS).
The second 2) option will always introduce security issues and you will also hit some roadblocks in future, e.g. executing scripts, etc.
The third 3) might be a better option if you are putting whole html. Your worries will be in interaction between current page and resize.
But directly injecting HTML on runtime introduces risks, you won't know what will the contents are and it's not a recommended way. You'll also risk into mismatch Html child, e.g.
<html><title><html><title></title></html><body>..
I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)
I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
This question was previously posted on Primefaces forum where I din't receive any answer.
I'm trying Primefaces 3.1 because I would need the overlay panel functionality.
Unfortunately in my Internet explorer 8 (ie8) the following very simple overlay panel is never displayed, while it works quite fine on Firefox 5.x.
Some points in the html code which seem directly related to the Ie8 problem are the following:
- the page doesn't need a vertical scrollabar (if the page has one the overlay panel is shown)
- the overlayPanel height is fixed.
<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>
If I don't find a workaround soon I would have to implement something myself.
Thanks
Filippo
Put the following Javascript code before closing the h:body Tag.
<script type="text/javascript">
if ( $.browser.msie) {
if(parseInt($.browser.version, 10) === 8){
var overlayPan = $("div.ui-overlaypanel");
$(overlayPan).css('position','fixed');
}
}
</script>
You might try setting appendToBody to true for the overlay panel. This can help in some situations, though to be honest I think your page is simple enough that it wouldn't make a difference.
Check your styles for overflow:hidden (also of the child elements of .ui-overlaypanel), play around giving them overflow:visible - in combination with a fixed size (as you already have) I was able to solve the problem.
I'm working on a web based application, and in order to test my changes, I'd like to be able to compare the visual rendering (perhaps by way of overlaying) and the source HTML (diff style) of 2 browser tabs (development vs production). I'm happy to use any browser to do this.
I've already got a couple of scripts that pull the HTML from 2 sites and compares them, but it's tedious outside of a browser and doesn't easily handle the situation where there are session based clickstreams to get to the pages that I'd like to compare. I've also copied and pasted the source into a comparison tool manually, but again this is quite tedious.
Any tips?
The Firefox PageDiff plugin looks like it might be of some help. It shows you the diff of the source of two tabs. Install the plugin, right click on the first page and select "Start DIFF", and right click on the second and select "Show DIFF". The diff is shown in a separate popup, and gives you a side-by-side of the generated source and a summary of line differences at the top.
Comparing page rendering seems like a useful enough task to warrant its own Firefox plugin. I'll keep an eye out for any that might be of service. If you're just worried about layout, the GridFox tool might be handy, but I haven't seen anything that does this automatically.
Would it be worth it to try some sort of GUI automation scripting?
Weird idea- I'm not a web guru, but if you need an overlay of two different pages on the same browser, why not create an HTML file with two overlaid iframes in divs, src attributes set to your two different pages, and lower the opacity of the top div? Put it on a local web server and you can have your favorite server-side tech give it to you in response to GET data containing the URLs. Heck, if anyone interested knows about writing Firefox extensions, it doesn't seem like it would be too difficult...
In fact, I just finished a demo of said overlaid iframes here. Just change the GET data and you can compare any pages you'd like. The PHP is painfully simple, though figuring out iframe opacity took some googling.
<html>
<body style="opacity:.5;">
<div style="opacity: 0.5;">
<iframe src="http://<?php echo $_GET["site1"];?>" style="position: absolute; width:100%; height:100%;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe src="http://<?php echo $_GET["site2"];?>" style="position: absolute; z-index: -1; width:100%; height:100%" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
While this seems pretty handy for layout, if you're worried about color differences- or, obviously, inter-browser differences- you'll have to try something else.
One cheap workaround, if you're using linux, is to use a window manager that lets you easily adjust the transparency of windows with a keyboard/mouse shortcut. Then overlay two windows, one with each version of your page open, and use the transparency adjustment shortcut to fade between them.
Of course, this doesn't address the html code comparison issue.
Sounds like your looking for Microsoft SuperPreview.
http://expression.microsoft.com/en-us/dd819431.aspx
I believe that it only a Beta/Preview but it looks really promising.
For code I think you can save the files on your local disk and use WinMerge tool to compare them.
For comparing the UI,
1. Please check Expression Web Super Preview. It is a standalone tool available for free download.
2. You can also use http://browsershots.org/ for the same purpose
I hope this helps. :-)
By using QtWebKit you can:
Load any page.
Navigate it from code or by evaluating some JavaScript in it. So you can fill-in login form and post it.
Access source and DOM of the page, including modifications done from JavaScript.
Take screenshot and save it as image.
See this blog post if you'd like to avoid real GUI running.
No need to code in low-level C++ since Qt has excellent Python binding - PyQt.
I've adapted Matt Luongo's accepted answer regarding the visual comparison of browser rendering into a static overlay page using jquery. It doesn't work in IE7, but works in firefox. It's pretty flexible, but I imagine it will need minor tweaks for use (start by pointing to your own jquery include)...
<html>
<head>
<script src="/javascripts/jquery/jquery-1.3.1.min.js" type="text/javascript" ></script>
<script>
$(window).load(function() {
$('#go').click(function() {
$('#f1').attr('src',$('#p1').val() + "/" + $('#url').val());
$('#f2').attr('src',$('#p2').val() + "/" + $('#url').val());
});
$('#opa').toggle(function() {
$('#transdiv').css("opacity","0.75");
},
function() {
$('#transdiv').css("opacity","0.25");
});
});
</script>
</head>
<body style="opacity:1;">
Prefix 1: <input id="p1" value="http://testsite.foo.com"/>
Prefix 2: <input id="p2" value="http://comparisonsite.foo.com"/>
URL: <input id="url" value="mypage.html" /> <button id="go">Go</button>
<button id="opa">Toggle opacity</button>
<div id="transdiv" style="opacity: 0.5;">
<iframe id="f1" src="about:blank" style="position: absolute; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe id="f2" src="about:blank" style="position: absolute; z-index: -1; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>