Develop Reference

What is the difference between hiding elements with jQuery and CSS?

I created something similar to slider, which has three blocks with two pictures and description in each. At the top it shows one of these blocks with its two pictures and description. At the bottom you can see previews for two other blocks without description. It looks like this (pictures are random):
http://plnkr.co/edit/o9wTYhrTnpfgXu4aEIYW?p=preview
Here it works as expected, but there is one thing I don't understand. When you click at the bottom preview, it removes description from top active pictures, and adds description to bottom inactive ones, and blocks change position. By default all the figcaptions with descriptions have class .sliderblock__caption and are hidden in css, but those with class .sliderblock__caption--active are displayed:
.sliderblock__caption{
display: none;
}
.sliderblock__caption--active{
display: block;
}
With css it works fine, but when I try to us js instead, it doesn't.
http://plnkr.co/edit/kpnx9oGJzvz94u7rjGTM?p=preview
I placed the same hide stuff in js-file, but it's not hiding what is expected to be hidden.
var caption = ".sliderblock__caption";
var activecaption = ".sliderblock__caption--active";
$(caption).css("display", "none");
$(activecaption).css("display", "block");
If you click on one of the bottom blocks, the block will change position, but descriptions will not.
The point is that it actually adds the "active" class to figcaptions, but it's not working. When you look at the elements in Firebug, it shows that figcaptions at the top have "active" class, but their css is following:
element.style{
display: none;
}
Where does this rule come from? And where should I put the piece of code in js to get the same effect as with css?

When you do $myElm.hide() or $myElm.css("display", "none") you're setting the style attribute to display:none. That's the inline element CSS.
You can do the same using the style attribute:
<div style="display:none">
Using CSS (even you're using inline or rules in your file), doesn't require JavaScript while jQuery css method require the browser to allow executing of JavaScript.

How to place a new generated div aside to another div?

I got a div where I place a Java Script generated chart. Also, I got another div where I print out a table with chart data results.
One example is:
However, for UX purposes I prefer the table to be placed on the right side of the chart. Or what's more, making it appear on the right side. (I already use jQuery to do a $("#resultados").remove() and $("body").append("<table...</table>).
How can I make the chart div, which markup is <div id="placeholder" style="width:1200px;height:700px"></div> resize down and make place to another generated div to its right side?
So far, thinking about already marked up divs I tried this but I'm not getting the results I want as:
The table div appears first and I want the opposite.
They don't take together the whole outer div width.

Wrap your table with a right floating div by settting float:"right" in its style.
Make placeholder div to float on left (float:left).
To dynamically change its size, use : $("#placeholder").css({"width":"600px");
Finally , add a clear div (clear:both);

Use class instead of inline css chart.
CSS
.first{
width:1200px;
height:700px;
}
.second{
width:400px;
height:200px;
}
Code
$("#placeholder").appendTo("#anotherPlaceholder").toggleClass("first second");

How can I record the link pressed?

(I don't want to add code here because it would be very large chunks that would need explaining.)
To put it simply, I have:
A page with a 2x2 grid of images on (let's call that images.html),
A page that is a fullscreen image gallery made using CSS3 and HTML5 (let's call that gallery.html),
A style sheet that styles aspects of every page in the site except the gallery (let's call that main-styles.css),
And a style sheet that styles only gallery.html (let's call that gallery-styles.css).
The images in the 2x2 grid (images.html) need to open up the same gallery.html using gallery-styles.css. The only difference should be the range of images the fullscreen gallery displays.
So for one image on images.html, it may display 3 images in gallery.html. But for another image in images.html, it may display 4 entirely different images in gallery.html.
The problem I am having is how to track the image link that is clicked in images.html so as to display the different range of images in gallery.html.
The gallery-styles.css has a div that is positioned to be fullscreen, then there is an image list, e.g. '.image1{background-image:url(../images/1.jpg)}' of the different images that can be browsed through (left and right clickable arrows in the gallery.html). The HTML will use each image individually but with the same content holder, e.g.
<div class="image-1 holder">
How can I go about using the same gallery.html and gallery-styles.css files for each image in images.html? I'm not entirely against JavaScript but have gone this far with just CSS3 and HTML5 would be nice if it was possible to continue that way. Is there possibly a way using the input element?
Any help is great, thanks.

There are two ways to deal with processing information from the page: client side script (JS) and server side script (PHP or like) unless you have a great number of hand-coded html pages you can load for a corresponding link clicks.
Given that, you either link to your hard-coded page directly from the link, which I assume you have already thought of,
Or, you pass a parameter to server side in a form http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue
In that case you capture these parameters on server side and generate a page with needed images.
In php all parameters can be found in $_REQUEST array.
Does this answer your question?

For this, I think the easiest way for you would be to use window.location.search. When you click the first image sending you to gallery.html, rather than just opening a regular copy, open for example, gallery.html?image1. Then in JavaScript, you can add this as a class to <body> or some other node when the page has loaded, and do the rest from CSS
window.addEventListener(
'load',
function () {document.body.className += ' '+window.location.search.slice(1)}
);
You can now do the decision making using, for example
body > genericNodes {display: none; }
body.image1 > someNode { display: block; }
/* etc */
A different option for pure CSS is to use a hash and then :target, but this means you lose the ability to have anchors in your page. i.e. open gallery.html#image1 and have
#image1, #image2, #image3, #image4 { display: none; }
:target { display: block !important; }
/* etc */
With some nodes of the form
<span id="image1"><!-- contents --></span>
<span id="image2"><!-- contents --></span>

isotope image onclick to reveal new content in top div Wordpress

I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks

Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)

Container div over its content

I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.

Delete div when slide up.
Add div when slide down.
Good luck =)

For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco

I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.