We Keep Coding

Resize youtube video (on page and onclick)

I'm trying to use a script in which I feature some tumblr video posts (those tagged with "featured" word) but I have two problems:
1) I don't know how set a size for the videos on the page (ideal 300 width). they are stuck on 400px.
2) I'd like the videos to grow to 1000px width, when people click play.
My tumblr is on cookjs.tumblr.com
can anyone help? thank you so much in advance!
<script>
if ($('p img').length > 0)
$(".textpost").css("overflow","hidden");
var rssurl = '/tagged/{text:Featured Tag}/rss';
$.get(rssurl, function(data) {
var $xml = $(data);
var vari = 0;
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
vari = vari +1;
if(vari <4){
$('.featured-subhead').append('<section class=""><h2>
</h2>
<div class="">' + item.description + '</div><div class="">
Read More</div></section>');
}
});
});
</script>

So the right way of doing this is probably through the YouTube IFrame Player API. You'll be specifically interested in the onStateChange event listener. There's another way that I've done this that you may be interested in; here's the jQuery (since I was new to JS at the time):
$('iframe[src*="youtube.com"]').each(function(){
var videoURL = $(this).attr('src');
var videoID = videoURL.substr(videoURL.length - 11,11);
var thumbURL = 'http://img.youtube.com/vi/' + videoID + '/0.jpg';
$(this).wrap("<div class='video'></div>");
var videoDiv = $(this).parent();
videoDiv.css('background-image', 'url("' + thumbURL + '")').attr('id',videoID);
var heightUnit = $(this).height()*.25;
var widthUnit = $(this).width()*.20;
videoDiv.css('background-position', '0%, -' + heightUnit + 'px');
$(this).remove();
var playButton = $('<img />').attr({
'class': 'button',
'src':'playbutton.png'
}).css({
'width':widthUnit,
'margin-top': '-' + (widthUnit/2)*.783,
'margin-left': '-' + (widthUnit/2)
});
videoDiv.append(playButton);
playButton.on("click",function(){
$(this).css('opacity','0');
var newFrame = $('<iframe />').attr({
'src': 'http://www.youtube.com/embed/' + videoID + '?autoplay=1',
'frameBorder':'0'
});
videoDiv.append(newFrame);
});
});
What this is doing is grabbing the video url from each video on the page, removing the iframe and replacing it with the thumbnail (hosted by YouTube) and a separate clickable button. You can attach any handler you want to the button (even create your own button) but you'll also want to reload a new iframe with the embed url and append ?autoplay=1 to the end, which will start the video.
Here's a demo of this effect; something I coded a few years ago.

you can simply change the iframe height and width by using
function resizeIfrmae()
{
// your ifrmae id or you can pass id via function param
// resizeIfrmae(id) like this
$('#youtube_iframe_id').css('width','150');
$('#youtube_iframe_id').css('height','150');
}
onclick call this function
resizeIfrmae();

jQuery(...).val(...).xxx is not a function

I want to use EggImageDropdown, but I have problems with the script.
I embedded it in my testing site and there it works:
http://herzschloss.de/hs/test.php at "Mein Wunschbild".
Now I want to use the same script with the same linked in js-code here:
http://herzschloss.de/Liebesschloss-bestellen at "Mein Wunschbild"
But I get an error.
TypeError: jQuery(...).val(...).EggImageDropdown is not a function
This is the live generated script that didn't work:
function onclick(event) {
var t = jQuery('select[id=dropdown_demo]').val('herz.png').EggImageDropdown('close').EggImageDropdown('update',{src:'hs-motive/herz.png'});t.trigger('change');
}
This is the code:
jQuery('option',element).each(function(i,el){
dropdown.append('<img style="width:100%" onclick="var t=jQuery(\'select[id=' + selectName + ']\').val(\''+ $(el).val() + '\').EggImageDropdown(\'close\').EggImageDropdown(\'update\',{src:\''+ $(el).text() + '\'});t.trigger(\'change\');" src="' + $(el).text() + '"/>');
});
It would be great if you help me!

It's very difficult to embed that much code into an onclick attribute. Better to not do it.
To correct it, create the function directly in the loop instead of creating an attribute.
jQuery('option',element).each(function(i,el){
var img = $('<img>', {style: "width:100%;", src: $(el).text()});
img.click(function() {
var t=jQuery('select[id=' + selectName + ']');
t.val($(el).val()).EggImageDropdown('close')
.EggImageDropdown('update', {src:$(el).text()});
t.trigger('change');
});
dropdown.append(img);
});
Furthermore, looking at your linked site, it appears that the EggImageDropdown function doesn't exist, which means you're not successfully loading the plugin.

