We Keep Coding

Javascript override of media query

I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.
Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.
Update JSfiddle with JS commented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:
http://jsfiddle.net/or5vy17L/1/
HTML:
<ul>
<li class="menuButton">- Menu -</li>
<a href="index.html">
<li class="menu" >
Home
</li>
</a>
<a href="instagram.html">
<li class="menu" >
Instagram
</li>
</a>
<li class="menu">Clients</li>
<li class="menu">Nutrition</li>
<li class="menu">About Me</li>
<li class="menu">Contact</li>
</ul>
css:
li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}
ul {
text-align:center;
}
.menuButton {
display:none;
}
#media (max-width:768px) {
ul {
padding:0px;
}
li {
display:list-item;
border:1px solid white;
padding:.2em .2em .2em .2em;
border-radius:0px;
}
.menu {
display:none;
}
.menuButton {
display:list-item;
}
}
javascript:
/****
$('ul').on('click', '.menuButton', function() {
$('.menu').slideToggle();
});
****/

The .hiddenclass is staying hidden because it is a inline style, and inline styles override nearly all other styles. You have two options, one is to override the inline style with a CSS, as described in this CSS Tricks post:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
div[style] {
background: yellow !important;
}
JSFiddle Demo
According to this article, this CSS solution works in:
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome
Or, use JS or JQuery to remove the inline style when the screen is resized:
$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});
JSFiddle Demo

I seem to have come across this issue myself and following the advice here, I've come up with this solution:
window.onresize = function() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
if(window.innerWidth >= 1024) menu.style.display = '';
};
function toggleMenu() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
var link = document.getElementById('nav').getElementsByTagName('a')[0];
if(menu.style.display == 'block') {
menu.style.display = 'none';
link.innerHTML = '▼';
}else{
menu.style.display = 'block';
link.innerHTML = '▲';
}
}
Explanation:
The toggleMenu() function controls the display/hiding of the menu, and the issue presented itself after resizing the window from < 1024px (drop-down style menu) to > 1024px, my normal "desktop" menu disappeared completely. Given that JavaScript inserts styles inline (i.e. as a element attribute, ) then on a resize of 1024 or higher, this inline style should be gone.
Problem fixed.

Links for triggering a certain <div> to slide up and a link for triggering the <div> to slide down

I'd like to make some (let's say 2) links that will trigger a specific to appear by sliding up , then another link that will trigger the specific to huide by sliding down.
The links are generated dynamically by a certain application (something like looping which I personally don't understand)
After researching in this site, I tried the code below but found some problems:
only the first link for sliding up worked well, other blue links didn't work
Current script is sliding up and down the content for each click on the blue link.
I can't figure out how to break apart the script so I can apply sliding up script only for the blue links and the sliding down script for the red link.
to be noted, the blue links are dynamically generated based on a certain application loop, so practically there is no fix number for the amount of the blue links being displayed.
This is the code :
$(function(){
var list = $('#slidingcontent'),
button = $('#triggerup'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
button.toggle(function(e) {
e.preventDefault();
e.stopPropagation();
list.slideDown(speed);
},function(e){
e.preventDefault();
e.stopPropagation();
list.slideUp(speed);
});
});
#slidingcontent{
position:absolute;
}
.linkcontainer{
text-align:center;
}
.sliding_up_link a, .sliding_down_link a, #slidingcontent{
color:white;
margin: 1px;
padding: 1px;
text-decoration:none;
font-weight:bold;
}
.sliding_up_link a{
background:blue;
}
.sliding_down_link a{
background:red;
}
#slidingcontent{
background:green;
}
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup1 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup2 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_down_link" id="triggerdown" >
<a href ="#">
triggerdown (for sliding down)</br>
only one link (for triggering content to slide down) will be displayed
</a>
</span>
</div>
<div id="slidingcontent">
content here
</div>
</body>
Thanks for help :)

