Develop Reference

Use an if else function to resize content using javascript

I'm new to the website so I apologize if I'm doing something wrong here.
Alright so here is my problem. I have 3 div next to each others. One of them is a menu, the second is a player and the third a chat box.
The set up is the following. When I open the menu to display the submenu, the player slides out to the right pushing the chat box under the player.
I thought of using javascript to resize the chat box size whenever the menu is triggered.
This is what I have so far :
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").css({"width": "30%"});
});
});
And it works!
The problem is when I close the sub menu and the player slides back to its original position, the chat box does not resize to its original size.
I feel like I need to use the if else function but I can't figure out the code.
Could you help me with the function please?
THIS IS THE WHOLE CODE : https://codepen.io/LAMUUZ/pen/JJrodY

Edit:
You can create a class having width 30%
.tempWidth {
width: 30% !important
}
Then use toggleClass on container and pass in the class.
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").toggleClass("tempWidth");
});
});
Did you try using toggle instead of click ?

you could use an if else statement and it might not be a bad exercise for you to use. in that case you should set a variable like on the intial click and then change that variable around...
Something like this
var makeDivSmall = true;
$(".zocial-youtube").click(function(){
if(makeDivSmall){
$(".container").css({"width": "30%"});
makeDivSmall = false;
}
else{
$(".container").css({"width": "100%"});
makeDivSmall = true;
}
});
You can also accomplish it with only one if statement like this:
$(document).ready( function(){
$('.zocial-youtube').click( function() {
var toggleWidth = "100%"
if($(".container").css("width") == "100%"){
toggleWidth = "30%"
}
$('.container').animate({ width: toggleWidth });
});
});
Also jquery has a method called toggle which can be convenient for things like this. The basic implementation just toggles an element visible state.
By the way you speak about sliding so maybe you want to put a slide effect when the width changes rather just snapping it to 30% ? have a look here
$( "container" ).animate({
width: "30%"
}, 1500 );

jquery's removeAttr function inside $(document).ready doesn't work

Got stuck with some trouble.
I got a page, where I use #media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected.
Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.
I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :
var func = function() {
var width = $(window).width();
var menu = $(".menu");
/*if it is tablet*/
if (width > 401) {
menu.removeAttr("id");
}
/*loading mmenu*/
$(function() {
$('#my-menu').mmenu({
slidingSubmenus: false,
zposition: "next"
});
});
};
$(document).ready = func();
I'll be very happy if someone clarifies where is my mistake.

You're binding document.ready incorrectly. It should be
$(document).ready(func);
You don't set the property, and you don't call your function.

Instead of removing the ID from #my-menu, you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.
if (width > 401) {
$(function(){
$('#my-menu').mmenu(...);
});
}

JS: Applying focus effect on an element when scrolled to

Here is the fiddle: http://jsfiddle.net/fz5Yk/5/
All I want to achieve is to highlight (e.g adding a background color) the heading (in <strong> </strong> tag) of the section-3 when I scroll to section-3.
I'd like to know if there's a way for me to trigger certain events when I'm at a certain section. There must be a thing for this because when you scroll the page manually, you'll notice that, in the navigation menu, link to the section gets selected automatically, as if it was clicked.
Anything helpful will be much appreciated as I've been working on this since yesterday and hav yet to solve it.

There isn't any way to achieve this using CSS, so I edited the jquery.nav.min.js. (added only 4 lines) It works great now. http://jsfiddle.net/fz5Yk/10/
adjustNav=function(a,b,d){
var sec = a.find("."+d+">a").attr("href");
$(sec+">strong").css('background','none'); //Find and remove previous highlight of strong
a.find("."+d).removeClass(d);b.addClass(d); //ORIGINAL
sec = b.find("a").attr("href");
$(sec+">strong").css('background','aqua'); //Find and highlight the strong
};
EDIT: Animation added by request:
http://jsfiddle.net/fz5Yk/11/
add animateSomething function on top:
function animateSomething(sec) {
if(sec == "#section-2")
$("#testBlock").animate({
width:"50%",
opacity:0.5
}, 1500);
}
add animateSomething(sec); at the end of adjustNav function.
Voila!
EDIT FINAL: Animate AFTER scroll ends http://jsfiddle.net/fz5Yk/12/

In your click action have something like this:
$("#container .section strong").css('background-color', 'transparent');
$("#container .section strong:contains('" + $(this).text() + "')").css('background-color', 'yellow');