Bitly API - JavaScript function to open new window

I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)

Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1

Perhaps you're looking for
window.open("http://example.com");

jQuery(1.6.4) using append() to add anchor does not work in IE

I am really having trouble using the append() function with IE.
What I am trying to do is the following:
Append anchor tag to the body element
Bind a modalwindow plugin to the anchor tag
Fire the click event on the anchor tag to open the modal window
Remove the anchor tag afterwards
if($('a#' + id).length == 0){
$('body').append('<a id=\"' + id + '\" href=\"' + gJsAppBasePath + url + '\" class=\"iframe\" title=\"' + title + '\"><\a>');
$('a#' + id).fancybox({
'hideOnContentClick': false,
width: width,
height: height
});
}
$('a#' + id).click();
$('a#' + id).remove();
As expected it works fine in Chrome, FF and Opera, but it doesn't in IE.
What I have already tried to solve this issue:
Mess around with the apostrophs and quotations
Simplify the anchor tag to minimum <a href="../index.html> </a>
Try the same with another tag <h2>BlaBla</h2>
The anchor tag never is initialized to a proper jQuery object.
The h2 tag is, but it won't be shown on the page.
I have found a workaround to hardcode the anchor tag and modify the attributes, but this is not really what I want.
Any ideas are very much appreciated.
Thank you in advance,
Sebastian

I would expect your code to look more like this:
var anchor = $('#' + id);
if(anchor.length === 0){
anchor = $('<a id=\"' + id + '\" href=\"' + gJsAppBasePath + url + '\" class=\"iframe\" title=\"' + title + '\"><\a>');
$('body').append( anchor );
anchor.fancybox({
'hideOnContentClick': false,
width: width,
height: height
});
}
anchor.click().remove();
Using selectors like element#id are a lot slower than just doing #id. Plus in certain versions of IE, it seems to have issues.
Also $('a#' + id) is expensive and you do it multiple times. There is no need to do it time and time again. You just need to do it once and reuse it wither by variables or chaining.

Select link right after the one i just clicked

also threw it up on jsbin: http://jsbin.com/ohazo/2
but the code on jsbin is the old code, so overlay_nextimg is overlay_content.click in the javascript on jsbin
Jquery lightbox, grab next link from the one we just clicked, take it's href, fade out the current image, and load in the next img.
Also, how would i go about keeping the overlay_content centered? when changing images, have it animate to the new position? i was gonna tackle that next, but i'm here so why not.
Jquery and Html, i've changed the overlay_content.click that we were using before to overlay_nextimg, to be less confusing.
Jquery:
$(function (){
$('a.lightbox').click(function() {
var imghref = $(this).attr("href");
loadImage(imghref);
alert(imghref)
return false;
});
$('.overlay_nextimg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(nextlink);
loadImage(nextlink);
});
$('.overlay_previmg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(prevlink);
loadImage(prevlink);
});
function loadImage(href, prevlink, nextlink) {
var currentImg = $('.overlay_content img');
var img = new Image();
var docHeight = $(document).height();
$('.overlay_content').delay(300).fadeIn(400);
$(".overlay_bg").height(docHeight).fadeIn(400, function(){
$(img).load(function () {
$(img).hide();
$('.overlay_content').html(img);
$(img).fadeIn('slow');
}).error(function () {
$('.overlay_content').html("you SUCK at Javascript")
}).attr('src', href);
})
}
$('.overlay_bg').click(function (){
$(this).fadeOut(300);
$(".overlay_content").fadeOut(300, function(){
$(this).html('');
});
});
});
HTML:
<div class="overlay_bg"></div>
<div class="overlay_content"></div>
<h1>links</h1>
Load a water color image.
Load a library book, yeah.
from the interweb.
internet image.
HUGE

Please add more of the code/HTML - Is $("overlay_content").click(...) the function you need to fix?
You can use the eq() selector to get the n-th a.lightbox on the page. But obviously you'll need to track what link you're currently on., i.e.
$("a.lightbox:eq(1)")
Or - using the src of the image currently being displayed, find out which link was clicked and move next from there, i.e.
$("a.lightbox[href='" + currentImg.attr("src") + "']").next()