How can I submit a photo in this Twitter share iframe. This is my iframe:
src="https://platform.twitter.com/widgets/tweet_button.html?url=MyUrl&text=${encodeURIComponent(MyTitle)}&image%3D${encodeURIComponent(image)}" width="100" height="100" style="border: 0; overflow: hidden;"
I tried many things but it doesn't work.
Related
I want to add a Follow Button of Twitter on my mean-stack web page. I use the following code:
https://jsbin.com/herikik/3/edit?html,output
<iframe
src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Google&show_screen_name=false&show_count=false&size=l"
title="Follow us on Twitter"
width="80"
height="30"
style="border: 0; overflow: hidden;"></iframe>
In Chrome under Mac, it works well. However, in Chrome and Edge under Windows, it shows:
Does anyone know how to modify the code such that it shows well cross-browser?
Try adding scrolling="no" to the <iframe>.
<iframe
src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Google&show_screen_name=false&show_count=false&size=l"
title="Follow us on Twitter"
width="80"
height="30"
style="border: 0; overflow: hidden;"
scrolling="no">
</iframe>
I try to get the height of an element that is in a iframe and that iframe is in a div with display: none. I need the height in the document in the iframe, not outside. So you don't have to think about security constrains.
Edit: Here is a small fiddle to demostrate the problem: http://jsfiddle.net/bv5JH/1/. console will log 0. And I am not able to append the div#myelement (or a copy of it) to some visible elements (so that it will be rendered and I can get the height like in the following "solution").
I found some solutions like:
var copied_elem = $("#myelement").clone()
.attr("id", false)
.css({visibility:"hidden", display:"block",
position:"absolute"});
$("body").append(copied_elem);
var height = copied_elem.height();
var width = copied_elem.width();
copied_elem.remove();
That will work if the element itself is display:none. But I dont have any displayed elements at all in the iframe, so I can't append it to a displayed element.
Any idea how to get the height anyway?
Since you seem to have an interaction set up between the IFRAME and your content, it should not be hard to apply this to the IFRAME itself:
position: absolute;
display: block;
top: -999999;
left: -999999;
Then you should be able to get dimensions of your element inside the IFRAME and once you got that, return that IFRAME back to its original position by resetting those styles.
duo to I have no enough reputation to commit.so i say here.
Change iframe's position is a good idea,yeah.
the image blow is my code which is a tab.
<div class="table census-table">
<div class="census-table-list">
<iframe src="census-baseData-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style=""></iframe>
<iframe src="census-activeUser-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
<iframe src="census-userKeep-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
iframe src="census-userPay-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
</div>
</div>
I'm trying to place a Raphael canvas in to a div which is smaller than the actual canvas. So basically I have something like this:
var paper = Raphael("test", 2000, 2000);
var a = paper.rect(0, 0, 2000, 2000).attr({fill: "#000"});
//
<div id="test" style="width: 500px; height: 500px; overflow: auto;"></div>
Seems simple enough? Most browsers have no problem with this but IE7 forces the whole 2000x2000 rectangle on screen ignoring the whole div constraints.
I tried placing the div within another div like so:
<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="test" style="width: 2000px; height:2000px;"></div>
</div>
But no luck, same thing happened. Is there a way around this? This
whole thing is already a compromise as I use raphael-zpd to give users
zoom and pan functionality but as it doesn't work on IE I thought I'd
just give IE users the image with basic pan functionality but no! Damn
you IE!
http://jsfiddle.net/WdwGQ/
<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="map" style="width: 2132px; height: 2872px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2000" height="2000">
<desc>Created with Raphaël</desc>
<defs>
<rect x="0" y="0" width="2000" height="2000" r="0" rx="0" ry="0" fill="#000000" stroke="#000">
</svg>
</div>
</div>
Prompt your users to use Google's Chrome Frame, which embeds Chrome's rendering engine in IE?
Alternatively, prompt them to use a better browser?
That's not really a solution to the underlying problem, but it would make the underlying problem irrelevant. There may or may not be a way of getting IE7 to do what you want. I have often found there isn't...
This post provides the answer:
IE7 CSS Scrolling Div Bug
Making the outer <div> (the one with the overflow:auto style) position:relative sorts it out.
so i have the two following iframe codes:
<iframe title="YouTube video player" class="youtube-player" type="text/html" src="some youtube url" allowfullscreen="" showinfo="0" frameborder="0" height="390" width="590"></iframe>
and
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=someid&xfbml=1"></script><fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
which when i check the source, the facebook code changes to
<div class=" fb_reset" id="fb-root"><div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;"></div></div><script src="http://connect.facebook.net/en_US/all.js#appId=someid&xfbml=1"></script><fb:login-button class=" fb_iframe_widget " show-faces="true" width="200" max-rows="1"><span><iframe src="http://www.facebook.com/plugins/login.php?api_key=somekey&channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Dfe61c41eeb9262%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff231b08ff49befe%26relation%3Dparent.parent%26transport%3Dpostmessage&locale=en_US&max_rows=1&sdk=joey&session_key=2.erTTx_22d7lVclAChVw8dw__.3600.1300428000-517177672&show_faces=true&width=200" class="fb_ltr" style="border: medium none; overflow: hidden; height: 94px; width: 200px;" name="f216f1832512134" id="f3c59d11d032c" scrolling="no"></iframe></span></fb:login-button>
on the same page...
and for some reason, the iframe where the facebook login is supposed to appear ended up containing the youtube video so both iframes end up containing youtube video....
how would i go about fixing this?
Probably an old Firefox bug which it seems has finally been fixed in v4.0 beta:
https://bugzilla.mozilla.org/show_bug.cgi?id=279048
i'm wrapping a youtube video inside of a div.vidwrapper.
I don't want the video to be visible but just the controls. This works fine in all Browsers but not in IE7. I have no clue what i have to do to position the video inside ov my .vidwrapper div in IE7.
html
<div class="vidwrapper">
<object class="video" width="308" height="100">
<embed src="http://www.youtube.com/watch?v=1QP-SIW6iKY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="308" height="100" wmode="opaque"></embed>
</object>
</div>
css
/*VIDEO*/
.vidwrapper {
width:308px;
height:25px;
overflow:hidden;
position:relative;
}
.video {
bottom:0px;
position:absolute;
}
Here is an example http://jsfiddle.net/3n3C7/ Check this out in any modern browser and then check it out in IE7. I want only the controls to be visible in IE7.
Any idea how i could make that happen?
Try to use _height:21px; this should work.As i am not on Windows so this is probably my guess, but it works most of the time.
What about this?
<iframe title="YouTube video player" width="480" height="25" src="http://www.youtube.com/embed/riW4W66ptqI" frameborder="0" allowfullscreen></iframe>