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.
Related
This is the jQuery code that I am using in my WordPress website, and it's working fine.
jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})
});
I just want the code to stop working at the screen width of 766, on 766 the code does not have to work.
Let me know if there is something that can make this possible.
Thanks,
Abdullah
Consider the following.
jQuery(document).ready(function($){
$(document).on("click", ".selected", function() {
if($(window).width() < 766){
$('.wvg-single-gallery-image-container').hide();
}
});
});
If the document is not very wide, less than 766, the button will perform the action. Otherwise, nothing will happen.
See More: https://api.jquery.com/width/
You can use mediaMatch to test against a media query…
if (window.matchMedia('(max-width: 766px)')) {
$('.wvg-single-gallery-image-container').css('display','none');
}
…but that approach isn't a great one. Consider what would happen if the user resized the window after the JS had run. The inline style you are adding would still be there, but based on the wrong window size.
Instead, use JS to add and remove classes from elements. Then use those classes in your CSS with media queries.
$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);
I have a button which acts as a 'copy url' button. This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. On most mobile sites users must manually copy URLs.
So, I want to remove my 'copy url' button once a mobile device has been detected.
Before you grill me, yes I've read:
Hiding DIV if using mobile browser
I tried the solution mentioned in that thread, however it does not work. Any idea why? Here is my codepen:
http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
Much appreciated.
It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:
The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:
Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.
Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.
E.g.:
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test'), it can't get it. You have to wait until it is fully ready.
Wrap your Javascript code in the ready function provided by jQuery:
$(document).ready(function () {
// your code goes here
});
This code will only be executed once all the DOM has been loaded.
Have a look at the documentation.
A simple way to do this is just add class to the html element when match some situation.
And use a selector to hide the elements you want you hide only when the class exist
This allows you to hide element even the <body></body> haven't actully loaded.
Besides, it requires minimal DOM operation.
So it won't lag the page when there are too many elements needed to hide.
Just put the codes in the <head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
Does anyone look at his codepen? Hey guy,
you did not include Jquery while using it. Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
you put your script in wrong section, move it to JS section.
the mobile variable you obtained should be used in an IF statement. Example,
if (mobile)
$('.test').css('display', 'none');
else
$('.test').html('This ELSE leg should be removed');
Finally, getting the opinion of other answers that you should wrap your code inside a $(document).ready() function.
Here is an example and it do work. http://codepen.io/anon/pen/QweBgq
Another way that does not use Javascript is that you use CSS. Try below code in CSS section.
.test {
display: none;
}
#media (min-width: 768px) {
.test{
width: 200px;
height: 50px;
background: red;
display: block;
}
}
I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).
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();
});
});
I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.