lundi 11 mai 2015

How to output data in xml?

I have an API data which I want to print it as xml. How can I do this?

What actually want to do is to make a RSS to work with Apple News Screen Saver

Here is my HTML which output I want to be in xml. has anyone any idea how to do this?

<html>
  <head>
    <script type="text/javascript">
      var CLIENT_ID = '765557634013-36vrl4gtr8fhv58ia6kevapgaoppfq18.apps.googleusercontent.com';
      var SCOPES = ['http://ift.tt/1j9gAc6'];

      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES,
            'immediate': true
          }, handleAuthResult);
      }

      function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          authorizeDiv.style.display = 'none';
          loadCalendarApi();
        } else {
          authorizeDiv.style.display = 'inline';
        }
      }

      function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
          handleAuthResult);
        return false;
      }

      function loadCalendarApi() {
        gapi.client.load('calendar', 'v3', listUpcomingEvents);
      }

      function listUpcomingEvents() {
        var request = gapi.client.calendar.events.list({
          'calendarId': 'primary',
          'timeMin': '2015-04-25T00:00:00Z',
          'showDeleted': false,
          'singleEvents': true,
          'maxResults': 10,
          'orderBy': 'startTime'
        });

        request.execute(function(resp) {
          var events = resp.items;
          appendPre('Upcoming events:');

          if (events.length > 0) {
            for (i = 0; i < events.length; i++) {
              var event = events[i];
              var when = event.start.dateTime;
              if (!when) {
                when = event.start.date;
              }
              appendPre(event.summary + ' (' + when + ')')
            }
          } else {
            appendPre('No upcoming events found.');
          }

        });
      }

      function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }
    </script>
    <script src="http://ift.tt/1Iw5LvT">
    </script>
  </head>
  <body>
    <div id="authorize-div" style="display: none">
      <span>Authorize access to calendar</span>
      <button id="authorize-button" onclick="handleAuthClick(event)">
        Authorize
      </button>
    </div>
    <pre id="output"></pre>
  </body>
</html>

How to style radio buttons differently if they fit in a single row?

PLAYGROUND HERE

I'd like to style radio buttons differently if they fit in a single row. For example:

enter image description here

The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal radio buttons.

The second container has enough space. Therefore, the radio buttons appear as buttons.

Is that possible to achieve this behaviour using CSS only?

If not, Javascript "hack" is welcome.

PLAYGROUND HERE


HTML

<div class="container radio">
  <div>
    <input id="a1" type="radio" name="radio">
    <label for="a1">Yes,</label>
  </div>
  <div>
    <input id="a2" type="radio" name="radio">
    <label for="a2">it</label>
  </div>
  <div>
    <input id="a3" type="radio" name="radio">
    <label for="a3">is</label>
  </div>
  <div>
    <input id="a4" type="radio" name="radio">
    <label for="a4">possible</label>
  </div>
  <div>
    <input id="a5" type="radio" name="radio">
    <label for="a5">to</label>
  </div>
  <div>
    <input id="a6" type="radio" name="radio">
    <label for="a6">achieve</label>
  </div>
  <div>
    <input id="a7" type="radio" name="radio">
    <label for="a7">this</label>
  </div>
</div>
<div class="container buttons">
  <div>
    <input id="b1" type="radio" name="buttons">
    <label for="b1">Yes,</label>
  </div>
  <div>
    <input id="b2" type="radio" name="buttons">
    <label for="b2">it</label>
  </div>
  <div>
    <input id="b3" type="radio" name="buttons">
    <label for="b3">is</label>
  </div>
  <div>
    <input id="b4" type="radio" name="buttons">
    <label for="b4">possible</label>
  </div>
</div>

CSS (LESS)

.container {
  display: flex;
  width: 220px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid black;

  &.radio {
    flex-direction: column;
  }

  &.buttons {
    flex-direction: row;

    > div {
      input {
        display: none;

        &:checked + label {
          background-color: #ADFFFE;
        }
      }

      label {
        padding: 5px 10px;
        margin: 0 1px;
        background-color: #ccc;
      }
    }
  }
}

Combobox value isn't captured using ng -model when inside a table generated by ng -repeat (AngularJS)

This is my code

<thead>
 <tr>
  <th>Id Detalle_Venta</th>
  <th>Id Producto</th>
  <th>Producto </th>
  <th>Cantidad </th>
  <th>Direccion </th>                            
  <th>Repartidor </th>                            
 </tr>
</thead>
<tbody>
  <tr ng-repeat="det in detalleVenta">
  <td>{{det.id_Detalle_Venta}}</td>
  <td>{{det.id_Producto}}</td>
  <td>{{det.nombre_Producto}} {{det.formato}}</td>
  <td>{{det.cantidad}}</td>
  <td>{{det.direccion}}</td>
  <td>
    <select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
     <option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
    </select>
  </td>
</tr>
</tbody>

The problem is in this lines:

    <select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
      <option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
    </select>

Angular doesn't capture the value of select with the ng-model="comboRepartidor". The event ng-change="escogerRepartidor() shoud be show de combo value but it show Undefined. If I move the combo out of the table works fine. What's the problem?

How to create this clickable graphic in HTML5, CSS & JS?

I need to try to recreate this clickable graphic (originally Flash) in HTML5... there are certain button events and states associated with each of the segments.

Can anyone recommend how best to approach this problem? ( original graphic here )

Graphics-debugging for html5 video?

Recently I noticed a certain looping full-screen video tag breaking on one computer - A Win8 system that apparently has problems with older drivers for the amd/nvidia graphics.

The odd thing is, I would usually get an error (with videoelement.error) in Chrome, yet when the video element broke in Firefox I would get no videoelement.error or videoelement.pause, despite the fact that the video was broken (showing placeholder image).

Are there any dev-tools that help to debug this sort of failure that seems to be limited to specific machines/specific graphics card combinations? Or is there a debug version of Chrome/Firefox that will give enough debug information to diagnose graphics problems like this?

How rotate an image by clicking button instead of :hover?

So i have an image and instead of having it rotate by using:hover, i would like to place a button to the side that when clicked will rotate that image. For example an image of a shirt on an online store, i would like for there to be a button that rotates that image so the back can be displayed.

How set photo in marker of Google Map API V3

i want to create custom map marker for Google Map by combining two images marker_bg and marker_pic how i can do. Marker_bg will marker with empty space inside which will fill by marker_pic.

Demo Image

i'm using following technologies;

  • HTML5/JAVASCRIPT/CSS3
  • Polymer#0.5
  • Google Map API V3
  • PHP

Javascript doesn't work in html file

I have html file:

<html>
<head>
<script type="text/javascript" src="new.js"></script>

</head>
<body>
   <p id="contentBI" >you should click here! </p>
</body>
</html>

and javascript file:

function doAlert(){
      alert("hi!");
  }

function addevent (){
   theBI=document.getElementById("contentBI");
   theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);

Javascript doesn't run.

html layout issue in mvc razor code

First of all i would like to know whether i can use asp.net masterpagefile in MVC razor site, since everything already developed in asp.net and now migrating in to MVC razor?

Do we have mechanism to see design at design time in MVC?

Next is i created a _layout.cshtml master page in mvc and i am using everywhere .This contains two images including gif file and a section to render body @RenderBody(),but unfortunately render body contents and two images are coming in same line.I really don't know what causes issue? Following is the code

.header {
    font-size: 8pt;
    color: #333333;
    font-weight: bold;
}

.footer {
    font-size: 8pt;
    color: #666666;
    font-family: Verdana, helvetica, tahoma;
}



<body>
 <div class="header">
        <div style="float:right"><img src="~/Images/imagesnew/Images/master/IWHeader-v2-Right.bmp" /></div>
        <div style="float:right"> <img src="~/Images/imagesnew/Images/master/sampleLogo.gif" /></div>
        </div>
        <div style="margin-top:100px">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <div class="footer">
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
</body>

.prop('selected') not working, button is disabled all the time in jquery

I want to enable the the submit button once the status in the select field is selected.

<div class="close_req">
    <div class="req_status">
        <select id="status_update">
            <option value="status" selected="selected" disabled="disabled">Status</option>
            <option value="complete">Complete</option>
            <option value="pending">Pending</option>
        </select>
    </div>
    <div class="req_addcharges">
        <select id="additional_charges">
            <option value="charge">Additional Charges</option>
            <option value="complete">Yes</option>
            <option value="pending">No</option>
        </select>
    </div>
    <div class="additional_charge">
        <input type="text" id="add_price" name="add_price" placeholder="Enter the additional charge" />
    </div>
    <div class="task_desc">
        <textarea id="task" name="task" cols="10" rows="6" placeholder="Description of the task"></textarea>
    </div>
    <div class="task_complete">
        <input type="submit" id="complete" name="complete" value="Task Complete" />
    </div>
    </form>
</div>

Here is the jquery script i have tried

$(document).ready(function () {
    $("#complete").attr("disabled", "disabled");

    function updateFormEnabled() {
        if ($("#status_update").prop('selected', true)) {
            $("#complete").removeAttr('disabled');
        } else {
            $("#complete").attr('disabled', 'disabled');
        }
    }
});
$("#status_update").change(updateFormEnabled);

