I was recently trying my best to create a Kik app that dynamically loaded some content -- messages -- into a textbox when the app launched. document.onload wasn't doing it for me. I tried JQuery's $(document).ready and $(window).load to no avail.
Simple code snippets like this were failing, and I couldn't understand why. They would refuse to function until I attempted to interact with another UI element, resized the screen by rotating my phone, etc...
$(document).ready(function() {
kik.getUser(function(user) {
$('#myDiv').html(user.username);
});
}
This was pretty infuriating... why could I not get Kik to do both in-getUser functions and regular onLoad ones?
Don't ask me why, but this works. I'm just going to assume that you CANNOT wrap kik.getUser in a $(document).ready statement!
But who cares -- if kik.getUser works, then you already have access to the DOM. Cheers!
// Kik user-specific JS
if(kik.utils.platform.browser.kik) {
kik.getUser(function (user) { if ( user ) {
$('#message').html("I work now.");
}});
});
// Kik-agnostic JS
$(document).ready(function() {
$('#version').html("I work now too.");
});
Related
I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});
I'm currently using a 3rd party jquery plugin which when called from a page, pops up with an overlay, and some forms that are not part of my site.
I've been trying (with no joy so far) to be able to detect from my own sites jquery, when this overlay is closed. I'd like to simply jump to a certain part of the page.
I've tried writing jquery to listen for the final button of the 3rd party form being closed, by checking for it's class name being removed, with .remove .destroy and checking for it's existing with .length and some other methods. however, it seems that my on page jquery can't see anything about these elements at all, and therefor I can't do something fun when that dialogue ends.
Anyone got any ideas of how this could be achieved? Am I missing something obvious?
Cheers in advance!
I was able to get this working via the below javascript. Maybe there is a better way, but this seems to be working well
<script>
var bookingInterval;
$("#ViewingButton").click(function () {
setTimeout(function () {
bookingInterval = setInterval(function () {
if ($(".agent-ui-modal")[0]) {
// Do nothing if class exists
} else {
// Do something if class does not exist
window.location = ("#calculator");
stop();
}
}, 500);
}, 5000);
});
function stop() {
clearInterval(bookingInterval);
}
</script>
Bear with me as I'm rather new to Rails and have very little experience with JS.
I purchased a Bootstrap theme for my rails app and I'm running into an issue with the JS written. It's not loading various scripts due to turbolinks but I have no idea on how to resolve this. Here's the JS file that came with the theme.
Theme.JS file:
(function ($) {
"use strict";
$(window).load(function () {
// ----------------------------------------------------------------------------------------------------------------------->
// SITE LOADER ||-----------
// ----------------------------------------------------------------------------------------------------------------------->
$('#loader').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({ 'overflow': 'visible' });
})
// ---------------------------------------------------------------------------------------------------------------------------->
// GENERAL SCRIPTS FOR ALL PAGES ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
$(document).ready(function () {
openSite();
});
function openSite() {
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
};
// ---------------------------------------------------------------------------------------------------------------------------->
// RESIZE FUNCTIONS ||-----------
// ---------------------------------------------------------------------------------------------------------------------------->
function winResize() {
$(window).resize(function () {
})
};
})(jQuery);
I've messed around with
$(document).on('ready page:change', function(){
fullScreenSlider();
header();
scroll();
winResize();
pushmenu();
pluginElement();
sliderHero();
sliderAll();
containerGridMasonry();
scrollCallbackEle();
shortcodeElements();
});`
As well as just running page:load around the OpenSite function around just the Jquery part, around all the functions. I'm really at a loss here, not sure what I'm doing wrong. I've used the turbolinks Gem and I thought that had it fixed but after a page reload only a couple things work on the page.
Here's a list of functions that seem to work after clicking a link that changes the view.
header()
sliderAll()
skillsProgressBar()
accordion()
accordion() is intermittent and I have no idea why it works when nothing else is working. It never really worked but started working when everything else broke.
Any ideas would be most appreciated. I'm probably doing plenty wrong here but, like I said, I'm new and taking a class on this but we are almost at the end of the semester and haven't even covered Gems.
PS. I know I need to have the functions run off of a page change rather than document.ready but I have been trying to figure it out for almost a week to no avail.
There's also a jquery rails gem that fixes some of the things. But the easiest solution is to probably just remove turbolinks.
I'm using Notify JS from here :
http://notifyjs.com/
And this is my HTML :
<div>
<p><span class="elem-demo">aaaa</span></p>
<script>
$(".elem-demo").notify(
"Hello Box",
{
autoHide:false
}
);
</script>
</div>
It doesn't work correctly. I can see the arrow, but not the message.
I've check using my browser "inspect element", the class notifyjs-container has "display:none" and when i try change it into "display:inline" via my own css, the message does appear, but without its animation.
Anybody can help ?
Here I attach the image of the small arrow i said earlier :
You need to put the notify setup inside the doc ready, ie:
$(function() {
$(".elem-demo").notify("Hello");
});
What is happening is that the .notify() script is running before the page has fully rendered, so the .elem-demo does not yet exist when $(".elem-demo") tries to find it, so the .notify() has nothing to attach itself to.
$(function() { ...
is shorthand for
$(document).ready(function() { ...
which is jquery's way of saying - don't run this script until the page elements have completely finished loading.
It's generally a good idea to put all your scripts into a ready function like this (multiple $(function() { ... can be called, they don't need to be all in the same one).
More info on the jquery learning page: https://learn.jquery.com/using-jquery-core/document-ready/
This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)
The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});
I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?