How to combine multiple scripts into one? - javascript

I've got five of the same scripts that just use five different variables. #video0 to #video4. I'm just not quite sure on how to combine them all so I don't have redundant code. I've been trying to make them all variables
var video= [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
http://jsfiddle.net/cwfybnzr/

Use each() with the array
var videos = [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
$(function() {
$.each(videos, function(){
var iframe = $(this)[0];
...
});
});

Isn't it better to create class for those elements? Then it will be possible to iterate through them using simple jQuery syntax: $('.video'). Plus it would not require changing any JavaScript code when new videos will be added.

You can add a class element like videoCSS to all the elements and then loop through them like
$('.videoCSS').each(function(){
var player = $(this);
// your code here
});
This way you can future proof you js code as you can add as many new player/iframes to the HTML with videoCSS class and your js code will still be the same.
Also, I found that in your code you are doing like
var iframe = $('#video0')[0];
var player = $(iframe);
Which means that first you are getting a jquery object using $('#video0'), then you are trying to get a DOM element out of it like $('#video0')[0] and then again you are converting it to a jquery object using $(iframe).
I think there is no need of this much extra processing, you can simply use
var player = $('#video0');
or using my updated code like
var player = $(this);
UPDATED FIDDLE

Related

jQuery: easier way to use .clone() than described below?

If you execute in the console on this page
var cloned = $(".question").clone(true);
$(".question").addClass("first");
var clonedStr = cloned[0].outerHTML || new XMLSerializer().serializeToString(cloned[0]);
$(".question").after(clonedStr);
you will clone the question (there will be two questions on the page, but the first one will be with the .first class). That's what is needed.
Is there any simpler way to do this with jQuery? I'm confused of the third string in the code above and believe it could be simpler. Any ideas?
Thank you.
If you don't use the HTML as string, then don't get it. Just use the jQuery object:
var cloned = $(".question").clone(true);
$(".question").addClass("first").after(cloned);
Also, you can do it one line:
$(".question").after($(".question").clone(true)).first().addClass("first");
You could use insertAfter to insert the cloned element after changing the class. You don't need to convert the element in the jQuery object to a string, you can use that object within the function itself:
var $question = $('.question');
var $cloned = $question.clone(true).insertAfter($question);
$question.addClass('first');

How to create a string and use a function that's named after it?

Sorry for bad wording in the question but it's hard to explain for me. I'm using several bxsliders on a page and some are placed in hidden divs. Unfortunately images are not shown in the slider after making the parent div visible unless the slider is reloaded (See here: bxSlider within show/hide divs). So let's say I initiate the sliders at the beginning with:
var slider_0=$("#slider_0 .bxslider").bxSlider({
//bxslider options here
});
var slider_4=$("#slider_4 .bxslider").bxSlider({
//bxslider options here
});
var slider_7=$("#slider_7 .bxslider").bxSlider({
//bxslider options here
});
The sliders are not consecutively numbered but there is a navigation and if I click the 7th element it leads to slider_7. So I could get the index of the clicked item with:
$(this).index();
When I call slider_7.reloadSlider(); it would work but I don't know which slider the user clicks and which number it has. So would it be possible to call that with a created string like this:
slider_name='slider_'+$(this).index();
slider_name.reloadSlider();
works not of course. Is there a way to do it?
I would create a dictionary with strings as keys and functions as values. Then, you could have O(1) lookup of the functions you're targeting.
In general, you can do it like so:
// set up your dictionary
var dictionary = {};
// add your functions
dictionary['methodName'] = function() {};
// call the functions
dictionary['methodName']();
So, for your example, you could do:
dictionary['slider_7'] = slider_7.reloadSlider;
dictionary['slider_'+$(this).index()]();
You could trigger it with
window["slider_" + $(this).index()].reloadSlider()
Although, I'm not sure whether your approach is the best. I think I'd go with arrays or with object (as a key-value pairs)
Try this:
slider_name='slider_'+$(this).index();
$("#" + slider_name + " .bx_slider").reloadSlider();
Found a working solution:
eval("slider_" + $(this).index()).reloadSlider();
Its not entirely clear here what you want/are trying to do. What it seems like you want to do is get a programmatic handle on a specific slider when a user clicks a specific part of your page. You do not accomplish this by eval()ing a string...that's what event handlers are for. So create a click event handler and in that event handler
$('#idOfWhatTheUserClicksOn').click(function(event) {
var slider = document.getElementById('#idOfRelatedSlider');
$(slider).bxSlider();
//if you need the current value of the slider you can get that too
var value = slider.value;
});
You could achieve the same with fewer LOC by using a class instead of id's with different handlers, but the concept is the same.
var slider_cache = [
$("#slider_0 .bxslider").bxSlider(),
$("#slider_1 .bxslider").bxSlider(),
$("#slider_2 .bxslider").bxSlider()
];
...
slider_cache[$(this).index()].reloadSlider();

JQuery: image src variable clean up

I've been teaching myself how to use jquery the past few days, haven't used it much, i'm kinda still stuck in old ways (back 10 yrs ago lol) To get started i downloaded the JQuery Desktop from JQuery Desktop - Nathan Smith, to keep from repetitive use of image src links inevatibly making the file larger than what it needs to be. So while making the reference variables basically started to use the same stuff over again... i tried looking up to see how to compress it or clean it up some but kept running into dead ends for what i am trying to do... if anyone happens to know what i could do that would be awesome.
Code
enter code here
/* SAVES DATA SPACE ALSO CREATES QUICK REFFERENCE/VARIABLE */
var healthVar= 'assets/img/icons/health.png';
var emailVar = 'assets/img/icons/email.png';
var linkVar = 'assets/img/icons/link.png';
var noteVar = 'assets/img/icons/note2.png';
var videoVar = 'assets/img/icons/video1.png';
var xxxVar = 'assets/img/icons/xxx.png';
var socialVar = 'assets/img/icons/social.png';
var webdesktopVar = 'assets/img/icons/webdesktop.png';
var androidVar = 'assets/img/icons/android.png';
var devVar = 'assets/img/icons/development.png';
var secureVar = 'assets/img/icons/secure.png';
var signalVar = 'assets/img/icons/signal.png';
var setVar = 'assets/img/icons/settings.png';
var spamVar = 'assets/img/icons/spam.png';
var feedbackVar = 'assets/img/icons/feedback.png';
$("#health_Pic").attr("src", healthVar);$("#health_PicB").attr("src", healthVar);$("#health_PicC").attr("src", healthVar);
$("#email_Pic").attr("src", emailVar);$("#email_PicB").attr("src", emailVar);$("#email_PicC").attr("src", emailVar);
$("#link_Pic").attr("src", linkVar);$("#link_PicB").attr("src", linkVar);$("#link_PicC").attr("src", linkVar);
$("#note_Pic").attr("src", noteVar);$("#note_PicB").attr("src", noteVar);$("#note_PicC").attr("src", noteVar);
$("#video_Pic").attr("src", videoVar);$("#video_PicB").attr("src", videoVar);$("#video_PicC").attr("src", videoVar);
$("#social_Pic").attr("src",socialVar);$("#social_PicB").attr("src", socialVar);$("#social_PicC").attr("src", socialVar);
$("#webdesktop_Pic").attr("src",webdesktopVar);$("#webdesktop_PicB").attr("src",webdesktopVar);$("#webdesktop_PicC").attr("src",webdesktopVar);
$("#android_Pic").attr("src",androidVar);$("#android_PicB").attr("src",androidVar);$("#android_PicC").attr("src",androidVar);
$("#dev_Pic").attr("src",devVar);$("#dev_PicB").attr("src",devVar);$("#dev_PicC").attr("src",devVar);
$("#secure_Pic").attr("src",secureVar);$("#secure_PicB").attr("src", secureVar);$("#secure_PicC").attr("src", secureVar);
$("#signal_Pic").attr("src", signalVar);$("#signal_PicB").attr("src", signalVar);$("#signal_PicC").attr("src", signalVar);
$("#settings_Pic").attr("src", setVar);$("#settings_PicB").attr("src", setVar);$("#settings_PicC").attr("src", setVar);
$("#spam_Pic").attr("src",spamVar);$("#spam_PicB").attr("src", spamVar);$("#spam_PicC").attr("src", spamVar);
$("#feedback_Pic").attr("src", feedbackVar);$("#feedback_PicB").attr("src", feedbackVar);$("#feedback_PicC").attr("src", feedbackVar)
I have tried to do this:
$("#health_Pic","#health_PicB","#health_PicC").attr("src", healthVar);
With no luck, thanks for any info a head of time
Try:
$("#health_Pic,#health_PicB,#health_PicC").attr("src", healthVar);
The jQuery attr function takes only the first element obtained by the selector.
Get the value of an attribute for the
first element in the set of matched elements.
Use a loop to change multiple images src.
EDIT: After checking the docs and trying it myself, I found that using the .attr as a setter does set the value for all elements. Thanks j08691 for pointing this out.

More efficient way script the heights of DIVs

Im using this script to find the height of a DIV. I am using it on more than one DIV.
Is there a more efficient way to write this code?
$(document).ready(function() {
$(".block00").height($(".subheader").height());
$(".block01").height($(".subheader").height());
$(".block02").height($(".subheader").height());
});
No need to list each one separately or make a loop as you can just list multiple items in the selector and it will return all of them.
$(document).ready(function() {
$(".block00, .block01, .block02").height($(".subheader").height());
});
or a little more efficiently:
$(document).ready(function() {
var h = $(".subheader").height();
$(".block00, .block01, .block02").height(h);
});
or, if you control the HTML source, add a common class on all the blockXX objects so you can do this:
$(document).ready(function() {
var h = $(".subheader").height();
$(".blockCommon").height(h);
});
Remember, you can have more than one class per object. Using a common class among several objects is precisely for the situation where you want to treat a number of objects the same way.
$(document).ready(function() {
var h=$(".subheader").height();
for(var i=0;i<3;i++)$(".block0"+i)height(h.height());
});
might work

my first jQuery plugin, only seems to bind to the first form of eight forms on the page

I'm writing a small jQuery plugin that binds to 8 divs on a page, each of which contains a form. There are two links for each widget that increment or decrement a field within the form and then POSTs the form. The problem is that all 16 links on the page all submit the first form on the page.
The source code is here:
http://pastie.org/657045
I'm a jQuery/JS newb and figure this is probably a variable scope issue, but I've tried everything and can't get the elements to operate independently.
At the very beginning, you need to iterate through the results of the $(containerobj) and run the rest of the code through that, replacing each reference, like this:
jQuery.RankWidget = function(containerobj, options) {
return $(containerobj).each(function() {
var $container = $(this);
var $form = $container.find('.rank_buttons form');
var $rank_up = $container.find('.rank.up');
var $rank_down = $container.find('.rank.down');
var $value_field = $container.find('input.rank_value');
var $comment_score = $container.find('.comment_score');
var $comment_rank = $container.find('.comment_rank');
...
};
};
At the moment, you're applying all the events to all of the links, rather than scoping it to each container object in turn.
I solved my problem by using .click() instead of .live()
Anyone know if there is away to use .live() and get the scope for each widget correct? I even tried passing in the variable as an argument to the clickRank() function, but it was still referencing the wrong form.

Categories

Resources