But the submit button is always disabled, I want the button to enabled once the status is selected in the select field. Can anyone please help me with this issue.

Can we open widows explorer with custom location with HTML5 File Api

By using the below line it opens the location set by windows explorer.But can we open some custom location like c:\images.... for every user who click on browse button etc. by using HTML5 FileApi.

<input type="file" id="file" name="fileslist[]" multiple
 onchange="handleFileSelected()" />

Thanks...

HTML5 3d cube rotating

Could someone help me ? How create 3d cube, which can: - auto rotate for some time - rotate on user swipe (mouse wheel?). - can you make it responsive (adapt to screen size)? - can the video be implemented on the panels of the cube (can videos autoplay)? - would it be possible to achieve that the cube reacted to the motion of the device – e.g. cube rotates if you tilt the device?

Any help will be useful

i want to get weekly info from my php database

array_push($burgers_eaten, $row["burgers"]);

        $date = date("d-m", strtotime($row["dateeaten"])); 
        array_push($date_eaten, $date);

I want to get the weekly data rather than daily data which i am currently getting. I want to find all the burgers eaten in the last 7 days. Thanks in advance.

Jquery Hover Condition Lagging on mouse out

I m trying to build a simple star rating system with jquery. Everything works fine but sometimes on mouse out the image is not changed.

//My Script

$("#rate").hover(function(e){
//On Mouse In
$(this).mousemove(function( event ) {   

var pageCords = event.pageX;

if(pageCords<42){
    $("#rate").html("<img src=include/images/rate1.png>");
}
else if(pageCords>42 && pageCords<56){
    $("#rate").html("<img src=include/images/rate2.png>");
}
else if(pageCords>57 && pageCords<79){
    $("#rate").html("<img src=include/images/rate3.png>");
}
else if(pageCords>57 && pageCords<79){
    $("#rate").html("<img src=include/images/rate3.png>");
}
else if(pageCords>87 && pageCords<103){
    $("#rate").html("<img src=include/images/rate4.png>");
}
else if(pageCords>103 && pageCords<125){
    $("#rate").html("<img src=include/images/rate5.png>");
}

});
},
//on Mouse Out
function(){ 
    $("#rate").html("<img src=include/images/rate0.png>");

 });    

I tried using a flag but was unsuccessful.

<!--My Html-->
<p>
<span>Move the mouse over the div.</span>
<span>
</span>
</p>
<div id="rate">
<img src="include/images/rate0.png">
</div>

Please help with this or suggest any other simpler way. Thanks in advance.

how to Convert a powerpoint presentation file to a Flash file with control buttons?

`<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  codebase="http://ift.tt/AbE0Kw">
<param name="movie" value="Presentation/index.swf" />
<param name="quality" value="high" />
<param name="scale" value="showall" />
<param name="bgcolor" value="#ffffff" />

`

how to add control buttons like next and previous buttons to view next and previous slides.

Unable to download large data using javascript

I have a large data in form of JSON object in the javascript. I have converted it into the string using JSON.stringify(). Now my use case is to provide this large string in a text file to the user. So for this i have written below code.

HTML code

  <button id='text_feed' type="submit">Generate ION Feed</button>

  <a href="data:attachment/txt" id="textLink" download="feed.txt"></a>

Javascript code

 var text = //huge string  

 $("#text_feed").click(function() {
        _generateFeed(text);
 });

 var _generateFeed = function(text) {
    //some code here
    $("#textLink").attr("href",
                          "data:attachment/txt," + encodeURIComponent(text))  [0].click();
    });
 }; 

Problem: When the string length is small , i am able to download the data . But when the string length goes higher (> 10^5) , my page crashes. This occurred because "encodeUriComponet(text)" is not able to encode large data.

I also tried window.open("data:attachment/txt," + encodeURIComponent(text)); But again my page got crashed because of the same reason that encodeURIComponet was unable to encode such a large string.

Another approach: I was also thinking of writing the data into a file using HTML5 File write API , but it has support only in Chrome web browser , but i need to make this work for atleast firefox and chrome both.

Use Case I don't want to do multiple downloads by breaking the data, as i need to have data in a single file in the end.

And my target is to support string of aprroximately 10^6 length. Can anyone help me how to download/write this amount of data into a single file.

Can I use html5 data attribute in HTML select box element?

Any idea can I use .data attribute in HTML select box?I red HTML5 documents but I didn't find any information that could help me.

Is it legal:

<span>Select depatament</span>
<span>
    <select id="department" onchange="EnableSelectBox(this)" data-spacing="10cm">
        <option selected disabled>-Select-</option>
    </select>
</span>

poster attribute in html5 video tag work bad on android

everybody.

I Have a problem with the poster attribute en html5 video tag. I'm doing an app with ionic Framework and I need show some videos inside, the videos extension are m3u8. When I play the video just get sound and the poster attribute doesn't hide, but if I pause and play the poster attribute again,it hides and the video works perfectly.It is like the video is behind the poster attribute and when I pause and play disappears.

my code it is:

I momently solved this using a settimeout doing an automatic pause and play function but is not the solution that i want.

code:

setTimeout(function(){
    document.getElementById("myVideo").pause();
    console.log('paused');
    document.getElementById("myVideo").play();
    console.log('playing');
}, 6000);

someone can help me, thanks a lot.

Input text filed with close button

i just want to make an input text field with a little x (close) button at the top right corner. please help me out how it should be done in css3 or bootstrap 3. Thank you

add attribure to html tag with javascript

I am using a javascript code to detect if a video is loaded.

Once it is loaded I want to add an autoplay attribute to the tag to make it play but I can't find a way to add that attribute. here is the code I use:

