We Keep Coding

Div background image change on hover of non-parent/non-sibling div

This is a little bit of a complicated procedure, but I'll explain it as best I can. I'm creating a portfolio in wordpress and trying to include as much dynamism as I can.
I have a large banner image at the top of the page and individual thumbnails of my work below. What I'm looking to do is be able to hover over the thumbnails and have them fade the header image to larger version of the thumbnail, by using the same image source as the thumbnail.
To make matters more complex, the page thumbnails are generated by cycling through "portfolio" posts with featured images. This means that I don't have a hard copy of each link and need to instead generate it with similar PHP code that I'm using to create the thumbs.
I thought I might be able to do this with CSS only, but my research led me to find that it isn't doable if the elements aren't related to each other, either as parent or sibling.
Is this kind of thing even possible? I assume I'd have to use javascript, but my knowledge of the language is far inferior to my knowledge of CSS/HTML.
The website in question is here.
EDIT:
This is the code I'm using to spawn thumbnails.
<?php
$query = new WP_Query(array('posts_per_page' => 6, 'meta_key' => '_thumbnail_id'));
while($query->have_posts()) :
$query->the_post(); ?>
<div class="portfolioThumbnail"><?php the_post_thumbnail(); ?></div><?php
endwhile;
?>
In a nutshell, the site is comprised like so:
<div id="backgroundThatNeedsToChangeOnHover"></div>
<navigation></nav>
<div id="content">
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
</div>

Here is a simplified example using jquery: JSfiddle
$(function(){
$('.thumb').click(function(){
$('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
});
});
Update with hover and fade in/out: JSfiddle
var url;
$(function(){
$('.header').css("backgroundImage", "url( http://lorempixel.com/100/100/abstract/9 )");
$('.thumb').hover(function(){
url = "url(" + $(this).attr("src") + ")";
$('.header').animate({opacity: 0}, 500, function(){
$(this).css("backgroundImage", url).delay(100).animate({opacity: 1}, 500);
});
});
});

I ran into a small problem with the header being unable to return to the original image (which is the need for this code.) I came up with this. Does this work from an efficient code standpoint? I'd add animation to both events.
$(function(){
var headImg = $('.header').css("backgroundImage");
$('.thumb').mouseover(function(){
$('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
});
$('.thumb').mouseleave(function(){
$('.header').css("backgroundImage", headImg);
});
});
JSFiddle
Updated JSFiddle with fade in/out and stop animation JSFiddle
$(function(){
var headImg = $('.header').css("backgroundImage");
var url;
$('.thumb').mouseover(function(){
url = "url(" + $(this).attr("src") + ")";
$('.header').stop().animate({opacity:0}, 250, function(){
$(this).css("backgroundImage", url).animate({opacity: 1}, 250);
});
});
$('.thumb').mouseleave(function(){
$('.header').stop().animate({opacity:0}, 250, function(){
$(this).css("backgroundImage", headImg).animate({opacity: 1}, 250);
});
});
});
UPDATE: Wordpress does not understand delay(). Removed it from the code.

jquery .append iframe animation

I am trying to write a page that allows multiple buttons to be clicked on within my webpage and for iframes to load the content sliding down and knocking other content further down as they load.
I have tried various different ways to make this scroll up and down by using the jquery .animate functions but for some reason I just cannot get it to work.
Does anyone have any suggestions?
$(document).ready(function() {
$(".iframe").click(function() {
var file = $(this).attr("data-url");
var size = $(this).attr("data-size");
$(this).parent('article').append("<iframe class='articleframe' height='" + size + "' src='" + file + "'>Moo</iframe>");
$(this).siblings('.open').css('display','inline-block');
$(this).hide();
});
$(".open").click(function() {
$(this).hide();
$(this).siblings('.iframe').css('display','inline-block');
$(this).siblings('.articleframe').remove();
});
});
<article>
<h2>Querybox</h2>
<h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900px" >Load another file</h5>
<h5 class='button open'>Hide Frame</h5>
</article>

For those of a visual dependence :) fiddlywiddly
You may have to tweak this to your specifications but this will do the trick:
Javascript:
Change '.append()' to '.prepend()'
$(document).ready(function () {
$(".iframe").click(function () {
var file = $(this).data("url");
var size = $(this).data("size");
var $one = $('#one');
$one.prepend("<h5 class='button open'>Hide Frame</h5><div class='frame-contain'><iframe class='articleframe' height=0 src='" + file + "'></iframe></div>");
var $wrap = $one.find('.frame-contain:first');
$wrap.animate({
height: size
}, {
duration: 1000,
step: function (now) {
$(this).height(now);
$(this).nextAll('.frame-contain').offsetParent().top += now;
$(this).find('iframe').height(now);
},
complete: function () {
$(".open").click(function () {
$(this).next('div').slideUp(1000);
$(this).fadeOut('slow');
});
}
});
});
});
I would also suggest re-arranging your elements but that's up to you. You can put your <h5> buttons into a <header> and the <iframe> creations into a <section>. Food for thought. That way your buttons don't go flying all over the place. My example utilizes this idea.
HTML:
<article>
<header>
<h2>Querybox</h2>
<h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900">Load another file</h5>
</header>
<section id="one"></section>
</article>
CSS:
iframe, header, section, div {
clear: left;
position: relative;
display: block;
}
section, div {
width: 100%;
max-height: 100%;
}
.open {
clear: left;
display: block;
}
.articleframe {
float: left;
}
Since I am uncertain of your end-game here I made my best interpretation. Keep in mind this code is horribly inefficient the way it is set-up (so many selectors utilizing jQuery is very code intensive).
I would suggest you put more id tags on things and reference those using $(document.getElementById('id')) or $(document.querySelector('#id')). Also, using jQuery .width() and .height() takes a huge hit as well. You should use a javascript native selector and then apply .innerWidth = XX or .innerHeight = XX.
Normally performance at this small of scale isn't hugely important but given what you're displaying and the impact it has on the browser, it may help you.
For examples on the performance gain: JSPerf - innerHeight vs. .height()

Clever work-around for my current script?

I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.

Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});

Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">

