We Keep Coding

toggle div to show hide

I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});

You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});

you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.

you are sure you need "==" to set the value? or one "="

Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

Hide div based on value of attribute?

I'm looking to change the class (hide) of certain div's dependent on their attribute values.Here's my code, it might make a bit more sense once you've seen this:
jQuery('#menu1').click(function() {
jQuery([.attr('imageref')]!=[.attr('menuref')]).removeClass('pics').addClass('.pics-hidden').removeClass('pics').fadeOut(200);
jQuery('#projectimages').masonry('reload');
});
So what I'm after is that if you click on #menu1 it will remove .pics with the same imageref attribute as the #menu1 atrribute menuref.
So clicking on #menu1 which has menuref equal to 1, will hide the relevant .pics with an imageref also equal to 1.Hopefully that makes sense, any help would be greatly appreciated!

You can use the css selectors to make this.
ie:
jQuery('#menu1').click(function()
{
jQuery('[imgeref="menuref"]').removeClass('pics').addClass('pics-hidden');
});
edit:
this will search all the elements wich his atribute 'imageref' is set to 'menuref' and then remove the class pics and add the class pics-hidden.
if it's only necesary to img tags. then you could change:
jQuery('[imgeref="menuref"]')
to
jQuery('img[imgeref="menuref"]')

You might use the jQuery filter function.
http://api.jquery.com/filter/
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
var menuref = ("#menu1").attr('menuref')
// Get all pics with an imageref attribute
jQuery(".pics[imageref]")
// Filter them
.filter(function(){
return $(this).attr('imageref') != menuref;
})
// Do what ever you want e.g. remove the pics class
.removeClass('pics')

You use the attribute-equals selector, and concatenate into the selector the value of the menuref attribute.
jQuery('#menu1').click(function() {
var menu = $(this).attr('menuref');
jQuery(".pics[imageref='" + menu + "']").toggleClass('pics pics-hidden')
.fadeOut(200);
jQuery('#projectimages').masonry('reload');
});

removeAttr() not applied?

I'm using zepto.js for my current project which has the same removeAttr() method as jquery has.
i'm applying a margin-top to a bunch of elements – works fine.
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.css('margin-top', '100px'); //works fine
However I also need to remove it again in a resize-event.
if ( $(window).width() <= 984 ) {
//$apply.removeAttr('style'); //doesn't take effect
$apply.css('margin-top', '0'); //works fine
console.log('< 984');
}
So i'm able to set the margin-top back to 0 but can't completely remove the style attribute from the selector.
Any ideas why? I don't get any erros, it just doesn't take effect.

The correct way to remove it, is by not setting a value when using the .css.
$apply.css('margin-top', ''); // remove property
When a value for a property is empty, that property is removed.
Read more here.

From http://api.jquery.com/css/
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '') — removes that property from an element
if it has already been directly applied, whether in the HTML style
attribute, through jQuery's .css() method, or through direct DOM
manipulation of the style property. It does not, however, remove a
style that has been applied with a CSS rule in a stylesheet or
element.
So you can use $apply.css('margin-top', '') to remove the margin-top style.
Use .removeClass() to remove all styles from the element.

I would recommend creating a CSS class that you add and remove instead.
This way you can easily modify the margin value in one location and not have to change it in multiple locations.
CSS:
.myMargin { margin-top : 100px; }
JS:
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.addClass("myMargin");
In the resize event:
if ( $(window).width() <= 984 ) {
$apply.removeClass("myMargin");
console.log('< 984');
}

Get elements in jQuery where "x" attribute = "y"

How can I change the attribute of an element, depending on another attribute?
For example, I have 2 <a> elements. They both have the class myClass. One of the elements has rel="1" and the other has rel="2". I wish to only change the z-index on the one which has rel=1. How do I do this?
I've tried:
$(".myClass[rel='1']").css("z-index", 10);
But it doesn't work. Cheers.

try this:
$(".myClass[rel='1']").css('display', 'none');
and see if it disappears. Then you will know if it is your selector, or positioning.

As z-index contains a hyphen you have to reference it in camel case:
$(".myClass[rel='1']").css("zIndex", 10);

Changing more than one style attribute with Javascript

I need to change more than one style attribute for a given element. I know how to change one: document.getElementById(today).style.visibility= "visible";
but am unsure of the syntax for changing more than one e.g. visibility,width, height and font-color.

It's just multiple calls:
document.getElementById(today).style.visibility = "visible";
document.getElementById(today).style.color = "red";
document.getElementById(today).style.height = "5em";

If you are willing to replace any other inline styles for that element you can use the style.cssText property.
document.getElementById('idstring').style.cssText=
'font-size:1em;color:blue;visibility:visible';

You need to reference each attribute one at a time, i.e. .style.width=, .style.height=, etc.
You could shorten the amount of typing you do a bit like so:
var g = document.getElementById(today);
g.style.width=100;
g.style.height=100;
g.style.visibility='visible';

CSS way would be to create a class that does all the styling common to those elements and assign the class attribute to them,
alternatively, if they are inhertiable styles then put the elements in a common parent say div and set the div's style