window.getSelection() without considering element inside?

i’m trying to use this function to understand the anchor offset and focus offset in an HTML text

$("#content").mousedown(function (e) {

 var selection = window.getSelection();
 console.log(selection);
}

I have this text

This

is my code and i want to print it

In the count of anchor offset and focusoffset i want to consider all element inside content except

E.g. If i select “This is “ anchor offset will be 0 and focusoffset 2
if i select “This is my code” i want anchor offset to be 0 but focus offset to be 11 (the distance from p and not from span)

Is this possible?


Source: stackoverflow-javascript

Delete elements below some element using jQuery

I’ve next code:

$(function () {
    $('#delete-button').click(function () {
        deleteElementsBelow('#parent-container', 'element-2');
    });
    
    function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
        var deleteOthers = false;
        $(parentContainerSelector).children().each(function () {
            var $elem = $(this);

            if (deleteOthers) {
                $elem.remove();
            } else if ($elem.hasClass(deleteBelowSelector)) {
                deleteOthers = true;
            }
        });
    }
});
#parent-container div {
    background-color: red;
    width: 20px;
    height: 20px;
    margin: 10px;
}

#parent-container div:nth-child(2n) {
    background-color: green;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<button id="delete-button" type="button">Delete</button> </div>

Is it possible to do action deleteElementsBelow by native jQuery API?


Source: stackoverflow-javascript

filtering mysql results which are dynamically loaded

I have 3 pages

  • index.php
  • fetch_pages.php
  • script.js

and a list of artists, the get page fetches the results and the script.js asks for more to dynamically load it into index php, but it loads all of the artists.

loading all the artists dynamically took me a long time and I didn’t fully understand all of the code I’ve copied to achieve this, but now as I don’t fully understand it it’s hard to play around with it, but I believe that I’ll learn along the way

what I want to do is instead of loading all the artists to load the results according to user input (if he clicks photographers load photographers, if he enters a search term to look for results LIKE what he searched for)

What I’ve tried is the $_GET method, but it posts the searchterm in the url of index.php, and when I try to use $_GET in fetch_pages.php it doesn’t see the parameter.

my question is how to $_GET the url parameter from index.php to fetch_pages.php

below is my code

index.php

<?php
// including the config file
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Setch</title>
  https://code.jquery.com/jquery-3.2.1.min.js
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  

Separating zoom behaviour and drag behaviour in D3.js

I’m having troubles in separating the zoom and drag behaviour in a d3.js rendered svg force directed layout graph.

I’m following many of the Mike Bostock‘s examples like this that talks about this separation using

d3.event.sourceEvent.stopPropagation();

in the function where the drag behaviour (for nodes) is defined to stop the zoom event but uselessy.
What am I doing wrong?

Here’s the GitHub project page and a “live example” of the script: http://toniogela.org/


Here’s the script:

var width = window.innerWidth;
var height = window.innerHeight;

var svg = d3.select("body").append("svg");

