Error with show popunder in tablet or Mobile - javascript

In my template I include a tool to show a pop-under when it is in tablet devices and other pop-under when it is other devices( cellphone, desktop,etc )
I tested and work perfect with banner, but when I try to use pop-under does not work, and I don';t know how fix it, If somebody can help me, thanks..
}
if(is_tablet==1) {
$("#tablet-ad-space").show();
$("#mobile-ad-space").remove();
}
else {
$("#tablet-ad-space").remove();
$("#mobile-ad-space").show();
}

Use hide() function insted of remove() because remove() remove element from DOM.

Related

Simple mobile jQuery dropdown menu not working on mobile

My issue is, that when the bar is pressed on my phone, it does nothing. When clicked on PC at the same resolution, it works without an issue. I'm not sure what to do, I haven't seen a fix anywhere else.
Here is the site that it is used on so you can see the issue first hand: http://www.briansamu.com
// This the jQuery
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
// The open class sets the height of the UL to: height: auto;
});
});
Thank you advance.
Click functions for phones are different from that of browsers. To fix these issues use Hammer Js which help in handling all click for mobile.
Is this issue is with iphone or ipad?
if this is the case try button instead of <a> tag

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.

Use JQuery to target Mac browsers not working

I am having some small layout issues with some of my elements when I bring them up on a Mac (with all browsers).
I have created this:
$(function() {
if (navigator.appVersion.indexOf("Mac")!=-1) {
console.log("HERE");
$('#topmenudisplay UL').addClass('topmenudisplaymac');
};
});
But it simply does not work.
I have placed this in my header below my CSS of course.
I cannot even see the console.log in my console, so the if statement is just not triggering.
Can anyone advice me on how to ammend this?

opening a new window through javascript

I need open a new window/popup with toolbar enabled.
I have this example: http://jsfiddle.net/Pnb7y/13/
That has this code:
window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=yes,resizable");
Toolbar is displayed well only in firefox, but not in chrome or ie
Do you know anyway to display toolbar in chrome?
NOTE: another thing I'd like is to hide the address...but I've read that this isn't possible due to security reasons...but if you know a way, I want to know.
Best regards, Daniel
function pollwin(url,w, h)
{
pollwindow=window.open(url,'pollwindow','top=0,left=0,status=no,toolbars=no,scrollbars=no,width='+w+',height='+h+',maximize=no,resizable');
pollwindow.focus();
}
window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=yes,resizable");
Use this
window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=yes,resizable",target="_blank");

Android WebView JavaScript onClick Bug

I have some JavaScript which adds some CSS when a button is clicked using the onClick() event. This works perfectly in all the browsers that have tested (Safari, Firefox, Chrome etc), and also works on all mobiles including within the iOS UIWebView object.
However although it works perfectly in the Google Chrome browser on an android phone it does not work within the Android WebView object. Nothing happens at all.
Changing it from an onClick() event to a touchstart() event works.
Also adding alert() inside the onClick() works too, it just seems that the onClick() event is incapable of adding CSS styling inside the Android WebView object
What the hell is going on, is this some kind of bug, it seems to happen on every Android mobile I have test on, all with a different OS version :S
Here is the code I have been using
if (login) {
login.addEvent('click', function(e){
e.stopPropagation();
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
});
}
Can anyone help??
I tried this "duplicate version" in nature JS and it's work for me:
if (login) {
login.onclick = myFunc();
login.addEventListener('click', function() {
myFunc();
});
}
function myFunc() {
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
}
You need to change
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
to
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
or
$('#login_items_wrapper').setStyle('opacity', '0');
$('#loading_content_login').show();
As you are not correctly referencing the elements.

Categories