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>
Related
I am using nicescroll library js because i want to make my div scroll nice rather than default scroll.
I want to make scroll to markerlist ul which is generated by javascript.
I have added nicescroll javascript library like this:
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
and function like this:
<script type="text/javascript">
$(function() {
$("#markerlist").niceScroll();
});
</script>
Maybe you can set a timeout before applying nicescroll. When All contents are loaded then apply nicescroll. Or if you are using a div which shows after clicking a button you can put the code in your click handler function.
$(window).on('load', function() {
window.setTimeout(function() {
$("#markerlist").niceScroll();
}, 200);
});
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.
I have MySQL database with multiple URL's.
Each URL is displayed in one iframe, so 3 URL's = 3 iframes. I display them like this.
...
$resu = mysql_fetch_array ($consultation);
echo "<iframe src='".$resu['URL']."' onload='load(this)' id='iframe'></iframe>";
...
With this script I'm able to know the URL of the iframe clicked (not exactly, besides it doesn't work in jsFiddle but in my PC yes. (http://jsfiddle.net/7UxHv/)).
<script type='text/javascript'>
$(window).load(function(){
$('iframe#iframe').load(function(){
alert($('#iframe').attr('src'));
});
});
</script>
But really it displays the first database row and not the one clicked.
Anyway to display the one clicked with that script or another form to do this? Thanks.
edit:
Note you are generating multiple elements with the same id.. id should be unique.
This might be why you get only the first row to work.
I think the below code should work:
Html:
<iframe src='.$resu['URL'].' onload='loadIframe(this)' scrolling='no'></iframe>
JS:
window.loadIframe = function(frame) {
alert("Loaded "+$(frame).attr('src'));
}
Try this... change 'src' to 'data-src'... and try the following...
echo "<iframe data-src='".$resu['URL']."' onload='load(this)' id='iframe'></iframe>";
$('#iframe').click(function() {
alert($('#iframe').data('src'));
});
also instead of using onload try using onclick()...
Might work...
I am developing with CakePHP and want to modify height of CKEditor generated with cake html helper, because I need to have two editors inside one page, with different height.
How I can do this with css?
if I remember that you can do when you define ckeditor js in your view e.g.
ed = CKEDITOR.replace("textarea",
{
height:"291", width:"400"
});
check this documentation:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.width
http://cksource.com/forums/viewtopic.php?t=13810
Regards.
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'350px'});
</script>
or
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'100%'});
</script>
I have a webpage with an <iframe> pointing to another website. I don't want this to block the loading of the rest of the page. Is there a way to load it asyncrounously?
It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:...">
Using jQuery, this works:
<script type="text/javascript">
$(window).load(function() {
var f = document.createElement('iframe');
f.src = url;
f.width = 1000;
f.height = 500;
$('body').append(f);
});
</script>
where url is some URL.
One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.
We worked around this by 'faking' OnLoad by calling the method we wanted in a script element at the bottom of the main page, even outside the closing body tag:
</body>
<script type='text/jscript' language='javascript'>
BodyOnready();
</script>
I think #Coxy is correct that the OnLoad won't fire. At least when running some web page performance tests it seemed to me it is waiting for the iframe to consider the page to be fully loaded. I therefore use this small jQuery snippet to load the iframe:
HTML:
<iframe id="blabla"></iframe>
JS:
$(window).load(function() {
if ($('#blabla').length <= 0) { return; } // to avoid errors in case the element doesn't exist on the page / removed.
$('#blabla').attr('src','//example.com/page');
});
iframes should load asynchronously without any effort on your part.
you can wait until after 'onload' has fired to set the iframe's src:
<body onload="loadFrame">
then something like this:
function loadFrame(){
var myFrame = document.getElementById('myFrame');
myFrame.src = "myURL";
};
Some vanilla JS alternative:
HTML:
<iframe id="YOURID" src="about:blank">Loading...</iframe>
JS:
window.onload = function(){
document.getElementById('YOURID').src = 'https://insertYourUrlHere.com'
};
Although I agree this shouldn't be happening, you could wait for your webpage to be completely loaded, and then load the iframe contents. With jQuery, I think you can do something like this:
Supposing your IFRAME looks like: <iframe name="theOtherPage"></iframe>
$(document).ready(function(){
(window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/";
});