JQuery SVG not working - javascript

I am trying to create a circular page with tabs around it and the SVG path are not being appended to the html.
Any help would be grateful. I have not worked with JS in a long time since I have moved on to Java so my skills are rusty.
var tabs = 10;
var radius = 500;
var xcords = [];
for (var i = 1; i <= tabs; i++) {
xcords[xcords.length] = radius + Math.cos(36 * i + 18) * radius;
}
var ycords = [];
for (var i = 1; i <= tabs; i++) {
ycords[ycords.length] = radius + Math.sin(36 * i + 18) * radius;
}
$(document).ready(function(){
for (var i = 1; i < tabs; i++) {
$(".svg").prepend("<path class='piece' />");
$(".piece").attr({
"d" : "M" + xcords[i] + "," + ycords[i] + "L500,500 L" + xcords[i + 1] + "," + ycords[i + 1] " A500,500 0 0,0 " + xcords[i] + "," + ycords[i] + " Z"
});
}
$(".piece").mouseenter(function() {
$(this).fadeTo(100, 0.7);
});
$(".piece").mouseleave(function() {
$(this).fadeTo(100, 1);
});
$(".piece").click(function() {
$(".center").attr("fill",$(this).attr("fill"));
});
});
I know that the array id not large enough to get xcords[11] but a solution to it would be helpful.

Related

Can't change css style with JS