window.addEventListener('load', function() {
    var video = document.querySelector('#bgvid');
    var div = document.getElementById('#bgvid');

    function checkLoad() {
        if (video.readyState === 4) {
            alert('video is loaded')
            video.setAttribute("autoplay")
        } else {
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();
}, false);

******************* THE SOLUTION ********************

First, thanks DontVoteMeDown for the help.

proper code should be:

document.getElementById('bgvid').addEventListener('canplaythrough', function() {
    this.play();
    });

Certain Images missing and videos aborted in Internet Explorer 11

So, i created a website using dreamweaver and added a few images and videos. The images and videos are clearly visible in all other browsers except IE 11. Only a few images are visible in IE 11 (one of them is a .jpg and the other is a .png). the rest of the images are .jpg and are not visible. Also, the videos get aborted on IE 11. Any Solutions? The website is basically an ebook and contains a lot of text. Here is a sample of the code that works for all other browser except IE11. `

                <div id="sectionId1" class="pageContainer currentPage clearfix">
                    <h1 class="pageTitle">Introduction To the Ages</h1>
                    <div class="contentHolder" id="sectionId1">

                            <p class="text"> <img width="620" height="410" src="images/clip_image002.jpg" alt="">We humans have lived through numerous technological revolutions. This technological revolutions have always made many aspects of our life much easier and helped us to push towards a whole new era...humans gave life to the <strong>INFORMATION AGE</strong>.</p>
                        </div>                          
                    </div>`
....
</div></div></div>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/app.js"></script> -->
<script src="js/site.js"></script>

Note: I was able to fix the images by converting them to RGB. But the videos are still aborted.

Mobile Apps latest technologies research

I am currently on a research understanding the whole buzz around some technologies that claim that they deploy themselves as cross-platform apps once you write your code in HTML5/CSS3/AngularJS/Whatever client side techonology. I understand those technologies provide you with a bridge to the native-side of the OS you are running on, but I still lack some real important information regarding them.

  1. Do all those PhoneGap/Ionic/Cordova just wrap your client-side code into an application? Is it the same as using the web-browser to get to a URL but with only some native-like additions(Camera/File etc..).
  2. Do those technologies just connect to your website that is online using DNS? Or is the "Website" you are building does not sit on a server but only on the local OS? Can they run that application offline?
  3. Besides the native additions you get with those kind of technologies, why bother developing with them when you can on the other hand develop a responsive website that can also work on desktop?
  4. Can you connect to a server-side using Ionic/Phonegap? Let's say I have an MS-SQL Table I want to communicate with- is that possible?

I really have a hard time understanding what all those technologies are any good. Still, it is growing in popularity. Thanks for any light on that matter.

JNLP File Error; java.lang.NumberFormatException: For input string:

This is not my code. I'm just taking this for example because my real codes are long. I'm using Netbeans and i already enabled the Java Web Start on the project where this code located.

import java.awt.Font;
import javax.swing.JFrame;
import javax.swing.JLabel;

public class Tester2 {

    /**
     * Create the GUI and show it. For thread safety, this method should be
     * invoked from the event-dispatching thread.
     */
    private static void createAndShowGUI() {
        //Make sure we have nice window decorations.
        JFrame.setDefaultLookAndFeelDecorated(true);

        //Create and set up the window.
        JFrame frame = new JFrame("HelloJWS");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Add the "HelloJWS" label.
        JLabel label = new JLabel();
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setFont(label.getFont().deriveFont(Font.PLAIN));
        frame.getContentPane().add(label);

        //Set label text after testing for Java Web Start.
        String text = null;
        try {
            Class sm = javax.jnlp.ServiceManager.class;

      //If we reach this line, we're running in an environment
            //such as Java Web Start that provides JNLP services.
            text = "<html>You're running an application "
                    + "using Java<font size=-2><sup>TM</sup></font> "
                    + "Web Start!</html>";
        } catch (java.lang.NoClassDefFoundError e) {
            //If no ServiceManager, we're not in Java Web Start.
            text = "<html>You're running an application, "
                    + "but <b>not</b> using "
                    + "Java<font size=-2><sup>TM</sup></font> "
                    + "Web Start!</html>";
        }
        label.setText(text);

        //Display the window.
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
    //Schedule a job for the event-dispatching thread:
        //creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

So when i run this code by pressing F6, it was always thrown to the catch. I don't know why. And when i try to build this code and open the Netbeans generated JNLP for this project, it shows Unable to launch the application. And when i click into Details it shows this two tab named Launch File, and Exception.

The Launch File has this log.

<jnlp codebase="file:/C:/Users/you/Documents/NetBeansProjects/Tester2/dist/" href="launch.jnlp" spec="1.0+">
  <information>
    <title>Tester2</title>
    <vendor>you</vendor>
    <homepage href=""/>
    <description>Tester2</description>
    <description kind="short">Tester2</description>
  </information>
  <update check="always"/>
  <security>
    <all-permissions/>
  </security>
  <resources>
    <j2se version="1.7+"/>
    <jar href="Tester2.jar" main="true"/>
  </resources>
  <application-desc main-class="Tester2,class"/>
</jnlp>

And the Exception tab has this log.

java.lang.NumberFormatException: For input string: "\Users\you\Documents\NetBeansProjects\Tester2\dist"
        at java.lang.NumberFormatException.forInputString(Unknown Source)
        at java.lang.Integer.parseInt(Unknown Source)
        at java.lang.Integer.parseInt(Unknown Source)
        at com.sun.deploy.security.DeployManifestChecker.verifyCodebaseEx(Unknown Source)
        at com.sun.deploy.security.DeployManifestChecker.verifyCodebase(Unknown Source)
        at com.sun.deploy.security.DeployManifestChecker.verify(Unknown Source)
        at com.sun.deploy.security.DeployManifestChecker.verify(Unknown Source)
        at com.sun.javaws.security.AppPolicy.grantUnrestrictedAccess(Unknown Source)
        at com.sun.javaws.security.JNLPSignedResourcesHelper.checkSignedResourcesHelper(Unknown Source)
        at com.sun.javaws.security.JNLPSignedResourcesHelper.checkSignedResources(Unknown Source)
        at com.sun.javaws.Launcher.prepareResources(Unknown Source)
        at com.sun.javaws.Launcher.prepareAllResources(Unknown Source)
        at com.sun.javaws.Launcher.prepareToLaunch(Unknown Source)
        at com.sun.javaws.Launcher.prepareToLaunch(Unknown Source)
        at com.sun.javaws.Launcher.launch(Unknown Source)
        at com.sun.javaws.Main.launchApp(Unknown Source)
        at com.sun.javaws.Main.continueInSecureThread(Unknown Source)
        at com.sun.javaws.Main.access$000(Unknown Source)
        at com.sun.javaws.Main$1.run(Unknown Source)
        at java.lang.Thread.run(Unknown Source)

How to get rid this problem?

How to prevent scrollbar from showing when launching a web app

I'm developing a web application for Firefox OS, i'm using HTML 5 and jQuery Mobile for this app,

I'm using different pages and give the user the ability to swipe between pages

<div data-role="page" id="p1"></div>

$.mobile.changePage('#p'+i, {
    transition: "slide"
});

some pages need scrolling, some don't. When I swipe from one page to another, the appearance of a scrollbar moves the page a few pixels to the side. and it's affecting the swipe as well. Is there any way to avoid this without explicitly showing the scrollbars on each page?

I tried to add scroll to all the pages but still have the same problem :

html {
    overflow-y: scroll;
}

It works when disable scroll completely, but I want always to have the scroll ability without showing the scroll bar, or showing it after page load.

Canvas disappear after click event

I am having a problem where I don't know where to go with it.

http://ift.tt/1HceG73

When i click 1 of the black rectangles it shows "Rectangle 0 clicked" but the canvas disappear.

How can I make it to show it in the canvas ???

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        document.getElementById("Display").innerHTML = 'Rectangle ' + i + ' clicked';
    }
}

Canvas element as overlay to canvas

TL;DR How to make canvas element with images to be overlay of second canvas with image.

I have two canvas elements. First one has image of t-shirt. Second one has images which can be added manually. I want to make second one to be overlay of first canvas.

Drag drop multiselect option

$(document).ready(function () {
    $("#@sort1, #@sort2").sortable({
        connectWith: ".connectedSortable",
    }).disableSelection();
});

html be

<div class="availableContainer"> 
   <span style="font-weight: bold">Available items</span> 
   <select name="@sort1" id="@sort1" multiple="multiple" class="connectedSortable"> 
   @for (var i = 0; i < ViewBag.Fields.Count; i++) { <option value="@ViewBag.Fields[i].Name">@ViewBag.Fields[i].Name</option> } </select> 
 </div> 
 <div class="selectedContainer"> 
   <span style="font-weight: bold">Selected items</span> 
   <select name="@sort2" id="@sort2" multiple="multiple" class="connectedSortable"> </select> 
 </div>

Android WebView Html5 Cache Size Limitation per application

Recently I'm doing some work on HTML5 cache. I've learned from this site http://ift.tt/1weG38b that HTML5 app cache could be limited under 5MB every site on some browers.

So I was wondering how large the cache size could be for android webview per application. Does it has a size limitation ? Does the limitation relevant to each application or to each site ?

Forgive my poor english. I would be appreciate if someone could help me out of this.

How to create mega menu with pure css

I have query i want to create a mega menu with pure css3 no jquery Please suggest how i can achieve that or any reference?

I have a main navigation for example :

     Home   AboutUs   Shop 
                      Women
                      Gents
                      Kids 

I have done with the above one ,Now I want when user take mouse over 'WOMEN' submenu then ON left side horizontal menu will display that three columns with link(like on cart site we generally see )

for more info visit here http://ift.tt/1EvEKDa

Here as user click on 'clothing' a mega menu(same i want ) come with differ columns

Same I need but only when user mouse hover 'Women' sub menu that i show above

NO frame work no jquery Pure css that i need to use

If any one have any reference then please help and share with me

Thanks

image gallery with boostrap

I try to make an responsive image gallery with bootstrap, so that if you make the screen smaller, the images are still in there right dimensions.

I try it like this:

<div id="tabs-2">


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />

    <ul class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 /></li>
        }
    </ul>


</div>

But if you make the screen smaller the images are laying over each other.

So how to make this responsive?

Thank you

Transform3d on mouse pointer in css3

I want to achieve the functionality at http://ift.tt/1Iw5NnF so i have created the css as on background hover

anim: hover { transform: translate3d(-21.6156px, 1.08132px, 20px);}

Now to change the value on hover it would need to get the pointer location so for that i have got

var x = event.clientX;
var y = event.clientY;
var coords =   x+5 , 5-y ;

Now the issue is how do i change the value from JavaScript to that particular CSS class.

Google Calendar RSS

I want to make a Google calendar RSS feed. I have a HTML file where is calling the data from Calendar but what I need is to call that filtered data into a RSS. Have anyone any idea how to do this?

here is my code

<html>
  <head>
    <script type="text/javascript">
      var CLIENT_ID = '633454716537-7npq10974v964a85l2bboc2j08sc649r.apps.googleusercontent.com';
      var SCOPES = ['http://ift.tt/1j9gAc6'];

      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES,
            'immediate': true
          }, handleAuthResult);
      }

      function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          authorizeDiv.style.display = 'none';
          loadCalendarApi();
        } else {
          authorizeDiv.style.display = 'inline';
        }
      }

      function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
          handleAuthResult);
        return false;
      }

      function loadCalendarApi() {
        gapi.client.load('calendar', 'v3', listUpcomingEvents);
      }

      function listUpcomingEvents() {
        var request = gapi.client.calendar.events.list({
          'calendarId': 'primary',
          'timeMin': '2015-04-25T00:00:00Z',
          'showDeleted': false,
          'singleEvents': true,
          'maxResults': 10,
          'orderBy': 'startTime'
        });

        request.execute(function(resp) {
          var events = resp.items;
          appendPre('Upcoming events:');

          if (events.length > 0) {
            for (i = 0; i < events.length; i++) {
              var event = events[i];
              var when = event.start.dateTime;
              if (!when) {
                when = event.start.date;
              }
              appendPre(event.summary + ' (' + when + ')')
            }
          } else {
            appendPre('No upcoming events found.');
          }

        });
      }

      function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }
    </script>
    <script src="http://ift.tt/1Iw5LvT">
    </script>
  </head>
  <body>
    <div id="authorize-div" style="display: none">
      <span>Authorize access to calendar</span>
      <button id="authorize-button" onclick="handleAuthClick(event)">
        Authorize
      </button>
    </div>
    <pre id="output"></pre>
  </body>
</html>

How to enable HTML5 videos in qutebrowser?

qutebrowser is not that popular, so I couldn't google an answer to my question, I want to be able to watch youtube etc... Please help this is the only thing stopping me from using a great browser

