lundi 29 juin 2015

How to create an div background that is not affected by page zoom with CSS


My question is going to be pretty concise. I saw this Deezer page and I tried to zoom in and out to see that the image is "out of zoom" (see the image below)

enter image description here

Below is a structure we consider to be my page:

<body>
  <div class="visual-header">
    <div class="container">
       SOME TEXT
    </div>
  </div>
  PAGE CONTENT
</body>

How am I supposed to use image.png of a size of 2000x800 pixels to get this effect?


How to output multiple fields to a single page


I am looking to output text from multiple fields to a single page so that I can just copy and paste it. I made a basic HTML document with fields and I just want to hit submit and have it output all of the information condensed into one page all together. This is what I have

<style>
form {
  padding-top: 30px;
  min-width: 458px;
  > div,
  > fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 8px 0;
    clear: both;
  }
  label,
  legend {
    float: left;
    width: 50px;
    padding: 7px 10px;
    &.radio-label {
      float: none;
      padding: 0;
    }
  }
  .choice-group {
    padding: 7px 10px 0 10px;
  }
  input[type=checkbox],
  input[type=radio] {
    margin-right: 20px;
  }
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  textarea {
    width: 200px;
    border: 1px solid darken(tan, 20%);
    padding: 7px 10px;
    border-radius: 4px;
    outline: 0;
    &:focus {
      border-color: black;
    }
    &.short {
      width: 60px;
    }
    &.medium {
      width: 150px;
    }
    &.very-short {
      width: 40px;
    }
    &.long {
      width: 300px;
    }
  }
}

