I was working on my code and wanting to figure out how i can store draggable objects into an array because I am creating a math game that will recognize the draggable element and determine whether the problem is correct which is addition here is my code
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable2" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable3" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable4" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable5" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable6" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable7" ).draggable();
});
</script>
<script>
$(function() {
$( "#draggable8" ).draggable();
});
</script>
and then i am trying to put these draggable elements into an array
<div data-role="main" class="ui-content">
<script>
var theimagestwo = new Array();
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";
document.getElementById("pagethree").innerHTML = theimagestwo[1];
</script>
what am i doing wrong? they are just coming up as text
Take a look at this part of your code (I added comments):
// Create a new array
var theimagestwo = new Array();
// Push the strings "#draggable1" and "#draggable2" into the array
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";
// Set inner HTML as theimagestwo[1] (which is "#draggable1")
document.getElementById("pagethree").innerHTML = theimagestwo[1];
So, as you say, the result is "coming up as text" because it is text.
If I understand you correctly you want the contents of #pagethree to be the element #draggable1 (and not the string "#draggable1"). So you should replace the code above with:
var theimagestwo = new Array();
theimagestwo[1] = $("#draggable1");
theimagestwo[2] = $("#draggable2");
$("#pagethree").empty().append(theimagestwo[1]);
you can create a function for that and loop through using .each()
$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
makeItDraggaple($(this));
});
function makeItDraggaple(el){
el.draggable();
$("#pagethree").append(el);
}
Working Demo
or you can use just use .each() without need a function
$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
$(this).draggable();
$("#pagethree").append($(this));
});
Demo
On top of the answer from #Mohamed-Yousef, if you're looking to place all these elements in the "pagethree" container, you can probably do that by adding one line:
$('[id^="draggable"]').each(function(){
makeItDraggaple($(this));
$(this).appendTo("#pagethree");
});
There are some inefficiencies in doing $(this) twice and likely in not caching $("#pagethree") somewhere. But it's an (untested!) start.
Related
Is there a way to put multiple classes in one code?
I have many of those ".dwlnd-trg" classes. Like ".dwlnd-trg2", ".dwlnd-trg3" ".dwlnd-trg4" and ".dwlnd", ".dwlnd2", ".dwlnd3", ".dwlnd4" and so on.
Only ".s-dwlnd" stays always the same because this is the class which displays an animated svg image.
At the moment i have copied and pasted a working code in my website's head and it's great but would it be much cleaner if it's not 4, 6 or soon 8 instead of one good looking code? :) I tried to but without success...
here's the code looking so far:
$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
$( ".dwlnd" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg2" ).click(function() {
$( ".dwlnd2" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd2").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg3" ).click(function() {
$( ".dwlnd3" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd3").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg4" ).click(function() {
$( ".dwlnd4" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd4").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
In my opinion, this is a cleaner solution.
Besides the fact that your function becomes concise, easy to understand and maintain and you don't have to update it to add new items, on the markup side it separates the meaning of class (as a style anchor) from what it's working as a selector for the function.
I can't know your context but, If you also don't need different classes for the target div, you can also use attributes to set the right target.
$( document ).ready(function() {
$(".dwlnd-trg").click(function() {
// save the target reference via ref attribute
var intref = $( this ).attr( 'ref' );
// pass the target reference to get the right one
$( ".dwlnd"+intref ).addClass( "s-dwlnd" );
setTimeout(function() {
$( ".dwlnd"+intref ).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
.s-dwlnd { border: solid 1px #ccc; color:red;}
</style>
<!--use ref attribute as a target reference -->
<div class="dwlnd-trg" ref="1">click me! (1)</div>
<div class="dwlnd-trg" ref="2">click me! (2)</div>
<div class="dwlnd1">animate me! 1</div>
<div class="dwlnd2">animate me! 2</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
If you can do it based on id it makes it a lot easier because you can't have multiple id's. But you can have multiple classes. Here is an example with id.
$(document).ready(function() {
$("#dwlnd-trg, #dwlnd-trg2, #dwlnd-trg3, #dwlnd-trg11, #dwlnd-trghahaha").click(function() {
//get the id of the trigger element that is clicked
var thisId = $(this).attr("id");
//get everything after "dwlnd-trg" form the id.
var idStripped = thisId.replace('dwlnd-trg','');
//Use the found id addition in the selector
$(".dwlnd" + idStripped).addClass("s-dwlnd");
setTimeout(function() {
$(".dwlnd" + idStripped).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
});
.s-dwlnd {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dwlnd-trg">dwlnd-trg</button>
<button id="dwlnd-trg2">dwlnd-trg2</button>
<button id="dwlnd-trg3">dwlnd-trg3</button>
<button id="dwlnd-trg11">dwlnd-trg11</button>
<button id="dwlnd-trghahaha">dwlnd-trghahaha</button>
<div class="dwlnd">dwlnd</div>
<div class="dwlnd2">dwlnd2</div>
<div class="dwlnd3">dwlnd3</div>
<div class="dwlnd11">dwlnd11</div>
<div class="dwlndhahaha">dwlndhahaha</div>
To put multiple class, you to try something like :
$( ".dwlnd-trg, .dwlnd-trg2, .dwlnd-trg2" )
Good luck!
You can use a selector like this:
$('[class^="dwlnd-trg"]') //Select every element that has a class attribute starting with "dwlnd-trg".
or
$('[class˜="dwlnd-trg"]') //Select every element that has a class attribute containing "dwlnd-trg".
But beware the performance issue (since selecting from class is a much faster approach)
You can use attribute starts with selector:
$( '[class^="dwlnd-trg"]' ).click(function() {
var n = this.className.match(/\d+$/)[0] // grab the number
$( ".dwlnd" + n ).addClass( "s-dwlnd" );
setTimeout(function() {
$( ".dwlnd" + n ).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
First of all, you only need one $(document).ready. Just place all code in one block.
Second, you can create a function that takes the class of the selector as parameter.
Example:
$( document ).ready(function() {
// Put all handlers here
$( ".dwlnd-trg4" ).click(function() {
addclass(dwlnd4);
});
$( ".dwlnd-trg3" ).click(function() {
addclass(dwlnd3);
});
});
function addClass(class){
("." + class ).addClass( "s-dwlnd" );
setTimeout(function() {
$("." + class).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
}
But if you really want to best function, I would suggest adding a date-attribute to the html. And work with an e.target so you would know which element has been clicked. But maybe this refactor is too big for you. I could add an example of this if you are interested.
I am using jquery tabs to display different content.
my functions looks like this:
$(function() {
$( "#tabs" ).tabs();
});
I have tried to make all the tabs the same height by doing it like this:
var heightStyle = $( ".tabs" ).tabs( "option", "heightStyle" );
// Setter
$( ".tabs" ).tabs( "option", "heightStyle", "fill" );
But this does not seem to work.
Is there another way to set the height to the highest tab?
D
Problem is in your selector, in the above code you are using $("#tabs").tabs(); accessing by id, in below code you are using $(".tabs") accessing by class.
Use this jquery and change class as per your wish
$(function(){
jQuery.fn.equalHeight = function () {
var tallest = 0;
this.each(function() {
tallest = ($(this).height() > tallest)? $(this).height() : tallest;
});
return this.height(tallest);
}
//Now you can call equalHeight
$(".equaltab").equalHeight();
});
i am working around an ajax loading powered website . Here i am trying to load different url on different link but there is a little bit problem i am facing . There is used 4 links and 4 pages to load each page is linked with another but on clicking a link 4 pages are loading .
my html is
<div class="col-md-12">
this is one
hello
hello
hello
<div class="ajaxshow"></div>
</div>
and my javascripts are
(function($){
'use strict';
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
})(jQuery);
though hete each function is not working it doesnot working.can anyone help?
A working example is here
http://orlandojoes.co.uk/website/ajaxTest.php
The problem is your ajaxUrl variable is within a different closure than the one you assume so by the time it is clicked, it is always the fourth link.
This is because first you do
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
Here, ajaxUrl is global to the 'each' closure. In order to fix this problem, remove the ajaxUrl declaration from outside the 'each' scope, and define it within
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
var ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
.
.
.
Also change
$('.ajaxshow').append().load(ajaxUrl);
to
$('.ajaxshow').load(ajaxUrl);
There is no need for append as load will insert the HTML response within the ajaxshow div
user your code in document ready function like this:
$(document).ready(function () {
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
});
$(document).off('click','[data-content="ajax"]');
$(document).on('click','[data-content="ajax"]',function(event) {
var ajaxUrl = $(this).attr('href');
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).off('click', '.ajax-close');
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
I hope this code will work.
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I've got a function that applies to all radio buttons on a page, I can't seem to specify it to run only for specific ones.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
var $divs = $('#divs > div');
$divs.first().show()
$('input[type=radio]').on('change',function() {
$divs.hide();
$divs.eq( $('input[type=radio]').index( this ) ).show();
});
});
});//]]>
Give each radio button a unique id and then just select the ones you want:
$('#id_radio1, #id_radio4, #id_radio9').on('change', function() {...