I have issue with one of site that I developing.
Situation is like this:
I'm using #font-face generated at fontsquirrel.com, and in every browser, except for IE8 it works fine. In the beginning it worked for IE8 too, but (I guess) after update it stops working normally.
This is what's happening, after page is loaded, font on the page stays the same until you mouse over the document, after that it applies #font-face rule.
You can see that here: http://devel.2klika.net/fiolic/demo/home.php
Also I'm using fbml on that page for fb:like button, this is the code:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"></fb:like>
</span>
I figured that commenting out fb:like is solving, sort of, #font-face problem, like this:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<!-- <fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"> </fb:like> -->
</span>
I would like to use that fb:like button if it is possible to make it work with IE8 and #font-face :)
I tested this with Windows 7 64bit, IE 8.0.7601.17514 64bit and 32bit
If I'm using IE8 in compatibility view it works normally.
Does anyone can help me with this issue?
Thanks in advance
I had found a lot of responses on other forums talking about adding namespaces to the html tag as a way of making this work. I decided to try it my self and with great joy, the like button was displaying in IE8.
I changed my html tag from:
<html>
to:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
As seen in the code I used below:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
</head>
<body>
<div><fb:like id="fb_like_btn_iframe" show_faces="no" width="220" href="http://www.pixorial.com"></fb:like></div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
api_key = "<%= FACEBOOK['key'] %>";
FB.init({
appId : api_key,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
var like_clicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "like", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
var like_unclicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "unlike", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
$(document).ready(function(){
FB.Event.subscribe('edge.create', like_clicked);
FB.Event.subscribe('edge.remove', like_unclicked);
})
</script>
</body>
</html>
I have encountered the same issue. Quite frustrating as there doesn't seem to be a solution aside from removing the like button from the page.
I've submitted a bug report to facebook for this issue.
Related
I would like to crawl a web page and extracts a video url embedded in the page. I first used Inspect tool and could easily see the embedded link as shown in the picture below:
And the target <video> tag:
<video class="jw-video jw-reset" tabindex="-1" disableremoteplayback="" webkit-playsinline="" playsinline="" preload="metadata" src="https://lh3.googleusercontent.com/YYxKbKt3Apa8A2LkHKBJ7Fx6GU_iCIjEeGyyPJm_Ll-9hO4K8fDZV1pAbYprwpRhS5yFanf7=m18?title=[CayPhim.Net]-Bay-Vien-Ngoc-Rong-Sieu-Cap-tap-6.[360p]"></video>
I then tried to View Page Source tool and searched for the link but I couldn't find it. Instead, I found some javascript code that seems to be used to get and add the link to the page dynamically (at page loading time):
<div id="switchserver" style="height:100%;">
<div id="phim_html5" style="height:100%;">
<div class="loading"></div>
</div>
<script>$(document).ready(function () {
$.ajax({
url: "http://player.cayphim.net/jwplayer7/index_googima.php",
type: "GET",
cache: false,
data: {
"url": "8ce46ffa35805780571877c8ae5808f6a5e8898ebf9d294326735716694ccb4279505da51df9678cc8601a390a422d5e639449ec90332ee518e06f1dd579606d106f292d49bb38d9b2e80d0ee965a5c0e2911922e48ac972c521c4236512d356681404472b2cb39d9fff915bb4da21c8315d3fd6fc6cb0d2ed27183598661d40",
"name": "QmF5IFZpZW4gTmdvYyBSb25nIFNpZXUgQ2FwIHRhcCA2",
"sub": ""
},
success: function (msg) {
$("#phim_html5").html(msg);
}, error: function () {
$("#phim_html5").html("<div class='player-error'>Server quá tải. Vui lòng chọn server khác bên dưới...</div>");
},
});
});
</script>
<img style="display: none" src="http://image.cayphim.net/1553256337-lSC0nSX6Wj9dlOXfK29gK2iwoKF9D0p4YwnxYgmyCwmyBfJ29eW1wKpPetD3BkBKF9D0p4MsZPPjEReTD0UVY0K4YvoGKF9D0p42wODHaQKFo5pGMVmG9XmN05lP80DksxCQaHXKF9D0p4MMJwwhnyohFxsEYKF9D0p4wRJH5xYk1eXEr9mETjpng" />
</div>
Now I used Advanced REST Client to make a GET request to http://player.cayphim.net/jwplayer7/index_googima.php with parameters as specified in the javascript code but I got response containing some thing like this:
<div id="playerjw7">Trình duyệt của bạn không hỗ trợ xem phim bằng Player HTML5. Vui lòng cài đặt Chrome hoặc Firefox</div>
Yeah, it's Vietnamese, but it means "Your browser doesn't support Video Player HTML5. Please install Chrome or Firefox".
How could I programmatically scrape and extract the embedded video url?
I'm using the jQuery plugin Masonry and I'm having an issue that happens when I make an ajax call to another page to load in images for a gallery. The ajax call works and the images load in but when the call is made, something happens that removes one of the classes that Masonry appends too one of my divs.
Here is how my html looks on the first page. Everything is fine here and shows the class masonry-brick, which I need to render out the appropriate css to make everything look nice and it also renders out the inline css.
<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
**<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
<div class="gallery-text">
<h3>Berkshire</h3>
<p>HDP – High Definition Porcelain</p>
</div>
</div>
</a>
When I click on the link to make the ajax call, the images load in fine and it works on all the links but the class masonry-brick is removed and the images lose their css.
jQuery("#project-galleries-navigation li.load-category a").on("click", function(){
var href = jQuery(this).attr("href");
jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);
return false;
});
This is the code i'm using for masonry.
var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
});
This is what ends up happening to my html when the page loads in the new data. The class masonry-brick is no longer present and the inline css disappears as well.
<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
**<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
<div class="gallery-text">
<h3>Ashton</h3>
<p>Porcelain</p>
</div>
</div>
</a>
Has anyone had this problem or knows a way to fix this issue?
I was able to get it to work by modifying this jquery and putting in a callback function for it.
jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
jQuery("#gallery").masonry("reload");
}).fadeIn(2300);
e.preventDefault();
});
I made a simple example showing the problem: the form below submits to another page using jQuery .post().
Form
$('form').submit(function(){
$.post(
$(this).attr('action'),
$(this).serialize(),
function(data) {
var ret = data;
var final_data = $(ret).find('#holder-1').html();
alert(final_data);
}
)
return false;
})
Action
<div id="holder-1">
<h1>Content 1</h1>
</div>
<div id="holder-2">
<h1>Content 2</h1>
</div>
<div id="holder-3">
<h1>Content 3</h1>
</div>
The log shows that the content of data looks fine. But once i try to find #holder-1 with .find(), it returns undefined.
This is almost the same as the last example in the jQuery api page: http://api.jquery.com/jQuery.post/
Here is the full (not) working example hosted in my website, with some console.log() along the code:
Form: http://www.peixelaranja.com.br/tmp/post.php
I tried nearly anything: passing the dataType as 4th parameter, using $.ajax() instead of .post(), using .filter() instead of .find(), different versions of jQuery... Nothing seems to work.
All the files are UTF-8.
Any ideas?
I know you mentioned that you used filter instead of find, however, that should work. jQuery is stripping out the html, head,body tags, etc. Once this is done, #holder-1 is now at the top level of the hierarchy.
This fiddle demonstrates that filter does work:
http://jsfiddle.net/68jEt/
var html = '<!doctype html><html dir="ltr" lang="pt-BR"><head> <meta charset="UTF-8"> <title>Return Test</title></head><body> <div id="holder-1"> <h1>Content 1</h1> </div> <div id="holder-2"> <h1>Content 2</h1> </div> <div id="holder-3"> <h1>Content 3</h1> </div></body></html>';
alert($(html).filter("#holder-1").html());
I am having a button which point to a actionlink that I render with jqueryui button, all I want is the rendering visual of the button, and keeping its normal behavior, on Chrome fine, the button points to the actionlink, but on Firefox 11, when I click the button, nothing happens.
This is the code on the view:
<button id="btnNewOffer" style="float: left; margin-left: 30px"> #Html.ActionLink("Offre", "Index", "Service") </button>
This is the script:
<script type="text/javascript">
$(function () {
$("#btnNewOffer").button();
})
</script>
This is working on Chrome but non Firefox 11
Thanks
I don't think you need to use the <button /> element. You can simply use the ActionLink by itself.
Try this:
#Html.ActionLink("Offre", "Index", "Service", htmlAttributes: new { id = "btnNewOffer", style = "float: left; margin-left: 30px" })
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link