<script>
var animate = function (element, target, callback) {
clearInterval(element.timer);
element.timer = setInterval(function () {
var step = (target - element.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
element.style.left = element.offsetLeft + step + 'px';
// console.log(element.offsetLeft);
if (element.offsetLeft == target) {
clearInterval(element.timer);
callback && callback();
}
}, 20)
};
window.addEventListener('load', function () {
var ul = document.querySelector('.local-nav');
console.log(ul);
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var ul2 = document.querySelector('.subnav-entry ul');
console.log(ul2);
for (var i = 0; i < ul2.children.length; i++) {
console.log(ul2.children[i].children[0].children[0]);
ul2.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var focus_ul = document.querySelector('.focus ul');
var ol = document.querySelector('.focus ol');
var count = 0;
var focus_timer = setInterval(function () {
if (count == 2) {
animate(focus_ul, focus_ul.offsetLeft - 375);
// console.log('i run');
// console.log(focus_ul.offsetLeft + ' ' + count);
// focus_ul.style.left = focus_ul.offsetLeft + 375 * 2 + 'px';
focus_ul.style.left = 0 + 'px'; // Here is my problem
console.log(focus_ul);
console.log(focus_ul.offsetLeft + ' ' + count);
}
else {
console.log('before animation ' + focus_ul.offsetLeft + ' ' + count);
animate(focus_ul, focus_ul.offsetLeft - 375);
console.log(focus_ul.offsetLeft + ' ' + count);
}
// focus_ul.style.left = focus_ul.offsetLeft + 375 + 'px';
count++;
count = count % 3;
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[count].className = 'current-choice';
console.log('after a round ' + focus_ul.offsetLeft + ' ' + count);
}, 2500)
})
</script>
I meant to do a photo show that can play automaticly, like a Carousel or swiper, The 375px means that the screen is 375px wide, according to the code, when comming to the last photo, as the animation end, it should change back to the initial one which style.left == 0px, but 0px only occur a small while, next time it would be -1125px, -1500px and so on, I'm confused why i set style.left to 0 but fruitless. I'm new in front end ,thanks helping
You can use more of CSS (and less JavaScript) for this animation.
Declare two separate CSS class definitions for focus_ul. Use JavaScript to change the className of focus_ul.
Use CSS transition for animation of CSS offset-left property.
See: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
Write that custom className instead :hover in above example.

"for" in wrong loop .js

I'm having some problem with this function. I ask sorry if the code looks a bit confused.
Basically what i'm trying to do is to divide some elements between the top and bottom of the documents having between them the same space circa.
i wrote this code but seems like the first "for" cycle goes loop ever and ever again.
** update**
so i improved the code and now the problem seems to be the variable "ifc"(if-counter). It suppose to increase by one every time that one of the if or else if is completed , but as you can see on the console it always remain 0 .
anyone can help?
thanks
var sizewidth = window.innerWidth;
var sizeheight = 3000;
function initialPosition(){
var els = document.querySelectorAll('.ico');
var tb = Math.round(els.length * 0.4);
console.log(tb);
var lr = els.length - tb;
var distPixEachTopBottom = sizewidth / (tb/2);
console.log(distPixEachTopBottom);
var distPixEachLefRight = sizeheight / (lr/2);
var nextTop = 0;
var nextLeft = 0;
var nextBottom = 0;
var nextRight = 0 ;
for (i = 0; i < els.length; i++) {
var ifc = 0;
console.log('i' + i);
if(i < tb){
var sf = 0;
for(;;){
console.log('sf' + sf + 'tb ' + tb);
if(ifc > 1){
console.log('ifc'+ ifc);
ifc = 0;
break
}else if(ifc == 0){
els[i].style.top = 0 +'px';
els[i].style.left = nextTop + 'px';
console.log('ifc ' + ifc + 'i ' + i + 'nexttop' + nextTop)
nextTop = nextTop + distPixEachTopBottom;
ifc++;
break;
}else if(ifc == 1){
els[i].style.bottom = 0 +'px';
els[i].style.right = nextBottom + 'px';
console.log('ifc ' + ifc + 'i ' + i + 'nextbottom' + nextBottom)
nextBottom = nextBottom + distPixEachTopBottom;
ifc++;
break;
}else{
console.log('else if problem')
break;
}
}
}else{
}
}
initialPosition();
update
i created a pen as you asked
codepen
So basically of all the boxes the 40% of them (6 in this case) should be divided between top and bottom but they go just on top.
So I solved by myself .
I put the var ifc before then any function .
Anyway thanks everyone

How leaflet loads tile maps for custom rules?

Now there is a map of custom tile rules locally. There is already a custom JavaScript library that can be called normally. Now I need to replace this library with leaflet. How to use the algorithm in the old JavaScript library and leaflet to make the tile map Normal call?
The tile map projection rule is Mercator projection. The tile size is irregular. The width is 256 pixels. The height is the same on each line, but the different line heights are different. The old JavaScript library defines the ellipsoid parameters. Various levels of scale, rank number calculation rules, etc., now want to use leaflet to load these tile maps, how to use the old rules and leaflet combination?
MapBase defines various basic parameters, loadMapImage is a key function
function LoadMapImage() {
var tileLoadInfo = mapBase.getViewInfo();
MapInfo.Map.basemapslicedlayer.empty();
for (var i = 0; i < tileLoadInfo.TileInfo.length; i++) {
if (MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode] == undefined) {
if (tileLoadInfo.Mode == 6) {
var src = DNCOptions.url + "&" + DNCOptions.paramX + "=" + tileLoadInfo.TileInfo[i].Row + "&" + DNCOptions.paramY + "=" + tileLoadInfo.TileInfo[i].Col + "&" + DNCOptions.paramZ + "=" + tileLoadInfo.TileInfo[i].Level + "&SessionID=" + WinfoDNCSessionID
} else if (tileLoadInfo.Mode == 8 || tileLoadInfo.Mode == 9) {
var level = tileLoadInfo.Level + 2;
if (tileLoadInfo.Mode == 9) {
level = tileLoadInfo.Level - 3
}
src = MapInfo.ServicePath + "?REQUEST=GetMap&SERVICE=CacheMap&Y=" + tileLoadInfo.TileInfo[i].Col + "&X=" + tileLoadInfo.TileInfo[i].Row + "&LEVEL=" + level + "&LAYERS=" + DNCOptions.layername + "&SessionID=" + WinfoDNCSessionID
} else {
var src = MapInfo.ServicePath + "?REQUEST=GetMap&SERVICE=WINFODNC&X=" + tileLoadInfo.TileInfo[i].Col + "&Y=" + tileLoadInfo.TileInfo[i].Row + "&LEVEL=" + tileLoadInfo.Level + "&LAYERS=" + tileLoadInfo.Mode + "&SessionID=" + WinfoDNCSessionID
}
MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode] = w$("<img>").css({
position: "absolute",
left: tileLoadInfo.TileInfo[i].Offset_x,
top: tileLoadInfo.TileInfo[i].Offset_y
}).attr("src", src)
}
MapInfo.Map.basemapslicedlayer.append(MapInfo.Map.Tiles[tileLoadInfo.TileInfo[i].Col + "_" + tileLoadInfo.TileInfo[i].Row + "_" + tileLoadInfo.Mode].css({
position: "absolute",
left: tileLoadInfo.TileInfo[i].Offset_x,
top: tileLoadInfo.TileInfo[i].Offset_y
}))
}
}
function GetTileInfoByViewportParam(vp) {
var Box = {};
var i, row1, row2, col1, col2, hTileSize;
var L, R, T, B;
var LT = ScreenPoint2Coordinate(vp, 0, 0);
Box.Top = LT[0];
Box.Left = LT[1];
var RB = ScreenPoint2Coordinate(vp, vp.Width, vp.Height);
Box.Bottom = RB[0];
Box.Right = RB[1];
var rc = CalculateTile(LevelZeroTileSizeDegrees, Box, vp.Level);
row1 = rc[0];
row2 = rc[2];
col1 = rc[1];
col2 = rc[3];
var LRTB = CalculateTileExtend(LevelZeroTileSizeDegrees, vp.Level, row1, col1);
L = LRTB[0];
R = LRTB[1];
T = LRTB[2];
B = LRTB[3];
var Offset = Coordinate2ScreenPoint(vp, T, L);
vp.Offset_x = Offset[0];
vp.Offset_y = Offset[1];
MapViewInfo.Level = vp.Level;
MapViewInfo.Box = Box;
i = 0;
var offsety = vp.Offset_y;
MapViewInfo.TileInfo = [];
for (var j = row1; j >= row2; j--) {
hTileSize = CalculateTileSize(vp.Level, j, col1);
var offsetx = vp.Offset_x;
for (var z = col1; z <= col2; z++) {
var tileInfo = {};
tileInfo.Row = j;
tileInfo.Col = z;
tileInfo.Height = hTileSize;
tileInfo.Widht = TileSize;
tileInfo.Offset_x = offsetx;
tileInfo.Offset_y = offsety;
offsetx += TileSize;
MapViewInfo.TileInfo[i] = tileInfo;
i++
}
offsety += hTileSize
}
return MapViewInfo
};
According to the default initialization map method of leaflet, the parameters can only be retrieved to the blank tile.

.append not working on click

Simple button that should be creating new <p> elements when its clicked but it isn't working and I'm not sure why as I've compared it to other code of mine.
Demo
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2);
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
}
You have many syntax errors in your code. If you correct them (as below), then it works fine. When you write a JQuery append, you need to put a ')' after your argument. Likewise, functions need to have a '}' after them.
var playerAtk = 5;
var playerDef = 5;
var playerHP = 10;
var monsterAtk = 4;
var monsterDef = 4;
var monsterHP = 8;
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2));
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
});

