i have the following code:
$(document).ready(function(){
var max_count = $(".slider").children().length;
function fn_get_natural_dim(slide_image,img){
var width = img.width;
var height = img.height;
var ratiow = width/600;
var ratioh = height/400;
if(ratiow>=ratioh)
{
height = height/ratiow;
$(slide_image).css("width","600px");
$(slide_image).css("height",height);
var margin = (400-height)/2;
$(slide_image).css("margin-top",margin);
}
else
{
width = width/ratioh;
$(slide_image).css("width",width);
$(slide_image).css("height","400px");
var margin = (600-width)/2;
$(slide_image).css("margin-left",margin);
}
}
for(var count=1;count<=max_count;count++)
{
var count_string = count.toString();
var img_name = "img" + count_string;
var slide_image = $('.slider > li:nth-child(" + count + ")');
var img = new Image();
img.onload = (function(slide_image,img){
return function() {fn_get_natural_dim(slide_image,img);};
})(slide_image,img);
img.src = $(slide_image).attr("src");
}
});
i want the variable slide_image to select the nth list, where n should be the same as the variable count.
i added the + signs (although i dont know why i have to) and made the quote symbols different, and yet it still doesnt work
You should do it like this:
$('.slider > li:nth-child(' + count + ')');
The problem is that you're not closing the strings/segments surrounding the variable, so:
'.slider > li:nth-child(" + count + ")'
Is just a long string, a selector which makes no sense; that's why it matches nothing, you have to actually separate the sections by ending the static parts with the same kind of quote...
Related
I am trying to create an animation, when a button is pressed, the div have to move to left 300 px by changing the left-margin,and stop.
I get the left margin value, but when I try to extract 300 px from it, it says that the var moveto is not a number, and current_left_margin`s value is 0px, how can I get this value to be a number, without the px?
here is my full code:
function get_vars() {
elem = document.getElementById('front-slide');
}
window.onload = get_vars;
function vb_anim() {
var interval = setInterval(anim, 10);
var elemstyle = window.getComputedStyle(elem);
var elemvidth = elemstyle.width;
var current_left_margin = elemstyle.getPropertyValue('margin-left');
var moveto = current_left_margin - 300;
console.log('current_left_margin= ' + current_left_margin );
console.log('moveto= ' + moveto );
var pos = 0;
function anim() {
if (pos == moveto) {
clearInterval(interval);
} else {
pos--;
elem.style.marginLeft = pos + 'px';
}
}
}
This should do:
var current_left_margin = parseInt(elemstyle.getPropertyValue('margin-left'));
If not, then:
var current_left_margin = parseInt(elemstyle.getPropertyValue('margin-left').replace('px', ''));
Second part of the code (starting with var newHeight) does not work - what is wrong?
/* var getDim = document.getElementsByTagName("img");
var a = getDim[0].height;
var target = document.getElementById("target");
target.innerHTML = "<p>This image has" + " " + a + " " + "pixels.</p>"; */
var newHeight = prompt("Provide new height"); // 2nd part
var image = document.getElementsByTagName("img");
var theOne = image[0];
if (isNaN(newHeight) === false) {
theOne.style.height === newHeight;
}
else {
alert("Provide a proper value!")
}
You have to change this line:
theOne.style.height = newHeight;
instead
theOne.style.height === newHeight;
The second one is an expression, not an assignment.
I have this function that creates a "frame" or something like a frame and i want to delete it.
Here is the code for the create:
function disableIframe()
{
var iframe = document.getElementsByTagName('iframe')[0];
d = document.createElement('iframe');
var width = iframe.offsetWidth;
d.style.width = width + 'px';
var height = iframe.offsetHeight ;
d.style.height = height + 'px';
var top = iframe.offsetTop;
d.style.top = top + 'px';
var left = iframe.offsetLeft - 140;
d.style.left = left + 'px';
d.style.position = 'absolute';
// d.onclick="event.cancelBubble = true;"
d.style.opacity = '100';
d.style.filter = 'alpha(opacity=0)';
d.style.display="block";
d.style.background = 'black';
d.style.zIndex = '100';
d.id = 'd';
d.tagName = 'd';
iframe.offsetParent.appendChild(d);
}
I tried to delete the frame with this function:
document.getElementById('d').removeChild();
but it didn't work.
how i can find it and delete it?
It's suppose to block a web-frame until the time is over so that no one can click on the frame. So it creates a frame over the web-frame and I have a function to delete this frame because after sometime I need to be able click again on the original frame.
try this( A.removeChild(B).A is parent node of B, B is the node to delete)
var node = document.getElementById("d");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
try this
var ele = document.getElementById("d");
ele.outerHTML = "";
delete ele;
or
var ele = document.getElementById('d');
ele.parentNode.removeChild(ele);
I've created a little slideshow with images out of a folder with jQuery and with help from stackoverflow and other snippets.
Images are named 1.jpg, 2.jpg ... 1-b.jpg, 2-b.jpg...The special thing is, that every image-change 3 images are loaded. The first time the images in the HTML (3 images too) are replaced.
2 of the 3 new images are blurred, to have a fade from current to - blurred current - into blurred next - next. Works fine and looks really great.
Now I want to make a real jQuery plugin out of that, because I want to change the startup (image Nr.) and imageLast (here go back to startup) on every site. Well I don't know if there are problems with the logic of the original code to make a plugin. My trials failed. Please have a look.
Original working code:
// slideshow ----------------------------------------------------------------------------
(function() {
var pauseTime = 7000;
function slideShow(index) {
var imagePath = "slider-team";
var startup = 1;
var startindex = index+startup-1;
var index1 = startindex+1;
var lastImage = 6;
var fadeTime = 700;
var fadeTime2 = 500;
var fadeTime3 = 1000;
var theImage1 = new Image();
var theImage2 = new Image();
var theImage3 = new Image();
var url = imagePath + "/" + startindex + ".jpg";
var urlb = imagePath + "/" + startindex + "-b.jpg";
var url2b = imagePath + "/" + index1 + "-b.jpg";
$(theImage1, theImage2, theImage3).load(function () {
$(theImage1).prependTo("#slider");
$(theImage2).prependTo("#slider");
$(theImage3).prependTo("#slider");
$("#slider img:last").fadeOut(fadeTime, function() {
$(this).remove();
$("#slider img:last").fadeOut(fadeTime2, function() {
$(this).remove();
$("#slider img:last").fadeOut(fadeTime3, function() {
$(this).remove();
setTimeout(function() {
slideShow((index % (lastImage-startup)) + 1)
}, pauseTime);
});
});
});
});
theImage1.src = url;
theImage2.src = urlb;
if(startup+index === lastImage) {
theImage3.src = "slider/" + startup + "-b.jpg";
} else {
theImage3.src = url2b;
};
}
$(document).ready(function() {
// Img 1 is already showing, so we call 2
setTimeout(function() { slideShow(2); }, pauseTime);
});
})();
Trial to make a plugin:
// slideshow ----------------------------------------------------------------------------
(function($) {
$.blurSlider = function(index, settings){
var config = {
'startup':1;
'lastImage':17;
};
if(settings){$.extend(config, settings);}
var pauseTime = 7000;
//function slideShow(index) {
var imagePath = "slider-opt";
//var startup = 1;
var startindex = index+startup-1;
var index1 = startindex+1;
//var lastImage = 17;
var fadeTime = 700;
var fadeTime2 = 500;
var fadeTime3 = 1000;
var theImage1 = new Image();
var theImage2 = new Image();
var theImage3 = new Image();
var url = imagePath + "/" + startindex + ".jpg";
var urlb = imagePath + "/" + startindex + "-b.jpg";
var url2b = imagePath + "/" + index1 + "-b.jpg";
$(theImage1, theImage2, theImage3).load(function () {
$(theImage1).prependTo("#slider");
$(theImage2).prependTo("#slider");
$(theImage3).prependTo("#slider");
$("#slider img:last").fadeOut(fadeTime, function() {
$(this).remove();
$("#slider img:last").fadeOut(fadeTime2, function() {
$(this).remove();
$("#slider img:last").fadeOut(fadeTime3, function() {
$(this).remove();
setTimeout(function() {
slideShow((index % (config.lastImage-config.startup)) + 1)
}, pauseTime);
});
});
});
});
theImage1.src = url;
theImage2.src = urlb;
if(config.startup+index === config.lastImage) {
theImage3.src = "slider/" + config.startup + "-b.jpg";
} else {
theImage3.src = url2b;
};
// }
};
return this;
$(document).ready(function() {
// Img 1 is already showing, so we call 2
setTimeout(function() { $.blurSlider(2); }, pauseTime);
});
})(jQuery);
I don't know if in plugins you need to set up the selector. Here I don't, because the selector didn't change. The call of document.ready inside the plugin is the other thing that might cause problems.
I'm currently trying to implement functionality similar to infinite/continuous/bottomless scrolling, but am coming up with my own approach (as an intern, my boss wants to see what I can come up with on my own). So far, I have divs of a fixed size that populate the page, and as the user scrolls, each div will be populated with an image. As of now, the function I've written works on the first div, but no longer works on successive divs.
$(window).scroll(function () {
var windowOffset = $(this).scrollTop();
var windowHeight = $(this).height();
var totalHeight = $(document).height();
var bottomOffset = $(window).scrollTop() + $(window).height();
var contentLoadTriggered = new Boolean();
var nextImageCount = parseInt($("#nextImageCount").attr("value"));
var totalCount = #ViewBag.totalCount;
var loadedPageIndex = parseInt($("#loadedPageIndex").attr("value"));
var calcScroll = totalHeight - windowOffset - windowHeight;
$("#message").html(calcScroll);
contentLoadTriggered = false;
if (bottomOffset >= ($(".patentPageNew[id='" + loadedPageIndex + "']").offset().top - 1000)
&& bottomOffset <= $(".patentPageNew[id='" + loadedPageIndex + "']").offset().top && contentLoadTriggered == false
&& loadedPageIndex == $(".patentPageNew").attr("id"))
{
contentLoadTriggered = true;
$("#message").html("Loading new images");
loadImages(loadedPageIndex, nextImageCount);
}
});
This is the image-loading function:
function loadImages(loadedPageIndex, nextImageCount) {
var index = loadedPageIndex;
for(var i = 0; i < nextImageCount; i++)
{
window.setTimeout(function () {
$(".patentPageNew[id='" + index + "']").html("<img src='/Patent/GetPatentImage/#Model.Id?pageIndex=" + index + "' />");
index++;
var setValue = index;
$("#loadedPageIndex").attr("value", setValue);
}, 2000);
}
}
I was wondering what may be causing the function to stop working after the first div, or if there might be a better approach to what I'm attempting?
EDIT: It seems that loadedPageIndex == $(".patentPageNew").attr("id") within the if statement was the culprit.
#ViewBag.totalCount; is not a JavaScript, it's .NET, so your script probably stops after encountering an error.
Also: ".patentPageNew[id='" + loadedPageIndex + "']" is inefficient. Since IDs must be unique, just query by ID instead of by class name then by ID.