spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

running jquery media query without reload


Instead of binding on load of the page, put the code in a function and call that function when you want it to be called. I added it in a function and called on click of a button for the demo.

Demo

$(document).ready(function () {
 $('button').on('click', function () {
    if (checkWidth()) { //checking width of window
before binding the focus event
        onFocusHandling();  
    }
 });
});


function onFocusHandling() {
 //you can also add the checkWidth() here than
above
 $(".s").on("focus", function () {
    $('.yellow').hide();
 });

 $(".s").on("blur", function () {
    $('.yellow').show();
 });
}

function checkWidth() {
 return ($(window).width() < 960);
}

Updated

Fiddle

Called the function onFocusHandling on window resize and on document ready

$(document).ready(function () {
 onFocusHandling();
 $(window).resize(function () {
    onFocusHandling();
 });
});

function onFocusHandling() {

  if (checkWidth()) {
    $(".s").on("focus", function () {
        $('.yellow').hide();
    });
    $(".s").on("blur", function () {
        $('.yellow').show();
    });
  }
  else {
   $(".s").off("focus").off("blur");        
  }
}

When the width is maximized unbind the focus and blur event.


Categories : Javascript

Related to : running jquery media query without reload
Load jquery script based on CSS media query
Depending on your compatibility needs, one solution would be to use window.matchMedia() if (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */ $('.your-link-class').click(function (event) { event.stopPropagation(); return false; }) }

Categories : Jquery
Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?
You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't). Check for portrait orientation with CSS and rotate the body if necessary: @media screen and (orientation:portrait) { body { transform: rotate(-90deg); transform-origin: 50% 50%; } rotating the body in this way will not cause it's width and height to update to suit it's new orientation s

Categories : CSS
Turning two sections into one using media query
You have to update media query to: @media screen and (max-width: 700px) { .ms-left, .ms-right { width: 100% !important; } } Fiddle: http://jsfiddle.net/929u1za0/1/

Categories : Jquery
Reload div content without page reload
If the content comes up from server side processing, then something like this should work $('#targetDiv').load('http://yourserver.com/test.html'); Check out this post as well http://api.jquery.com/load/ If the content is locally computed, then set its innerHTML property?

Categories : Jquery
Running SQL query returns error in SQL syntax
DELETE FROM WHERE eav_attribute Yeah, delete but from where actually? you are missing the table name DELETE FROM `eav_attribute` WHERE attribute_code = 'tipo_pessoa'; ^ ^ Same for ALTER TABLE DROP COLUMN // Alter which table? All but a couple of your queries are missing that.

Categories : PHP
Recently Add
Busy Indicator while page is loading
parent.document.getElementById and images path
Can not get bootstrap datetime picker to display properly
reading select box jquery issues
DC.JS Pie Chart + Select Deslect from external JavaScript function
Why would I ever need to cancelAnimationFrame()
Angular.ui alert doesn't close
HTML/JS How to position a rectangle relative to 'any' side of the parent canvas element
parse variable to xml
C# Dictionary equivalent in JavaScript
ExtJS Dashboard Panel Fit Panel Vertically
jQuery cross domain ajax call - Interpreted as script but transferred with MIME type text/xml
Reactjs map returns unexpected token }
Working with multiple pages in apache cordova and vs2013
Resize iframe to loaded content
Why 13596*0.1 is different than 13596/10?
AngularJS Validate all forms on application load
javascript open popup without menu/url/titlebar/scrollbar/anything
Can I use Razor syntax inside Javascript included in a ScriptBundle?
How to show a box for comment reply with id
parse name from user input when using jquery serialize
How to parse and load javascript object?
Marionette not navigating to the same url
Adding Google+ Sign in button to website
GRUNT - Install Grunt Packages?
how should I create the path of templateUrl property in Angular ui-router?
Update mysql database with jquery array using ajax
Run the same function on each item in a list / array
Get all ticks values (NVD3)
Button Click Event not Passing input String to MVC Controller Method
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.