bezierCurve in HTML5 making a puzle shape

I am trying to make a jigsaw puzzle game with different types of shapes using bezierCurve. I made it like this. http://ift.tt/1GYtFvX

Now If I want to change the shape of the pieces I need to modify this part -

 outside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .34, cy);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },
        inside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .35, cy);
            ctx.bezierCurveTo(cx + s * .505, cy + .05, cx + s * .405, cy + s * .155, cx + s * .405, cy + s * .1505);
            ctx.bezierCurveTo(cx + s * .3, cy + s * .3, cx + s * .5, cy + s * .3, cx + s * .5, cy + s * .3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * .29, cx + s * .6, cy + s * .15, cx + s * .6, cy + s * .15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },

But I am new to this BezierCurve so can anyone guide me what should be the value to make this kind of shape.

enter image description here

Now the shape is like this ..

enter image description here

Manipulate photos with canvas

I want to upload multiple files in php.First, select the files,Then I change the size of the photos and place them with the mouse,Finally, upload them. such this link please help me.

I am not able to display values on my html page, have stored value in service but it is not displayed on second html page

This is my First html page:

         <form name="createdomain" class="form-horizontal" role="form" ng-controller="domainController">
              <swt-tree tree-data="domain.domainName" on-select="statementSelected(branch, selected_branches)" tree-control="statementTree" label-provider="rulesLabelProvider" content-provider="rulesContentProvider" expand-level="-1"></swt-tree> 
    <!-- This is used for adding a new page as a block to existing page -->
            <button  type="submit" ng-click="addTree(createdomain.$valid)" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ux_page_button ui-state-hover ui-button-text ui-c ng-binding ng-scope" id="btnData">OK</button>
              <button type="submit" ng-click="cancel()" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ux_page_button ui-state-hover ui-button-text ui-c ng-binding ng-scope" id="btnData">Cancel</button>

This is my controller :

    controller('domainController', ['$scope', '$state', 'DomainNameService', function($scope, $state, DomainNameService) {  
        $scope.activeTab = 1;
        $scope.currentDomain = {};
        $scope.statements=[];
        var statementTree = {};
        $scope.statementTree = statementTree = {};

         $scope.domainNameChanged = function() {
                var domainName= $scope.domain.name;
                alert($scope.domain.name);
         }
         $scope.addTree = function(isValid) {
                if(isValid) {
                    //if($scope.isAdd) 
                    var stType = $scope.domain.name;
                $scope.currentDomain = $scope.getNewDomain(stType);
                $scope.statements.push($scope.currentDomain);
                $scope.statementTree.setNewInput($scope.statements);
                $scope.isAdd = false;
                DomainNameService.addDomain($scope.domain.name);
                alert($scope.domain.name);
                $scope.domain.domainName = DomainNameService.getDomainName();
                alert($scope.domain.domainName);

                    $state.go('DomainTree');
                }
            }

            $scope.getNewDomain = function(stType) {
                return {name: stType};  
            }
    }])

This is my service method:

app.factory('DomainNameService', function() {
    var domainValue=[];
    return{
    addDomain: function(domainName){
        domainValue.push(domainName);
    },
    getDomainName: function(){
        return domainValue;
    }
    }
})

This is my Second html page where I want to display the value added from first html page:

    <div id="ruleEditorContainer" class="ui-layout-container"
        ng-controller="domainController"
        style="height: 95%; width: auto; overflow: hidden;">
    <div class="tab-content">
                                <div class="tab-pane active" id="statements">
                                {{domain.domainName}} <!-- Here I want to display the value which i got from first page -->
                                    <swt-tree tree-data="domain.domainName"
                                        on-select="statementSelected(branch, selected_branches)"
                                        tree-control="statementTree"
                                        label-provider="rulesLabelProvider"
                                        content-provider="rulesContentProvider" expand-level="-1"></swt-tree> 
                                </div>
    <div class="tab-pane" id="dictionary">Dictionary will be
                                    shown here</div>
                            </div>

I have stored the value in service which I got from First html page and in controller also I am getting the values from service method but I am not able to display this value on Second html page. Please help me out to resolve this issue. I am really stuck. Please help.

Implementing Flowchart using AngularJS and Canvas

I am trying to implement a flowchart using AngularJS and Canvas.
Instead of providing users with a UI where they can drag'n'drop UI components, I want to build a command line tool where users will be entering a command to draw a circle, which will convert command to a JSON object and render that object in canvas.

Are there any libraries which I can use to render UI components using JSON Object?

HTML5 Drag and Drop Folder FileEntry

I am trying to implement drag and drop using folders in HTML5 and I found an issue with converting the FileEntry to an actual file object as used in the single file handler.

  e.originalEvent.dataTransfer.items[i].webkitGetAsEntry();
            if (entry.isFile) {

                var files = e.originalEvent.dataTransfer.files;
                //We need to send dropped files to Server
                handleFileUpload(files);

            } else if (entry.isDirectory) {

                readFileTree(entry);
            }
        }

handleFileUpload uses:

    function handleFileUpload(files) {
        for (var i = 0; i < files.length; i++) {
            var fd = new FormData();
            fd.append('file', files[i]);
            fd.append('library', $('#ddlDMSLibraries').val());
            var status = new createStatusbar(obj); //Using this we can set progress.
            status.setFileNameSize(files[i].name, files[i].size);

            sendFileToServer(fd, status);
        }
    }

While readFileTree calls handleFolderUpload with FileEntry as shown below:

  function handleFileUploadFolder(fileEntry){

        var fd = new FormData();
        fd.append('file', fileEntry.file);
        fd.append('library', $('#ddlDMSLibraries').val());
        var status = new createStatusbar(obj); //Using this we can set progress.

        fileEntry.getMetadata(function (metadata) {

            status.setFileNameSize(fileEntry.name, metadata.size);

            sendFileToServer(fd, status);
        });

Single file upload works perfect while folder upload crashes on context.Request.Files[0] since Files does not contain any objects.

    public void ProcessRequest(HttpContext context)
    {

        FileItManager manager = new FileItManager();
        //Guid session = manager.LogIn("manager", "letmein");

        HttpPostedFile file = context.Request.Files[0];

Any ideas how to accomplish this?

Extensibility framework for HTML5 javascript application

I am working on an HTML5 javascript application and looking for an extensible framework which I can adopt so that community can customize it but at the same time can take seamless product updates from me.

Can you guys give me pointers from your experiences?

unable to run "canvas" tag and javascript program in aptana studio

Below shown is my HTMLcode :<!doctype html>

<html lang="en">

<title> </title>

`<head>`

<script scr ="myprog.js"> </script>

</head>

<body>

<section id="main">

<canvas id="canvas" width="600" height="400">

</canvas>

    </section>
</body>
</html>

And my javascript code is as below:

function doFirst(){

var x=document.getElementById('canvas');

canvas=x.getContext('2d');

canvas.strokeRect(10,10,100,200);

}

window.addEventListener("load",doFirst,false);

as per my understanding I'm suppose to get a rectangle of 100*200 in the browser(I'm using firefox browser). But here in my case, after running the above code I'm just getting a blank web page and I'm not getting any errors in the Aptana studio console too. Can anyone help me find out what the problem is?

I tried running a simple javascript program too ,to check if the my aptana studio can run javascript,and the following was the result:

1) when I added a button and tried to call a function using the below code,i got the alert after I clicked the button on the webpage(that is the program worked fine) : <input type="button" value="click me" onClick="alert('hello')/>;

2)But when I tried to run this particular code given below,i didn't get anything on my webpage:

doFunction() {

alert('hello');

}

window.addEventListener("load",doFirst,false);

document.getElementById("clickMe").onclick = "doFunction()";

3)I made sure that I linked my javascript file with my html using the code: <script src="my prog.js"></script> so the problem is not with the linking I guess.

Kindly please someone help me out... Thank you in advance...

Embedding a function inside .delay() doesn't work porperly

So I have HTML with a table and each column has button which should fade out that table and then fade in another DIV which contains info regarding about that specific column I clicked on. so the Jquery looks like this:

  $(document).ready(function(){
    $('#motoBttn').bind('click', function(){
        $('#ServicesContent').fadeOut();
            $('#infoSlector').fadeIn();
            $('#motoDescContent').fadeIn();
            $('#goBackDiv').fadeIn() ;
    })
    $('#goBack').bind('click', function(){
        $('#infoSlector > div').fadeOut() ;
        $('#ServicesContent').fadeIn();
    })
  });

This #goBack id is a button that will show up whenever i click whatever button. and will fade out whatever just fade in.

This works fine but this is not exactly how I would like it. I happens to show both DIVS at a particular time. so you can see one above the other one at some point between the fadings.

I found that delaying the first fading is what would create the desired effect. Now it would look like this:

$(document).ready(function(){
        $('#motoBttn').bind('click', function(){
            $('#ServicesContent').fadeOut().delay(800, function (){
                $('#infoSlector').fadeIn();
                $('#motoDescContent').fadeIn();
                $('#goBackDiv').fadeIn() ;

            });

        })

        $('#goBack').bind('click', function(){
            $('#infoSlector > div').fadeOut() ;
            $('#ServicesContent').fadeIn();
        })
      });

