I have 7 different DIV blocks.
The first DIV block should appear at the beginning, be hiding the other.
For that I gave display: none block at the other six defined.
So the other block should appear, I have a JS code copied from the internet.
function showonlyone(thechosenone) {
$('.newboxes').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
Problem is, I become an Error from Firebug:
RefernceError: showonlyone is not defined
I hope, I have declared you all right.
Make sure you load the js at the beginning of the dom, else the function wont be declared.
function showonlyone(thechosenone) {
$('.newboxes').each(function () {
if ($(this).attr("id") == thechosenone) {
$(this).show();
} else {
$(this).hide();
}
});
}
Also you can enhance the whole function to this:
function showonlyone(thechosenone) {
$('.newboxes:not([data-id='+thechosenone+'])').hide();
$('.newboxes[data-id='+thechosenone+']').show();
}
The code you have is a perhaps a little complicated. Something like this:
function showonlyone(thechosenone) {
$(".newboxes").hide();
$("#"+thechosenone).show();
}
would be much simpler.
As for the function being undefined, make sure the function is defined in a scope that can be reached by the thing calling it!
Related
i am designing a webpage for a construction company using a template. the html file uses a js file called app.js. whenever i edit the js file, the whole html page becomes non-responsive as if the js file was never there to begin with. here is the code which exists in the app.js file.
//animate first team member
jQuery('#first-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#first-person').addClass("animated pulse");
} else {
jQuery('#first-person').removeClass("animated pulse");
}
});
//animate sectond team member
jQuery('#second-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#second-person').addClass("animated pulse");
} else {
jQuery('#second-person').removeClass("animated pulse");
}
});
//animate thrid team member
jQuery('#third-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#third-person').addClass("animated pulse");
} else {
jQuery('#third-person').removeClass("animated pulse");
}
the file works fine with this pre-written script. but when i try to add the following line for a new id "fourth-person" i created in html file
//animate fourth team member
jQuery('#fourth-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#fourth-person').addClass("animated pulse");
} else {
jQuery('#fourth-person').removeClass("animated pulse");
}
the html page becomes non-responsive. please tell me what might be the problem and a solution too if possible
I can see at least two syntax problems, you are not closing the event binding for third-person and fourth-person elements. They should be like this:
//animate fourth team member
jQuery('#fourth-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#fourth-person').addClass("animated pulse");
} else {
jQuery('#fourth-person').removeClass("animated pulse");
}
}); // <-- This is missing
I am using a function first which adds a class that causes the page to fade to 0 on clicking an anchor tag. How would I add the following...
if style = opacity "0" (in other words function one has successfully completed) add the next function. The code is given below.
They both run independently from there respective triggers but not sure how to ensure that function two runs only on completion of the first.
document.getElementsByTagName("a")[1].addEventListener("click", first);
function first() {
"use strict";
document.getElementById("content").classList.add("animation")
}
function next() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
document.getElementsByTagName("a")[1].addEventListener("click", function(){
document.getElementById("content").add('animation');
next();
});
function next(){
if (document.getElementById("content").contains('animation')) {
document.getElementById("profile").classList.add('animation');
} else {
return false;
}
}
I recommend you to use JQuery, it is much more easier to manipulate css attributes and stuffs. And for pure javascript, I think it was already answered here, it might not be straight answer, but it might help you out.
Use callback functions
function func(value, callback){
//do stuff
callback();
}
In your case
function first(alphavalue, second) {
// do some stuffs
if(alphavalue == 0) {
// run the call back
second();
}else { // do no stuffs }
}
Hope it helps!!
$("#content").on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
// Do something when the transition ends
next();
});
Check transition end event handling and this.
Using jQuery the following would log that the app had loaded once the DOM and all assets had been downloaded by the browser:
$(window).load(function() {
console.log('app loaded');
});
However I don't want this check to happen until after some other things have run.
So for example:
function checkLoaded()
{
$(window).load(function() {
console.log('app loaded');
});
}
So let's say I call this function after a bunch of other functions.
The problem is, because $(window).load(function() is an event listener, when I call the checkLoaded() function the event won't ALWAYS run (because it MAY have already been fired because everything has downloaded BEFORE the checkLoaded() function has run).
Any ideas on how I can do this?
I tried this:
function checkLoaded()
{
if(loaded)
{
console.log('app loaded');
}
else
{
checkLoaded(); // keep checking until the loaded becomes true
}
}
$(window).load(function(){
loaded = true;
});
But the problem here is that the checkLoaded function COULD get called hundreds of times in a few seconds and isn't a nice way of handling this.
UPDATE: The function is called using checkLoaded(); Just so everyone knows I am calling the function!
UPDATE 2:
The plan is essentially this:
function init() {
start();
}();
function start() {
// Show Preloader... and other stuff
/// Once all logic has finished call checkLoaded
checkLoaded();
}
function checkLoaded() {
if(loaded) {
show();
}
}
function show() {
... // show app
}
So I should be able to know if the status of loaded is true, but keep checking until it becomes true as it may be true or false when I get to the checking stage.
You run it either on window load or if it's already done using such kind of code:
function onLoad(loading, loaded) {
if (document.readyState === 'complete') {
return loaded();
}
loading();
if (window.addEventListener) {
window.addEventListener('load', loaded, false);
} else if (window.attachEvent) {
window.attachEvent('onload', loaded);
}
}
onLoad(function() {
console.log('I am waiting for the page to be loaded');
}, function() {
console.log('The page is loaded');
});
var loaded=false;
$(window).load(function() {
loaded=true;
});
function checkLoaded()
{
// do something if loaded===true
}
Try this
function checkLoaded()
{
$(window).load(function() {
console.log('app loaded');
});
}
checkLoaded();
you want to make checkLoaded block and thats a bad idea:
javascript has no threads and blocking like that will just burn CPU while potentially blocking the whole script.
don't wait like you do for loaded to be to true. use the eventhandler as it is meant to be used.
maybe give checkLoaded a parameter to a function you want called:
function checkLoaded(continueWhenLoaded) {
$(window).load(function() {
continueWhenLoaded();
});
}
Have you looked into a solution involving jQuery's .promise() and .done()? Look at some of the examples in the documentation, it might be what you are looking for.
I want the categorycb_change function NOT to be executed when permissioncb_change is in progress, but it does not work.
In the code below I set fireCategoryEvents to false when permissioncb_change is executing, however for some reason this does not prevent category_cb from executing. When I debug I can see that permissioncb_change is done first and only when it is done executing categorycb_change is fired.
(Important note: categorycb_change is triggered within updateGroupCheckboxes within the permissioncb_change function.)
I also tried this with unbinding and rebinding, but the same problem.
What am I doing wrong and or how can I fix this?
.permissioncheckbox and .rolecategory are both html input checkbox elements.
the code behind updateGroupCheckboxes is quite complicated. so I don't think it is useful to show here. (it changes the checkedstate of multiple .rolecategory checkboxes so it triggers the categorycb_change events)
var fireCategoryEvents = true;
$(function () {
$('.permissioncheckbox').change(permissioncb_change, 0);
$('.rolecategory').change(categorycb_change);
});
function permissioncb_change() {
fireCategoryEvents = false;
$(this).attr('data-changed', true);
if (firePermissionEvents) {
updateGroupCheckboxes(this);
}
fireCategoryEvents = true;
}
function categorycb_change() {
if (fireCategoryEvents) {
alert('cat changed');
}
}
I found the solution:
function permissioncb_change() {
$(this).attr('data-changed', true);
if (arguments[0].originalEvent.srcElement.className != 'rolecategory') {
updateGroupCheckboxes(this);
alert('per changed');
}
}
function categorycb_change() {
if (arguments[0].originalEvent.srcElement.className != 'permissioncheckbox') {
alert('cat changed');
}
}
This way I check what the origin of the event was before deciding to run the code.
I have a Fancybox set on a delay to pop up on any page of my Wordpress, I'm looking to have it become disabled after a user submits something in the provided input or have it not show up for a given amount of time if the user clicks on the bypass link. I've tried a few scripts found around this site but nothing seemed to work, here's what I currently have set in place.
function openFancybox() {
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 7 });
$('.pop').fancybox();
});
Please try the below to see if that helps.
openFancybox = function{
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
//Declare your cookie.
$.cookie('visited','no', { expires: 7 });
//Test to see if your cookie equals 'no', if true then run the fancy box.
if ($.cookie('visited') == 'no') {
openFancybox();
}
//Your Input or click to stop the fancy box
$('#StopFancyBox').on('click',function(){
$.cookie('visited', 'yes');
});
});
As #Brad mentioned you can use the web developer tools to test to see what your cookie value is at stages. Simply go to the web.console and call back $.cookie('visited')
ERRORS
jquery.cookie.jsGET http://www.coreytegeler.com/bolivares/wp-content/themes/max-magazine/source/cookies/jquery.cookie.js 404 (Not Found)
The above seems to be because the jquery.cookie.js file is not referencing the right location.
/bolivares/:72SyntaxError: Expected token '('
The above is actually my fault :) sorry. When declaring the function openFancybox i missed off the (). So it should be openFancybox = function(){.
jquery-plugins.min.js:13TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
superfish.js:123TypeError: 'undefined' is not a function (evaluating 'jQuery('ul.nav').superfish()')
woocommerce.min.js:1TypeError: 'undefined' is not a function (evaluating 'e(".plus").live')
The above are conflicts with the plugins jquery-plugins.min.js, superfish.js and woocommerce.min.js respectively. I'm sorry I can't give much guidance on these.
/bolivares/:259ReferenceError: Can't find variable: myLoop
You're calling back myLoop(i) on line 259 on your main html page. But searching through all of your scripts, this isn't declared anywhere.
Yes you can edit it perfectly all you have to do is create a settimeout value so that the fancybox pops out after some time and then write the program like this
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#fancybox-manual-b').trigger('click'); },5000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
$.cookie('visited', 'yes', { expires: 7 }); /*write this first*/
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000); /*let the page load first*/
a = "subscriber";
} else {
openFancybox();
}
$('#fancybox-manual-b').fancybox();
});
</script>
If you want you can change the (I wrote this to check if the cookie is working properly or not)
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000);
a = "idiotteen";
}
to
if (visited == 'yes') {
return false;
}
Let me know if this helped you