We Keep Coding

Javascript #media min size - only activate at a certain window size

I have a javascript that I only want to work when window size is a min of 1326px
This is what I did, but it is not working. The script runs regardless of what window size.
If you look at the first two lines, that is what I used to try and detect my window size.
var mq = window.matchMedia( "(min-width: 1326px)" );
if (mq.matches)
{
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("sidebar-loc").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("sidebar-loc").style.marginLeft= "0";
}
( function($) {
$(document).ready(function () {
slider();
});
} ) ( jQuery );
( function($) {
$(window).scroll(function () {
slider();
});
} ) ( jQuery );
function slider() {
if (document.body.scrollTop > 700)
( function($) {
$('#sliderr').stop().animate({"margin-left": '0'});
} ) ( jQuery );
else
( function($) {
$('#sliderr').stop().animate({"margin-left": '-200'});
} ) ( jQuery );
}
(jQuery);
( function($) {
$(document).ready( function() {
$("#show_arrow").hide(); //hide your div initially
$(window).scroll(function() {
if($(window).scrollTop() > 700) { //scrolled past the other div?
$("#show_arrow").show(); //reached the desired point -- show div
}
else($(window).scrollTop() < 700)
$("#show_arrow").hide();
});
});
} ) ( jQuery );
}

You need to add a listener
Somewhat like this
if (matchMedia) {
var mq = window.matchMedia("(min-width: 1326px)");
mq.addListener(WidthChange);
WidthChange(mq);
}

This doesn't work because you only check if the media query matches once when the code runs.
The solution is to wrap the whole code in mq.addListener(function (e) { code }). The e object also has property .matches, or you could still use the mq.matches, that one is also updated on change.
Also keep in mind that this feature is still a working draft and is not supported in some older browsers. If you want support in those browsers, you'll have to listen for window resize event and determine if the media query matches based on window width.

How to retrieve the ajax data whose loading requires a mouse click with PhantomJS or other tools

I'm using PhantomJS to retrieve this page: Target Page Link. The contents I need are under the "行政公告" and "就業徵才公告" tabs. Because this page is written in Chinese, in case you cannot find the tabs, you can use "find" function of the browsers to find the "行政公告" and "就業徵才公告" tabs. Because the contents under the "行政公告" tab are the loaded as the default option, I can easily use the script below to retrieve the page:
var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(url, function (status) {
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
But the contents under the "就業徵才公告" tab are not loaded after I use the PhamtomJS to emulate the mouse click with the code below:
var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(url, function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// jQuery is loaded, now manipulate the DOM
$('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
});
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
This doesn't work as the contents under the "就業徵才公告" tab are not loaded. How should I do to retrieve the contents under the "就業徵才公告" tab?
Update:
After read a PhantomJS example, I refactored the code to below. It didn't work because the contents under the "就業徵才公告" tab are not loaded.
var page = require('webpage').create();
var address = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
var results = page.evaluate(function() {
$('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
return document.documentElement.innerHTML;
});
console.log(results);
phantom.exit();
}, 5000);
}
});
If any way could solve this problem is welcomed. Not limited to PhamtoJS.

Tested this code, and it outputs the correct image with the desired tab selected. It wasn't so straightforward because of the underlying structure of the page. Hopefully you can use this as a bit of a learning exercise in processing the DOM.
// utility function to send mouseclick event to an element
function mouseclick( element ) {
// create a mouse click event
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );
// send click to element
element.dispatchEvent( event );
}
// final function called, output screenshot, exit
function after_clicked( page ) {
console.log( "+after_clicked()" );
page.render( "after_click.png" );
console.log( "Done" );
phantom.exit( 0 );
}
// middle function, click on desired tab
function click_div( page ) {
console.log( "+click_div()" );
var clicked = page.evaluate(
function ( mouseclick_fn ) {
// want the div with class "submenu"
var div = document.querySelector( "div.submenu" );
if ( ! div ) {
return false;
}
// want all the list elements in the div
var li_array = div.querySelectorAll( "li" );
if ( ! li_array ) {
return false;
}
// we want the 2nd list element
var li2 = li_array[1];
if ( ! li2 ) {
return false;
}
// want the anchor inside the 2nd list element
var anchor = li2.querySelector( "a" );
if ( ! anchor ) {
return false;
}
// must focus on anchor to trigger underlying javascript on page
anchor.focus();
// want the div within this anchor, so we can click on the div
var element = anchor.querySelector( "div" );
if ( ! element ) {
return false;
}
// click on this inner div
mouseclick_fn( element );
return true;
}, mouseclick
);
if ( ! clicked ) {
console.log( "Failed to find desired element" );
phantom.exit( 1 );
return;
}
console.log( "- clicked, waiting 5 seconds" );
window.setTimeout(
function () {
after_clicked( page );
},
5000
);
}
// first function, create page, load page
function main() {
console.log( "+main()" );
var page = require('webpage').create();
page.open(
"http://sa.ttu.edu.tw/bin/home.php",
function (status) {
if ( status !== 'success' ) {
console.log( "Failed" );
phantom.exit( 1 );
return;
}
console.log( "- page loaded, waiting 2 seconds..." );
window.setTimeout(
function () {
click_div( page );
},
2000
);
}
);
}
main();