But whenever i click the "goBack" button, it fades itself out but is doesn show the first table had on the DOM.

this is how the HTML looks like:

<table id='ServicesContent'>
                <tr>
                    <td class='ServicesIcon'>
                         <img src="images/icon3.png" alt="" />

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewTitle'>
                        <h2>Venta de equipo motorola</h2>

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewContent'>
                        <p>Ceosdach es distribuidor autorizado Motorola. Tenemos todo en radiocomunicación.</p>
                    </td>
                <tr>
                    <td class='ServicesButton'>
                        <button class ="srvcViewBttn" id="motoBttn">Ver Oferta</button>

                    </td>
            </table>
                <div id="infoSlector"class="hidden" >
                    <div id="motoDescContent" class="hidden">
                        <div class= "wholewidhtcontent">
                            <h1>Venta de equipo motorola</h1>
                        </div>
                    </div>
                    <div id="goBackDiv" class="hidden">
                        <div class= "wholewidhtcontent">
                            <button class ="srvcViewBttn" id="goBack">Atrás</button>
                        </div>
                    </div>

                </div>

Datepicker Validation is not working on using jquery plugin

I'm having scenario like choosing/entering of date from datepicker. I have used jquery plugin for datepicker. It worked perfectly.

As I said earlier, user also having an advantage of entering date directly in textbox instead of choosing from calendar. At this stage, as we all know that the user may happen to enter the date wrongly. Hence I stepped in jquery datepicker validation plugin. There I found some articles to proceed.

The useful links are as follows,

[Keith Wood][1]  
[jsfiddle][2] or [Chridam says][3]

What I tried is:

As first link says(Keith wood), I tried with datepicker.validation.js. But nothing happens when i enter the wrong date. Below is the complete code which I tried,

<html xmlns="http://ift.tt/lH0Osb">
<head runat="server">
 <meta charset="UTF-8">
 <title> Test for date picker</title>
 <link rel="stylesheet" type="text/css" href="http://ift.tt/1F8kjRm"> 
<script type="text/javascript" src="http://ift.tt/1fEahZI"></script> 
<script type="text/javascript" src="http://ift.tt/1vKzLQs"></script> 
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.validation.js"></script>
    <script src="demo.js" type="text/javascript"></script>
</head>
<body>

<form id="validateForm" action="#">
 <script >
$('#validateForm').validate({
       errorPlacement: $.datepicker.errorPlacement,
       rules: {
           validDefaultDatepicker: {
               required: true,
               dpDate: true
           },
           validBeforeDatepicker: {
               dpCompareDate: ['before', '#validAfterDatepicker']
           },
           validAfterDatepicker: {
               dpCompareDate: { after: '#validBeforeDatepicker' }
           },
           validTodayDatepicker: {
               dpCompareDate: 'ne today'
           },
           validSpecificDatepicker: {
               dpCompareDate: 'notBefore 01/01/2012'
           }
       },
       messages: {
           validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)',
           validRangeDatepicker: 'Please enter a valid date range',
           validMultiDatepicker: 'Please enter at most three valid dates',
           validAfterDatepicker: 'Please enter a date after the previous value'
       }
   });
    </script>
 <p>
            Select Date:
           <input type="text" size="10" name="validDefaultDatepicker" id="validDefaultDatepicker"/></p>
           <script>
               $(function () {
                   $('#validDefaultDatepicker').datepicker();
               });
</script>
</form>

As per the second link(chridam), I tried with type = date concept directly. It gave me hope as it worked perfectly. Though the solution is nice, it is now working IE browsers. Below is the complete code,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">

<html xmlns="http://ift.tt/lH0Osb">
<head runat="server">
<title></title>
 <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type='text/javascript' src="http://ift.tt/Pg8IDD"></script>
  <script type='text/javascript' src="http://ift.tt/1iBzfxv"></script>

<script type="text/javascript">
$(function () {

    $("#jQueryValidateTest").validate();

    $("[type=date]").datepicker({
        onClose: function () {
            $(this).valid();
        }
    });
});
</script>
<style>
    .valid {
  background: green;
  color: #fff;
}
.error {
 background: red;
  color: #fff;
}
</style>  
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
    <form id="jQueryValidateTest">
<input type="date" required>
</form>​
</td>
</tr>
</table>
</body>
</html>    

Hope I'm now confusing you. Kindly help me to overcome this hurdle. Thanks in advance.

Bootstrap modal is transparent

I used what I've saw on a tutorial but it seems having a problem on my part coz i read other post on google but no one help on my problem. how can i make my modal dialog not transparent?

here what it looks like http://ift.tt/1F8kmwp

here's my codes

<div class="container">
    <div class="row text-center">
        <h3>Picture</h3>
        <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Upload a photo</a>
    </div>
</div>

<div class="modal-backdrop modal fade" id="basicModal" style="display: none;" data-backdrop="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Update Display Picture</h4>
      </div>
      <div class="modal-body col-xs-12">
       <div class="col-xs-4">
        <a href="#" class="btn btn-lg btn-success text-center" style=" margin-top:50%;width:150px; height:50px;"><i class="glyphicon glyphicon-plus"></i> Upload a photo</a>
        </div>

       <div class="col-xs-8">
       <h4 class="pull-right">PREVIEW</h4>
         <div class="center-block" style="background-image:url(img/default-picture.jpg);
            width: 200px;
             height: 200px;
             background-size: cover;
             display: block;
             border-radius: 100px;
             -webkit-border-radius: 100px;
             -moz-border-radius: 100px;">
         </div>
       </div>
      </div>
      <div class="modal-footer">
        <br>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>

</div>  

dimanche 10 mai 2015

Different Jigsaw Pieces using bezierCurve

I am trying to make a jigsaw puzzle game with different types of shapes using bezierCurve. I made it like this. http://ift.tt/1GYtFvX

Now If I want to change the shape of the pieces I need to modify this part -

 outside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .34, cy);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },
        inside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .35, cy);
            ctx.bezierCurveTo(cx + s * .505, cy + .05, cx + s * .405, cy + s * .155, cx + s * .405, cy + s * .1505);
            ctx.bezierCurveTo(cx + s * .3, cy + s * .3, cx + s * .5, cy + s * .3, cx + s * .5, cy + s * .3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * .29, cx + s * .6, cy + s * .15, cx + s * .6, cy + s * .15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },

But I am new to this BezierCurve so can anyone guide me what should be the value to make this kind of shape.

enter image description here

Now the shape is like this ..

enter image description here

how to select, move and resize drawn lines and shapes in my paint app using javascript

I am beginer to javascript and app development. i am learning how to draw shapes and custom drawings on canvas. i am stuck with selecting drawn shapes on canvas. i want to select, move and resize drawings on canvas. please help me. (function() {

var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));


// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;

sketch.appendChild(tmp_canvas);

var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

// Pencil Points
var ppts = [];
var shapes = [];
var draggoffx = 0;
var draggoffy = 0;
var selection = null;
var dragging = false;

/* Mouse Capturing Work */

tmp_canvas.addEventListener('mousemove', function(e) {
    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);


/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = 'blue';
tmp_ctx.fillStyle = 'blue';

tmp_canvas.addEventListener('selectStart', function(e){
    e.preventDefault();
    return false;
});

tmp_canvas.addEventListener('mousedown', function(e) {

    tmp_canvas.addEventListener('mousemove', onPaint, false);

    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

    ppts.push({x: mouse.x, y: mouse.y});

    onPaint();
}, false);

tmp_canvas.addEventListener('mouseup', function() {
    tmp_canvas.removeEventListener('mousemove', onPaint, false);

    // Writing down to real canvas now
    ctx.drawImage(tmp_canvas, 0, 0);
    // Clearing tmp canvas
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    // Emptying up Pencil Points
    ppts = [];
}, false);

var onPaint = function() {

    // Saving all the points in an array
    ppts.push({x: mouse.x, y: mouse.y});

    if (ppts.length < 3) {
        var b = ppts[0];
        tmp_ctx.beginPath();
        //ctx.moveTo(b.x, b.y);
        //ctx.lineTo(b.x+50, b.y+50);
        tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
        tmp_ctx.fill();
        tmp_ctx.closePath();

        return;
    }

    // Tmp canvas is always cleared up before drawing.
    tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    tmp_ctx.beginPath();
    tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

    for (var i = 1; i < ppts.length - 2; i++) {
        var c = (ppts[i].x + ppts[i + 1].x) / 2;
        var d = (ppts[i].y + ppts[i + 1].y) / 2;

        tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
    }


    tmp_ctx.stroke();
    shapes.push(tmp_ctx);
    console.log(shapes);

};

}());

How do i darken the whole page? ( html )

When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.

Is there a way to overlap the whole document with a gray transparent plane?

Choosing developement technology: game engines,wpf or html5?

I am working on a project, where we want to use a camera to detect people and create an interactive experience like a touchscreen for advertisement. The goal is to have some cool and fascinating interactive animation and graphics(mostly 2D), but not a game.

We are using c# for the back end and are considering the following options: monogame, Ogre, WPF, unity, UDK, HTML5, webGL. which one do you think is the best option for us? Thanks,

Creating PDF at server side

