I've entered this into my code to use facebook comments:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="google.com" num_posts="10" width="610"></fb:comments>
But it cuts of the comments like this http://cl.ly/77fB and the loading graphic doesn't go away. I've tried removing all css that I have and js and it still does the same thing. I looked that code and the iframe that the facebook comments api generates sets a height of 200px. Here's the iframe source code:
<iframe id="f1c27030c" name="f1f67bf5c4" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 200px; width: 610px; " class="fb_ltr" src="http://www.facebook.com/plugins/comments.php?channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Df3ec50dad4%26origin%3Dfile%253A%252F%252Flocalhost%252Ff17ab9b71%26relation%3Dparent.parent%26transport%3Dpostmessage&href=google.com&locale=en_US&numposts=12&sdk=joey&width=610"></iframe>
Not sure what else to do. Thanks!
Update:
So because files I'm loading the comments from are local Chrome is saying it's not safe to load it all: http://cl.ly/77X7
I uploaded the file to my server and it loaded all the way.
Thanks for your help!
This comes from the fact that you put google.com as the URL : Facebook servers tries to contact google.com to finish loading your comments.
Try with localhost instead of google.com, it will show the error message.
So you have to put the URL of the page on which the comments are displayed. It will not work otherwise.
Hope that helps.
Related
I already searched for this topic but unfortunately cannot find the answer.
Is there any way to validate the Google map embed code iframe? Like when user paste the code in a textbox and click a button, system checks if that code is valid. Or is parsing the code and checking for pattern is the only way?
Thank you in advance for any help or idea.
Google is giving you the correct code to use. I use it all the time for my friend's real estate websites. Use a responsive iframe code too so it adapts to all the various screen sizes. Use this code, change the iframe source to fit your needs.
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1457.0935074158538!2d-70.75659948473937!3d43.07956346598421!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb5e8c11925c54ab4!2sSamonas+Realty+Llc!5e0!3m2!1sen!2sus!4v1402966179098" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
</div>
For the record I searched for regex that match iframe google embed code.
I found this question: PHP - Regex to check if <iframe> comes from Google Maps
And modified the regex:
<iframe\s*src="https:\/\/www\.google\.com\/maps\/embed\?[^"]+"*\s*[^>]+>*<\/iframe>
Hope that helps someone with same problem. :D Thank you all!
I want to check if our advertisement(picture or flash) has successfully displayed on website page.But the element can not be found in page source.
I get the element in chrome Developer tools.
<div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height: 250px; display: block; width: 300px; position: relative;" class="l_qq_com" adconfig_lview="l.qq.com" adconfig_charset="gbk" adconfig_lview_template="http://l.qq.com/lview?c=www&loc={loc}" oid="1800716433" display="banner">
<a class="absolute a_cover" href="http://c.l.qq.com/lclick?loc=QQcom_all_Rectangle&click_data=dXNlcl9pbmZvPW9CM2pnVGd4RnhHNyZhZHhfZXh0PSZwY3RyPTUwMSZhdmVyPTUwMTIwMSZwcmk9eHRiQkZXc0ovclloYXdzdWZqRmpSTkhyZWFuL3pQU2omYnRwcmk9R3VBL25heHhnY3JyNTdrdVNCNW4yWis3TlJqM01nTmw=&oid=1800716433&soid=gmLndBibVj/1bQtQRjKVNkVKAV1Q&dtype=0&pctr=501&aver=501201&btoid=100418428&pri=xtbBFWsJ/rYhawsufjFjRNHrean/zPSj&btpri=GuA/naxxgcrr57kuSB5n2Z+7NRj3MgNl&index=1&page_type=2&chl=703&k=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA%2C%E6%B5%B7%E8%80%B6%E6%96%AF%2C%E7%81%AB%E7%AE%AD%2CNBA&t=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA_&r=&s=" target="_blank" rel="nofollow" style="position:absolute;width:300px;height:250px;left:0px;top:0px;cursor:pointer;z-index:10;background-color:#fff;filter:alpha(opacity=0);opacity:0;"></a>
<div class="absolute" style="position: absolute; width: 24px; height: 16px; left: 26px; bottom: 0px; cursor: pointer; display: none; z-index: 20; background: url(http://ra.gtimg.com/web/res/icon/report_default_new.png) 50% 0% no-repeat;"></div>
<div style="position: absolute; left: 0px; bottom: 0px; width: 26px; height: 16px; z-index: 12; background: url(http://ra.gtimg.com/web/res/icon/leftbottom_new.png) 100% 0% no-repeat;"></div>
<div class="absolute" style="position:absolute;width:18px;height:18px;right:0px;bottom:0px;cursor:pointer;z-index:20;background:url(http://ra.gtimg.com/web/privacy/white_icon.png) no-repeat;"></div>
</div>
but in page source,it only shows
<!--$loc$_div AD begin...."l=$loc$&log=off"--><div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height:0;" class="l_qq_com"></div><!--$loc$ AD end --><!--[if !IE]>|xGv00|c5668531d36ed7899852180841ca2aa2<![endif]-->
how can I get the 300px_250px image url?
anyone knows?
Yeah! That's simply because of the fact that there are DOM manipulation libraries which alter the Document-Object Markup and not the source.
You have to understand the difference between the DOM and the physical page source. The physical page source helps render the DOM, after which it can be modified by using libraries; since you can't change the source on the server side as it needs to be re-rendered for different people, only the DOM is changed. In very simple words, DOM is what the browser has rendered: it's like a copy of the source which has been, then, modified by the libraries.
Using a library like jQuery can do this easily.
var $element = $( "#QQcom_all_Rectangle:1" );
if ( !$element || $element === null ) {
console.log( "The element hasn't been rendered. Not found.");
}
But if it is not YOUR page, and you can't really modify it and/or get the data. You can try doing this with a web-kit emulator like PhantomJS or Selenium web-kit. Since these are just testing frameworks, you can't create a fully fledged JavaScript applications.
Theoretically, you can:
Render this in a WebKit (Browser Rendering Component)
Get the source of the DOM
Use it
But that's just in theory because you need to use some language to create an application like that and since it's outside the scope of your question, you can't.
Using selenium webdriver can handle this.
WebElement QQcom_all_Rectangle=driver.findElement(By.id("QQcom_all_Rectangle:1"));
List<WebElement> links=QQcom_all_Rectangle.findElements(By.tagName("a"));
String style=links.get(0).getAttribute("style");
I am facing issues in writing into iframe, I am able to identify the iframe but I am not able to write anything into the frame. Whenever I try to write into the frame I am getting below error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 211 milliseconds
Build info: version: '2.43.1', revision: '5163bce', time: '2014-09-10 16:27:33'
This is the screenshot of my HTML Code.
HTML Snippet:
<div id="offer_description_field" class="control-group wysihtml5_type description_field ">
<label class="control-label" for="offer_description">
Description
</label>
<div class="controls well">
<ul class="wysihtml5-toolbar" style="">
<textarea id="offer_description" class="bootstrap-wysihtml5ed" rows="3" name="offer[description]" data-richtext="bootstrap-wysihtml5" data-options="{"csspath":"/assets/bootstrap-wysihtml5.css","jspath":"/assets/bootstrap-wysihtml5.js","config_options":"null"}" cols="48" style="display: none;"></textarea>
<input type="hidden" name="_wysihtml5_mode" value="1">
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px; width: 327.8px; height: 60px; top: auto; left: auto; right: auto; bottom: auto;"></iframe>
<p class="help-block">Required. Add offer description.</p>
</div>
</div>
When I create a simple HTML file with above code snippet I am not able to interact with element. Manually I am able to write anything inside this iframe when it is coming with full code base. Looks like it is replacing the textarea with iframe. Not sure how to deal with this type of element.
This is how it appears on the panel.
Can anybody help?
This error doesn't have to do with the IFRAME. In fact, the element you are interacting with isn't inside the IFRAME. The reason you can't interact with it is stated in the error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
The element is not visible. If you look at the TEXTAREA element, it is marked with style="display: none;" which is why it is not visible. Selenium was designed to interact with the page as a user would and so will not interact with hidden elements. You will need to approach this problem as a user would... how would a user get that text area to appear? I'm assuming click something, etc. You will need your script to execute whatever a user would do, then the TEXTAREA will become visible, and will be able to be interacted with.
you should takecare of following things while working with frames :
1.Select the frame .
then enter into the text/textarea.
Note: sometimes the elements are not in the visible area in the UI hence we may required to take the element into view port , following below code spinet before entering into the text/textarea :
WebElement element = driver.findElement(By.id("id_of_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
2.then deselect the frame .
Hope this would work for you .
Switch into that iframe either by id/class using following code
driver.switchTo().frame(driver.findElement(By.id("Enter id of element")));
OR
driver.switchTo().frame(driver.findElement(By.class("Enter class of element")));
Once you switched to the frame select the element with your normal steps.
like
driver.findelement(By.id/class/css/xpath("Enter Element id/class/css/xpath"));
Then, if you want to select any other element from the main frame, simply go back to your main frame with following code
driver.switchTo().defaultContent();
I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.
With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.
The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.
A link to the page:
http://agentboris.com/press/index-2.php#_
Here is the HTML for the image that includes the lightbox effect and lazy-loading:
Click to View
<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">← BACK <br/></p>
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>
And the CSS:
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display:none;
/** Position and style */
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 10000px;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
/*max-width: 90%;*/
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
position: fixed;
top: 0;
left: 0;
/** Unhide lightbox **/
display: block;
}
Simply use lazySizes. Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src):
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">
lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).
Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img?
Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.
Also, since you've named all of your images (big) with the suffix of -thumb, you don't really need to make an API call.
HTML
<div class="presscoll">
<a href="#boris-2014-awards" class="show-lightbox">
<img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
</a>
..... more thumbnails
</div>
Only have (1) of these.
<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
<br /><p class="parastyle" style="letter-spacing: 0.05em;">← BACK <br/></p>
<img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
</a>
$('.presscoll').on('click' 'a.show-lightbox', function(e) {
// get src and remove "-thumb"
var src = $(this).find('img').attr('src');
src = src.replace('-thumb', '');
// change image attr
$('#show-lightbox').find('img').attr('src', src);
// may need to call lightbox initialize again here
});
Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.
This isn't tested btw, but the idea will work.
If you look at my site www.tripleflowmusic.com, once you load the page, other HTML document with twitter plugin is loaded (Updates.html) in to container with help of of following code (jQuery):
$(document).ready(function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
But when I click News button, which does the following thing (It basically reloads Updates.html in the container):
$("#UpdatesButton").click(function() {
$("#subpageframe").fadeOut(200, function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
The twitter plugin won't show
The question is, why is this happening?
P.S. To get access to sub pages, simply remove "#" from the URL in the address bar
Your iframe and format isn't there like it is on the homepage. This code is in the homepage but not in http://www.tripleflowmusic.com/#Pages/Updates.html:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="600"></iframe>
You have some "a class" and "style" in the news page instead of the proper
<center data-twttr-id="twttr-sandbox-0">
format.
Shows fine on both Safari and Chrome on OS X for me, can you be more specific with what browser you're using and OS?
While we are at it you might want to clean up some of the errors that are being thrown:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/FunctionElements/MusicPlayer/Covers/missing.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/MediaElements/MusicPlayer/Songs/nylmbyb.mp3 Failed to load resource: the server responded with a status of 404 (Not Found)