We Keep Coding

Javascript - Clicks and key events don't work in Cobalt

I'm quite nooby in using Cobalt. I try to create a simple app (just couple of pages) using HTML, CSS and JS. Static content looks fine in Cobalt. But mouse clicks and events from keyboard aren't handled. I mean code like
document.addEventListener("keydown", e => { do something });
//or
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
document.location.href = URL_PAGE;
});
}
works in Chrome, but doesn't work in Cobalt. When I click something or press buttons on a keyboard - just nothing happens. For now I haven't found how to handle user events to make them work in Cobalt.
Any help would be very appreciated.
Thank in advance,
Evgeniy

Appears that I just had errors in my script. I fixed them and now everything work fine. Sorry for a false alarm.

Use jQuery to hide an empty table

We are using jQuery and Javascript to build a CV/resume from data. To help with the page breaks with these tables we are utilizing a jQuery plugin called Columnizer. It works pretty well, but we still have the occasional header that doesn't render properly at the end of a page.
Rather than try to fix the plugin, we really just need to hide the "empty" table which is really just a couple of header rows. It's proving difficult. Either I am not detecting the rows that need to be removed or the order of operations is off. It seems to me that it would be easiest to remove these rows as the very last operation. That doesn't seem to be happening though.
Here is the script we trying. It's at the very bottom of the HTML page.
<script>
$(document).load(function () {
var x = document.getElementsByTagName("table");
//alert(x.length);
//alert(x[0]);
for (var i = 0; i < x.length; i++) {
alert(x[i].innerHTML);
try {
var childBody = x[i].getElementsByTagName("tbody");
//alert(childBody[0].innerHTML);
var childRows = childBody[0].getElementsByTagName("tr");
} catch (e) {
//alert("no child rows");
x[i].className = "hidden";
//$(x[i]).removeClass().addClass("hidden");
}
}
});
</script>
I appreciate your help. If you need more info, please let me know. I am a novice at this!

This can be solved with :not(:has(*)) and .closest:
$('tbody:not(:has(*))').closest('table').hide();
DEMO

Scroll Handling with Javascript