.screen-reader {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

body {
  background: #E27C37;
  padding: 20px;
  font-size: small;
}
</style>
<h1>Prefill Machine</h1>

<form action="#0" id="form">

  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Digby Coyier" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="digby@digby.com" required>
  </div>

  <div>
    <label for="name">Username</label>
    <input type="text" name="username" id="username" placeholder="digby2007" required>
  </div>

  <div>
    <label for="name">Password</label>
    <input type="password" name="pw" id="pw" required>
  </div>

  <div>
    <label for="name">Repeat</label>
    <input type="password" name="pw-repeat" id="pw-repeat" required>
  </div>


  <fieldset>
    <legend>Radio Choice</legend>

    <div class="choice-group">
      <label class="radio-label" for="radio-choice-1">Choice 1</label>
      <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

      <label class="radio-label" for="radio-choice-2">Choice 2</label>
      <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
    </div>
  </fieldset>

  <div>
    <label for="select-choice">Select Choice</label>
    <div class="choice-group">
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
        <option value="Choice 3">Choice 3</option>
      </select>
    </div>
  </div>

  <div>
    <label for="message">Message</label>
    <textarea cols="40" rows="8" name="message" id="message"></textarea>
  </div>

  <div>
    <label for="cc">Credit Card #</label>
    <input type="text" name="cc" id="cc" placeholder="4242 4242 4242 4242" required>
  </div>

  <div>
    <label for="exp-1">Expiration <span class="screen-reader">Month</span></label>
    <input class="very-short" type="number" name="exp-1" id="exp-1" placeholder="08" min="1" max="12">
    <label for="exp-2" class="screen-reader">Expiration Year</label>
    <input type="number" name="exp-2" class="very-short" id="exp-2" placeholder="16" min="14">
  </div>

  <div>
    <label for="exp-1">CVV</label>
    <input class="short" type="text" name="cvv" id="cvv" placeholder="123">
  </div>

  <div>
    <label for="name">Address</label>
    <input type="text" class="long" name="address" id="address" placeholder="123 Super Street">
  </div>

  <div>
    <label for="city">&nbsp;<span class="screen-reader">City<span></label>
    <input type="text" name="city" id="city" class="medium"  placeholder="Milwaukee">
    <label for="state" class="screen-reader">State</label>
    <input type="text" name="state" class="very-short" id="state" placeholder="WI">
    <label for="zip" class="screen-reader">Zip</label>
    <input type="text" name="zip" class="short" id="zip" placeholder="55555" pattern="(\d{5}([\-]\d{4})?)" required>
  </div>

  <div>
    <label for="agree-terms">Agree?</label>
    <div class="choice-group">
      <input type="checkbox" name="agree-terms" id="agree-terms">
    </div>
  </div>

  <div>
    <input type="submit" value="Submit" id="submit-button">
  </div>
</form>

I want the page to fill in everything when I click submit so I will look like the following:

Name: John Smith
Email: John.Smith@mail.com
USERNAME: JSMith
Password:123456
Choice 1

And so on

This way I can just copy and paste it all into an email or a text file.


Fix thead on the top of all page


I am trying to table print using by CSS @media print.I search this type of case every where, I found similar type of solution but it can't work.

Currently I am using Google chrome version 43.0 and FireFox 38.0.5, FireFox is repeat the thead in every pages and arranging tr lines automatically, but chorme not working on the same case.

Is it possible to print using by CSS @media print? I hope you understand what I mean and your kindly suggestion.

Click here to view code


Filter content with smooth sliding animation


I am building a filter that is similar to isotope. The problem I am having is the smoothness when removing items. I translate the items (0,0) to get the effect of scaling out, while also removing their width (width: 0px) causing the items to shift over. I was wondering what I could do to make it not feel so rough?

I have tried using a .each() with a delay to ease the transition of all the items at the same time, but it gives it a very linear feel. I have also removed the items completely in a timeout that waits for the animation to complete.

Here is a working JSFiddle.

JS/JQuery

$(document).ready(function() {
    var navItem = $("nav ul li"),
        clear = $("nav li.clear"),
        first = $("nav li.first"),
        second = $("nav li.second"),
        third = $("nav li.third"),
        items = $(".items li"),
        notItem1 = $(".items li:not([data-exhibit='first'])"),
        notItem2 = $(".items li:not([data-exhibit='second'])"),
        notItem3 = $(".items li:not([data-exhibit='third'])");

    var active = "is-active",
        hidden = "is-hidden";

    navItem.on("click", function() {
        navItem.removeClass(active);
        $(this).addClass(active); 
    });

    clear.on("click", function() {
        items.removeClass(hidden);
    });

    first.on("click", function() {
        items.removeClass(hidden);
        notItem1.addClass(hidden);
    });

    second.on("click", function() {
        items.removeClass(hidden);
        notItem2.addClass(hidden);
    });

    third.on("click", function() {
        items.removeClass(hidden);
        notItem3.addClass(hidden);
    });

});

HTML

<nav>
    <ul>
        <li class="clear">view all</li>
        <li class="first">First</li>
        <li class="second">Second</li>
        <li class="third">Third</li>
    </ul>
</nav>

<ul class="items">
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
</ul>

SCSS

nav {
   width: 80%;
    margin: 25px auto;
    text-align: center;
    li {
        display: inline-block;
        padding: 5px 15px;
        background: #1abc9c;
        color: white;
        text-transform: uppercase;
        cursor: pointer;

        transition-property: background;
        transition-duration: .3s;
        &.clear { background: #7f8c8d; }
        &.first { background: #1abc9c; }
        &.second { background: #2ecc71; }
        &.third { background: #3498db; }
        &:hover, &.is-active { background: #333; }
    }
}

.items {
    width: 80%;
    margin: 0 auto;
    li {
        display: block;
        width: 25%;
        height: 150px;
        float: left;
        overflow: hidden;
        transition-property: transform, width;
        transition-duration: .5s;
        &.is-hidden {
            transform: scale(0,0);
            width: 0px;
            margin: -2px;
        }
        img { width: 100%; }
    }
}


Photoviewer Switching between divs


http://ift.tt/1Lyw5Hs

Hi all,

I have created a gallery of pictures which you cannot see with Jfiddle but all the code is there. I am attempting to have it so each time you click on an image one paragraph disappears and another emerges. The way I coded it works with one problem. If i click anywhere on the screen other than another image the paragraph disappears and another will not appear until I click an image. How can I code it so that the paragraphs will hide only if I click on one of the images and not if I click elsewhere as well. Thank you for your help!

Java:

        var request;
    var $current;
    var cache = {};
    var $frame = $('#photo-viewer');
    var $thumbs = $('.thumb');

    function crossfade($img) {

        if ($current) {
            $current.stop().fadeOut('slow');
        }

        $img.css({
            marginLeft: -$img.width() / 2,
            marginTop: -$img.height() / 2
        });

        $img.stop().fadeTo('slow', 1);

        $current = $img;
    };

    $(document).on('click', '.thumb', function(e){
        var $img;
        var src = this.href;
        request = src;

        e.preventDefault();

        $thumbs.removeClass('active');
        $(this).addClass('active');

        if(cache.hasOwnProperty(src)) {
            if (cache[src].isLoading === false) {
                crossfade(cache[src].$img);
        }
    } else {
        $img = $('<img/>');
        cache[src] = {
            $img: $img,
            isLoading: true
        };

        $img.on('load', function() {
            $img.hide();
            $frame.removeClass('is-loading').append($img);
            cache[src].isLoading = false;
            if(request === src) {
                crossfade($img);
            }
        });

        $frame.addClass('is-loading');

        $img.attr({
            'src': src,
            'alt': this.title || ' ' 
        });
    }
    });

    $(document).mouseup(function(e) {
        var container = $("#mad");
        jQuery("#para").hide();
        //toggle the componenet with class msg_body
        jQuery("#mad").click(function() {
            $(this).next($("#para").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para").hide();
        }

    })
    });
    $(document).mouseup(function(e) {
        var container = $("#ralph");
        jQuery("#para2").hide();
        //toggle the componenet with class msg_body
        jQuery("#ralph").click(function() {
            $(this).next($("#para2").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para2").hide();
        }

    })
    });
    $(document).mouseup(function(e) {
        var container = $("#julia");
        jQuery("#para3").hide();
        //toggle the componenet with class msg_body
        jQuery("#julia").click(function() {
            $(this).next($("#para3").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para3").hide();
        }

    })
    });
    $(document).mouseup(function(e) {
        var container = $("#sophie");
        jQuery("#para4").hide();
        //toggle the componenet with class msg_body
        jQuery("#sophie").click(function() {
            $(this).next($("#para4").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para4").hide();
        }

    })
    });
    $(document).mouseup(function(e) {
        var container = $("#may");
        jQuery("#para5").hide();
        //toggle the componenet with class msg_body
        jQuery("#may").click(function() {
            $(this).next($("#para5").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para5").hide();
        }

    })
    });
    $(document).mouseup(function(e) {
        var container = $("#kiss");
        jQuery("#para6").hide();
        //toggle the componenet with class msg_body
        jQuery("#kiss").click(function() {
            $(this).next($("#para6").fadeIn(500))
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#para6").hide();
        }

    })
    });
    $('.thumb').eq(0).click();

HTML



     <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Gallerystyle.css">
<ul class="navigation">
    <p> Nicholas Clegg </p>
  <li><a href="painthome.html">Home</a></li>
  <li><a href=favart.html>Artists</a></li>
  <li><a href="#">Sale</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
</head>
<body>

        <div id="photo-viewer">  
<p id="para"> <em> "Maddy" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         niece. Her innocence and utter <br>
                         adorableness inspired Nick to <br>
                         draw this beautiful portrait <br>
                         of a young lady early in <br>
                         her life.</span></p>
<p id="para2"> <em> "Raplhie" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         grandfather. Nick captures the <br>
                         joy of ageing by encapsulating <br>
                         every detail of an older man  <br>
                         still in the prime of his life.</span></p> 
<p id="para3"> <em> "Julia" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         grandfather. Nick captures the <br>
                         joy of ageing by encapsulating <br>
                         every detail of an older man  <br>
                         still in the prime of his life.</span></p> 
<p id="para4"> <em> "Sophie" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         grandfather. Nick captures the <br>
                         joy of ageing by encapsulating <br>
                         every detail of an older man  <br>
                         still in the prime of his life.</span></p> 
<p id="para5"> <em> "Unknown" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         grandfather. Nick captures the <br>
                         joy of ageing by encapsulating <br>
                         every detail of an older man  <br>
                         still in the prime of his life.</span></p> 
<p id="para6"> <em> "Jo and Rich" </em> <br>
    <span class="normal">This is a picture of Nicholas'   <br>
                         grandfather. Nick captures the <br>
                         joy of ageing by encapsulating <br>
                         every detail of an older man  <br>
                         still in the prime of his life.</span></p> 
    </div>
        <div id="thumbnails">

        <a id ="mad" href="img/madeline.jpg" class ="thumb active" title="Madeline">
        <img id ="mad" src="img/madelinethumb.jpg" alt="Madeline" /></a>

        <a id="ralph" href="img/ralph.jpg"  title="Ralph" class="thumb">
        <img id="ralph" src="img/ralphthumb.jpg" alt="Ralph" /></a>

        <a id="julia" href="img/julia.jpg"  title="Julia" class="thumb">
        <img id="julia" src="img/juliathumb.jpg" alt="Julia" /></a>

        <a id="sophie" href="img/sophie.jpg"  title="Julia" class="thumb">
        <img id="sophie" src="img/sophiethumb.jpg" alt="Julia" /></a>

        <a id="may" href="img/may.jpg"  title="Julia" class="thumb">
        <img id="may" src="img/maythumb.jpg" alt="May" /></a>

        <a id="kiss" href="img/kiss.jpg"  title="Julia" class="thumb">
        <img id="kiss" src="img/kissthumb.jpg" alt="Joanna and Rich" /></a>
    </div>
<script  src='jquery-1.11.2.min.js'> </script>
<script src='photo-viewer2.js'> </script>

</body>
</html>


Optimize logic of jQuery Code


I have a very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:

jQuery:

$(".col-md-3 img").hover(function() {
    $(this).parent().children(".search").show();
    $(this).parent().children(".photo").css("opacity","0.4");
}, function(){
    $(this).parent().children(".search").hide();
    $(this).parent().children(".photo").css("opacity","1");
});

HTLM corresponding to this code:

<div class="col-md-3">
    <img class="photo" src="img/1_small.jpg" alt="img" />
    <img class="search hidden-xs" src="img/search.png" width="50px"/> 
</div>

I have multiple similar divs.


Accessing Javascript globals from aspx page to another


Here's the underlying folder structure:

|   ...
|   Top.aspx
|   ...
|
\---Include
        ...
        ClientScriptGlobals.aspx
        ...

Here's a snippet of Top.aspx:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Top.aspx.vb" Inherits="Project.Top"%>

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"-->

<html>  
    <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />    
        <title>....</title> 
        <META HTTP-EQUIV="imagetoolbar" CONTENT="no">

        <!--#include virtual="..."-->
        <!--#include virtual="Include/ClientScriptGlobals.aspx" -->
        <!--#include virtual="...." -->
        ....
    </head>
</html>

And finally ClientScriptsGlobal.aspx:

<script language="javascript">      
    //Globals                   
    ...
    var FullTextSearchStatus = "<%= FullTextSearchStatus %>"
    ...
</script>


To give some context, Top.aspx includes ClientScriptGlobals.aspx so that I can access its global variables, which are also being used throughout the application.

My issue arises when I use aspnet_compiler.exe to pre-compile my application. Once it reaches ClientScriptsGlobal.aspx, it returns a bunch of errors like this:

error BC30451: Name 'FullTextSearchStatus" is not declared.

So now my question is, how can I tell ClientScriptsGlobal.aspx the location of FullTextSearchStatus's definition?

Keep in mind that when I opt to not pre-compile the application, these errors do not occur because the Javascript is not being compiled beforehand and therefore, its references have already been established (if that's the correct way describe this).


JCanvas restrict drag-and-drop layer for only right click


I'm using JCanvas for my isometric game. How to restrict the draggable layers to work only with the right mouse button?

So I would like to drag-and-drop my layer only with the right mouse button.

My render code is:

$c.drawImage({
    layer: true,
    groups: ['terrain'],
    dragGroups: ['terrain'],
    source: 'img/tileset.png',
    x: x_pos, y: y_pos,
    sWidth: 64,
    sHeight: 32,
    sx: map[x][y]*64, sy: 0
});


how create mailing list with meterjs and mailgun?


How to create a Mailing List with MailGun on meteorjs app? I know how to do ut with mailchimp; do a lot of search on google but nothing found ;(

Thank's


External function call from JSNI is not working


I am trying to translate this JavaScript code to JSNI code.

Script Imports

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.typeahead.min.js"></script>
<script src="autocompletetest/autocompletetest.nocache.js"></script>


Script

$('#q').typeahead({  
    minLength: 1,  
    order: "asc",  
    group: true,   
    groupMaxItem: 6,  
    hint: true,  
    dropdownFilter: "All",  
    href: "http://ift.tt/1HtBBLN}}",  
    template: "{{display}}, <small><em>{{group}}</em></small>",  
    source: {  
        country: {  
            data: data.countries  
        },  
        capital: {  
            data: data.capitals  
        }  
    },
    ...

To

$doc.getElementsByClassName("q").typeahead({
    ...
})

But I'm getting this error:

@com.citi.sevi.client.AutocompleteTest::loadJquery()([]): $doc.getElementsByClassName(...).typeahead is not a function

What could be causing this error?


Is binary hashing possible in javascript front end


I want to create an HOTP client using javascript similar to SpeakEasy

The above library is intended for server side javascript usage and it uses NodeJS.

I want to do the same thing on front end javascript in a browser but I haven't been able to use CryptoJS to achieve this behavior.

         var key = "abc";
         var counter = "123";

         // create an octet array from the counter
         var octet_array = new Array(8);

         var counter_temp = counter;

         for (var i = 0; i < 8; i++) {
             var i_from_right = 7 - i;

             // mask 255 over number to get last 8
             octet_array[i_from_right] = counter_temp & 255;

             // shift 8 and get ready to loop over the next batch of 8
             counter_temp = counter_temp >> 8;
         }

        // There is no such class called as Buffer on Browsers (its node js)
         var counter_buffer = new Buffer(octet_array);

         var hash = CryptoJS.HmacSHA1(key,counter_buffer);

         document.write("hex value "+ hash);
         document.write("hash value "+    CryptoJS.enc.Hex.stringify(hash));


AngularJS & Protractor - How to check if elemenent was displayed?


I want to test if my AngularJS app is displaying a loading circle while the app is waiting for a response from a async call.

How can I check is the loading circle is displayed, because expect() seems to be fired when the page is fully loaded.


HTTP POST data not going from AJAX to C# MVC 5 Backend


As the title states, I'm trying to send data from a Javascript frontend to my C# MVC 5 backend, and it doesn't seem to make it. I've run through it with the debugger in Visual Studio and the data I'm trying to pass always ends up null.

Here is my front end code:

var file = $("#my-file").files[0];
file = file[0];
var formData = new FormData();
var MyData = {
    Name: "Form 133",
    Attachments: {
        Type: "Check"
    }
};
formData.append('file', file);
$.ajax({
    type: "POST",
    url: '/NMISProduct/Index',
    contentType: false,
    processData: false,
    data: { formData: formData, MyData: MyData },
    success: function (result) {
        console.log(result);
    },
    error: function (xhr, status, p3, p4) {
        var err = "Error " + " " + status + " " + p3 + " " + p4;
        if (xhr.responseText && xhr.responseText[0] == "{")
            err = JSON.parse(xhr.responseText).Message;
        console.log(err);
    }
});

Backend code:

[HttpPost]
public async Task<JsonResult> Index(MyData MyData)
{
    Debug.WriteLine(Request.Params["MyData"]);
    Debug.WriteLine(MyData.Name);
    try
    {
        foreach (string file in Request.Files)
        {
            var fileContent = Request.Files[file];
            if (fileContent != null && fileContent.ContentLength > 0)
            {
                // get a stream
                var stream = fileContent.InputStream;
                // and optionally write the file to disk
                var fileName = fileContent.FileName;
                var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
                using (var fileStream = System.IO.File.Create(path))
                {
                    stream.CopyTo(fileStream);
                }
            }
        }
    }
    catch (Exception)
    {
        return Json("Upload failed");
    }
    return Json("File uploaded successfully");
}

public class MyData
{
    public string Name { get; set; }
    public Attachment Attachments { get; set; }
}

public class Attachment
{
    public string Type { get; set; }
}

As I stated, on the Backend MyData always ends up being null. What am I doing wrong?


Python to Javascript JSON objects (Flask)


I am trying to create a simple Flask app where an array of integers is generated on the server and sent to the client. I want to view the array of integers in the console. Here is some sample (working) code in app.py:

from flask import Flask, render_template, request, url_for

import random, json

app = Flask(__name__)

@app.route('/',  methods=['GET'])
def form():
    json_helper = {}
    json_helper['randoms'] = [random.random() for _ in range(40)]
    json_object = json.dumps(json_helper)
    return render_template('sim0625.html', s_data=json_object)

if __name__ == '__main__':
  app.run(debug=True)

And here is a snippet of the Javascript frontend:

<script>

  var data_xyz = {{ s_data|tojson }};

  var JSONObject = JSON.parse({{data_xyz}});
  console.log(JSONObject.randoms);  

 </script>

Unfortunately, none of the javascript works on my webpage, and the error message shown is "Uncaught SyntaxError: Unexpected token u".

Can someone please explain how to fix this? Thanks. My guess is the JSON objects are becoming strings.

Note: The code from the front-end was adapted from this SO question: Extracting data from json object in jQuery or JS


Achieving communication between HighCharts and server.R


I am trying to show a table(or probably another plot) in a separate div element when one of the bars on the HighCharts bar plot is clicked. I am using rCharts from Shiny package to create a HighCharts plot.

In my experimentation till now, I came across two possible psths.

Path 1

I tried to make use of click function in the HighCharts bar/column plot API. I tried doing this.

observe({  
    output$plot <- renderChart2({
                       a <- hPlot(x="id",y="sequence",data=myData,type="column")
                       a$tooltip( animation = 'true', formatter = "#! function() {return '<b>' + 'Frequency of tag_id ' + this.x + '</b>' + ' is ' + this.y;} !#")
                       a$plotOptions(series = list(color = '#388E8E'),column = list(dataLabels = list(enabled = T, rotation = -90, align = 'right', color = '#FFFFFF', x = 4, y = 10),cursor = 'pointer', point=list(events = list(click = func))))
                 return(a)
        }) session$sendCustomMessage(type="data", rg1) )}

and for function func (which is supposed to invoke when a bar is clicked)

func <- "#! function() {
        Shiny.addCustomMessageHandler('data', function(rg1) {
                var data1 = rg1.series            
                $('.container_subcat').highcharts({
                        chart: {
                                type: 'column',
                        }
                        xAxis: { categories:(data1) },
                title: {
                                text: 'Monthly Average Rainfall'
                },
                series: [{  data :(data1)
                        }]
                }); 
})} !#"

I am sure that is not the way to bind data, but I added a lot of code to the above code after looking into several online sources. None of my attempts make me smile. Also, I think if I should proceed in this way, I need to change the data into Java script readable format from R dataframe (rg1 above is a dataframe), but no clue when and where should the conversion be done.

Path 2

I used session$sendCustomMessage() and Shiny.addCustomMessageHandler() functions.

server.R -> app.js

In server.R: observe({ session$sendCustomMessage(type="newdata", data })

In app.js: Shiny.addCustomMessageHandler("newdata", function(data1) { ... });

chart.js -> server.R

In app.js: Shiny.onInputChange("select", this.data.ele);

In server.R: current <- input$select

The above mechanism works fine with all the buttons or other UI elements we have in HTML. But, I am trying to achieve the same mechanism when a bar on the barplot is clicked. I have no clue how to extract each bar from the barplot and use it like we used it in current <- input$select. So, it's basically establishing the communication between the HighCharts UI element(which inturn is shiny/rCharts element) and the server to get the data when an element is clicked.

I came across Shiny input and output bindings and had hard time understanding them and not sure whether they are useful in my particular situation. Can someone walk me through a method/solution which can solve my problem.


What's faster, to hide/show an HTML element, or to delete/insert it?


I am developing a navbar where the selected button is marked by a triangle. Do I put a triangle in every button of my navbar and keep all but one triangle invisible (or visible but same background as the button)? Or do I delete the triangle and reinsert it in the new button?

I understand the performance impact would probably be negligible, but I am learning my ropes, so mostly asking out of curiosity (and wanting to learn the best practices)


Show all data with class same as the id clicked on


I have a question about Jquery. I want to show all data with the same class as I clicked on.

i made a list of things I can click on. So when I click it, the right data should be shown. I made this but it's not working.

This is my Jquery code:

$("div span").hide();
$('input[type=checkbox]').on("change", function(e) {

    var id = $(this).attr('id'); 
    if(this.checked){
        alert("checked");
        e.preventDefault();

    }else{
        alert("not checked");
    }


});

http://ift.tt/1U1nCAn


Inluding variables within partial templates using ejs with express 4.x


I am using Express 4.x with Ejs. I have a main template in which I'd like to include a few partials. I have an array with some objects. Now I want to loop through this array and for each object, I'd like to include a partial that is filled with the values from the object.

This website explains the most of this: http://ift.tt/1CdudwF

Problem is, it includes the partials only, but I want to be able to parse some variables into the partials before including them.

Thanks


Angular get the value the selected for the model.


I got a problem with ng-model and ng-selected. At the beginning the ng-model is null, and the correct value is selected. So if you submit the form you submit a form like this { resolution : undefnied, desiredFps : 30 } and it's incorrect. So I want that the model of the take the value of the selected value designed with ng-selected. What is the correct way of updating the selected value and updating the model with the value as well?

Thanks for you help !

    <form novalidate name="preferencesForm" ng-submit="submitPreferencesForm(BEPreferencesForm)" ng-controller="UserPreferencesFormController">

        <label for="resolution">Choose the resolution : </label>
        <br/>
        <select name="resolution" id="resolution"  ng-model="BEPreferencesForm.resolutionId" ng-change="buttonDisabled = False">
            <option value="1" ng-selected="user.screenWidth ==  800 && user.screenHeight == 600">800x600</option>
            <option value="2" ng-selected="user.screenWidth ==  1024 && user.screenHeight == 768">1024x768</option>
            <option value="3" ng-selected="user.screenWidth ==  1280 && user.screenHeight == 720">1280x720</option>
            <option value="4" ng-selected="user.screenWidth ==  1280 && user.screenHeight == 768">1280x768</option>
            <option value="5" ng-selected="user.screenWidth ==  1360 && user.screenHeight == 768">1360x768</option>
            <option value="6" ng-selected="user.screenWidth ==  1600 && user.screenHeight == 900">1600x900</option>
            <option value="7" ng-selected="user.screenWidth ==  1768 && user.screenHeight == 992">1768x992</option>
            <option value="8" ng-selected="user.screenWidth ==  1920 && user.screenHeight == 1080">1920x1080</option>
        </select>


How can I declare a variable for each object in the JSON file?


I'm new to Javascript. I hope you guys don't mind is my code is a little unorganized.

I have a data.json file that contain 4 objects : a , b , c , d.


Manually

I declared my variables manually.

var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));  


Dynamically

Now, I want to make it dynamically so it can handle all the objects in my JSON file, and it doesn't break - when I add more objects to my JSON file.

So while in the loop, I tried add :

chart[object] = new google.visualization.PieChart(document.getElementById('sa-piechart-'+ data[object] )); // <---- I try to add this line


I got my objects from Ajax call.

var data = {};
var chart = {};

for (var object in objects) {

  var total = objects[object].danger + objects[object].warning + objects[object].success ;


  data[object] = google.visualization.arrayToDataTable([

    ['Piechart' , 'Number of Skills'],
    ['danger'   , ( objects[object].danger/total )  * 100  ],
    ['warning'  , ( objects[object].warning/total ) * 100  ],
    ['success'  , ( objects[object].success/total ) * 100  ],

    ]);

   chart[object] = new google.visualization.PieChart(document.getElementById('sa-piechart-'+ data[object] )); // <---- I try to add this line

}

// var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
// var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
// var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
// var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));


Result

I keep getting Uncaught Error: Container is not defined

Any hints / suggestions will be much appreciated !