Lightbox closes on when clicking content

I have a lightbox with jwplayer inside of it and i also have links along with it, problem is that when I click one of the links it closes the light box and never goes to the link, almost as if there is a eventprevent function on the light box when there isnt... Any how this is my code I apprecaite any help I can get to to fixing this problem.
Thanks
jQuery.fn.center = function () {
this.css("position","fixed");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2 + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2 + "px");
return this;
}
jQuery.jwbox = {
lightbox : null,
player : null,
toggle : function(context) {
if (!$.jwbox.lightbox) {
$.jwbox.lightbox = $(".jwbox_hidden", context);
$.jwbox.center();
$("#jwbox_background").fadeIn("fast");
$.jwbox.lightbox.css("display","block")
$.jwbox.center();
$("#jwbox_background").fadeTo(0, 0.8);
$("object", context).each(function(){
$.jwbox.player = document.getElementById(this.id);
});
} else if ((context.className == 'jwbox_content')) {
} else {
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) {
}
$.jwbox.lightbox.css("display","none");
$.jwbox.lightbox = null;
$("#jwbox_background").fadeOut("fast");
}
},
center : function() {
if ($.jwbox.lightbox) {
$.jwbox.lightbox.center();
}
}
}
$(document).ready(function () {
$("body").append('<div id="jwbox_background"> </div>');
$(".jwbox").click(function () {$.jwbox.toggle(this); return false;});
$("#jwbox_background").click(function () {$.jwbox.toggle(this); return false;});
$(window).resize(function() {$.jwbox.center();});
});

I ran into a similar issue. I resolved it by switching to jQuery colorbox. See: http://jacklmoore.com/colorbox/#setting-overlayclose

Solution :
Use jquery.lightbox-0.5 file from the download package
Then in this file search for
// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
and remove it all.

Why is my javascript preventing the browser from going to a link

