Develop Reference

using jquery contains to get an element and add class

I'm trying to create dynamic navigation. When the screen size is that of a phone I am using a bootstrap list group but when I resize it I am using nav pills. What I'm trying to do is capture the current element with the active class so that when I resize the window it will add the class 'active' to which ever tag contains the text saved in variable currentTab. Currently I know I'm entering the changeActive function and have the text but I can not get it to add the active class.
<div id='navigation'>
<div class="list-group">
About
Animals
Adoptly
Blog
Events
</div>
</div><!--End of navigation-->
Javascript
$( document ).ready(function() {
var listHTML = '<div class="list-group">AboutAnimalsAdoptlyBlogEvents</div>'
var pillsHTML ='<ul class="nav nav-pills"><li role="presentation" class="active">About</li><li role="presentation">Animals</li><li role="presentation">Adoptly</li><li role="presentation">Blog</li><li role="presentation">Events</li></ul>'
function checkWidth() {
var windowsize = $(window).width();
var current = document.getElementsByClassName('active');
var displayText = current[0].textContent;
if (windowsize > 425) {
//if the window is greater than 440px wide then turn on jScrollPane..
$( "#navigation" ).empty();
$( "#navigation" ).html(pillsHTML);
checkActive(displayText);
}
else
{
$( "#navigation" ).empty();
$( "#navigation" ).html(listHTML);
checkActive(displayText);
}
}
function checkActive(currentTab){
console.log(currentTab);
$('a:contains(currentTab)').addClass('active');
}
checkWidth();
// Bind event listener
$( window ).resize(checkWidth);
$('#navigation').on('click','.list-group-item',function(e){
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
$(e.target).addClass('active'); // activated list-item
});
});
I created a different solution other than using contains so I'm going to post it here so that people know I've moved on but if someone actually has a solution using contains I will check back to pick as solution.
function checkWidth() {
var windowsize = $(window).width();
var current = document.getElementsByClassName('active');
var displayText = current[0].textContent;
if (windowsize > 425) {
//if the window is greater than 440px wide then turn on jScrollPane..
$( "#navigation" ).empty();
$( "#navigation" ).html(pillsHTML);
checkActive(displayText,true);
}
else
{
$( "#navigation" ).empty();
$( "#navigation" ).html(listHTML);
checkActive(displayText,false);
}
}
function checkActive(currentTab, bool){
console.log(bool);
if(bool)
{
$('li').removeClass('active');
var element = document.getElementById(currentTab);
$(element).addClass('active');
}
else
{
$('.list-group-item').removeClass('active');
var element = document.getElementById(currentTab);
$(element).addClass('active');
}
}

I saw your code and i think there is a misunderstanding, you're using your functions just when the document is ready, so your function $( window ).resize() its running just one time (when the DOM loaded) even if you resize the windows the DOM don't will change since you reload the pages and in this moment your functions runs but at the same time your active element will lose and the page will select the default element, so i suggest use the function:
$( window ).resize(function() {
//console.log("window size"+$(window).width());
//Here your code that change each time that you resize your window
});
I guess you want to create a response design page which its even more simple just adding css and using bootstrap features, just combine #media(max-min width) and add a collapse boostrap, this is a clear example of that: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_band_complete&stacked=h

Bind event on width change, not height (as resize do both);

I have next javascript code:
function() {
$( this ).on( "resize", $special.handler);
}
it works ok but I dont need this to trigger on height change, I need to work it only on a widht change.
So I'm trying to add an if statement inside resize detection and to bind $special.handler only if width changes.
Can't find a simple way to do this yet, so would you be so kind to help me find what I'm doing wrong?
For the moment I've ended up with next code
function() {
var widthBefore = $(this).width();
$( this ).on( "resize", function() {
if ($(this).width() != widthBefore) {
$(this).on( WIDTH CHANGE ONLY, $special.handler);
widthBefore = $(this).width();
}
});
}

There is no width change event but if context has to be maintained this can be used -
function() {
var widthBefore = $(this).width();
$( this ).on( "resize", function() {
if ($(this).width() != widthBefore) {
$.proxy($special.handler,this);
widthBefore = $(this).width();
}
});
}

Window re-size event breaks toggle after resize

I am having an issue with the below code. I created a window re-size event for a toggle div. The purpose is so when on smaller devices the header will toggle the content, otherwise the content is just displayed as is. The issue I am having is when I refresh the page, it works perfect. The second I resize it and click to toggle, it causes some sort of recursive call 5 times, so it toggles back and forth 5 times. Any suggestions?
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();

It is not recommendable to insert a click function inside a resize function, because you are adding click functions to the tag every time you resize. If you add an unbind to the "opener" before the click line it should work.
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).unbind("click");
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();

Removing class and attr at certain width issues

So, I have a menu that drops down. After, 955 (desktop) width the dropdown menu stays open using javascript and I am unable to close it, which is what I want. This works great, so when on a tablet the menu is closed but can be opened upon click, again this is what I want.
The problem occurs when I manually resize my screen width on desktop to tablet view, although its below 955 the menu stays open and I cant shut it. Please see this bootply example: http://bootply.com/86605
function checkWidth(init) {
if ($(window).width() > 955) {
$( "li#add" ).addClass( "open" );
$('#remove').removeAttr("data-toggle");
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});

Im not sure what the 'init' argument is for as it appears to be doing nothing but you need to add an another condition and remove the 'open' class.
function checkWidth(init) {
if ($(window).width() > 955) {
$( "li#add" ).addClass( "open" );
$('#remove').removeAttr("data-toggle");
} else if($(window).width() < 955) {
$( "li#add" ).removeClass( "open" );
}
}

function checkWidth() {
if ($(window).width() > 955) {
$("li#add").addClass("open");
$('#remove').removeAttr("data-toggle");
} else if ($(window).width() < 955) {
$("li#add").removeClass("open");
$('#remove').attr("data-toggle","dropdown");
}
}

function checkWidth(init)
{/*If browser resized, check width again */
if ($(window).width() < 640) {
$('.second_menu_mid').addClass('rmm');
}else {if (!init) { $('.second_menu_mid').removeClass('rmm');
} }}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});});

whats wrong with this code? im trying to change the height of each section to the height of window

whats wrong with this code? im trying to change the height of each section to the height of window.
function setsize()
{
var w=$(window).width();
var h=$(window).height();
var sections = new Array("home","about","skills");
for (var i=0;i<3;i++)
{
var element = document.getElementById(sections[i]);
$(element).height(h);
}
}
$(window).ready(function() {
setsize();
});
$(window).resize(function() {
setsize();
});
here is sample of the markup:
<section id="#home">
<h1>..................</h1>
</header>

Seems like a strange way to do that ?
$(window).on('resize load', function() {
$('#home, #about, #skills').height( $(this).height() );
});
You have to update the variables when the window changes size, i.e. inside the resize function
EDIT:
You'll also need a DOM ready handler, and window.onload isn't always triggered when doing it that way, so just do the same thing on DOM ready, like so :
$(function() {
$('#home, #about, #skills').height( $(window).height() );
$(window).on('resize', function() {
$('#home, #about, #skills').height( $(this).height() );
});
});
FIDDLE