We Keep Coding

Shuffle only one child DIV based on class

I would like to shuffle specific DIVs (based on class) around on each page load.
Note i'm using a Wordpress Theme and as such, do not have full control over HTML structure without changing base themes (which i'm not willing to do)
jfiddle is here.
$(function() {
$(".shuffle").each(function() {
var parent = $(this),
divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});
Parent DIV class = "shuffle"
Child DIVs class = "shuffle-child"
What am I doing wrong? Apologies for lack of JS experience!!

For your particular scenario you can use the following, adapted for jQuery from https://stackoverflow.com/a/11972692/2413733 #AlexeyLebedev's answer using the Fischer-Yates Shuffle.
var shuffleKids = $('.shuffle-kids'), // the elements to shuffle
shuffle = shuffleKids.parent(); // the container div
for (var i = shuffleKids.length; i >= 0; i--) {
shuffle.append(shuffle.children()[Math.random() * i | 0]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='shuffle'>
<div class='shuffle-kids'>milk</div>
<div class='shuffle-kids'>butter</div>
<div class='shuffle-kids'>eggs</div>
<div class='shuffle-kids'>orange juice</div>
<div class='shuffle-kids'>bananas</div>
</div>

If element is scrolled on data-attribute then

I have two headers (menu1 - default, menu2 - display:none).
In sections of website I added special attribute (data-ix="change-header").
I want to have the effect.. that if I will scroll site and if we scrolled on section where data-ix="change-header" then header will be other - so menu1 will be display:none and menu2 will be display:block;
I have something like that, but I don't know how I can use scroll.
if ($(this).attr("data-ix") == "change-header"){
$("‪#‎menu1‬").css("display","none");
$("‪#‎menu2‬").css("display","block");
} else {
$("#menu1").css("display","block");
$("#menu2").css("display","none");
}
My html looks like that:
<header id="menu1"></header>
<header id="menu2"></header>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<footer></footer>
Help :)

You can take a look at this: http://janpaepke.github.io/ScrollMagic/
It's only 6Kb gzipped, and it lets you animate elements or toggle CSS classes based on scroll position :)

You can compute the threshold values at which you will change header (or not). Something like this
var thresholds = [];
$('.test').each(function(i, e) {
// after we scroll past the top coordinate of this element,
// either show or hide the second header, based on the presence
// of the data-ix attribute
thresholds.push([e.offsetTop, $(e).data('ix') === 'change-header']);
});
Then, consult these thresholds on every scroll event
// cache menu elements
var $menu1 = $('#menu1'), $menu2 = $('#menu2');
// update header once, and listen on scroll
update();
$(window).on('scroll', update);
function update() {
// pick first visible threshold
var scrollTop = $(this).scrollTop(), thresh;
for (var i = 0, len = thresholds.length; i < len; ++i) {
thresh = thresholds[i];
if (thresh[0] >= scrollTop) break;
}
// update header as necessary
if (thresh[1]) {
$menu1.hide();
$menu2.show();
} else {
$menu2.hide();
$menu1.show();
}
}
Here is a working Plunker.

Changing html tag structure on window resizing

I would like to rebuild an html tag structure to a new one on resizing the browser window. Have anyone an idea how can I get from the first structure to the second structure. I need this for an responsive personal project. Maybe with an JavaScript resize Event, I don't know...
<div class="wrapper">
<div class="slide">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="slide">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

You could listen to the resize event on the window and then restructure your HTML when the window is below a certain size. Moving elements from the first structure to the second isn't a big problem, however the challenge lies in reverting that again. How will you know which of the .item's belonged to which .slide?
One way to do this is to keep track of the parent for each .item in a separate data- attribute when you make the list:
function makeList() {
var $slides = $('.slide'),
$items = $();
// For each slide set a data-attribute on all its child .item's
$slides.each(function(i) {
var $item = $(this).children('.item');
$item.attr('data-slide', i+1);
$items = $items.add($item);
});
// Append all items directly to the wrapper
$('.wrapper').html($items).attr('data-structure', 'list');
}
I set a data attribute to the .wrapper so we know that it's already converted to a list. Otherwise on every resize this would be fired, you only want it once (until it resizes back to where you want the slides).
When you want the slide again, loop through all the .items and keep a list of slide number's. For each new data-slide number you encounter make a new slide and add that to the total list;
function makeSlides() {
var $slides = $(),
slideNumbers = [],
$currentSlide = $();
$('.item[data-slide]').each(function() {
var $item = $(this),
slideNumber = $item.attr('data-slide');
// if the slide number wasn't in the array yet push the current slide into $slides and create a new one
if(slideNumbers.indexOf(slideNumber) < 0) {
$slides = $slides.add($currentSlide);
$currentSlide = $('<div class="slide" />');
slideNumbers.push(slideNumber);
}
$currentSlide.append($item);
});
// add the last currentSlide
$slides = $slides.add($currentSlide);
// place all slides in the wrapper
$('.wrapper').html($slides).attr('data-structure', 'slides');
}
Then finally you bind the resize event and fire these functions when needed:
$(window).resize(function(e) {
var currentStructure = $('.wrapper').attr('data-structure');
if(window.innerWidth < 600) {
if( currentStructure !== 'list') {
makeList();
}
} else {
if( currentStructure !== 'slides') {
makeSlides();
}
}
});
jsFiddle demo: http://jsfiddle.net/gktLnw31/3/
I do think this could be a bit more efficient, but this is just a proof of concept. Hopefully it'll give you some insights.

I would better take a look at foundation since it already includes the responsive design by default instead of trying to change it dynamically by code

Change Div Size dynamically

In my code, I've got 4 divs aligned inline.
What I want is, on clicking any div, it resizes to fill the space of all 4 divs (width:1000px)
and hides the other divs.
And on reclicking the div, it'll resize to the original dimensions.
This is what i've done till now.
<div class="gallery-image-replenish" id="bloc2" onclick="document.getElementById('bloc2').style.width = '980px'">
</div>
As of now, on click this resizes the div below the other divs. I know there's a method to hide the other divs, but I don't know how to do that.

With this kind of HTML:
<div class="gallery-image-replenish" id="bloc1"></div>
<div class="gallery-image-replenish" id="bloc2"></div>
<div class="gallery-image-replenish" id="bloc3"></div>
<div class="gallery-image-replenish" id="bloc4"></div>
you can use this kind of JS:
var handler = function(e){
e.target.style.width = "1000px";
for (j = divs.length; j--; ) {
if (divs[j].id != e.target.id) {
divs[j].style.display = "none";
}
}
}
var divs = document.getElementsByClassName('gallery-image-replenish'); //array of divs
var div;
for (i = divs.length; i--; ) {
div = divs[i];
div.addEventListener('click', handler);
}

Is it possible to use jQuery (jquery.com) on your project?
Because it would save a lot of code (and make it more readable!).
It would look like this (not tested, but probably works :P):
<div id="bloc1" class="gallery-image-replenish">1</div>
<div id="bloc2" class="gallery-image-replenish">2</div>
<div id="bloc3" class="gallery-image-replenish">3</div>
<div id="bloc4" class="gallery-image-replenish">4</div>
<script>
jQuery(document).ready(function(){
var galleryElements = $('.gallery-image-replenish');
galleryElements.click(function(){
var clickedElement = $(this);
if (clickedElement.hasClass('expanded')) { // if it has the class expanded, remove it (and show other elements again)
clickedElement.removeClass('expanded');
galleryElements.show();
} else { // if it has not got the expanded css class hide other and add class to expanded
galleryElements.not(clickedElement).hide(); // hide every other div
$(this).addClass('expanded'); // add stylesheet class for the new bigger width
}
});
});
</script>

The pure javascript way to hide an element is:
document.getElementById('otherdiv1').style.display = 'none';

Following is a solution which uses a common javascript function to perform what you want:-
<div class="gallery-image-replenish" id="bloc1" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc2" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc3" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc4" onclick="manageDivs(this.id)"> </div>
<script type="text/javascript">
function manageDivs(divId)
{
document.getElementById(divId).style.width = '980px'";
//to hide rest of the divs
for(i=1;i<=4;i++)
{
if(divId!='bloc'+i)
document.getElementById('bloc'+i).style.display = 'none';
}
}
</script>

This is a simple exemple ,
var activ = false;
$('.aligned').live('click',function(){
if(!$(this).hasClass('actif')) {
$('.aligned').css('width','0');
$('.aligned').removeClass('actif');
$(this).css('width','1000px');
$(this).addClass('actif');
} else {
$('.aligned').css('width','250px');
}
});
you can use jQuery animate for more visual effect

Move only some CSS styles from one element to another

I've created a jQuery plugin which takes a HTML table, makes it sortable, and fixes the header and footer. See http://jsfiddle.net/aXDzz/ for an example (click create to create the table).
Works good, but then recently needed to add some padding or margin around the table. This caused some problems.
My plugin basically replaces the original <table> with a <div> which contains a <table> for the header, a <div> which intern contains a <table> for the body, and a <table> for the footer. My intent was for the user to apply CSS to the original table, and upon using my plugin, the CSS would appropriately transfer. As stated above, however, I wrap a <div> around the table so that now the margin or padding should be applied to the <div> and not the <table>.
So, looks like I need to move any CSS which applies to the exterior of the <table> to the <div> such as margin, but then leave any CSS which applies to the interior of the <table> such as the row color alone.
How would I do this? Or is there a better way altogether I should be implementing this? Thanks
PS. Please feel free to critique my plugin as it is my first attempt.

I tried to modify this plugin for your needs:
(function($){
$.fn.copyStyle = function(jqCopyTo,styleStartsWith,overideStyle){
var dom = this.get(0);
var style;
var returns = {};
if(window.getComputedStyle){
var camelize = function(a,b){
return b.toUpperCase();
};
style = window.getComputedStyle(dom, null);
for(var i = 0, l = style.length; i < l; i++){
var prop = style[i];
for(var m = 0; m < styleStartsWith.length; m++){
if(prop.lastIndexOf(styleStartsWith[m], 0) === 0) {
var camel = prop.replace(/\-([a-z])/g, camelize);
var val = style.getPropertyValue(prop);
returns[camel] = val;
overideStyle==true ? $(this).css(prop,0):null;
}
}
};
};
if(style = dom.currentStyle){
for(var prop in style){
for(var m = 0; m < styleStartsWith.length; m++){
if(prop.lastIndexOf(styleStartsWith[m], 0) === 0) {
returns[prop] = style[prop];
overideStyle==true ? $(this).css(prop,0):null;
}
}
};
};
//copy
$(jqCopyTo).css(returns);
return this;
}
})(jQuery);
on a structure like this:
#inner {
margin:20px;
padding:20px;
background-color:#F00;
}
#wrapper {
background-color:#f80;
}
html:
<div id="wrapper">
<div id="inner">
Table Content
</div>
</div>
you can use this plugin like this:
$("#inner").copyStyle("#wrapper",["margin","padding"],true);
the result is that the inner-div margin and padding get overwritten and the style is added to the wrapper-div. you can handle the override behavior with the last Boolean indicator.
here is a full example on jsFiddle. I can't guarantee that it works in all browser (just tested Firefox and ie9)

I have inspected your code, and I have tried to apply margin to your table:
.myTable {
width:600px;
matgin-left: 50px;
}
And I then saw where the problem is. But then I have looked the code, and you are specifying fixed width
<div style="width: 618px; overflow-y: auto; max-height: 300px;"><table id="myTable" class="myTable">
And that seems causes the problem.
Take a look at:
width: 618px;
If I understood the question correctly, this is not calculated good. Maybe you could try to find in your plugin where width is calculated, and then to include margin into count how to calculate width. I haven't find so far. The plugin is long..
When I put , for example 665px, it looks somewhat good..
Maybe that is the solution.