I'm running iframe resizer 3.5.3 on a wordpress installation. I can't say I really know what I'm doing, but I did a lot of reading and googling online, and got iframe-resizer up and running.
My iframe is embedded in the middle of the page, so I used scrollTo() to get it to scroll down to the iframe. See code below:
<script type="text/javascript" src="/wp-content/uploads/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize( { minHeight : 1000, log : true, InPageLinks : true,
initCallback: function() { scrollTo(0,1000); }
} );
</script>
This worked, but scrollToOffset() did not. I can't figure out why one should work while the other does not. Here is the code:
<script type="text/javascript" src="/wp-content/uploads/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize( { minHeight : 1000, log : true, InPageLinks : true,
initCallback: function() { scrollToOffset(1,1); }
} );
</script>
Any reason why one should work while the other doesn't? Am I doing something wrong?
The two methods should be called from inside the iFrame, not from the callbacks.
scrollTo works because you are calling the native window.scrollTo method, rather than the iframeResizer one.
Related
I am using http://instafeedjs.com/ to display Instagram feed in my WordPress site.
I have included this file:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
and added into the page <div id="instafeed"></div>. But this displays
ReferenceError: Instafeed is not defined
error in the Firebug, and the feed not displays.
Does anyone know solutions to fix this?
Try to wrapp your code in some delay function, like this:
<script type="text/javascript">
jQuery(document).ready(function(){
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
});
</script>
You called your instafeed.min.js after your code, thats why you get Not Defined error.
Another solution will be to call instafeed.min.js file before your code in Dom: in header, in body, up to your code. In this case you can use your code without wrapping in delay functions
I've issue with my carousel, which is in bootstrap 2 + wordpress.
I want auto start when page load, but its not work.
when I click on next/prev controller it will and after that auto start work, so that mean on first page load auto start not working.
any one have any idea..?
I've also try with:
<script type="text/javascript">
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 500
});
$('#myCarousel').carousel('cycle');
});
jQuery('#myCarousel').carousel({
interval: 2000
})
... but still it doesn't work.....
let me know if anyone have solutions for this..
thanks..
Are you using Firebug to see what errors you get?
Did you import the JQuery and Bootstrap libraries? Also, your call to the carousel method must be within the tags.
Try booting it without the fancy options first:
<script type="text/javascript">
$(document).ready(function() {
$('#myCarousel').carousel();
});
</script>
I registered my project and generated a browser key at https://code.google.com/apis/console/.
Now how do I use that key when using the Google Script Loader?
I've been doing this, which works (with or without the key parameter), but even after several weeks the API console shows no requests:
<script src=//www.google.com/jsapi?key=my_key"></script>
<script>
google.load('maps', '3.10', { other_params : 'libraries=places&sensor=false', callback : ... })
</script>
The key is useless for the jsapi, you must append it to other_params:
<script>
google.load('maps', '3', {
other_params: 'key=my_key',
callback: function(){}
});
</script>
When using charts/loader you have to do something like this:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
...
</script>
Note the mapsApiKey property.
As described in https://developers.google.com/chart/interactive/docs/gallery/geochart
I am trying some AJAX calls for the first time. My site is hosted on my own IIS7, (http://myUserName:8078/HomePage.aspx).
Here is the jScript.
<script type="text/javascript" src="jQuery1.4.2.js"/>
<script type="text/javascript">
$(document).ready(LoadText);
function LoadText() {
$("#Content1").load("data.txt");
}
"content1" is a content place holder.
My IIS is set to .net 4 too.
My problem is that the data.txt contents is never loaded. It is in the same directory as the page. I haven't got much experience in IIS so I am wondering if I am missing a setting or something.
Thanks
You can't use a single-tag XHTML-style script tag for JavaScript. Change your first line to:
<script type="text/javascript" src="jQuery1.4.2.js"></script>
For some reason, the script tag can't be shortened down to just a single tag, you have to have separate opening and closing tags.
I recommend you pass the ClientID and file path into the function as arguments, but the code below should work:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/jQuery1.4.2.js")%>'></script>
<script type="text/javascript">
$(document).ready(function() {
LoadText();
});
function LoadText() {
$("#<%= Content1.ClientID %>").load('<%= Page.ResolveUrl("~/data.txt")%>');
}
</script>
Is data.txt in the root folder of your site? If so, the .load() method takes a URL so try "/data.txt"
LoadText() is a function. Try:
$(document).ready(
LoadText();
);
Also I would suggest using lower camel case for function names. Upper camel case functions as in LoadText() suggests by convention that it is a contructor.
$(document).ready(
loadText();
);
You can also log something in the loadText() function to verify that it actually gets executed.
function loadText() {
$("#Content1").load("data.txt");
console.log('tried to load data.txt');
}
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?