Not sure if that's what you want exactly, but you could use this to add a class to the every strong which is currently in view:
$(document).scroll(function(){
var t = $(this).scrollTop();
var b = t + $(this).height();
$('.section>strong').removeClass('highlight').filter(function(){
var ot = $(this).position().top;
return ot > t && ot < b;
}).addClass('highlight');
});
http://jsfiddle.net/fz5Yk/7/
But it is a bit pointless in my opinion because when it's not in view why do you want to remove the highlight? It won't be visible anyway!?
If you really only want the functionality for section 3 you could change $('.section>strong') to $('#section-3>strong')

Resize text area to fit all text on load jquery

I understand there has been a lot of discussion on this but I have yet to find a solution to fix my needs. Basically I need to autogrow a text area not when you type but on load. I am pulling in content from a database and dependant on the user's settings an overlay is produced over the text area, but upon doing this the text areas are not scrollable therefore I need to autosize these to show all the text.
I have tried scrollHeight but this is not working great as there are multiple text boxes on the screen
Thanks

Try this
$("textarea").height( $("textarea")[0].scrollHeight );
DEMO
UPDATE
As a hack to make it work in older IE-s just add a really short delay before executing it
window.setTimeout( function() {
$("textarea").height( $("textarea")[0].scrollHeight );
}, 1);​
DEMO
UPDATE FOR MULTIPLE TEXTAREAS
$("textarea").each(function(textarea) {
$(this).height( $(this)[0].scrollHeight );
});

This worked for me; it loops through all "textarea" elements on page Ready, and set their height.
$(function () {
$("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});
You can also combine it with an auto-expand function, to make it fully dynamic while writing as well:
function autoresize(textarea) {
textarea.style.height = '0px'; //Reset height, so that it not only grows but also shrinks
textarea.style.height = (textarea.scrollHeight+10) + 'px'; //Set new height
}
and call that from an "keyup" event or through jQuery:
$('.autosize').keyup(function () {
autoresize(this);
});
Note how I am adding 10px to the scroll height: here you can adjust the amount of space you would like the bottom of the text area to give the user.
Hope that helps someone. :)
Edit: Changed answer according to #Mariannes comment.

you can use this. It works for me.
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>

You mentioned there are multiple textboxes. This code will set the height of each textarea according to its own contents.
$(document).ready( function( ) {
$("textarea").each( function( i, el ) {
$(el).height( el.scrollHeight );
​});
});
Fiddle here

Alternatively, you could use an editable div in HTML 5.
Reference : http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

This is an workaround.. and maybe an alternative solution:
$('textarea').each(function(){
var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>')
.html($(this).val())
.appendTo('body')
.height();
$(this).css('height',height + 'px');
$('#my-hidden-div').remove();
});
You can see a demo here http://jsfiddle.net/gZ2cC/

The solution of Tormod Haugene worked for me.
But my textareas where in an accordion and apparently it only worked if the textarea was visible on page load. The accordion items are triggered by clicking on elements with the class "title".
So I adapted the code Tormod Haugene to work inside accordion contents, that are set to display: none on page load.
Maybe this is useful for someone else in this situation:
jQuery(document).on('click', '.title', function () {
jQuery("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});

JQuery Slide Event and Div Height not changing as expected

I am working with JQuery and I'm trying to change the html of a div box when the child div slides in and out. My problem is that the code below isn't changing the html value of #menu_text. It only displays Hide Menu and is not detecting the real height as changed by slideToggle.
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
console.log('Debug : %s', $('#menu_links').height());
if ($('#menu_links').height() == 1)
$('#menu_text').html("Show Menu");
else if ($('#menu_links').height() == 20)
$('#menu_text').html("Hide Menu");
});
});
Upon inspection in firebug console, The value of height never changes from 20 unless you click the div really fast multiple times then it will change to 1. (I should add that the height defined in the style sheet is 20)
The doc says that slideToggle only affects the height of the object. Am I missing something? Thank you for the help.
<div id="menu"><p id="menu_text">Show Menu</p>
<div id="menu_links">
Stuff
</div>
</div>

Try:
$('#menu').click(function(){
$('#menu_links').slideToggle('slow', function(){
$('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
});
});
There you'll set the text of the menu depending on if the links element is visible or not. You're probably better off not depending on element's heights and widths, as in the worst case they might vary from browser to browser (and in this case, they'll also change according to the content of the links element).

You could also use data() to save your state. It's a great trick to save state or anything
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
var $this = $(this);
var toggled = $this.data('toggled');
if (toggled)
$('#menu_text').html("Show Menu");
else
$('#menu_text').html("Hide Menu");
$this.data('toggled', !toggled)
});
});