I am new to web programming and I stumbled on something strange while working on my website. I use Wordpress but here I had to dive in the Javascript code to get it done.
What I want to achieve is the following:
I want people to get to see the header of my website when they arrive but not be bothered by it once they read stuff on my site.
What I figured out is that I want the website to scroll down if a) people are at the top of the site and b) if they click on a menu link. When people are already on the site and click on a menu item to change pages, I would like to maintain the scroll position of where they were before.
I tried two versions:
This one works like a charm except that the function executes on each reload of the site
var scroll_position = localStorage.getItem('scroll_position');
var header_height = document.getElementById('masthead').offsetHeight;
var menubar_height = document.getElementById('top-bar').offsetHeight;
var page_height = header_height - menubar_height;
jQuery(function () {
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
But as I wanted to execute the function only on clicking one of the menu items, I tried:
jQuery("#top-menu ul li a").click(function(){
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
and suddenly the scroll_position variable doesn't change value as before...
I spend the whole day trying to figure this out and I would appreciate very much if someone out there could tell me what I'm doing wrong!
Thanks in advance.

According to the code you gave us, try this
jQuery(function () {
var header_height = document.getElementById('masthead').offsetHeight;
var menubar_height = document.getElementById('top-bar').offsetHeight;
var page_height = header_height - menubar_height;
jQuery("#top-menu ul li a").click(function(e){
e.preventDefault();
var scroll_position = localStorage.getItem('scroll_position');
if (window.pageYOffset == scroll_position){
jQuery(window).scrollTop(page_height);
}
else{
jQuery(window).scrollTop(scroll_position);
}
});
});
I'm assumig that header_height, menubar_height and page_height can't get altered once the page is loaded, thats why we init them on the page load, not on the click.
Hope it's gonna help you

Jquery Looping through on mouseovers, with muliple divs

Well, hopefully I can articulate this and get my point across. I've done some searches, but nothing really hits it.
The JSfiddle page: JS Fiddle Also, some of the CSS isn't going to be sized correct since that's not the right image.
But here's the Javascript code:
//mouse over
for(var i = 0; i<10; i++){
$("#client"+i).on("mouseover", function(){
$(this).removeClass("clientsOff").addClass("clientsOn");
for(var e = 0; e < 10; e++){
(function(){
$("#overlayC"+e).css({'display':'block'});
})();
};
});
};
//mouse leave
for(var i = 0; i<10; i++){
$("#client"+i).on("mouseleave", function(){
$(this).removeClass("clientsOn").addClass("clientsOff");
(function(){
for(var e = 0; e<10; e++){
$("#overlayC"+e).css({'display':'none'})
}})();
});
};
Ok, to the point. There are two hover activities going on here. One of them (that is working correctly) is just switching classes, with each hover, and doing them one at a time.
Now, the second is another hover effect, but instead of doing it one at a time all of them show up.
Now the simplest way to fix this is to just a hover for each id, but that will take forever/not very inefficient. Thus why I'm using a loop here. Now, I know it needs to have another closure, but it's not working correctly.
I've tried a few different ways of doing this, but either they throw the same result or just don't work at all.
And yes the starting loop could all be one, but for now it helps keep things separated so I can read things better

It looks like you are displaying all overlayCs on each mouse over
for(var i = 0; i<10; i++){
(function(i){
$("#client"+i).hover(function(){
$(this).removeClass("clientsOff").addClass("clientsOn");
$("#overlayC"+i).css({'display':'block'});
}, function(){
$(this).removeClass("clientsOn").addClass("clientsOff");
$("#overlayC"+i).css({'display':'none'})
});
})(i);
};
Demo: Fiddle

Here's you jsFiddle edited
$('[id*="client"]').each(function(){
$(this).hover(function(){
$(this).removeClass("clientsOff").addClass("clientsOn")
.find('[id*="overlayC"]').eq(0).css({display:'block'});
},function(){
$(this).removeClass("clientsOn").addClass("clientsOff")
.find('[id*="overlayC"]').eq(0).css({display:'none'});
})
});
if your code is in the head do a $(function(){//code});

Your CSS still looks creepy, but however, in order to stop the entire parenting tree's mouseover events to fire, edit line 3 and 4 like below:
... function(elem){
if (elem.target!=this) {return false;}
...

Infinite js loop in different browsers

I'm trying to make an infinitely rotating imagereel with jQuery. This imagereel shifts between images with an interval of 5000 milliseconds, then fading out the 'old' image and fading in the 'new' image. The image to be displayed has a style-attribute for "display:inline".
The code can be found below:
function switchImage(){
var selector = $('#fotoreel img[style="display: inline; "]');
var nextOne = $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function(){
$(nextOne).fadeIn('normal');
});
var t = setTimeout("switchImage()",5000);
}
$(document).ready(function(){
setTimeout("switchImage()",5000);
});
The problem is that it works fine in Chrome, but in Firefox and in Opera it only shifts image one time. In IE it's worse; there it doesn't work at all.
Do you guys know a better way of infinitely looping with javascript? Now I use setTimeout() to call the function again, but that doesn't seem to work.
EDIT
Okay, thank you everyone! Such fast responds, awesome!
The solution that I used was the one of adding a class and searching for that instead of for the style. The display:inline didn't appear to be a problem, as it worked out, but all the browsers appeared to implement the jQuery fadeIn() function differently.
I namely wanted to filter EXACTLY on "display: inline ;", because the spaces were added in Chrome, but not in IE, FF or Opera. So that means the style attribute wasn't accurately at all to filter with. Stupid me! :)
I made sure that a class was added to the image that is showed currently, and find the next one by filtering on that class. Now it works like a charm.
Thank you all for your answers, I love this place! :D

This is most likely because you are checking the style attribute, which is very inconsistent in browsers. I.E. doesn't work at all or works with various amounts of white-space. Just simplify your selector to use a class or ":visible"

It's probably going to work better if you explicitly mark images with a class:
function switchImage(){
var selector = $('#fotoreel img.current');
var nextOne = $(selector).length ? $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function() {
$(selector).removeClass('current');
$(nextOne).addClass('current').fadeIn('normal');
});
setTimeout(switchImage, 5000);
}
$(document).ready(function(){
$('#fortoreel img:last-child').addClass('current');
setTimeout(switchImage,5000);
});
Note also that in my calls to "setTimeout()" I pass a direct reference to the function instead of a string version of the code to call it.

This wasn't working because the browsers you mentioned did not like the display: inline selector you used.
I got it working using the following:
function switchImage() {
var selector = $('#fotoreel img:visible');
var nextOne = selector.next();
if (nextOne.length == 0) {
var nextOne = $('#fotoreel img:first');
}
selector.fadeOut('normal', function () {
nextOne.fadeIn('normal');
});
var t = setTimeout(switchImage, 5000);
}
$(document).ready(function () {
setTimeout(switchImage, 5000);
});