I'm currently using a jQuery UI range slider, which I'm trying to get the value of the "left" attribute of the minimum and maximum handler.
To do so, I have this javascript code used with the #price_range, in this case, everything works fine.
function GetLeftValue(){
var element = document.getElementById('price_range'),
left = element.getBoundingClientRect().left,
windowWidth = window.innerWidth;
var num = (Number(((left / windowWidth) * 100).toFixed(1))+ "%");
alert(num);
}
But when I'm trying to use it with the two handlers who have the following classes :
.ui-slider-handle .ui-corner-all .ui-state-default
I can't reach them using my js function with "getElementsByClassName()" of course :
var element = document.getElementsByClassName('class')
I tried every single one of the previous classes.
I also tried jQuery, related to my function, which i'm not really sure if it's a valid way to select elements :
var element = document.$('#slider-range > span:nth-child(2)') /*minimum handler*/
Finally, I thought that somehow, the element should be an id, so it can work properly, which I tried to add an Id to the previous classes:
$('.class').attr("id","myId");
Which is still failing to do what am I expecting.
Can anyone help me clear things up on this situation? Thanks.
Would something like this work for you?
let minvalue = $(".ui-slider-handle:eq(0)").css("left");
let maxvalue = $(".ui-slider-handle:eq(1)").css("left");
https://jsfiddle.net/sguk2a39/
EDIT: had some typos.
Related
Ok, this is probably a dumb question but I have 10 h1 elements that I want to fade gradually as they show up.
Is it possible to have something like
var opac = 1 - Number(n)/10;
and then use that as the value for opacity...
$('h1:nth-child(n)').css('opacity', opac)
I realize this code doesn't really work, but is there a way to do this, use the nth-child number in a variable or an equation?
What you are looking for is .each. You have to loop and apply.
$('h1').each(function(index){
var opacity = 1 - (index/10);
$(this).css("opacity",opacity);
})
No.
For CSS rules, there is no knowledge of how elements are rendered.
This has to be done using script.
I suggest this:
$("h1").each(function){
var n = $(this).index();
var opacity = 1 - (n/10);
$(this).css({"opacity":opacity);
});
I have a javascript function that tries to determine whether a div is visible and does various processes with that variable. I am successfully able to swap an elements visibility by changing it's display between none and block; but I cannot store this value...
I have tried getting the elements display attribute value and finding if the the element ID is visible but neither has worked. When I try .getAttribute it always returns null; I am not sure why because I know that id is defined and it has a display attribute.
Here is the code of the two different methods I have tried:
var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");
Any guidance or assistance would be greatly appreciated.
Try like this:
$(function () {
// Handler for .ready() called.
if ($("#mydivID").is(":visible")) {
alert('Element is visible');
}
});
FIDDLE
Please make sure to include the jQuery file inside the head tag, as follows
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
If you would like to do this only javascript way you may try
window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
Display is not an attribute, it's a CSS property inside the style attribute.
You may be looking for
var myvar = document.getElementById("mydivID").style.display;
or
var myvar = $("#mydivID").css('display');
Let's take a second to see what .is(":visible") is doing in jQuery, shall we?
Here's a link: https://github.com/jquery/jquery/blob/master/src/css.js#L529
return !jQuery.expr.filters.hidden( elem );
where
jQuery.expr.filters.hidden = function( elem ) {
// Support: Opera <= 12.12
// Opera reports offsetWidths and offsetHeights less than zero on some elements
return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};
So, it's just checking the offset width and height of the element.
That said, and also worth noting, when jQuery checks to see if an element is hidden (i.e. like when triggering a 'toggle' event), it performs a check on the display property and its existence in the dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43
var myvar = $("#mydivID").is(":visible"); //THis is JQUERY will return true if visible
var myvar = document.getElementById("mydivID").getAttribute("display"); //HERE Display is not a attribute so this will not give desired result.
MY SOLUTION
1.Select the element using QuerySelector
var myvar= document.querySelector('ELEMENT');
2.Check the OffsetWidth and Offsetheight to be greater than 0;
(myvar.offsetWidth > 0 || myvar.offsetHeight > 0)
3.if myvar is Greater than 0 then it's visble else not.
I have this variable
var item_width = $('#slides li').outerWidth();
and want to modify it to include #slides2 li as well. Do i have to write two vars and use them in their respective functions or is there a way to include both IDs in a single line?
I am doing this because I have two divs (that toggle) containing two different slide carousels and am trying to share as much of the scripts as possible.
// EDITED to extrapolate //
i'm missing something simple here, i just know it. the first div works no problem, the second just won't work. should i use classes instead? (that may be a dumb question, but i'm VERY new to JS)
there is quite a bit of code and i couldn't get the jsfiddle working so i just posted a dev doc to our production site.
(url deleted)
// EDIT //
nevermind, the problem was with the css, not the script. adding clear: both to #slides ul, #slidesTwo ul put them all on a separate line. they were all floating left outside of the ul
var item_width = $('#slides:visible li,#slides2:visible li').outerWidth();
If you want an array of the outerWidth()s of your selected elements...
$('#slides li, #slides2 li').map(function() { return $(this).outerWidth(); });
outerWidth() will only ever return a single Number (or null).
You can construct a jQuery object referencing both "slides" by using a comma:
var item_width = $('#slides li,#slides2 li').outerWidth();
However, you might find that's not what you're looking for because it will only give the outer width of the first element matched1.
So, even though it's more than just one line, maybe what you're looking for is:
var item_width = 0;
$('#slides li,#slides2 li').each(function () {
item_width += $(this).outerWidth();
});
While you could more simply use:
var item_width = $('#slides li').outerWidth() + $('#slides2 li').outerWidth();
The former version of the code allows you to more easily expand the code later. And as others have suggested, you might consider assigning a common class to each of your slide <li>'s (such as 'slideItem') and then use the following code to get a total width for all the slides, regardless of how many there may be:
var item_width = 0;
$('.slideItem').each(function () {
item_width += $(this).outerWidth();
});
Now, it's possible you're looking for the maximum width, not the total width, in which case the code is easily altered to suit your needs:
var max_width = 0;
$('.slideItem').each(function () { //modify the selector to suit your needs.
max_width = Math.max(max_width, $(this).outerWidth());
});
To simplify selecting two different slides, it's recommended to make sure they share a common class. In this case, try adding the class slides to both of them.
var $allSlides = $('.slides');
Since .outerWidth() will only return the width for the first element in the set, you might need to iterate over the elements and perform the same action.
$allSlides.each(function(index, element) {
var $this = $(this),
outerWidth = $this.outerWidth();
doSomething($this);
});
I have an application in which the user needs to see the changes that have been made during the latest edit.
By changes I mean, the changes made in all inputs like a textarea, dropdowns.
I am trying to implement this by showing a background image on the right top and then when the user clicks this background image, a popup is shown which shows the difference.
I am using prototype 1.7.0.
My First question would be:-
1. What would be the best approach to implement this functionality?
2. Can I put a onClick on the background image?
There some functions in the jQuery library that I believe would be helpful to you. If you are using prototype, I would guess that there is some similar functionality you may utilize.
I would suggest writing some code like this:
var $input = $('input').add('textarea').add('select');
$input.each(function() {
var id = $(this).attr('id');
var value = $(this).val();
var hiddenId = 'hidden' + id;
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId);
$(this).after(newHiddenInput);
});
The above code will create a new hidden input for each input, textarea, and select on your page. It will have the same value as the input it duplicates. It will have an id equivalent to prepending the id with the word 'hidden'.
I don't know if you can attach a click handler to a background image. If your inputs are enclosed inside a <div>, you may be able to get the result you want by attaching the click handler to your div.
In any case, you should now have the old values where you can easily compare them to the user's input so that you can prepare a summary of the difference.
Prototype gives us the Hash class which is almost perfect for this but lacks a way of calculating the difference with another hash, so let's add that...
Hash.prototype.difference = function(hash)
{
var result = this.clone();
hash.each(function(pair) {
if (result.get(pair.key) === undefined)
// exists in hash but not in this
result.set(pair.key, pair.value);
else if (result.get(pair.key) == pair.value)
// no difference so remove from result
result.unset(pair.key);
// else exists in this but not in hash
});
return result;
};
This is no way to tell if an element was clicked on just it's background image - you can find out the coordinates where it was clicked but that is not foolproof, especially since CSS3 adds complications like multiple backgrounds and transitions. It is better to have an absolutely positioned element to act as a button.
$('button-element').observe('click', function() {
var form_values = $H($('form-id').serialize(true));
if (old_values) {
var differences = old_values.difference(form_values);
if (differences.size()) {
showDiffPopup(differences);
}
}
window.old_values = form_values;
});
// preset current values in advance
window.old_values = $H($('form-id').serialize(true));
All that remains is to implement showDiffPopup to show the calculated differences.
Please see the my test site here.
The script is written in the <head> so you will be able to see it there.
Instructions
If you click the blue area a new element will be made. Do this four or five times. Now click all the elements you've just created. They should all have a black outline. However, some do and some don't.
Additional Info:
Only tested on chrome so far.
Any ideas on what's going wrong here?
You are adding the click listener to all bubbles each time a new one is created.
Add the listener once with the live listener. It can be set before any of the bubbles are created.
And don't use numeric id attributes, it's disallowed by HTML.
Also, you are toggling the active class -- there's a shorter function for this -- toggleClass.
You can simplify using this:
$(function () {
// CREATE A NEW BUBBLE
$('.drop').click(function(event){
Bubble(event);
});
var newBubbleId = 0;
function Bubble(event,bubbleClass){
// Create Element
var id = newBubbleId++;
var bubble = $('<div class="bubble" id="b_'+id+'" draggable="true"><input id="bubbleText" type="text" name="text" value="'+id+'" /></div>');
$('body').append(bubble);
// Position Element
var bubbleWidth = bubble.width();
var bubbleHeight = bubble.height();
var x = event.pageX - (bubbleWidth*0.5);
var y = event.pageY - (bubbleHeight*0.5);
bubble.offset({top:y, left:x});
bubble.click(function () {
$(this).toggleClass("active");
});
}
});
I see a few other issues. Number ids as mentioned before. Also, all your input elements have the same ID, that is not allowed. One ID per document only. You can use the Name attribute if you want them to have the same name.
Also, your counter function isn't ideal.
But this should solve your problem.