How do I "uniquely" repeat a function n times in javascript?

so I have some code that draws a path and a circle. the circle is animated across the path every single time the function is initiated. I simply want to create 10 paths, each with their own circle that animates across each path. When I simply execute the function 10 times, the paths are generated fine, however the circle all animate along the same, single path. what am I doing wrong here? Is the best method here to create a for(i=0) loop?
You can view my code on jfiddle, or take a look at it here:
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = .1,
pb = .4,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = .1,
be = .9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "];
opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())];
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0});
bh = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {
var t = this.attr("transform")})
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
}
};
return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh
}
pathfade();//how do i repeat this function n times?
});
}
commerce();
As far as I can see a simple loop should be fine. If you're interested this is the fastest way to loop in JavaScript:
var i = 10; while (i--) {
//Your code..
}
You need to break the pathfade() function into multiple simple functions that do only a few task.
There are two main problems.
First, you're placing a semi-colon where there should be a comma during your variable declarations. Look at the stroke variable.
Second, pathfade is returning multiple values when javascript only supports one. Remember that once you return from a function the rest of the statements don't get executed.
And lastly, use a for, do-while, or while loop to repeat your function calls.
Here's the fix. Sorry I didn't have time to refactor.
function commerce() {
Raphael("commercebounce", function () {
var r = this;
function pathfade() {
var pa = 0.5,
pb = 0.9,
pc = [0, 2],
pd = [50, 300],
pe = [150, 800],
pf = [150, 350],
pg = pd[0] + Math.random() * (pd[1] - pd[0]),
ph = pe[0] + Math.random() * (pe[1] - pe[0]),
pi = pf[0] + Math.random() * (pf[1] - pf[0]),
bd = 0.1,
be = 0.9,
pathspot = bd + Math.random() * (be - bd),
colours = ["215,10,45", "115,115,115"],
stroke = ["", "- "],
opacity = pa + Math.random() * (pb - pa),
colour = "rgb(" + colours[Math.round(Math.random())] + ")",
strokeW = pc[Math.round(Math.random())],
pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({
stroke : colour,
"stroke-dasharray" : stroke[Math.round(Math.random())],
"opacity" : 0
}),
bh = r.circle(0, 0, 7, 7).attr({
"stroke-width" : this.strokeW,
stroke : colour,
"stroke-opacity" : this.opacity,
fill : "none",
"fill-opacity" : 0
}).onAnimation(function () {
var t = this.attr("transform")
}),
leng = pj.getTotalLength();
r.customAttributes.along1 = function (v) {
var point = pj.getPointAtLength(v * leng);
return {
transform : "t" + [point.x, point.y] + "r" + point.alpha
}
};
bh.attr({
along1 : 0
});
bh.animate({
along1 : pathspot
}, 300);
pj.animate({
opacity : opacity
}, 300);
}
var i = 10;
while( i-- ){
pathfade();
}
});
}
commerce();
Demo: http://jsfiddle.net/VEdwG/6/
Your should read "The Elements of C# Style".
http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title
var n = 5; //or however much you want
for (var i = 0; i < n; i++){
pathfade();
}
The for loop method is the simplest option here.

Categories