I have to take PDF format of the current page data. This information needs to be formatted bit differently (i.e it is not just the direct conversion of the view whose PDF page is required.) Now there are two ways which I could think of: 1) I send trade data via json to the server side and generate PDF via javascript code. (not sure how formatting will be done in that case) 2) I send html page with full formatting via JSON to server side(no idea how this is done) , converting this to pdf (this also needs to be explored and then either sending link or binary data of generated pdf from server to client side and open PDF.

I want to know which of the solution will work best and how to implement same. Or is there any other way that needs to be done. Server side language is JAVA. And slient side code is written in d3 and html5

How to access validity of accept parameter in html input

I've got a hidden input file field, and I want to restrict the type of files it accepts. I was hoping I could still leverage the accepts attribute, but have been unable to find a way to check that the input fields value is valid.

My field is

<input type="file" name="imgFile" onChange="convertFile()" accept="image/jpeg,image/gif,image/png" />

How to write a media backend for blink based web engine?

In webkit based browser engine, MediaPlayerPrivate used to be the interface for implementing platform specific media backends to support HTML5 video tags.

In Blink based web browser engine, what is the interface that one needs to implement to have a platform specific media backend to support HTML5 tags?

how to wite global services in angular js

i am writing the application for i-banking , how to use angular JS , as we have an idea about banking , left side main link under every main link 3 to 4 sub links will be there . how to write a common service every time whether the my login message is being available are not , how to verify , every time i will recieve json incase my session is not available i wills send common error code how to use across my all module , ex i have around 9 modules is there in my deskop application

Bootstrap 3 menu dropdown strange BUG

I am making a site usng bootstrap 3. Now the problem is with navbar dropdown. When i click the link it gets changed into expand child menu and collapse child menu

to clearify here is the pic i am trying to tell at first enter image description here

THen when i click it becomes

enter image description here

Finally again enter image description here

Where did my gallery menu text go to ??? Hope some one can help.

How to style radio buttons differently if they fit in a single row?

PLAYGROUND HERE

I'd like to style radio buttons differently if they fit in a single row. For example:

enter image description here

The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal radio buttons.

The second container has enough space. Therefore, the radio buttons appear as buttons.

Is that possible to achieve this behaviour using CSS only?

If not, Javascript "hack" is welcome.

PLAYGROUND HERE


HTML

<div class="container radio">
  <div>
    <input id="a1" type="radio" name="radio">
    <label for="a1">Yes,</label>
  </div>
  <div>
    <input id="a2" type="radio" name="radio">
    <label for="a2">it</label>
  </div>
  <div>
    <input id="a3" type="radio" name="radio">
    <label for="a3">is</label>
  </div>
  <div>
    <input id="a4" type="radio" name="radio">
    <label for="a4">possible</label>
  </div>
  <div>
    <input id="a5" type="radio" name="radio">
    <label for="a5">to</label>
  </div>
  <div>
    <input id="a6" type="radio" name="radio">
    <label for="a6">achieve</label>
  </div>
  <div>
    <input id="a7" type="radio" name="radio">
    <label for="a7">this</label>
  </div>
</div>
<div class="container buttons">
  <div>
    <input id="b1" type="radio" name="buttons">
    <label for="b1">Yes,</label>
  </div>
  <div>
    <input id="b2" type="radio" name="buttons">
    <label for="b2">it</label>
  </div>
  <div>
    <input id="b3" type="radio" name="buttons">
    <label for="b3">is</label>
  </div>
  <div>
    <input id="b4" type="radio" name="buttons">
    <label for="b4">possible</label>
  </div>
</div>

CSS (LESS)

.container {
  display: flex;
  width: 220px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid black;

  &.radio {
    flex-direction: column;
  }

  &.buttons {
    flex-direction: row;

    > div {
      input {
        display: none;

        &:checked + label {
          background-color: #ADFFFE;
        }
      }

      label {
        padding: 5px 10px;
        margin: 0 1px;
        background-color: #ccc;
      }
    }
  }
}

My view does not load CSS/JS files outside Views folder

I have a view inside my Views folder in my MVC 3 application which loads CSS, Images and JS files from a folder at root level of the application. On running the View get the following output, I tried using

  • <link href="@Url.Content("~/RootFolder/styles.css")" rel="stylesheet" type="text/css" /> for CSS and below code which did not work

    <script src="@Url.Content("~/RootFolder/jquery-1.8.3.min.js")" type="text/javascript"></script>

    • I added in my views Web.config file

Cannot load JS,CSS and images from root folder

I cannot load CSS/Images/JS files from the root folder, But if I place the cshtml file in the root folder where CSS/Images/JS files are present the application works as expected displaying everything. Can you please help me resolve this issue

Thanks for your help :-)

UPDATE: My HTML code looks as shown in the below image

HTML Code looks like this

My folder hierarchy in the application looks as

Folder Hierarchy in my application

how can i enter the auto increment id with char like subh1,subh2,subh3

how can i enter the auto increment id with char like subh1,subh2,subh3..................

Creating Website with Customized images Created from user input on Load

I have a project to create a website of T Shirts Vendor, where he wants to get user name on load of home. and based on this user name, he wants to update all T Shirts dynamically, such that every t shirt has username printed look a like on it. This will make user feel, that he is designing his own t shirt. Any idea which technology to use? any js or jquery plugin to create T Shirt imaages at runtime and display.

Firefox wont draw to canvas on first visit

I have an issue I'm having a hard time believing... It seems that when I draw to a dynamically created canvas in firefox it wont render the first time that source is run... It seems to happen the first time the javascript in question is run either by modifying the source or visiting the link for the first time. Here are some repro steps:

1) open a brand new instance of firefox. visit the jfiddle below.

2) see nothing

3) open a new tab in firefox. visit the jfiddle below.

4) see the result (10 colored squares)

doing this in chrome will result in seeing the result at both step 2 and step 4.

http://ift.tt/1K0ofXt

html

<body>
    <div id="a">
    </div>
</body>

js

$(document).ready(function(){
    var make_canvas = function(i) {
        var $canvas = $('<canvas>').appendTo($('#a'));
        $canvas.attr('width', '100px');
        $canvas.attr('height', '100px');
        var canvas = $canvas[0];
        var ctx = canvas.getContext('2d');
        return ctx;
    };

    var draw = function(ctx) {
       var image = new Image();
       image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkEAIAAACvEN5AAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAABa0lEQVR42u3cMU4CARRF0SeyWl0P7FaxoKbBuRrNOZUJCU7xcv9UvGzb7Xa6btvrddse/f2dT0+Xg77noOd58r9c/tTTPvr08hPPc962z7fBoc7b9mFYHEyxSCgWCcUioVgkDIuEU0hCsUgoFgnFImFYJJxCEopFQrFIKBaJe7Hef/sx+G8Ui4RhkfDyTkKxSCgWCcUiYVgknEISikVCsUgoFgnFIqFYJAyLhFNIQrFIKBYJxSJhWCScQhKKRUKxSCgWCcMi4RSSUCwSikVCsUgoFgnFImFYJJxCEvdi+eE1DqZYJLxjkTAsEk4hCcUioVgkFIuEYpFQLBKGRcIpJKFYJBSLhGKRMCwSTiEJxSKhWCQUi4RhkXAKSSgWCcUioVgkFIuEYpEwLBJOIQnFIqFYJBSLhGGRuJ9CP7zGwRSLhJd3EopFQrFIKBYJwyLhFJJQLBKKRUKxSBgWCaeQhGKRUCwSikVCsUh8ARsPyYz6AmddAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDExLTA0LTA3VDIxOjM2OjAyKzEwOjAwezv9bwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMS0wNC0wN1QyMTozNjowMisxMDowMApmRdMAAAA2dEVYdFBORzpiS0dEAGNodW5rIHdhcyBmb3VuZCAoc2VlIEJhY2tncm91bmQgY29sb3IsIGFib3ZlKbpeXNkAAAAVdEVYdFBORzpJSERSLmJpdF9kZXB0aAAxNqc4FdcAAAAVdEVYdFBORzpJSERSLmNvbG9yX3R5cGUAMgEnYzIAAAAbdEVYdFBORzpJSERSLmludGVybGFjZV9tZXRob2QAMPs7B4wAAAAedEVYdFBORzpJSERSLndpZHRoLGhlaWdodAAxMDAsIDEwMNtVy6kAAAAkdEVYdFBORzpwSFlzAHhfcmVzPTcyLCB5X3Jlcz03MiwgdW5pdHM9MKQw/n0AAAArdEVYdFBORzp0ZXh0ADIgdEVYdC96VFh0L2lUWHQgY2h1bmtzIHdlcmUgZm91bmRcYYD5AAAAAElFTkSuQmCC";
       ctx.drawImage(image, 0, 0);
    };

    for(var i = 0; i < 10; i++)
    {
        draw(make_canvas(i));
    }

});

Need help please

I am going totally nuts here. I have a button on my website and I want that button to go to a point on my page. Now, all I can do with that button is enter a URL. Note: No HTML will be added to that button, but I need when someone clicks on that button for it to jump down to a another point on my page. i have looked everywhere on the net and it seems no one can answer this without throwing in a bunch of HTML. Again, all I need is to add a URL that jumps to a point on the page. What do I add to the URL to make it go to a certain point on a page?

