Jump to content


BrowserBugs

Member Since 07 Feb 2012
Offline Last Active Yesterday, 03:56 PM
*****

Topics I've Started

SEO Section Guide

29 April 2017 - 01:17 PM

Hi Gang,

 

Yeah SEO section gets battered a lot by spammers but was just thinking would be nice to have a 'read this first' thread (locked) with links to PageSpeed Insights etc before people post 'whats wrong with my site SEO' threads. Also might help if threads in SEO required approval before starting, or some kind of 'duplicate question' option like stack.

 

Just a thought.


SQL vs PHP: DateTime Issue

07 April 2017 - 09:12 AM

Hi Gang,

 

Bit of a weird one, hoping someone can help. I've a 1 hour gap (UTC/BST) between SQL and PHP.

$q = "UPDATE `table` SET `updated` = NOW() WHERE `id` = ?";
// SQL table updates correctly with BST e.g. 2017/04/07 09:42:00, however the following at the same time...
echo date("Y-m-d H:i:s");
// This shows 2017/04/07 08:42:00 which is UTC.

Might be a bit green here, I always thought SQL time and php time would be the same as it would use system clock or am I missing something?

 

Cheers.

 

Edit: So I made a function for displaying current London time.

function londonTime() {
$a = new DateTime("now", new DateTimeZone("Europe/London"));
$a->setTimestamp(time());
return $a->format("Y-m-d H:i:s");
}

This works, but still not 100% sure why SQL takes BST into account so any explanation would be great, things like this niggle me ;)


Stuck on Aria Roles JS

30 September 2016 - 09:26 AM

Morning Gang.

 

I'm a little stumped with how to implement aria roles on a progressive responsive navigation. I've made some progress though i'm a little stuck as to where to go next.

 

I thought to add the <button> via js would mean no js = the nav wouldn't collapse, just reshape, then if js enabled insert the button and use the js to expand, collapse or restore to wide state, but the js button will hide above 960 but I think I need to toggle via the toggleNav() function.

 

I'm not sure now quite what to do about aria-expanded, aria-hidden, etc. Anyone got a good link to a guide or knows? I did some searching and came up with many different ways and wasn't sure which to believe or implement.

 

The HTML...

<div class="nav_bar shadow" id="nav_bar">
<div id="menu">Menu</div>
<nav role="navigation" id="nav"><ul class="title">
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 1</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 2</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 3</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 4</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 5</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 6</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 7</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 8</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Menu 9</span></a></li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement"><a href="#" itemprop="url"><span itemprop="name">Home</span></a></li>
</ul></nav>
</div>

The CSS...

#menu {display:none;}
@media only screen and (max-width : 960px) {
#menu{display:block;}
}

The JS...

function toggleNav() { if($('#menu').css('display') == 'none' ){ $('#nav').show(); $('#nav_bar').removeClass('nav_bar_closed'); } else { if($('#menu_button').hasClass('menu_on')){ $('#nav').show(); $('#nav_bar').removeClass('nav_bar_closed'); } else { $('#nav').hide(); $('#nav_bar').addClass('nav_bar_closed'); } } }
$(window).resize(toggleNav);
$(window).load(toggleNav);
$(document).ready(function(){
$('#menu').html('<button id="menu_button" class="title" aria-controls="nav">Menu<i class="fa fa-chevron-circle-down fa-fw fa-lg" aria-hidden="true"></i></button>');
$('#menu_button').click(function() {
if($('#nav').is(":visible")) {
$('#nav').slideUp(function(){ $('#nav_bar').addClass('nav_bar_closed'); });
$('#menu_button').removeClass('menu_on');
$('#menu_button i').removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
} else {
$('#menu_button').addClass('menu_on');
$('#menu_button i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
$('#nav_bar').removeClass('nav_bar_closed');
$('#nav').slideDown();
}
});
});

Cheers!

 

Edit: Think i've made some progress but anyone with experience can you tell me if i'm on the mark?

 

The JS...

function toggleNav() { 
	if($('#menu').css('display') == 'none' ){ 
		$('#nav').attr('aria-hidden', 'false').show();
		$('#nav_bar').removeClass('nav_bar_closed');
		$('#menu_button').attr('aria-expanded', 'true').attr('aria-hidden', 'true');
	} else { 
		$('#menu_button').attr('aria-hidden', 'false');
		if($('#menu_button').hasClass('menu_on')){
			$('#nav').attr('aria-hidden', 'false').show(); $('#nav_bar').removeClass('nav_bar_closed');
			$('#menu_button').attr('aria-expanded', 'true');
		} else { 
			$('#nav').attr('aria-hidden', 'true').hide(); $('#nav_bar').addClass('nav_bar_closed');
			$('#menu_button').attr('aria-expanded', 'false');
		}
	}
}
$(window).resize(toggleNav);
$(window).load(toggleNav);
$(document).ready(function(){
	$('#menu').html('<button id="menu_button" class="title" aria-expanded="true" aria-controls="nav">Menu<i class="fa fa-chevron-circle-down fa-fw fa-lg" aria-hidden="true"></i></button>');
	$('#menu_button').click(function() {
		if($('#nav').is(":visible")) {
			$('#nav').attr('aria-hidden', 'true').slideUp(function(){ $('#nav_bar').addClass('nav_bar_closed'); });
			$('#menu_button').attr('aria-expanded', 'false').removeClass('menu_on');
			$('#menu_button i').removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
			$('#menu_button').focus();
		} else {
			$('#menu_button').attr('aria-expanded', 'true').addClass('menu_on');
			$('#menu_button i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
			$('#nav_bar').removeClass('nav_bar_closed');
			$('#nav').attr('aria-hidden', 'false').slideDown().focus();
		}
	});
});