I have this little function to print the image size.
while it works when I just call the function
with size('#prototype); for example, it is not working anymore on resize('#protoimg).
Why? Can anyone help me out, please?
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(size('#protoimg'));
)};
Try this:
$(function() {
size('#protoimg')
});
$(window).resize(function() {
size('#protoimg');
});
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#target').html('<p class="size">' + width + '-' + height + '</p>');
}
If #protoimg is an image file, make sure you set attribute width="100%"to avoid overflow.
Try to put to remove the function size(a) out of the $(document).ready(); and put the $(window).resize(); inside
Like this:
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
$(document).ready(function(){
$(window).resize(function() {
size('#protoimg');
});
});
Just remember,the $(window).resize(parameter) need a function as the parameter.But the size('#protoimg') is a result of function.so the correct code is:
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(function(){
size('#protoimg');
});
)};
Related
I've been trying to get a smooth scroll animation for a while now, but mainly in JS..
This hasn't been working out that well so I decided to try in CSS3.
Now I want to make this animation responsive by calling a JS function which adds the CSS rules for the animation responsive to the object the animation is for. Here is the JS code I've got so far. I'll also leave a Fiddle, but I'm new to that so things might not work right away.
function getTexts() {
var element = document.getElementsByClassName('toplink');
for (x = 0, len = element.length; x < len; x++){
var ID = element[x].textContent.toLowerCase();
var object = document.getElementById(ID);
console.log(object);
addCSSAnimator(ID);
}
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = document.getElementById(el);
var Class = DOM.getAttribute("class");
var Parent = DOM.parentElement.getAttribute("id");
var rect = DOM.getBoundingClientRect();
var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
"-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"}";
console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
https://jsfiddle.net/dtj46c64/
You may try moving to jquery for this solution. Use document.ready and window.resize functions to handle the animation and also instead of for loop. use the jquery .each() function to get the elements. Try working around the following code i changed for you to go along with. Hope this puts you in the right direction to achieve your goal:
<script>
function getTexts() {
$(".toplink").each(function () {
let ID = $(this)
console.log(ID);
addCSSAnimator(ID);
});
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = el;
var Class = DOM.attr("class");
var Parent = DOM.parent().attr("id");
var rect = DOM[0].getBoundingClientRect();
var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
"-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"}";
console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
$(window).on('resize', function () {
getTexts();
});
$(document).ready(function () {
getTexts();
});
</script>
Notice i changed the rect.y to rect.top as on some browsers the getBoundingClientRect fucntion does not return x and y values but left and top are always filled.
Also dont know why you are getting id of the parent of the object as there is no id set to the parent of the anchor class="toplink" so it will always return as null or empty.
Sorry for not a 100% answer as got busy but i hope the solution so far i suggested will help you tweak and find what your looking for.
I have a div which has lots of content. And i want to display an alert when content of that div changes(the div is refreshed every 60 sec). I tried $("div#divName").html() but it is not working as the div has a large content. So what an i do?
var $container = $("#load-scores");
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz);
var s= $("#load-scores").html();
var refreshId = setInterval(function()
{
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz);
var p = $('#load-scores').html();
if(p.is(s))
alert("changed");
}, refresh_time);
PS:
console.log(p) and console.log(s) is returns empty
You can use jquery's load() as a function.
var $container = $("#load-scores");
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz, function(){
alert("Changed");
});
var refreshId = setInterval(function()
{
$container.load("/include/home.php?ust=" + url_site + "&tz=" + tz, function(){
alert("Changed");
});
}, refresh_time);
I am using the following code which does 2 out of the 3 things I want it to do, shares dynamic content with a custom twitter button:
<script type="text/javascript">
// <![CDATA[
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="' + twtLink + '" target="_blank"' + '><img src="images/twitter.png" border="0" alt="Tweet This!" /' + '><' + '/a>');
// ]]>
</script>
What I would like it to do is also popup in a window rather than a full page view. My knowledge of script is limited so I don't know where to insert the appropriate popup code.
Any help?
instead of document.write you need window.open. Make sure the event is done in a click action, otherwise popup blockers would stop your script
<script type="text/javascript">
function fbs_click() {
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
window.open(twtLink);
}
</script>
And in your HTML add your image tag like this:
Hope this helps
You can place an ID="twitPop" on the anchor and use this as well.
$('#twitPop').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
I used setinterval to slide number of divs every period of time and that worked fine but the problem happend when i made function"getdata()" that testing this animation and returns the width,left postion,text inside Div for each p...please help me to improve the function "getdata()" to get these information about each p which it changes per sec or i value.
ineed to view data like that
1,left is:0,width:60
2,left is:34,width:40
3,left is:66,width:70
I want to make the data_text which is "1 or 2 or 3" is fixed while the width & data_p_l changes for each data_text "u can consider it it's an ID for the element" 4Ex "
1,left is:0,width:60
1>> this is fixed and this line won't be repeated
left is:20>> changing
width:20>> changing
Ihopt that i've cleared my question.
Thanks alot.
The HTML:
<div id="test"></div>
<div id="center">
<p id="th">3</p>
<p id="s">2</p>
<p id="f">1</p>
</div>
The jQuery:
$(document).ready(function(){
var i = null;
var width = $('#center').width();
var timer = setInterval(function() {
$('p').each(function() {
$(this).css({'left': $(this).position().left + i});
});
getdata('p' ,'#test');
i+=1;
},500);
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var $this = $(this);
var width = $this.width();
var data_p_l= $this.position().left;
var data_text= $this.text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",
width value is: "+ width ;//+ ",id value is: "+ data_id;
$(showdiv).text($(showdiv).text() + ' ' + dataset);
});}
});
I'm not exactly sure what you are trying to do, but This might help. First in this section:
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var len = $( parentdiv ).length;
var width = $(e).width();
var data_p_l= $(e).position().left;
var data_text= $(e).text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",width value is: "+ width;
$(showdiv).text(dataset);
});
}
You want to replace e with this.
function getdata(parentdiv,showdiv){
$(parentdiv).each(function(){
var len = $( parentdiv ).length;
var width = $(this).width();
var data_p_l= $(this).position().left;
var data_text= $(this).text();
var dataset = data_text + ",Left value is: "+ data_p_l + ",width value is: "+ width;
$(showdiv).text($(showdiv).text() + ' ' + dataset);
});
}
Inside the each function, this is used to refer to each element that gets iterated over. At the end of your function, you are putting your results into your div with id test. However, this is running in a loop, so you will only end up with output for the last p tag, and not each one. What I think you want to do is add to the test div like this: $(showdiv).text($(showdiv).text() + ' ' + dataset);
please see: demo
$("#stdout").height()
return 18px
I want to get the reality height ( height + padding + border ) 200px
how to do?
thank for help :)
See .outerHeight()
$("#stdout").outerHeight();
// returns ( height + padding + border )
And if you want to include margin as well:
$("#stdout").outerHeight( true );
// returns ( height + padding + border + margin )
Here's another way:
$.fn.getHeight = function()
{
return ($(this).height() + parseInt($(this).css("padding-top")) + parseInt($(this).css("padding-bottom")) + parseInt($(this).css("borderTopWidth")) + parseInt($(this).css("borderBottomWidth")));
};
$.fn.getWidth = function()
{
return ($(this).width() + parseInt($(this).css("padding-left")) + parseInt($(this).css("padding-right")) + parseInt($(this).css("borderLeftWidth")) + parseInt($(this).css("borderRightWidth")));
};
To use this function, simply call:
obj.getHeight()
Or:
$(this).getHeight();