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);
});
Related
I am using offline.js (0.7.18) and its working fine, when I go on/offline the indicator changes state, all good so far.
I can also see on Offline JS Simulate UI, that a login panel is having its style toggled between display:block and display:none when on/offline is triggered. But I can't discover how this works.
I want to hide a 'Submit' button when offline is triggered.
You can use the sample from the Offline JS Simulate UI page that uses jQuery:
<script>
$(function(){
var
$online = $('.online'),
$offline = $('.offline');
Offline.on('confirmed-down', function () {
$online.fadeOut(function () {
$offline.fadeIn();
});
});
Offline.on('confirmed-up', function () {
$offline.fadeOut(function () {
$online.fadeIn();
});
});
});
</script>
Give the class "online" to any element you want shown when the system is online and give the class "offline" to any element you want shown when the system is offline.
<button class="online">ABC</button>
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 want to have an Adobe Edge animation, which plays after a visitor clicks an ordinary HTML form button. How can this be done?
ball_edge.js
remove:
$(window).load(function() {
$.Edge.play();
});
The HTML file
Add immediately before </HTML>:
<script>
$("#RoundRect1").click(function () {
$.Edge.play();
});
</script>
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?
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/";
});