Showing posts with label browser. Show all posts
Qicktips : How To Detect Visitor Browser Type ( WordPress )
Sometimes we need to serve specific content or tweak to certain Web browsers. There are several ways to do so. For example, we can use the JavaScript BrowserDetect.browser function. We can also use the following comment tags to exclusively target Internet Explorer.
 |
Modernizr is useful for feature detection of the browsers, so that we are able to patch the functionalities that are not supported. We can also use CSS3 media query, though it is not designed to retrieve browser information, it is useful to address the website presentation particularly in mobile browsers.
PHP Browser Detection
However, all of those methods are only altering the front side, while the actual content in the document’s markup remain unaffected. Say, we have two <div> elements one for Internet Explorer, and one for the other. These two elements will actually remain on the document regardless of the browsers.
In some cases, these methods might not be the ideal solution. So, the only viable option would be to use the server-side language, like PHP. If you are using WordPress, there is an easy to do so with a plugin called PHP Browser Detection.
Conditional Functions
When this plugin has been activated, it will give you nothing in the Dashboard. Instead, it provides several conditional functions to use in your theme files – such as page.php, index.php and others. It allows detection in all popular desktop and mobile devices – such as iPad and iPhone.
Basic Usage
Let’s see some usage examples. Say, we want to show notification only to Internet Explorer users. We can write something like this inside the header.php under the <body>.
With a few style adjustment in the stylesheet, Internet Explorer users will see the following.
.jpg)
But, when we see it in other browsers – Firefox, Opera, Safari and Chrome– the notification markup is not generated.
As mentioned, we can also target for mobile devices, which is very useful to optimize your WordPress site on the mobile platform. Assuming that you have enabled the post thumbnail support in your theme, we can add the following function to your index.php to serve lower image resolutions in mobile device, and higher resolutions for desktop browsers.
Those are only a few examples, head over to the WordPress.org page to see about this plugin in more detail.
Browser Add-Ons To Enhance Your YouTube Viewing Experience
YouTube is a much-loved source of entertainment; some might think it’s taking over TV due to the sheer amount and types of entertainment: mini web series, tech and tutorial channels, lyric videos and covers etc. It’s no surprise that some of us can spend hours watching YouTube videos on our subscribed list while others can binge-watch recommended videos for the whole day
 |
However, there are minor annoyances with the viewing experience that even these YouTube tricks can’t fix. The common complaints (basically First World Problems) are like the layout being distracting, too much white space, and annoying (or awesome) advertisements that eats into your video-viewing time.
To conquer these problems, I am going to introduce to you the Tube Enhancer Plus for Firefox andYouTube Options for Google Chrome.
Awesome "Hidden" YouTube Settingsc
Both Tube Enhancer Plus and Youtube Options have some pretty cool features, ideal for the serial YouTuber. With them you can:
1. Remove advertisements – Both can let you skip the ads at the start of the video.
2. Enlarge player size – You can also enlarge the ‘video box’ size so that it fills up the space of your browser window for a closer and clearer view.
3. "Dim the lights" – This feature greys out the areas around the video box. This along with #2 maximizes the real estate of your large, high-resolution monitor.
.jpg) |
4. Set default viewing quality - If changing the video quality often irks you, then worry no more, you now need not manually change it.
5. Set autoplay settings - You can also set the autoplay settings so videos won’t automatically start playing when you open multiple videos in new tabs.
More From Tube Enhancer Plus (Firefox)
Installing Tube Enhancer Plus gives you a few controls at the bottom of your browser window to download or loop the current video on top of the other features mentioned earlier
 |
The coolest feature about this add-on is the ability to watch a video on the Firefox Sidebar. This allows (in)effective multitasking as you can surf the Web while watching all your videos.
 |
More From YouTube Options (Chrome)
YouTube Options for Chrome has more customizable features. You can hide elements of YouTubelike the comments section, video suggestions, video description, title, header and footer from the settings or its keyboard shortcuts. This gives you a super-clean YouTube player.
 |
Using the mouse scroll wheel while hovering the mouse cursor above the ‘video box’ lets you change the ‘video box’ size, forward/rewind the video, or change the volume level.
Certain features of YouTube Options can also be used on any embedded videos or on sites like Vimeo, Hulu and DailyMotion.