d3.json("graph.json", function(error, graph) {

  graph.links.forEach(function(d) {
    d.source = graph.nodes[d.source];
    d.target = graph.nodes[d.target];
  });

  //LINKS
  var links = svg.append("g")
    .attr("class", "link")
    .selectAll("line")
    .data(graph.links)
    .enter()
    .append("g");

  links.append("line")
    .attr("x1", function(d) {
      return d.source.x * width / 100;
    })
    .attr("y1", function(d) {
      return d.source.y * height / 100;
    })
    .attr("x2", function(d) {
      return d.target.x * width / 100;
    })
    .attr("y2", function(d) {
      return d.target.y * height / 100;
    });

  links.append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d) {
      return (d.target.x + d.source.x) * width / 200;
    })
    .attr("y", function(d) {
      return (d.target.y + d.source.y) * height / 200;
    })
    .attr("dy", ".35em")
    .text(function(d) {
      return d.label;
    })
    .call(getBB);

  function getBB(selection) {
    selection.each(function(d) {
      d.bbox = this.getBBox();
    });
  }

  links.insert("rect", "text")
    .attr("x", function(d) {
      return (d.target.x + d.source.x) * width / 200;
    })
    .attr("y", function(d) {
      return (d.target.y + d.source.y) * height / 200;
    })
    .attr("width", function(d) {
      return d.bbox.width + 4;
    })
    .attr("height", function(d) {
      return d.bbox.height;
    })
    .style("fill", "white");

  //NODES
  var nodes = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter()
    .append("g")
    .attr("transform", function(d) {
      d.x = d.x * width / 100;
      d.y = d.y * height / 100;
      return "translate(" + d.x + "," + d.y + ")";
    });

  nodes.append("circle")
    .attr("r", function(d) {
      return d.radius;
    })
    .attr("class", function(d) {
      return "cerchio";
    })
    .attr("href", "#content")
    .style("fill", function(d) {
      return d.color;
    });

  nodes.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function(d) {
      return d.label;
    });

  //SINGLE CLICK BEHAVIOR
  function singleClick(d) {
    var html = $(d.target).attr('href') ? $($(d.target).attr('href'))[0].outerHTML : $($(d.target).prev('circle').attr('href'))[0].outerHTML;
    $.colorbox({
      html: html,
      width: "90%",
      height: "90%"
    });
  }

  //DOUBLE CLICK BEHAVIOR
  function dblclicked(d) {
    if (d3.event.defaultPrevented) return;
    var html = $(d.target).attr('href') ? d.target : $(d.target).prev('circle')[0];

    d3.selectAll("circle").attr("r", 60).style("fill", "#BDD2A6");
    d3.select(html).attr("r", 90).style("fill", "#345830");
  }

  //DRAG BEHAVIOR
  function draggedNode(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    //HERE THE STOP PROPAGATION
    d3.event.sourceEvent.stopPropagation(); 

    d3.select(this).attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
    links.select("line").filter(function(l) {
      return l.source === d;
    }).attr("x1", d.x).attr("y1", d.y);
    links.select("line").filter(function(l) {
      return l.target === d;
    }).attr("x2", d.x).attr("y2", d.y);
  }

  // //ZOOM BEHAVIOR
  function zoomed() {
    $('.nodes').attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    $('.link').attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  }

  //CLICK VS DOUBLE CLICK
  function clickVSDoubleClick() {
    var event = d3.dispatch('click', 'dblclick');

    function cc(selection) {
      var down,
        tolerance = 5,
        last,
        wait = null;
      // euclidean distance
      function dist(a, b) {
        return Math.sqrt(Math.pow(a[0] - b[0], 2), Math.pow(a[1] - b[1], 2));
      }
      selection.on('mousedown', function() {
        down = d3.mouse(document.body);
        last = +new Date();
      });
      selection.on('mouseup', function() {
        if (dist(down, d3.mouse(document.body)) > tolerance) {
          return;
        } else {
          if (wait) {
            window.clearTimeout(wait);
            wait = null;
            event.dblclick(d3.event);
          } else {
            wait = window.setTimeout((function(e) {
              return function() {
                event.click(e);
                wait = null;
              };
            })(d3.event), 300);
          }
        }
      });

    };
    return d3.rebind(cc, event, 'on');
  }

  var drag = d3.behavior.drag().origin(function(d) {
    return d;
  }).on("drag", draggedNode);
  var cc = clickVSDoubleClick();
  var zoom = d3.behavior.zoom().scaleExtent([0.1, 10]).on("zoom", zoomed);
  svg.call(zoom).on("dblclick.zoom", null);
  nodes.call(cc).call(drag);
  cc.on('click', singleClick);
  cc.on('dblclick', dblclicked);




  //  FORCE PART
  var force = d3.layout.force()
    .size([width, height])
    .nodes(graph.nodes)
    .links(graph.links)
    .linkDistance(width / 5)
    .gravity(0)
    .start();

  var animationStep = 100;

  force.on('tick', function() {

    nodes.transition().ease('linear').duration(animationStep)
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    links.select("line").transition().ease('linear').duration(animationStep)
      .attr('x1', function(d) {
        return d.source.x;
      })
      .attr('y1', function(d) {
        return d.source.y;
      })
      .attr('x2', function(d) {
        return d.target.x;
      })
      .attr('y2', function(d) {
        return d.target.y;
      });

    links.select("text").transition().ease('linear').duration(animationStep)
      .attr("x", function(d) {
        return (d.target.x + d.source.x) / 2;
      })
      .attr("y", function(d) {
        return (d.target.y + d.source.y) / 2;
      });

    links.select("rect").transition().ease('linear').duration(animationStep)
      .attr("x", function(d) {
        return ((d.target.x + d.source.x) / 2 - d.bbox.width / 2) - 2;
      })
      .attr("y", function(d) {
        return ((d.target.y + d.source.y) / 2 - d.bbox.height / 2);
      });

    force.stop();
    setTimeout(function() {
      force.start();
    }, animationStep);
  });
  // END FORCE
});


Source: stackoverflow-javascript

html form doesnt ‘ work after Jquery load()

I have a problem with jQuery load() and html forms.
After loading a div from a php. file into a div, the form doesn’t work anymore:

jquery:

script>
        $(document).ready(function ()
        {
            $("#buttest").click(function ()
            {
                $("#ajax").load(
                        "Vokabeltrainer_sec.php?Lektion=<?php echo $lection ?> #area"
                        );
            }
            );
        }
        );

HTML-Form:

<?php
                            echo '<form action="Ergebnis.php" method="post">';
                            generateRadio($translation, $firstWord, $i, $index, $lection);
                            echo '<form>';
                            ?>

The .php function is generating radio buttons.
Before reloading the div evrything works fine! Of course there is also a submit-botton:

<button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>

Sorry for my bad english!


Source: stackoverflow-php

Regex with input

It is necessary to make that in input it was possible to drive and with a format “AB 12” (the letter a letter a space number number). If the input does not match the format – just to replace the void.


Source: stackoverflow-javascript

How to load multiple templates with HandlebarJS

I am currently building a small Handlebars.js application. I have no prior experience and as I’m learning as I’m going along, I’ve been running in to a few issues.

My first issue is loading templates.

Currently I have functions like this for every single template I need to load

var populateDocs = function() {
   var srcContent = $( '#docs-template' ).html(),
        contentTemplate = Handlebars.compile( srcContent ),
        htmlContent = contentTemplate( content.getItem( 'docs' ) );

        $( '#docs' ).append( htmlContent );
};

I am reading templates from a content.json file so once this file is ready, I call multiple functions to populate each template.

content.onReady(
    function() {
        populateFooter();
        populateHomework();
        populateDocs();
        populateContact();
        generateTabs();
    }
);

My question is. Is there a way I can load all these templates without having to call each function for each template?


Source: stackoverflow-javascript

Trigger .slideUp at anchor

I’m trying to trigger an element to slide up when I reach an anchor. The anchor ID is #blacksection and the element class is .vc_tta-panels-container. I read on another thread that you can trigger onclick actions using something like:

jQuery("#blacksection").trigger('click');

And then I’m using;

  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();

as the remaining JS. So I have this:


jQuery("#blacksection").trigger('click');
  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();
});

Which isn’t working, only just started learning JS and it’s baffling my mind, can anyone shed some light on triggering .slideUp for a class at an anchor?


Source: stackoverflow-javascript