This works for me. I corrected the HTML validation errors in your code as well.
jQuery(function ($) {
$(document).ready(function() {
$("#slidingcontent").css({"display": "none", "opacity": "1"});
});
$(window).load(function () {
var speed = 500,
target = $("#slidingcontent");
$(".sliding_up").on("click", function () {
target.slideDown(speed);
});
$(".sliding_down").on("click", function () {
target.slideUp(speed);
});
});
});
#slidingcontent {
position:absolute;
bottom: -2px;
opacity: 0;
padding: 0!important;
}
.linkcontainer {
text-align:center;
}
p.sliding_up, p.sliding_down, #slidingcontent {
color:white;
margin: 1px;
text-decoration:none;
font-weight:bold;
}
p.sliding_up, p.sliding_down {
cursor: pointer;
display:inline-block;
}
p.sliding_up {
background:blue;
}
p.sliding_down {
background:red;
}
#slidingcontent {
background:green;
}
.wrap {
overflow-y: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="linkcontainer">
<p class="sliding_up">trigger up 1 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_up">trigger up 2 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_down">triggerdown (for sliding down)</p>
</div>
<div id="slidingcontent">content here</div>
</div>

Animation doesn't work correctly while scrolling the website

I have a problem with animation, when I scroll the page. You can see it above.
Click "show notice" button and wait about 2 seconds, then the notice will start to hide. Scroll up and down and you will see the notification is jumping up and down. What do I need to do to have notice always in the bottom of website window, even during scrolling?
JSFIDDLE
HTML
<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>
CSS
body {
height:3000px;
}
#notice {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:green;
text-align:center;
font:12px Verdana; color:white;
}
#notice p {
}
JS
function shownotice(){
if(typeof(ntimeout)!='undefined')
clearTimeout(ntimeout);
$('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
ntimeout=setTimeout(function(){hidenotice();}, 2000);
}
function hidenotice(){
$('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}
$(function(){
h=window.innerHeight||document.body.clientHeight;
$('#notice').css({'top':h-$('#notice').height()+'px'});
$('input').on('click', function(){shownotice();});
$(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});

http://jsfiddle.net/sn1xfwxm/11/
changes to your original fiddle:
#notice {
position:fixed;
removed the display: none, also!
the resulting js is much more simple:
$("#notice").hide(); //hide the notice on document load
$("#show").click(function () {
$("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
$("#notice").stop(true, true).slideUp();
});

JQuery tabs not switching

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

JQuery Stack of Cards

I have a stack of cards. They are stacked so each one has about a centimetre at the bottom visible. What I want, is when a card is clicked it moves to the right, then gets sorted to the top and moves to the left back onto the pile. I then wish to trigger a page change (to the page that's represented by the card).
How would I do this through JQuery? I'm still at a basic level with this language.
<style>
#cardStack{
height: 700px;
width: 400px;
overflow:visible;
}
#cardStack ul{
display:inline;
}
#cardStack li{
z-index:auto;
}
.top{
margin-top:-670px;
z-index:1;
}
.middle{
margin-top:-670px;
z-index:2;
}
.bottom{
margin-top:100px;
z-index:3;
}
</style>
</head>
<body><br /><br />
<div id="cardStack">
<ul>
<li class="bottom"><img src="images/cardA.png" /></li>
<li class="middle"><img src="images/card6.png" /></li>
<li class="top"><img src="images/card8.png" /></li>
</ul>
</div>
I know there's an animate function, but how would I initiate this on a click?
EDIT: Added more code above

for the hash change use ben alman's BBQ plugin
tried your code at jsbin
but because the link to the cards is missing the HTML doesn't render right
if you put here a working jsbin sample - helping you will be mush easier
concerning the animations: if you layout the Li's to have an absolute position, you can move them around freely,
so you can animate them to the left and then animate back and then change the z-index to put it on the top
[edit]
So.. here is a link to a quick solution:
you had some problems with the animations code, + better to change the position and not the marign
for ref the code:
$('#cardStack img').click(function ()
{
var img = $(this);
img.animate({left: '+=50px'},200,function()
{
img.animate({left: '-=50px'},200,function()
{
img.parent().prependTo($("ul"));
arrengeClasses();
});
});
});
function arrengeClasses()
{
var allListItems = $("#cardStack ul li");
for(var i=0;i<allListItems.length;++i)
{
allListItems.eq(i).removeClass().addClass("pos" + i);
}
}
and changed the css a bit:
#cardStack li img{
position:absolute;
top:0px;
left:0px;
}
.pos2{
z-index:1;
margin-top:100px;
}
.pos1{
z-index:2;
margin-top:50px;
}
.pos0{
z-index:3;
}

You can set an event to occur on any of the images being clicked like:
$('ul li img').click(function () {
$(this).animate( ... );
.
.
.
}
I can't give any more specific help without knowing the CSS you are using to "stack" the cards.

As for the part where you want to trigger a page change, you can use window.location to append a hash to the end. So your URL might end up being example.com/cards#joker