sharethis is stopping page to load in IE 8 - sharethis

I have a sharethis link on my site having the below mentioned code ...
<script type="text/javascript">
addthis_url = location.href;
addthis_title = document.title;
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12"></script>
But this is not working as the page stops loading after the addthis_widget.php like . I even changed the code to newer version i.e.
<!-- AddThis Button BEGIN --> <a class="addthis_button"></a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=ogmios"></script> <!-- AddThis Button END -->
But this code is too stopping the page load in IE8.
Any help will be appreciated.
Thanks
Jawed

Jawed,
Looks like you are using AddThis not ShareThis..
Why don't you try using ShareThis instead http://sharethis.com/publishers/get-sharing-tools
-Manu

Related

Slider rewinds by default but I want it to be cyclical

Ionic slide box images only rewinding by default.But I want Slider to be cyclical. How to solve it.
I tried to implement jquery slider instead of Ionic slide box . But its not worked properly.
I tried this files to add a header on my index page
<script src="lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" ng-repeat="club in slider">
<img ng-src="{{club.url}}" style='width:100% !important;' >
</div>
</div>
I had add this code on my controller it working fine for me.
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.loop(true);
Few suggestions if you want to use jQuery with ionic/angularJS:
Load your jquery before ionic js and angular js libraries loads.
Call jQuery from your controllers for better control over application flow. eg. $('#slider').nivoSlider(); call it from your controller and put your html in view template of the controller.
It would be great if your can elaborate on the kind of slider you want in your app (I couldn't understand what you mean by cyclical).

Magnific Popup Set up

I'm just getting back into web development so forgive me if I sound ignorant. I'm trying to set up a lightbox effect using Magnific Popup. I love it because all of the examples are using responsive design.
I've followed instructions here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
And here: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/
A few times and I don't understand why the pop up isn't coming up. It just links me to a new window with the image on it and not a pop up.
I have this in my head tag:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
</script>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
This is my html:
<a class="image-popup-vertical-fit" href="images/logo.png" title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2" /></a>
I had the same problem, and had the same setup as you. I thought I had called the jQuery library already, but apparently not, because as soon as I added the code (below) before closing my HEAD, everything started working! I know this answer is about a year belated, but maybe it will help others in the future.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

addThis buttons do not show

I am using the default code. Why don't my buttons show up? Do I need to have the images locally? need absolute path?
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="myclient"></a>
<a class="addthis_button_twitter_follow" addthis:userid="myclient"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="myclient"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-510e973014b90fdf"></script>
<!-- AddThis Follow END -->
You don't need the images to be stored locally.
You don't need an absolute path
Have you checked if the js is loading properly? You can do that in chrome (developer tools) or firefox (firebug) and check if it is able to get the script loading with no errors.

TypeError: $("#city").autocomplete is not a function

This is my php page coding:
<script type="text/javascript" src="js/addclasskillclass.js"></script>
<script type="text/javascript" src="js/attachevent.js"></script>
<script type="text/javascript" src="js/addcss.js"></script>
<script type="text/javascript" src="js/tabtastic.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list1.js"></script>
<script type="text/javascript" src="js/backtotop.js"></script>
<link type="text/css" rel="stylesheet" href="calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<script language="javascript" type="text/javascript" src="calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},600);
});
});
</script>
<script>
$(document).ready(function(){
$("#city").autocomplete("autocityuser.php", {
selectFirst: true
});
});
</script>
<form method="get" name="frm1" id="frm1" action="#">
<input type="text" id="city" name="city" value="" style="width:160px;" size="30" />
</form>
When i load this page the FF shows me this error:
TypeError: $("#city").autocomplete is not a function
I've applied the same code for autocomplete on another page (but with less js imports) and it is working fine.
but it is showing me error on this page, may be beacause some js is conflicting.
Can anyone help me to solve this error???
P.S. I forgot mention that i have 2 forms on this page both with different ids and names
P.S. I still don't know what the problem was , but fortunately
The problem is solved,
i just put below code at the end of the page and everything works perfect.
<script>
$(document).ready(function(){
$("#city").autocomplete("autocityuser.php", {
selectFirst: true
});
});
</script>
Are any other libs using $ and overwriting jQuery's usage of it? Maybe, try jQuery("#city").autocomplete
You're using part of the jQuery UI (autocomplete) but it doesn't look like you have the jQuery libraries in place.
Try including the following scripts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script></script>
EDIT
I think your basic approach is wrong.
You want to call the PHP to get your autocomplete options using AJAX and stick the echoed value into a variable availableTags. Then you want to set up your autocomplete.
Something like this (not tested):
var availableTags;
$.get("autocityuser.php", function(data){
availableTags = data; // You need to format the data either here or in your PHP
});
$("#city").autocomplete({source: availableTags});​
I had this same problem recently recently. I found that two different version of jquery lib file was included from two different place.
Look for extra inclusion using firebug as js library could have been included from other included files.

Resizable Iframe for facebook iframe applications

I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>