Call custom attributes in jQuery - javascript

I am using a jQuery content slider that gives the current visible slide a class of .swipeview-active, and each slide has its own data-page-index number. I have some variables where I get the window height etc, but how do I set a retrieve the value for the data-page-index of the current active slide for use in a variable, for example:
var h = $(window).height(),
w = $(window).width(),
active = $('.swipeview-active'),
dpi = $('active').data("date-page-index"),
so every time I call dpi it should put in the value of the active slides data-page-index, but that doesn't work. Where am I going wrong? Thanks.

When accessing a data-* attribute via data() you don't need the data- prefix. Try this:
dpi = $('active').data("page-index")
You can also access a data attribute which was present on an element on page load via attr() - although it is not the preferred method. This method will require the data prefix.
dpi = $('active').attr("data-page-index")

Related

How to increase Googles polyfill dialog height dynamically

I use Googles polyfill dialog and want to increase it's height dynamically depending if a user clicks a dialog button to add more elements (rows) in it.
This is part the javascript which is called when the user cklicks that button :
var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);
but height is simple empty, no value - nothing
While mc_dialog.style.height = "500px" works perfect.
Why do I not get the value of mc_dialog.style.height ?
EDIT :
Ok after the answer of Evil Penguin I set the height initially in the javascript function, which opens the dialog, like this :
mc_dialog.style.height = "500px"
and later when the user clicks to add content to the dialog I can retrieve the height now, so it look like this now :
var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";
and it works perfect.
But now I have the question why do I have to set the style.height initially ? Isn't it a permanent attribute of that element ? And if not, why ?
Here is similar question.
.style.height only works if you have set the property in the first place.
EDIT:
Here is reference of HTMLElement.style property. It says:
The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute.
So as i understand it, if there is no style="smth" in the element's inline declaration, HTMLElement.style.smth doesn't work.

JavaScript retrieving element's CSS values

I'm currently making a basic drag and drop system and need to retrieve the top and left properties of the element being moved. If I do this:
var mover = document.getElementById('mover');
alert(mover.style.top);
Will alert nothing ( ' ' )
Is there any way of retrieving CSS values (in JS) without having to define them with JS first?
You will need to use getComputedStyle if you wish to retrieve properties that are computed rather than defined.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
FROM the MDN link...
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
You can get the position of the element as position().top, The css values can be retrieved as .css("margin-top") or .css("top")
alert($('#mover').position().top);
alert($('#mover').css("margin-top"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>
Since you dislike jQuery, here is the solution in pure JS
Update :
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
<div id='mover'>dasdasD</div>
There are three possible tops to worry about:
The actual top position. Every element has a top resulting from the page layout, whether or not it has a computed value for the top property. Get this with getBoundingClientRect.
The computed value of the CSS property top. Get this with getComputedStyle, as mentioned in other answers
The current style value set on the element for top. Get this with elt.style.top as you attempted.
var mover = document.getElementById('mover');
alert(mover.offsetTop);
alert(mover.offsetLeft);

Change height of panel form javascript

Using JS Can get the height of an asp.net panel
var test1 = $$('ViewFeatureProperties')[0].offsetHeight;
if (test1<500)
{
//change height of panel to 275
$$('ViewFeatureProperties')[0].offsetHeight = 275px;
}
could get the value in test1, but wouldnt update to 275 if test1<500, any advice? ta
The offsetHeight property is read only, use height instead.
Your first line of code and if statement are, at least syntactically, correct examples of how to use it. To set it change your code to read:
$$('ViewFeatureProperties')[0].style.height= '275px';
Notice I've also wrapped my value with ' so that I'm assigning it a string.
Alternative:
Since you're using jQuery it seems, you can use jQuery to set the height:
$('ViewFeatureProperties').eq(0).height(275);
No massive difference, it's just that you now still have your jQuery object if you want to chain more functions.

What is the proper method of creating an object of a parent window using JQuery

I have seen in researching how to create an object of an element's parent window at least two different ways of writing the code to do it using JQuery.
Which one of these are correct, and what is the difference in the first one versus the second one?
The purpose in trying to figure this out is that I want to set the size of an iFrame and position it within the parent window.
Thanks.
Example 1
var windowId = 'custErrWindow';
var parentWindow = $('#' + windowId).parent();
var height = parentWindow.height();
Example 2
var windowId = 'custErrWindow';
var parentWindow = $('#' + windowId).parent.$('#window');
var height = parentWindow.height();
As far as I know there is no .parent property of objects that jQuery returns, but maybe someone with more knowledge can correct me on this -- so that would make your $('#' + windowId).parent undefined. In terms of the right way to find a parent element, check jQuery's docs for parent() vs. parents(); for example, parent() of an HTML tag element will return a set with document, while parents() does not. Hope that helps.

Why can only my most recently added page element be resized?

I have a webpage where I can click on it to add a image. If I then click on the image it makes it bigger and if I click again it resizes it back to the original size.
If I then click somewhere else on the screen I can create another image and grow and shrink this also by clicking on it.
The problem is only the latest image can be resized by clicking even though none of the vars are being removed or changed.
This is part of a game I am working on.
I made a sample page with the least possible code to try it out and can be got here.
http://johncleary.net/hg/
What I want is to be able to click on any image at any time and it will grow and shrink
From the code on your page, I see that you are using innerHTML += ... to add new images - this isn't a very good thing, because it causes the browser to recreate all the inner elements every time you do so, and this could cause weird interactions with event handlers.
Consider using DOM methods to create and add elements, for example:
var e = document.createElement('img');
e.id = id;
e.onclick = pieceClicked; // No parameter required, this.id is available directly inside the function
...
board.appendChild(e);
Some other side notes:
You're using xPix * yPix as part of the ID: if you expect this to be unique, it may not be. For example, x = 500, y = 10 and x = 10, y = 500 will result in the same ID. How about just using xPix + ',' + yPix as a string by itself?
The several lines in which you initialize Pieces[id] can be reduced to a simpler form using object notation: Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }.

Categories