I have a script on http://joelglovier.com to add a class of "active" to each navigation element when it's corresponding section in the document. The script is adapted with permission from w3fools.com, so it was written without my scenario in mind.
The difference is that on w3fools.com, the nav links only refer to elements on the page, whereas in my navigation, there is one element at the end that refers to a new page.
The problem is that as I have adapted it, it works fine for the links that refer to sections on the page. However, for some reason unbeknownst to me (sorry - JS/jQuery novice) it is blocking the browser from following the link to the new page (the Blog link).
I tried reading through the code and understanding what the script is doing - however I cannot seem to understand why it is blocking that external link from being clicked, or more specifically how to fix it.
Can anybody suggest the simplest way to remedy my issue without breaking the original functionality of the script for it's purpose?
See it live here: http://joelglovier.com
Or...
Markup:
<div id="site-nav">
<div class="wrap">
<nav id="nav-links">
Top
Background
Projects
Random
Credits
Blog <span class="icon"></span>
</nav>
</div>
Javascript:
(function($) {
$(function() {
var $nav = $('#nav-links'),
$navLinks = $nav.find('a.scroll'),
cache = {};
$docEl = $( document.documentElement ),
$body = $( document.body ),
$window = $( window ),
$scrollable = $body; // default scrollable thingy, which'll be body or docEl (html)
// find out what the hell to scroll ( html or body )
// its like we can already tell - spooky
if ( $docEl.scrollTop() ) {
$scrollable = $docEl;
} else {
var bodyST = $body.scrollTop();
// if scrolling the body doesn't do anything
if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) {
$scrollable = $docEl;
} else {
// we actually scrolled, so, er, undo it
$body.scrollTop( bodyST - 1 );
}
}
// build cache
$navLinks.each(function(i,v) {
var href = $( this ).attr( 'href' ),
$target = $( href );
if ( $target.length ) {
cache[ this.href ] = { link: $(v), target: $target };
}
});
// handle nav links
$nav.delegate( 'a', 'click', function(e) {
// alert( $scrollable.scrollTop() );
e.preventDefault(); // if you expected return false, *sigh*
if ( cache[ this.href ] && cache[ this.href ].target ) {
$scrollable.animate( { scrollTop: cache[ this.href ].target.position().top }, 600, 'swing' );
}
});
// auto highlight nav links depending on doc position
var deferred = false,
timeout = false, // so gonna clear this later, you have NO idea
last = false, // makes sure the previous link gets un-activated
check = function() {
var scroll = $scrollable.scrollTop(),
height = $body.height(),
tolerance = $window.height() * ( scroll / height );
$.each( cache, function( i, v ) {
// if we're past the link's section, activate it
if ( scroll + tolerance > v.target.position().top ) {
last && last.removeClass('active');
last = v.link.addClass('active');
} else {
v.link.removeClass('active');
return false; // get outta this $.each
}
});
// all done
clearTimeout( timeout );
deferred = false;
};
// work on scroll, but debounced
var $document = $(document).scroll( function() {
// timeout hasn't been created yet
if ( !deferred ) {
timeout = setTimeout( check , 250 ); // defer this stuff
deferred = true;
}
});
// fix any possible failed scroll events and fix the nav automatically
(function() {
$document.scroll();
setTimeout( arguments.callee, 1500 );
})();
});
})(jQuery);

You're trying to tell it to scroll to "http://..." which doesn't exist on the current page, so it fails and does nothing.
It should work if you change your code to this
// handle nav links
$nav.delegate( 'a', 'click', function(e) {
// alert( $scrollable.scrollTop() );
e.preventDefault(); // if you expected return false, *sigh*
if ( cache[ this.href ] && cache[ this.href ].target ) {
// preserve http:// links
if (this.href.substr(0, "http://".length) == 'http://')
location.href = this.href;
else
$scrollable.animate( { scrollTop: cache[ this.href ].target.position().top }, 600, 'swing' );
}
});

Converted JavaScript to FBJS - tabs still not working

I tried my best to convert JavaScript to FBJS according to this page: http://wiki.developers.facebook.com/index.php/FBJS.
Yet my tabs are still not working properly. Does anyone have any suggestions how to fix this so I can click through the tabs and display and hide content accordingly:
<script type="text/javascript"><!--
var tabLinks = [];
var contentDivs = [];
function init() {
var tabListItems = document.getElementById('tabs').getChildNodes();
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].getNodeName("LI") ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].addEventListener(onclick, showTab)
tabLinks[id].addEventListener(onfocus, function() { this.blur() };
if ( i == 0 ) tabLinks[id].setClassName('selected');
i++;)
}
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].setClassName('tabContent hide');
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].setClassName('selected');
contentDivs[id].setClassName('tabContent');
} else {
tabLinks[id].setClassName('');
contentDivs[id].setClassName('tabContent hide');
}
}
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.getChildNodes().length; i++ ) {
if ( element.getChildNodes[i].getNodeName(tagName) ) return element.getChildNodes[i];
}
}
function getHash( url ) {
var hashPos = url.getLastIndexOf ( '#' );
return url.getSubString( hashPos + 1 );
}
init();
--></script>
Thanks for any response.

FBML tabs (which use FBJS) are deprecated now and will be disabled in the future. You should create a new application with IFRAME tab (which is by default now).
IFRAME tabs are just tabs with IFRAME inside, and your code is loaded into this iframe from a specified URL as any other web page. You can use any Javascript frameworks in it (like jQuery), so you don't need to learn how to write FBJS.

Setup a Facebook page that uses a Facebook app. Make sure you set up your app using an iFrame that points to a file on your server. You'll get a lot more freedom using an iFrame when it comes to Javascript and it's a great way to leverage a CMS if you're going to need to do that as well. Best of Luck!