I am embedding a Yammer group feed using the method outlined here,https://help.yammer.com/entries/21262512-Embed-a-feed but I am not seeing any posted images in the embedded feed. Has anyone else encountered this before? Please note I am using the free version.
SCRIPTS
<script data-app-id="fyB2pTcfL36Y80py8RTj6F" src="https://assets.yammer.com/platform/yam.js"></script>
<script>
yam.connect.embedFeed({
container: "#design-ideas",
network: "myYammerFeed",
feedType: "group",
feedId: "1053789"});
</script>
CSS
.fleft{ float:left;}
HTML
<div>
<h1>Design Ideas</h1>
<div id="design-ideas" class="fleft"></div>
</div>
I found the answer. I was floating the divs where the feed was displaying and changing this caused the images to not appear. This is troublesome if you want to have multiple divs each showing the feeds from your different Yammer groups.
Related
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 a beginner with developing websites. I ran into this problem. I would be really glad if I am helped with the same.
I want to incorporate twitter feed in my webpage. I got the script from twitter.com for displaying feeds by creating a widget. When I display just the twitter feed inmy HTML page it works. But when I try to include inside my div tag, it doesn't show up.
The Following is the code snippet
<div class="span3 right tc-sidebar">
<div id="right" class="widget-area" role="complementary">
<a class="twitter-timeline" href="https://twitter.com/xxx" data-widget-id="xxx">Tweets by #_Harish_vK</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
U tried every possible thing I can. Please help me out . Since I have can only use the CSS which are already available for my organization(policy), is there a way to do it without modifying those CSS?
I fixed this by making a separate page for twitter feed and including it in an iframe under the divs.
Thank you guys!
I would like to preview the content of a div with imgPreview
I tried to do this:
<div id="five" style="background-image:url(1.jpg);"></div>
In script:
<script type="text/javascript">
$('div#five').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
I would like that when it passes over muose make preview of 1.jpg
Help me! Many thanks, ando sorry for my bad english! :).
From "imgPreview demos" # james.padolsey.com:
The image preview shows up in a tooltip-like box appearing alongside
the user's cursor when hovering over a link. The plugin is entirely
unobtrusive; it does not require any hooks to target specific links
(no non-semantic classes); it will automatically detect the anchors
that are linking to images and will only apply the preview effect to
them.
I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.
If you're using Apache web server, you could try using server side includes.
You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...
Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)
<body>
<h1>This is original page</h1>
<p>Some content on original page.</p>
<iframe src="sample.html" width="600" height="300"></iframe>
</body>
You can adjust the width and height and you can also remove the border if you want the page to be more seamless.
Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.
Additional note: Avoid frameset solutions also, as they aren't valid markup.
See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).
You could use JavaScript to load some HTML from one document into another. This task is fairly simple using the jQuery toolkit:
$("The ID of a container (a div element for instance) in which you want to load
the contents of a HTML file").load("path to html file you want to load");
<div id="inserthere" />
$(function ()
{
$("#inserthere").load("loadme.html"); // Load the contents of loadme.html
// and stuff it in the div with the
// ID of "inserthere"
});
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>