Merging JQuery & Javascript

I'm using some JavaScript to copy a value when an input is clicked. This works well.
Normally I do a JavaScript alert, but now I would like to use a query fading div.
If I run the jquery or javascript in separate scripts then they work fine, as soon as I join them they fail.
I think this is because I use a onMouseOver for the copy, but an input click event for the fading alert.
Any idea how I can merge these ?
<script language="JavaScript">
function toClip(me,vals) {
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText(vals);
clip.glue(me);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input').click(function() {
$messageCont = $('<div class="message_cont">');
$message = $('<div>DONE</div>').hide();
$messageCont.append($message);
$('body').prepend($messageCont);
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
$message.fadeIn(200, function() {
setTimeout(function(){
$messageCont.fadeOut();
//code to clean up container
}, 1500)
})
})
});
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
</script>
This is called via :
<div class='copy' onmouseOver="toClip(this,'$val')"><input type="button" value="Copy"/></div>
Thanks :)
UPDATE 15th April:
Sort of got this working using jquery instead of Javascript.
<input type="button" id="copy_button" data-clipboard-text="Copy Me!" Value="Click ME">
<script src="js/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById("copy_button"), {
moviePath: "js/ZeroClipboard.swf"
} );
clip.on( 'complete', function(client, args) {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
});
} );
</script>
Only issue I have is it only works with on button. I have lots I'd like it to work with.
Anyone know how to resolve that ?
Thanks :)

Several points :
New $messageCont/$message probably don't need to be created each time an input is clicked? The rest of the code suggests reuse.
The $messageCont = ... expression has incomplete HTML. You must ensure the div tag is closed, either with <div>...</div> or with <div />.
The script fades in $message but fades out $messageCont. This is OK on first use, but you will see precisely nada subsequently; there's no expression to fade $messageCont back in.
Delay in an animation queue can be achieved with .delay(), which is cleaner than using setTimeout().
It's hard to see what the second $messageCont.css(...) expression is supposed to achieve when $messageCont is positioned before it's contents are shown. If it is necessary to position $messageCont initially, then it's better to do so with a stylesheet directive, or in jQuery inside the $(document).ready(function() {...}) structure.
Reading between the lines, I think you probably want something more like this :
$(document).ready(function() {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$('input').on('click', function() {
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
//code to clean up container
});
});
});

jQuery image rotation

One of my clients wants his logo in the header of the site to alternate with another logo.
So for example:
<img src="images/logo-1.png" style="display:block;" />
What would be the simplest way to alternate this with logo-2.png
We don't want a huge script, just a simple script which fades one logo out and another one in every 10 seconds, and rotates between logo-1.png and logo-2.png
Something with setInterval and fadeIn fadeOut? I'm not too sure
Thank you

I'm sure this could be simpler, but here's something that you could use as a starting point, if none of the many plugins suit your needs:
var img0 = "http://dummyimage.com/100x100/000/fff",
img1 = "http://dummyimage.com/100x100/000/ff0000",
current = false;
function switchImg() {
$("#img").fadeOut(function() {
$(this).attr("src", (current) ? img0 : img1).fadeIn();
current = !current;
});
}
setInterval(switchImg, 10000);
Here's a working example.

You could position the images one over another and just fade them and play with their z-indexes :
function switchLogo() {
var activeImg = $('#logo .active'),
nextImg = $('#logo :not(.active)');
activeImg.fadeOut(500, function() {
nextImg.addClass('active');
activeImg.removeClass('active').css({
opacity: 1,
display: 'block'
});
});
}
setInterval(switchLogo, 10000);
By positioning them on top of each other and modifying the z-index you get a smoother transition.
Here's a live demo : http://jsfiddle.net/gion_13/gFHMJ/

Maybe something like this: http://jsfiddle.net/WHnLs/

Check out Jquery Cycle

...Or jCarousel