We Keep Coding

Not run script if window's width is smaller than value

I have a responsive website, with some jQuery code, of which some is the following:
<script>
$(document).ready(function(){
$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").show();});
$("#D1200C36LPB3").click(function(){$("#D1200C36LPB3_details").show();});
$("#D1-3CA36LPB3").click(function(){$("#D1-3CA36LPB3_details").show();});
$("#D1-0CA36LPB3").click(function(){$("#D1-0CA36LPB3_details").show();});
$("#D700S36LPB3").click(function(){$("#D700S36LPB3_details").show();});
$("#D700S24LMB3").click(function(){$("#D700S24LMB3_details").show();});
});
</script>
All of the div elements above (#D1000C36LPB3_details, #D1200C36LPB3_details, #D1-3CA36LPB3_details...) have a CSS display property value of none, so by default they aren't visible until you click on one of the div elements above (#D1000C36LPB3, #D1200C36LPB3, #D1-3CA36LPB3...) and then the corresponding div is displayed.
However, when the jQuery script runs, it sets the corresponding div display value to block. When the viewport's/window's width is smaller than say 400 px, I want the script to display them with position: fixed;.
My suggestion
I've figured out I can display them with fixed position using:
$("#corresponding_ID").css("display", "fixed");
But I still have to not let jQuery run the first script (the one using .show()).

Don't set css styles directly this way. As already commented, use e.g. a .visible class and let css media queries decide. Example:
#media screen and (max-width: 399px) {
.visible {
display: fixed;
}
}
#media screen and (min-width: 400px) {
.visible {
display: block;
}
}
Then, in your click handler, go as follows:
$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").addClass('visible');});
Also, if your details containers all follow that naming scheme with affixing _details to the id, it'd be easier to put all ids in an array and iterate over that:
$(document).ready(function(){
var ids = [ "#D1000C36LPB3", "#D1200C36LPB3", "#D1-3CA36LPB3", "#D1-0CA36LPB3", "#D700S36LPB3", "#D700S24LMB3"];
for (var i = 0; i < ids.length; i++) {
$(ids[i]).on('click', function () { $(ids[i]+'_details').addClass('visible'); }
}
};

Easy way to check for browser width with Jquery:
var width = $(window).width();
if (width >= 1024) {
-- Code to execute here --
}else{
-- Other code to execute here --
}
Then you can adjust the width you are looking and update the >= based on what you want to do.
Let me know if this doesn't make sense.

Asynchronously set or override CSS properties under specific #media query using jQuery

I know how to set one or more CSS properties for every matched element using such jQuery function: $( 'p' ).css( 'color', 'red' ); But how can I set CSS properties under specific media query's rule?
Can you give me an idea how to set the attribute of the color (lets say) of <p> element under specific media query using JavaScript/jQuery as what you see below?
#media (max-width: 600px) {
p {
color: red;
}
}
Update
Lets say we have a color picker control (such in WP Customizer) and an HTML element that will asynchronously change its color under #media (max-width: 600px) based on the color control. Now how can I asynchronously set CSS properties under specific #media query based on a color control?

you can use Window.matchMedia() (no jQuery required)
something like this:
if (window.matchMedia("(max-width: 600px)").matches) {
/* the viewport is less than 600 pixels */
}
Snippet ( value changed for demo )
if (window.matchMedia("(max-width: 800px)").matches) {
var p = document.getElementsByTagName('P');
for (var i = 0; i < p.length; i++) {
p[i].style.color = 'red';
}
}
p {
color: blue
}
<p>text</p>

Based on dippas answer but checking the width all the time to apply the style when change:
var mediaquery = window.matchMedia("(max-width: 600px)"),
text = document.querySelector("p");
function mediaChange(mediaquery) {
if (mediaquery.matches) {
text.style.color = "blue";
} else {
text.style.color = "red";
}
}
mediaChange(mediaquery);
mediaquery.addListener(mediaChange);
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

You need to to use the window.with with the resize option.
$(window).resize(function(){
if ($(window).width() <= 800){
$('element').css({color: 'red'})
}
});

You could even do that using jQuery resize() method. Media query too in other words is if condition, i.e. we are checking that if #media (max-width : 600px) max-width is 600px or lessthan 600px so at that point perform changes in my DOM.
Try this jsFiddle.

what is the alternate way to do a function based on window width jquery?

I am trying to show the button and hide the stuff when the width <450, if >450, do the switch way, hide the button and show the stuff. There is no problem to hide and show with the css code, but the problem is once I click the button in <450, the stuff show up, if I go back to >450 screen, the button will not hide again. I had tried to put window.resize in the jquery, it give me weird performance. Click run the code to see it. Appreciate.
if ($(window).width() < 450) {
var show_stuff=$('#all_vote_menu');
var button_menu=$('#button');
$(button_menu).on('click', function(){
$(show_stuff).show(400,'swing');
$(button_menu).hide();
});
$(document).mouseup(function (e){
if (!show_stuff.is(e.target) // if the target of the click isn't the container...
&& show_stuff.has(e.target).length === 0) // ... nor a descendant of the container
{
$(show_stuff).hide(400,'swing');
$(button_menu).fadeIn();
}
});
}
#button{
display:none ;/*hide when >450px*/
}
.all_vote_menu{
width:200px;
height:200px;
background:yellow;
}
#media screen and (max-width: 450px) {
#button{
display:block ;/*show when <450px*/
color:green;
}
.all_vote_menu{
display:none;/*hide when <450px*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" name="all_vote_show" value="Menu"/>
<div class="all_vote_menu" id='all_vote_menu'>hello</div>

you don´t need the if condition to verify the window width because the button is only accessible when the window is smaller then 450px.
remove this and it works.
Try this DEMO
jquery code:
var show_stuff=$('#all_vote_menu');
var button_menu=$('#button');
$(button_menu).on('click', function(){
$(show_stuff).show(400,'swing');
$(button_menu).hide();
});
$(document).mouseup(function (e){
if (!show_stuff.is(e.target) // if the target of the click isn't the container...
&& show_stuff.has(e.target).length === 0) // ... nor a descendant of the container
{
$(show_stuff).hide(400,'swing');
$(button_menu).fadeIn();
}
});

Get rid of the width check if ($(window).width() < 450) {
Add check in the if that is doing the showing
$(document).mouseup(function (e){
if ($(window).width() >= 450 && !show_stuff.is(e.target) ...

Hide elements on navbar when changing screen's width

I'm currently use Bootstrap v3.3.0 and i would like when user change the width of screen, the last elements of the navbar (LINKs before dropdown list) disappear and be added at the dropdown list.
Can I do that with Bootstrap or any JS library ?
Example of navbar : http://getbootstrap.com/examples/navbar/
Thanks in advance.

You should probably use the following approach:
Add them twice, so in the normal menu and in the dropdown. Then in CSS display or hide them when needed.
#media (min-width: 768px) {
#item_link1
{
display:none;
}
}
#media (max-width: 768px) {
#item_link2
{
display:none;
}
}

Use Jquery functions
$(window).on("orientationchange load resize", function () {
var width = $(document).width();
if(width<765){
// $("#elementID").hide();
// code for other elements hide stuff
}
else if(width>765){
// for show iamges
}
});

element css follows jquery declaration, not stylesheet

I have this initially in my .css stylesheet:
#media only screen and (min-width: 901px){
#main_panel {
width: 750px;
}
}
#media only screen and (min-width: 300px) and (max-width: 900px), handheld {
#main_panel {
width: 500px;
}
}
And then after some user interaction, this jQuery command changes this CSS-value:
$("#collapse").click(function() {
if ((($(window).width()) >= 600) && ($(window).width() <= 900)) {
$("#main_panel").animate({width: "500px"}, 'slow');
}
});
When I resize the window to more than 901px, it still follows the recent declaration by the jQuery and not the CSS-declaration in the stylesheet for 901px.
How to prioritize CSS-declaration when resizing the window?
Or how do you handle this better?
Please don't make me rely to $(window).resize() event forever :) That disregards the CSS.

** EDIT **
If you want to give priority to the CSS and still be able to animate it, what you probably need is this:
http://jsfiddle.net/2Fe22/1/
1) create a "normal" panel class and style it
.panel {width:750px;height:400px}
2) create a collapsed class and style it
.collapsed {width:500px}
3) create a function to read the collapsed and normal widths from the css:
function getClassWidth(aClass) {
return parseInt($("<div />").addClass(aClass).css('width'));
}
4) handle the click by first animating and then (at the end of the animation) add or remove the "collapsed" class to the panel and removing inline styles left by the animation:
var collapsed=false;
$("#collapse").click(function() {
collapsed=!collapsed;
if(collapsed) {
$("#main_panel").animate({width: (getClassWidth('collapsed'))+"px"}, 'slow',afterAnimation);
} else {
$("#main_panel").animate({width: (getClassWidth('panel'))+"px"}, 'slow',afterAnimation);
}
});
function afterAnimation() {
if(collapsed) $("#main_panel").addClass( "collapsed" ).removeAttr("style");
else $("#main_panel").removeClass( "collapsed" ).removeAttr("style");
}
You do this, so if the user resizes the window and the css changes your screen updates correctly.
** OLD POST (for reference) **
If you set sizes with JQuery you may go on setting them this way:
var collapsed=false;
$( window ).resize(calculateNewSizes); // When resized
calculateNewSizes(); // At startup
function calculateNewSizes() {
if(collapsed) {
// if screen width < xxx set elemt width to yyy, etc.. collapsed version
} else {
// if screen width < xxx set elemt width to yyy, etc..
}
}
// This toggles the collapsed state if user clicks on an element
$("#collapse").click(function() {
collapsed=!collapsed;
calculateNewSizes(); // or do the animation here
});
This script should be called as fast as possible after the beginning of all the elements to be resized to avoid a FOUC.
<div class="to be resized">
<script>
//do the $( window ).resize(...) here
</script>
... all other stuff </div>.
Warning, this code is UNTESTED. It is just to show an idea.

Since you are using jQuery Animate, the element style will directly receive width value.
Like this:
<el id="mainpanel" style="width: 500px">
This will always override any css on the element unless you use !IMPORTANT:
width: 100px !IMPORTANT;
http://codepen.io/rafaelcastrocouto/pen/suEHn (DEMO)
Notice that you should avoid that since you won't be able to change this if you need.