Combobox value isn't captured using ng -model when inside a table generated by ng -repeat (AngularJS)

This is my code

<thead>
 <tr>
  <th>Id Detalle_Venta</th>
  <th>Id Producto</th>
  <th>Producto </th>
  <th>Cantidad </th>
  <th>Direccion </th>                            
  <th>Repartidor </th>                            
 </tr>
</thead>
<tbody>
  <tr ng-repeat="det in detalleVenta">
  <td>{{det.id_Detalle_Venta}}</td>
  <td>{{det.id_Producto}}</td>
  <td>{{det.nombre_Producto}} {{det.formato}}</td>
  <td>{{det.cantidad}}</td>
  <td>{{det.direccion}}</td>
  <td>
    <select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
     <option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
    </select>
  </td>
</tr>
</tbody>

The problem is in this lines:

    <select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
      <option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
    </select>

Angular doesn't capture the value of select with the ng -model="comboRepartidor". The event ng-change="escogerRepartidor() shoud be show de combo value but it show Undefined. If i move the combo out of the table works fine. What's the problem?

Header, Nav, Container Layout without vertical scroll bar on entire page

I am having a hard time with CSS. I'm trying to create a Header, Side Nav Bar and Content Pane. Below is what I need.

 --------------------------------------------------------------------------
| Header                                                                   |
 --------------------------------------------------------------------------
| Nav             | Content                                                |
|                 |                                                        |
|                 |                                                        |
|                 |                                                        |
 --------------------------------------------------------------------------

I have attempted to create this, but for some reason there is a scroll bar on the side making the header appear and disappear as I scroll.

The only thing that needs a scroll bar is the content pane.

Both the Nav and Content needs extend all the way to the bottom of the browser.

Here is my attempt:

        #header{
            background-color:#000000;
        } 

        #nav {
            background-color:#ff6a00;
            width: 220px;
            float:left;       
            min-height: 100% !important;         
        }

        #section {
            background-color:#808080;
            min-height: 100% !important;
            float:left;   
        }

        .scrolling-wrapper {
            width: auto;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            overflow-y: auto;
        }

Here is the HTML:

    <div class="body-wrapper">

        <div id="header">
            asdasd
        </div>

        <div id="nav">
            asdasd
        </div>

        <div id="section">
            <div class="scrolling-wrapper">
                adasd
                @RenderBody()
            </div>
        </div>

    </div>

Everything needs to auto adjust, for example the header can be any height so nav and content needs to compensate for that. I hope that makes sense.

Can anyone please point me into the right direction to remove the scroll bar so that the 3 containers fits perfectly in the browser?

Thank you in advance.

708 I have no idea how to change the counter, where to find it?

Super Novice - I have a site with counters, and has **<h3 id="counter">0</h3>** How do I change the counter number? Where can I find it to change?

this is the code:

<div class="container">
            <div class="row">
                <div class="col-md-4 project">
                    <h3 id="counter">0</h3>
                    <h4>Awesome Projects</h4>
                    <p>Dolor sit amet, consectetur adipiscing elit quisque tempus eget diam et lorem a laoreet phasellus ut nisi id leo molestie. </p>
                </div>
                <div class="col-md-4 project">
                    <h3 id="counter1">0</h3>
                    <h4>Happy Customers</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit quisque tempus eget diam et. laoreet phasellus ut nisi id leo.  </p>
                </div>
                <div class="col-md-4 project">
                    <h3 id="counter2" style="margin-left: 20px;">0</h3>
                    <h4 style="margin-left: 20px;">Professional Awards</h4>
                    <p>Consectetur adipiscing elit quisque tempus eget diam et laoreet phasellus ut nisi id leo molestie adipiscing vitae a vel. </p>
                </div>
            </div>
        </div>``

Vertically align text inside 100vh container

I have tried all the suggested methods I could find on this subject but cannot get any to work. I vertically aligned the image with the vertical-align/line-height method but cannot figure out how to vertically align the text boxes.

http://ift.tt/1EunApp

Scroll down to the 2nd or 3rd problem to see examples of the type of page I need this on. I am hoping someone with more experience than me can immediately spot where I'm going wrong, I can provide relevant snippets of code if helpful.

Thanks in advance

html - How do I play an mp3 from a url on a website?

So let me be more specific.

I'm currently trying to build a site, and I have an iframe that links to a mp3 search engine site.

Now the results look something like this:

And what I want to do is to have an audio player on my site (specifically this one)

http://ift.tt/1KQRcX5

play one of the songs from the results page by taking the link from the "Download" button and playing it. (In case you're curious, the actual "Play" button only plays a sample of the song.)

All without downloading the actual song.

Is there a way I could do something like this? Preferably without JS of any kind? (I know, that's stupid, but if necessary, then OK.)

Display output from ActionResult in html.TextBox

I've created a small Action in my HomeController to get the skills relating to a User, which the puts this into an Array.

public class SkillsVMsController : Controller
{
    private NextrungContext db = new NextrungContext();

    public ActionResult GetAllKeySkills()
    {
        string currentUserId = User.Identity.GetUserId();
        var user = db.Users.FirstOrDefault(u => u.AspNetId == currentUserId).UserId;
        var query1 = (from t in db.SkillRoleUsers
                      join s in db.Skills on t.SkillId equals s.SkillId
                      where t.UserId == user
                      select s.SkillName);
        SkillsVM model = new SkillsVM();
        model.KeySkills = query1.ToArray();
        return View(model);
    }

I need this Array to now appear on a page in a TextBox to allow me to apply the Tag-Editor style I have set up.

I was going with something like this, but no dice.

  @Html.TextBox("KeySkills", 
                 @Html.Action("GetAllKeySkills", "Home"), 
                 null, 
                 new { htmlAttributes = new { @class = "skills" } })

I've also tried to use a ViewModel (and again as below), but really don't understand how they work.

SkillsVM

namespace NextRung.Models
{
    public class SkillsVM
    {
        [Key]
        public Int32 LinkId { get; set; }
        public Int32 SkillId { get; set; }
        public string SkillName { get; set; }
        public string SkillLongDesc { get; set; }
        public bool KeySkill { get; set; }

        public string Email { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        [DataType(DataType.Date)]
        public DateTime DateOfBirth { get; set; }
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string Address3 { get; set; }
        public string Address4 { get; set; }
        public string Address5 { get; set; }
        public string PostCode { get; set; }
        public string PhoneMobile { get; set; }
        public string PhoneOther { get; set; }
        [DisplayFormat(NullDisplayText = "No Summary yet")]
        public string Summary { get; set; }



        public Int32? RoleId { get; set; }
        public Int32? UserId { get; set; }
        public Int32? CritVitId { get; set; }
        public Int32? VacancyId { get; set; }

        public string[] KeySkills { get; set; }
    }
}

Any other ideas?

How does one reset the coordinates for panzoom.js?

I'm working on an HTML/css/js program to drag a video to position it and zoom it with the mouse wheel. The program zooms fine in browser screen. But, when I change to full screen, the video creeps up from the cursor when zooming in. How does one reset the coordinates for panzoom.js when going to full screen?

These are the links: Zoom.html and jquery.panzoom.js

loadFromJSON is not loading fill options for grupped objects, how to fix that?

Here is mine code

    var canvas = new fabric.Canvas("canvas");
    var canvas2 = new fabric.Canvas("canvas2");


 var circle = new fabric.Circle({radius: 100,fill: 'red',top:100,left:100});
 var path = new fabric.Path('M 0 0 L 0 100 L 50 50 z',{ left: 20, top: 120,fill:"blue"});



var all= new fabric.Group([path,circle]);
canvas.add(all);
var asd=JSON.stringify(canvas);

canvas2.loadFromJSON(asd, function(){
canvas2.renderAll();
});

On canvas 1 i have a blue path object grupped with rec circle, and it works, but when I "loadFromJSON" i have two black objects grupped together ! How to fix that ?

How to call initAccelerometerEvent to change interval

How may initAccelerometerEvent from the W3C DeviceOrientation Event Specification be called to modify the sample interval? I didn't find any code sample. There is a related stackoverflow question, but it was never answered. Thanks.

How can I create a website menu to take me to other page headings? [on hold]

I have created a website using Notepad ++ with HTML5. I have 4 pages, all of which have a number of different headings on that page. I have created a drop down menu of the 4 pages, which some have sub lists for the heading on that page. How would I be able to link the pages so when the user clicks on the heading from the menu, it will take them to that heading on the corresponding page.

This is my list, but the sub headings don't work:

  • Home Page
  • The Internet
    • History
  • HTML
    • History
    • Through the ages
    • HTML or XHTML?
  • CSS
    • History

Javascript works in JQuery but not JQuery Mobile

For some reason when I try to link to this page (code below) in JQM, the page doesn't load, but if I type the URL in directly the page loads fine. I'm really confused as to what is going on. I think it has something to do with the javascript, but I am not sure. Can someone help me out please?

<!DOCTYPE html>
<html>
<head>
    <title>Select Days</title>
    <link rel="stylesheet" href="http://ift.tt/1hqJ3b1">
    <link rel="stylesheet" type="text/css" href="css/pepper-ginder-custom.css">
    <link rel="stylesheet" type="text/css" href="css/mdp_abrv.css">
    <link rel="stylesheet" type="text/css" href="css/core.css">
    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
    <link rel="stylesheet" type="text/css" href="css/button.css">
    <script src="http://ift.tt/15195HW"></script>
    <script src="http://ift.tt/1hqJ3aY"></script>
    <script type="text/javascript" src="http://ift.tt/1pTZRh4"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
        <a href="/main/planned/" data-icon="back">Start Over</a>
        <h1>Select Days</h1>
        <a href="/main/" data-icon="grid">Main</a>
    </div>
    <div data-role="main" class="ui-content">  
        <ul data-role="listview" data-inset="true" data-position="fixed">
            <li class='demo'>
                <div class='box'>
                    <div id="date" class="datepicker" style="display:block;"></div>
                    <button id="reset_dates">Reset</button>
                </div>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#date").multiDatesPicker({
                            addDates: ['05/10/2015', '05/14/2015']
                        });
                        // shows selected dates in an alert message
                        $('#show_dates').click(function(e) {
                          e.preventDefault();
                          var dates = $('#date').multiDatesPicker('getDates');
                          var dates_in_string = '';
                          for(d in dates) dates_in_string+= dates[d]+' ';
                          alert(dates_in_string);
                        });
                        $('#reset_dates').click(function(e) {
                            $('#date').multiDatesPicker('resetDates', 'picked');
                        });
                    });
                </script>
            </li>
        </ul>
    </div>
