We Keep Coding

Flip effect condition

So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)

You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.

How to override jquery _blank?

I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});

If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.

Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.

I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});

You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/

you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})

$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

jQuery drop in Social Sharing Buttons at the Bottom if inline buttons are not on screen

I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.
I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.
Anyone knows a library or some lines of code doing this?
Thx I really appreciate your expertise!

You could try like this
JS:
$( window ).scroll(function() {
if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
hiddenSocialButton.stop().animate({'bottom': 0}, 100);
else
hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})
jsfiddle demo

Please refer to this question. Used the reference to code this
HTML :
<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>
JS :
function triggerFunction()
{
if(isScrolledIntoView('.social_links'))
{
$('.bottom_links').fadeOut();
}else{
$('.bottom_links').show();
}
}
DEMO HERE

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...

You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.

Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});

You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.

Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});