</body>
</html> 

Using a Javascript function to add a background image on-top of a background color

I have a div that is used for a piece in a game of checkers:

<div class="blackCoin" ondblclick="makeKing(this)">

When, for example double clicked, I want to make the piece a king by adding a crown on top of the existing background color:

function makeKing(obj){
            obj.style.backgroundImage = "url('http://ift.tt/1F7udTe')";
 }

Here is the full JS Fiddle

Website scrolling to the right on certain pages

I have created http://ift.tt/1dVFBHM as you can see on the home page the site fits perfectly without giving excess blank space on the right but on the rest of the pages i get excess space on the right. Can some one help me sort this problem as i dont think there is a problem in the css.

Record webcam stream on server with HTML5?

I'm trying to fugure our what solutions should I explore/use in order to record webcam videostream directly on server without using Flash. Please point me to the right direction, guys. Thank you

I have found following thing: http://ift.tt/1HD0YIz

Disable button using form validation using angularjs

I have an angular application that contains a save button with several input fields.In the form I have User field if we try to enter inactive user it would call API and show the error message (400 status) "user is not active" in the UI.My requirement is I need to disable save button only if I get server side error "user is not active" error message. I am trying to compare error message like below in the save button but getting error "Cannot assign to read only property".How can I make it work?

<div>

  <md-button> type="submit" ng-disabled="form.User.$error='User is not active'"</md-button>

</div>

How does pixelarity encrypt their demos

I wonder how pixelarity do when they encrypt their demos when you click view source. (sorry for bad english)

Click here. Then right click & view source to see what I mean,

I'm not asking this so I can get the source code. I've already bought membership from them.

I would like to know how It's done so I can use something similar my self.

Thank you

how can use a loop to draw it multiple times in random places in my canvas?

I've drawn a leaf in canvas, but now i want to draw it multiple times on my canvas and in random places. I've mostly used bezier curves to draw my leaf, is and i do not know how to use a loop to create more of them in random places, because of the coordinates.

My code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">

</canvas>

<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

       context.lineWidth = 5;


      context.beginPath();
      context.moveTo(100, 150);

      context.strokeStyle="#009900";
      context.bezierCurveTo(170, 110, 400, 10, 500, 150);
      context.stroke();



      context.moveTo(100, 150);
      context.strokeStyle="#009900";
      context.bezierCurveTo(170, 130, 430, 310, 500, 150);
      context.stroke();
      context.fillStyle = '#99FF66';
      context.fill();


      context.strokeStyle="#009900";
      context.moveTo(250, 150);
      context.bezierCurveTo(400, 100, 400, 180, 500, 150);
      context.stroke();
       context.closePath();


      context.beginPath();
      context.strokeStyle="#996633";
      context.moveTo(500, 150);
      context.lineTo(580,150);
      context.stroke();
      context.closePath();





</script>

</body>
</html>

Best practices to Dynamically Add, Remove Section to User Profile

I am building a Use Portfolio web page, where I have to input user's info like his education, projects etc. user can add multiple educations in educations and muliptle section's in project sections.

I know the old way to allocate div an id using javascript and when a user wants to add another education, increment div id values and show up the div content.

But I want to use some best practices to achieve this work.

Divs not aligning

I have 3 simple divs with some cosmetic styles that are supposed to be aligned in a row, Two of them have images that are on the left and right sides while middle one contains another div containing text.

I am able to fit the image in divs but the middle one that contains text is not aligning horizontally with other two.

Following is the html

 <div class="eggpic">
    <img src="smiley.gif"/>
 </div>
 <div class="timersection">
   <div class="timersectiontext">Hello</div>
 </div>
 <div class="buttonpic softboil">
   <img src="smiley.gif"/>
  </div>

Here is the jsfiddle link or that http://ift.tt/1Rrx2DY

Please help in aliging all the divs.

Thanks in advance.

Google Map API V3 not working inside polymer-element

I created polymer-element and add Google Map in it. It works correctly if i write code of polymer-element direct into main file where i want to use it but if i keep its code in separate file and use it by importing then it gives following error in console:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

here is code of my-map.html file:

<link rel="import" href="bower_components/polymer/polymer.html">
<script src="http://ift.tt/1lrRXYd"></script>
<polymer-element name="my-map">
        <template>
            <style type="text/css">
            :host{
                display: block;
            }
                #mapCanvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
          }
            </style>
            <div id="mapCanvas"></div>
        </template>
        <script type="text/javascript">
            Polymer({
                map:null,
                ready:function(){

                    this.map = new google.maps.Map(this.$.mapCanvas, {
                    center: new google.maps.LatLng(41, -91),
                    disableDefaultUI: true,
                    zoom: 5
                     });
                }
            });
        </script>
    </polymer-element>

and this is code of main file index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
<my-map style="height:500px,width:500px;"></my-map>
</body>
</html>

where is problem? if i write code of my-map.html file in index.html file then it work perfect.

Animation In page loading using jquery

Greetings. I wrote a code of animation, as PACE.JS. I want to implement it on the site, when the site is loaded animation will appear. How this can be done using JavaScript / jQuery? You can see an example of the site youtube .. loading up has a red stripe. Sincerely, Guy

jquery event for html5 datalist when item is selected or typed input match with item in the list

I have datalist like below -

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

What i want is, when an item is typed in completely(for example say in input box when user completely type "Adnan1") or selected from list, then I want an event. I tried couple of approaches but both doesn't help me so far. Approaches are -

$("#name").change(function(){
console.log("change");
}

problem with this is, the event only gets triggered when input gets out of focus i.e. when I click somewhere in the screen.

I also tried

$("#name").bind('change', function () {
    console.log('changed'); 
});

but the callback gets triggered each time when I type in. I actually need to make an ajax call when item is completely selected. Either via type-in or by selecting from dropdown.

First approach is bad for user perspective because he has to make extra click and second has disadvantage as for every letter an event will be triggered.

All I want is an event when either user made a selection or typed complete sentence. is there a way to achieve this? any event that I missing and that can solve my problem.

Thanks in advance.

How to do load() on ajax loaded images?

want to do nice image loading, but my images are loaded by ajax (prepend). How to do load() on each image. I want it to load one by one, order doesn't matter. Before image load I want some loading gif.

Here is what I tried:

.done(function( data ) {
        var obj = JSON.parse(data);
        for(i = 0; i < obj.length; i++)
            if(obj[i].indexOf("blank.gif") > -1)
                continue;
            else
                $("#images_for_this_gallery").prepend("<div id='fd_" + i + "' class='featured_image_div'>" +
                "<span class='imageloading'>loading</span>"    + //LOADING MEESAGE FOR EACH IMAGE
                "<img class='images' src='" + image_path +  obj[i] + "' />" + // IMAGE FOR NICE LOAD
                "<a href='#' id='" + obj[i] + "' class='image_delete'>X</a>" +
                "</div>").hide();
    });

And here is my attempt:

$(".images").each(function() {
        if (this.complete) {
            // this image already loaded
            // do whatever you would do when it was loaded
        } else {
            $(this).load(function() {
                $(".imageloading").hide();
                $(this).show();
            });
        }
    });

Here is another attempt:

$(function() {
        $(".images").load(function(){
            $(".imageloading").hide();
            $(".images").show();
        });
    });

It works on normal image but not on ajax generated image...

Thank you!

What is the best practice to get a child of an element in HTML?

Something like get an variable out of class.

ParentElement.someId.someId..

How to do live music streaming on HTML5 audio player

Stream server all I know is MMS (Microsoft Media Server) and RTMP (Flash Media Server), but both of them not support HTML audio tag, I heard ffmpeg could transfer MMS source to http protocol, but can't find any reference about that, please tell me how to do it.

PS: I tried vlc before, but it's really unstable.