Rectangle 27 2

$scope.addProjectType = function(name) {
            $http.post('/ajax/projecttype/addprojecttype', {
                name: name
            }).success(function(data, status, headers, config) {
                $("#projectTypes").append('<option value="' + data.id + '">' + data.name + '</option>');

                // get a list of selected values if any - or create an empty array
                var selectedValues = $("#projectTypes").val();
                if (selectedValues == null) {
                    selectedValues = new Array();
                }
                selectedValues.push(data.id);   // add the newly created option to the list of selected items
                $("#projectTypes").val(selectedValues).trigger('change');   // have select2 do it's thing
            });
        }

javascript - Update / add values to multiple select2 field after ajax ...

javascript jquery ajax select2
Rectangle 27 2

$scope.addProjectType = function(name) {
            $http.post('/ajax/projecttype/addprojecttype', {
                name: name
            }).success(function(data, status, headers, config) {
                $("#projectTypes").append('<option value="' + data.id + '">' + data.name + '</option>');

                // get a list of selected values if any - or create an empty array
                var selectedValues = $("#projectTypes").val();
                if (selectedValues == null) {
                    selectedValues = new Array();
                }
                selectedValues.push(data.id);   // add the newly created option to the list of selected items
                $("#projectTypes").val(selectedValues).trigger('change');   // have select2 do it's thing
            });
        }

javascript - Update / add values to multiple select2 field after ajax ...

javascript jquery ajax select2
Rectangle 27 4

I also had a similar issue. Hope this helps. We wanted to have a view that contains a common header section that displays some data and another section that should dynamically change when we click on a link in our page. (something similar to a tab) Since we didn't want to reload the header section multiple times, we decided to have a container view and a place holder div that will be used to load a partial view dynamically when we click on a ajax link. However, partial views that got loaded into the place holder had lot of javascript code and we couldn't include all the code that were used by different partial views into a single javascript file and refer it from the container view as there were some conflicting functions. Introducing namespaces to fix that issue also wasn't very efficient approach as all the javascript logic would still have been loaded unnecessarily. Doing a bit of googling made me realize that having a script section in a partial view is not going to work. I tried to define a section in my view using @RenderSection("partialScripts", required: false) unsuccessfully as RenderSection only works in a layout view. Following is the approach i took to overcome this issue. scripts section that is defined in the layout view can contain any valid markup. so i decided to have a div that will help me to load scripts dynamically inside the scripts section of my container view. OnSuccess event handler of the action link was used to attach the scripts dynamically. Here is the code for my container view.

<ul>
    <li>
        @Ajax.ActionLink("Partial One", "PartialOne", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialOne')"
                     })
    </li>
    <li>
        @Ajax.ActionLink("Partial Two", "PartialTwo", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialTwo')"
                     })
    </li>
</ul>

<div id="container">
</div>

@section scripts
{
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script>
    <div id="dynamicScripts"
         data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")"
         data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")">
    </div>
}

Code from the controller class

public PartialViewResult PartialOne()
    {
        return PartialView("_PartialOne");
    }

    public PartialViewResult PartialTwo()
    {
        return PartialView("_PartialTwo");
    }

Container.js file contains the logic that will dynamically load the necessary scripts for different partial views.

function loadScriptsDynamically(name) {
    var script = document.createElement('script');
    var dynamicScriptsDiv = document.getElementById('dynamicScripts');
    var dynamicScriptDivJQuery = $('#dynamicScripts');
    dynamicScriptDivJQuery.empty();
    if (name === 'PartialOne') {
        script.src = dynamicScriptDivJQuery.data('partial-one');
        dynamicScriptsDiv.appendChild(script);
    } else if (name === 'PartialTwo'){
        script.src = dynamicScriptDivJQuery.data('partial-two');
        dynamicScriptsDiv.appendChild(script);
    }
}

We can't use jQuery to append a script element to a div due to some restrictions. But we can use some old fashioned javascript code to create a script element and append it to dynamicScriptsDiv. Please note that i am accessing the script paths i previously attached to dynamicScriptsDivusing using some data- attributes as our MVC app runs in IIS server and we didnt want to hard code them.

Attaching to events after the script is dynamically loaded was our next challenge. By using an immediate invocation function i was able to register all my event binding code and any initialization logic i have to perform using following code.

(function initPartialOne() {
    $('#myButton').click(function() {
        setLabelText();
    });
})();

function setLabelText() {
    $('#myLabel').text('One was clicked');
}
<label id="myLabel">[Message]</label>
<input type="button" id="myButton" value="Click me partial one"/>

asp.net - Use Sections in Partial Views in MVC 4.0 - Stack Overflow

asp.net .net asp.net-mvc razor asp.net-mvc-4
Rectangle 27 4

I also had a similar issue. Hope this helps. We wanted to have a view that contains a common header section that displays some data and another section that should dynamically change when we click on a link in our page. (something similar to a tab) Since we didn't want to reload the header section multiple times, we decided to have a container view and a place holder div that will be used to load a partial view dynamically when we click on a ajax link. However, partial views that got loaded into the place holder had lot of javascript code and we couldn't include all the code that were used by different partial views into a single javascript file and refer it from the container view as there were some conflicting functions. Introducing namespaces to fix that issue also wasn't very efficient approach as all the javascript logic would still have been loaded unnecessarily. Doing a bit of googling made me realize that having a script section in a partial view is not going to work. I tried to define a section in my view using @RenderSection("partialScripts", required: false) unsuccessfully as RenderSection only works in a layout view. Following is the approach i took to overcome this issue. scripts section that is defined in the layout view can contain any valid markup. so i decided to have a div that will help me to load scripts dynamically inside the scripts section of my container view. OnSuccess event handler of the action link was used to attach the scripts dynamically. Here is the code for my container view.

<ul>
    <li>
        @Ajax.ActionLink("Partial One", "PartialOne", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialOne')"
                     })
    </li>
    <li>
        @Ajax.ActionLink("Partial Two", "PartialTwo", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialTwo')"
                     })
    </li>
</ul>

<div id="container">
</div>

@section scripts
{
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script>
    <div id="dynamicScripts"
         data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")"
         data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")">
    </div>
}

Code from the controller class

public PartialViewResult PartialOne()
    {
        return PartialView("_PartialOne");
    }

    public PartialViewResult PartialTwo()
    {
        return PartialView("_PartialTwo");
    }

Container.js file contains the logic that will dynamically load the necessary scripts for different partial views.

function loadScriptsDynamically(name) {
    var script = document.createElement('script');
    var dynamicScriptsDiv = document.getElementById('dynamicScripts');
    var dynamicScriptDivJQuery = $('#dynamicScripts');
    dynamicScriptDivJQuery.empty();
    if (name === 'PartialOne') {
        script.src = dynamicScriptDivJQuery.data('partial-one');
        dynamicScriptsDiv.appendChild(script);
    } else if (name === 'PartialTwo'){
        script.src = dynamicScriptDivJQuery.data('partial-two');
        dynamicScriptsDiv.appendChild(script);
    }
}

We can't use jQuery to append a script element to a div due to some restrictions. But we can use some old fashioned javascript code to create a script element and append it to dynamicScriptsDiv. Please note that i am accessing the script paths i previously attached to dynamicScriptsDivusing using some data- attributes as our MVC app runs in IIS server and we didnt want to hard code them.

Attaching to events after the script is dynamically loaded was our next challenge. By using an immediate invocation function i was able to register all my event binding code and any initialization logic i have to perform using following code.

(function initPartialOne() {
    $('#myButton').click(function() {
        setLabelText();
    });
})();

function setLabelText() {
    $('#myLabel').text('One was clicked');
}
<label id="myLabel">[Message]</label>
<input type="button" id="myButton" value="Click me partial one"/>

asp.net - Use Sections in Partial Views in MVC 4.0 - Stack Overflow

asp.net .net asp.net-mvc razor asp.net-mvc-4
Rectangle 27 2

var HashTable = function() {
  this._storage = [];
  this._count = 0;
  this._limit = 8;
}


HashTable.prototype.insert = function(key, value) {
  //create an index for our storage location by passing it through our hashing function
  var index = this.hashFunc(key, this._limit);
  //retrieve the bucket at this particular index in our storage, if one exists
  //[[ [k,v], [k,v], [k,v] ] , [ [k,v], [k,v] ]  [ [k,v] ] ]
  var bucket = this._storage[index]
    //does a bucket exist or do we get undefined when trying to retrieve said index?
  if (!bucket) {
    //create the bucket
    var bucket = [];
    //insert the bucket into our hashTable
    this._storage[index] = bucket;
  }

  var override = false;
  //now iterate through our bucket to see if there are any conflicting
  //key value pairs within our bucket. If there are any, override them.
  for (var i = 0; i < bucket.length; i++) {
    var tuple = bucket[i];
    if (tuple[0] === key) {
      //overide value stored at this key
      tuple[1] = value;
      override = true;
    }
  }

  if (!override) {
    //create a new tuple in our bucket
    //note that this could either be the new empty bucket we created above
    //or a bucket with other tupules with keys that are different than 
    //the key of the tuple we are inserting. These tupules are in the same
    //bucket because their keys all equate to the same numeric index when
    //passing through our hash function.
    bucket.push([key, value]);
    this._count++
      //now that we've added our new key/val pair to our storage
      //let's check to see if we need to resize our storage
      if (this._count > this._limit * 0.75) {
        this.resize(this._limit * 2);
      }
  }
  return this;
};


HashTable.prototype.remove = function(key) {
  var index = this.hashFunc(key, this._limit);
  var bucket = this._storage[index];
  if (!bucket) {
    return null;
  }
  //iterate over the bucket
  for (var i = 0; i < bucket.length; i++) {
    var tuple = bucket[i];
    //check to see if key is inside bucket
    if (tuple[0] === key) {
      //if it is, get rid of this tuple
      bucket.splice(i, 1);
      this._count--;
      if (this._count < this._limit * 0.25) {
        this._resize(this._limit / 2);
      }
      return tuple[1];
    }
  }
};



HashTable.prototype.retrieve = function(key) {
  var index = this.hashFunc(key, this._limit);
  var bucket = this._storage[index];

  if (!bucket) {
    return null;
  }

  for (var i = 0; i < bucket.length; i++) {
    var tuple = bucket[i];
    if (tuple[0] === key) {
      return tuple[1];
    }
  }

  return null;
};


HashTable.prototype.hashFunc = function(str, max) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    var letter = str[i];
    hash = (hash << 5) + letter.charCodeAt(0);
    hash = (hash & hash) % max;
  }
  return hash;
};


HashTable.prototype.resize = function(newLimit) {
  var oldStorage = this._storage;

  this._limit = newLimit;
  this._count = 0;
  this._storage = [];

  oldStorage.forEach(function(bucket) {
    if (!bucket) {
      return;
    }
    for (var i = 0; i < bucket.length; i++) {
      var tuple = bucket[i];
      this.insert(tuple[0], tuple[1]);
    }
  }.bind(this));
};


HashTable.prototype.retrieveAll = function() {
  console.log(this._storage);
  //console.log(this._limit);
};

/******************************TESTS*******************************/

var hashT = new HashTable();

hashT.insert('Alex Hawkins', '510-599-1930');
//hashT.retrieve();
//[ , , , [ [ 'Alex Hawkins', '510-599-1930' ] ] ]
hashT.insert('Boo Radley', '520-589-1970');
//hashT.retrieve();
//[ , [ [ 'Boo Radley', '520-589-1970' ] ], , [ [ 'Alex Hawkins', '510-599-1930' ] ] ]
hashT.insert('Vance Carter', '120-589-1970').insert('Rick Mires', '520-589-1970').insert('Tom Bradey', '520-589-1970').insert('Biff Tanin', '520-589-1970');
//hashT.retrieveAll();
/* 
[ ,
  [ [ 'Boo Radley', '520-589-1970' ],
    [ 'Tom Bradey', '520-589-1970' ] ],
  ,
  [ [ 'Alex Hawkins', '510-599-1930' ],
    [ 'Rick Mires', '520-589-1970' ] ],
  ,
  ,
  [ [ 'Biff Tanin', '520-589-1970' ] ] ]
*/

//overide example (Phone Number Change)
//
hashT.insert('Rick Mires', '650-589-1970').insert('Tom Bradey', '818-589-1970').insert('Biff Tanin', '987-589-1970');
//hashT.retrieveAll();

/* 
[ ,
  [ [ 'Boo Radley', '520-589-1970' ],
    [ 'Tom Bradey', '818-589-1970' ] ],
  ,
  [ [ 'Alex Hawkins', '510-599-1930' ],
    [ 'Rick Mires', '650-589-1970' ] ],
  ,
  ,
  [ [ 'Biff Tanin', '987-589-1970' ] ] ]

*/

hashT.remove('Rick Mires');
hashT.remove('Tom Bradey');
//hashT.retrieveAll();

/* 
[ ,
  [ [ 'Boo Radley', '520-589-1970' ] ],
  ,
  [ [ 'Alex Hawkins', '510-599-1930' ] ],
  ,
  ,
  [ [ 'Biff Tanin', '987-589-1970' ] ] ]


*/

hashT.insert('Dick Mires', '650-589-1970').insert('Lam James', '818-589-1970').insert('Ricky Ticky Tavi', '987-589-1970');
hashT.retrieveAll();


/* NOTICE HOW HASH TABLE HAS NOW DOUBLED IN SIZE UPON REACHING 75% CAPACITY ie 6/8. It is now size 16.
 [,
  ,
  [ [ 'Vance Carter', '120-589-1970' ] ],
  [ [ 'Alex Hawkins', '510-599-1930' ],
    [ 'Dick Mires', '650-589-1970' ],
    [ 'Lam James', '818-589-1970' ] ],
  ,
  ,
  ,
  ,
  ,
  [ [ 'Boo Radley', '520-589-1970' ],
    [ 'Ricky Ticky Tavi', '987-589-1970' ] ],
  ,
  ,
  ,
  ,
  [ [ 'Biff Tanin', '987-589-1970' ] ] ]




*/
console.log(hashT.retrieve('Lam James'));  //818-589-1970
console.log(hashT.retrieve('Dick Mires')); //650-589-1970
console.log(hashT.retrieve('Ricky Ticky Tavi')); //987-589-1970
console.log(hashT.retrieve('Alex Hawkins')); //510-599-1930
console.log(hashT.retrieve('Lebron James')); //null

Looks nice. Now, please also explain WHY this is useful and may be better suited than all the other answers here.

dictionary - How to do associative array/hashing in JavaScript - Stack...

javascript dictionary hashtable
Rectangle 27 1

I just recently went through the process of updating one of my extensions from manifest version 1 to version 2, and in doing so I ran into the same issue. The problem was the inline event handlers conflicting with the Content Security Policy. I was able to remove them from my HTML and then attach them in the script itself. You might have to modify some of your markup though. You've got invalid id values on your buttons (id's must start with a letter). Once you fix that, using document.getElementById to get the elements and attaching the click handlers should be a piece of cake.

<button style="background-color:lightblue; color: black" data-val="0"></button>
<button class="highlight"></button>

Your gamestart function is only using the id to find the button that was clicked. But there's no need to search the DOM because this will already be the button that was clicked within the event handler, so just pass it directly to gamestart.

Next, move your script out of the and put it at the bottom, just before the closing tag. It's best practice, and you will have access to the elements in the DOM at that point.

<script type="text/javascript" src="singleplayer.js"></script>
</body>
var buttons = document.getElementsByTagName('button'),
    i,
    n = buttons.length;

for (i = 0; i < n; i++) {
    buttons[i].onclick = function() {
        gamestart(this);
    };
}

And modify your gamestart function to take an element instead of an id:

function gamestart(el){
    tally += 2;
    el.innerHTML = "X";
    checkX("X");
    stopbutton("X");    
    setTimeout(player2, 500);
    checktie();
}

Note also that I changed your setTimeout call. It's better to pass a function (in this case, player2) rather than a string which then has to be interpreted as a function (as in "player2()"). I think that should do the trick.

So I should change the id values from numbers to letters?

Yes, or at least begin the value with a letter. Could prefix them all with "b" as in "b1", "b2", "b3", etc., if that makes it easier to understand.

Could you please give me an example of how to attach the inline event handlers to the script?

Do you still need help with this?

Yes it would be nice if you could give me an example of how to attach the inline event handlers. Should I show you the javascript function that needs to be called?

When creating a chrome extension, how do you link a javascript page to...

google-chrome-extension
Rectangle 27 0

Solved it. I had Twitter Bootstrap CSS included also. Apparently something in there was conflicting, which is why it worked in the jsFiddle. If I had to guess, it probably uses a class called "hidden" that was changing the transition value or something (something I should have thought of). Thanks for your time and effort, those who responded.

javascript - jQuery add/removeClass doesn't trigger CSS transitions fo...

javascript jquery html css css-transitions
Rectangle 27 0

You can run into that error if the server doesn't support the handshake format that is sent from firefox. I've run into that error with Aleph because it didn't properly support multiple values in the Connection header of the handshake which is legitimate for firefox to do, but is also different from how Chrome behaves (only one value in the connection header).

If the client sends you a close message (opcode 0x8) the server should respond with a close message for clean shutdown. From the spec: "If an endpoint receives a Close frame and did not previously send a Close frame, the endpoint MUST send a Close frame in response." If the server is disconnecting the client for some reason, the server should send a close message. See section 5.5.1 and 7.4 of the spec.

the onOpen event is fired... so the connection is open

At what point do you get the "interrupted while the page was loading"? Is it when the page loads (as indicated) or after you try and disconnect?

Sounds like a possible server issue. Close works fine with firefox 8 for me. What WebSocket server are you using?

it's a .net c# server i built. maybe i need to catch something in the server when the connection is close from firefox? because in chrome its working fine...

javascript - Websocket connection doesn't close in FireFox - Stack Ove...

javascript firefox websocket
Rectangle 27 0

Some further detail to to Mike the Tike's answer, this is added to the application_start method in global.asax.cs, where you'll need the using directive system.web.helpers

javascript - Multiple 'X-Frame-Options' headers with conflicting value...

javascript google-chrome iframe x-frame-options
Rectangle 27 0

You have some conflicting styles you need to get rid of:

top

I also adjust the top margin on your menu, that was also pushing it down.

javascript - Making a sticky header stick to the top - Stack Overflow

javascript html css
Rectangle 27 0

As the comment says above, you cannot change the action="" thru the use of PHP. Client-side scripting does that, alternatively, you could submit the form first. Gather the values/input on the same page, then just use a header() function after processing the form:

<?php
// if its submitted
if(isset($_POST['make'], $_POST['model'], $_POST['year'])) {
    // gather all the values
    $make = urlencode($_POST['make']);
    $model = urlencode($_POST['model']);
    $year = $_POST['year'];
    // make a header redirect
    header("Location: http://www.exampledomain.com/$make/$model/$year");
    exit;
}

?>

<form method="POST" action=""> <!-- leave the action="" empty -->
    <select id="make" name="make" class="select">
        <option value="honda">honda</option>
        <option value="ford">ford</option>
    </select>

    <select id="model" name="model" class="select">
        <option value="civic">civic</option>
        <option value="fit">fit</option>
    </select>

    <select id="year" name="year" class="select">
        <option value="2014">2014</option>
        <option value="2013">2013</option>
    </select>

    <input type="submit" value="Submit">
</form>

PHP Generate form action url from multiple selected values. (No Javasc...

php forms url select
Rectangle 27 0

Try no conflicting the 1.6.2 then loading up the new version, then reseting the reference to $ to 1.6.2

var $jQuery1_6_2 = jQuery.noConflict(true);
(function($) {
    $('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
    $jQuery1_10_2 = jQuery.noConflict(true);
    $('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
})($jQuery1_6_2);
$ = $jQuery1_6_2;

then in your script file

(function($){

})($jQuery1_10_2);

Thanks for the response Austin. Same issue though :(

Was able to get it to work with some minor edits. Pls see edited question with the answer. +1 to your direction. Cheers

javascript - JQuery - multiple versions on the same page - breaking fu...

javascript jquery
Rectangle 27 0

Script header values, (@name, @description, @version, etc), can be made retrievable. This is preferable to maintaining the same constant values in multiple places in your script.

javascript - Hidden features of Greasemonkey - Stack Overflow

javascript greasemonkey
Rectangle 27 0

The function name used here, add() is conflicting with the HTMLSelectElement add method - See here. There is a javascript error generated by your code which says--

TypeError: Not enough arguments to HTMLSelectElement.add.

I do not have much details on the error.

Changing the method name to something else will work. See this jsfiddle example

No problem, other solutions given here will also work. But you should know why it was not working :)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Dropdown is not updating while selecting another value - ...

javascript
Rectangle 27 0

Instead of defining a template for the groupHeader, you can define a function to call. Inside that function you can whatever you need and return whatever you want for the header to say.

with the function like

javascript - Using Kendo Mobile List View, How to set multiple values ...

javascript html5 kendo-ui telerik kendo-mobile
Rectangle 27 0

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> (put in head)

<div class='nameinput'>Name: <input type=text /></div>
<div class='ageinput'>Age: <input type=text /></div>
<button id = 'clickme'>CLICK</button>

JS - gather the data and present to php with ajax

$('#clickme').click(function(){
  var username =  $('.nameinput').val();
  var userage =  $('.ageinput').val();
  $.ajax({
          url: 'nameofphpfile.php',
         type: POST,
         data: { name: username,
                 age: userage },
     dataType: 'json'
          })
            .done(function(){ alert('Great job!')  })
            .fail(function(){ alert('The server does not like you!) });
                                });

(NB: The more difficult part for me was understanding the callbacks - I've switched to the "newer" forms of .done, .fail, .always).

PHP - grab the data passed from client with ajax, and put in the db.

<!php
$name   = $_POST['username'];
$age    = $_POST['userage'];

$host        = "xxxxx";
$user        = "xxxxx";
$password    = "xxxxx";
$dbname      = "xxxxx";

$cxn = mysqli_connect($host,$user,$password,$dbname);
if (mysqli_connect_errno()) {echo "No connection" . mysqli_connect_error();}

$query = " INSERT INTO nameofyourtable
     ( name, age)
     VALUES
     ('$name', '$age') " ;
$result = mysqli_query($cxn, $query) or die ("could not query database 1");
?>

The approach is different if you want to read data, but that's a different question.

I went through this about a year ago, so I know what you're going through.

javascript - how would I post multiple values using $_Post and then us...

javascript php jquery mysql phpmyadmin
Rectangle 27 0

This should return all the values of your hidden fields in alert popups but maybe you should give them all different names. name="id" might conflict somewhere down the line.

$('.addToCart').click(function(){
    $.each($('.hideID'),function(index,element){
      alert($(element).val());
    });
});

You can play around with it on jsFiddle.

Hi thanks, actually what i am looking for is when i click it gives me one value since the inputs are on separate forms with separate vales and buttons. Thank you.

javascript - Multiple Classes jquery - Stack Overflow

javascript jquery forms
Rectangle 27 0

You would need serverside to be aware of the clients timezone. There isn't enough information in the typical request to make that determination, the closest you can get is the Accept_Language header which might give you a clue but is hardly useful enough (esp. if the client is in a country that has multiple timezones).

Hence you would need to user to tell you what their timezone is and then use a logon or cookie to store that info.

How to render local time given UTC datetime values in ASP.Net without ...

asp.net utc
Rectangle 27 0

A first solution is to use X-Frame-Options header to prevent loading your page to an iframe. X-Frame-Options can specify one of two values: SAMEORIGIN, which only allows iframes from the same origin to display this content, and deny, which prevents any iframe from doing so. BUT this header is not part of HTTP specification and was introduced by Microsoft, so not all browsers support this header. An example of X-Frame-Options:

X-Frame-Options: SAMEORIGIN

In case some old browsers don't support the X-Frame-Options header. You could try a technique called FrameKiller. There are limitations, though, as pointed out in that link.The idea is to use javascript to detect whether your page is loaded into an iframe. There are many ways to implement a frame killer script.

For your requirement, you could implement a frame killer script like this: try to access your parent window to read the window.location. If they include your page inside their iframe, the code would throw exception (cross-domain)

window.onload = function(){
   try
   {
       if (window.parent && window.parent.location.hostname !== "www.abc.com"){
          throw new Error();
       }
   }
   catch (e){
      alert("Please visit www.abc.com to play this game.");
      //You could do whatever you want here
   }
}

javascript - How to prevent my site page from being loaded into other ...

javascript php html iframe
Rectangle 27 0

//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function ($) {

    $(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    });

    function format(str) {
        for (var i = 1; i < arguments.length; i++) {
            str = str.replace('%' + (i - 1), arguments[i]);
        }
        return str;
    }

    function CloudZoom(jWin, opts) {
        var sImg = $('img', jWin);
        var img1;
        var img2;
        var zoomDiv = null;
        var $mouseTrap = null;
        var lens = null;
        var $tint = null;
        var softFocus = null;
        var $ie6Fix = null;
        var zoomImage;
        var controlTimer = 0;      
        var cw, ch;
        var destU = 0;
        var destV = 0;
        var currV = 0;
        var currU = 0;      
        var filesLoaded = 0;
        var mx,
            my; 
        var ctx = this, zw;
        // Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
        // We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
        // images load really fast, e.g. from the cache. 
        //var   ctx = this;
        setTimeout(function () {
            //                       <img src="/images/loading.gif"/>
            if ($mouseTrap === null) {
                var w = jWin.width();
                jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
            }
        }, 200);


        var ie6FixRemove = function () {

            if ($ie6Fix !== null) {
                $ie6Fix.remove();
                $ie6Fix = null;
            }
        };

        // Removes cursor, tint layer, blur layer etc.
        this.removeBits = function () {
            //$mouseTrap.unbind();
            if (lens) {
                lens.remove();
                lens = null;             
            }
            if ($tint) {
                $tint.remove();
                $tint = null;
            }
            if (softFocus) {
                softFocus.remove();
                softFocus = null;
            }
            ie6FixRemove();

            $('.cloud-zoom-loading', jWin.parent()).remove();
        };


        this.destroy = function () {
            jWin.data('zoom', null);

            if ($mouseTrap) {
                $mouseTrap.unbind();
                $mouseTrap.remove();
                $mouseTrap = null;
            }
            if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
            //ie6FixRemove();
            this.removeBits();
            // DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
        };


        // This is called when the zoom window has faded out so it can be removed.
        this.fadedOut = function () {

            if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
             this.removeBits();
            //ie6FixRemove();
        };

        this.controlLoop = function () {
            if (lens) {
                var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
                var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;

                if (x < 0) {
                    x = 0;
                }
                else if (x > (sImg.outerWidth() - cw)) {
                    x = (sImg.outerWidth() - cw);
                }
                if (y < 0) {
                    y = 0;
                }
                else if (y > (sImg.outerHeight() - ch)) {
                    y = (sImg.outerHeight() - ch);
                }

                lens.css({
                    left: x,
                    top: y
                });
                lens.css('background-position', (-x) + 'px ' + (-y) + 'px');

                destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
                destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
                currU += (destU - currU) / opts.smoothMove;
                currV += (destV - currV) / opts.smoothMove;

                zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));              
            }
            controlTimer = setTimeout(function () {
                ctx.controlLoop();
            }, 30);
        };

        this.init2 = function (img, id) {

            filesLoaded++;
            //console.log(img.src + ' ' + id + ' ' + img.width);    
            if (id === 1) {
                zoomImage = img;
            }
            //this.images[id] = img;
            if (filesLoaded === 2) {
                this.init();
            }
        };

        /* Init function start.  */
        this.init = function () {
            // Remove loading message (if present);
            $('.cloud-zoom-loading', jWin.parent()).remove();


/* Add a box (mouseTrap) over the small image to trap mouse events.
        It has priority over zoom window to avoid issues with inner zoom.
        We need the dummy background image as IE does not trap mouse events on
        transparent parts of a div.
        */
            $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');

            //////////////////////////////////////////////////////////////////////          
            /* Do as little as possible in mousemove event to prevent slowdown. */
            $mouseTrap.bind('mousemove', this, function (event) {
                // Just update the mouse position
                mx = event.pageX;
                my = event.pageY;
            });
            //////////////////////////////////////////////////////////////////////                  
            $mouseTrap.bind('mouseleave', this, function (event) {
                $('#zoomer').fadeIn(50);
                clearTimeout(controlTimer);
                //event.data.removeBits();                
                if(lens) { lens.fadeOut(299); }
                if($tint) { $tint.fadeOut(299); }
                if(softFocus) { softFocus.fadeOut(299); }
                zoomDiv.fadeOut(300, function () {
                    ctx.fadedOut();
                });                                                             
                return false;
            });
            //////////////////////////////////////////////////////////////////////          
            $mouseTrap.bind('mouseenter', this, function (event) {

                $('#zoomer').fadeOut(50);

                mx = event.pageX;
                my = event.pageY;
                zw = event.data;
                if (zoomDiv) {
                    zoomDiv.stop(true, false);
                    zoomDiv.remove();
                }

                var xPos = opts.adjustX,
                    yPos = opts.adjustY;

                var siw = sImg.outerWidth();
                var sih = sImg.outerHeight();

                var w = opts.zoomWidth;
                var h = opts.zoomHeight;
                if (opts.zoomWidth == 'auto') {
                    w = siw;
                }
                if (opts.zoomHeight == 'auto') {
                    h = sih;
                }
                //$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
                var appendTo = jWin.parent(); // attach to the wrapper          
                switch (opts.position) {
                case 'top':
                    yPos -= h; // + opts.adjustY;
                    break;
                case 'right':
                    xPos += siw; // + opts.adjustX;                 
                    break;
                case 'bottom':
                    yPos += sih; // + opts.adjustY;
                    break;
                case 'left':
                    xPos -= w; // + opts.adjustX;                   
                    break;
                case 'inside':
                    w = siw;
                    h = sih;
                    break;
                    // All other values, try and find an id in the dom to attach to.
                default:
                    appendTo = $('#' + opts.position);
                    // If dom element doesn't exit, just use 'right' position as default.
                    if (!appendTo.length) {
                        appendTo = jWin;
                        xPos += siw; //+ opts.adjustX;
                        yPos += sih; // + opts.adjustY; 
                    } else {
                        w = appendTo.innerWidth();
                        h = appendTo.innerHeight();
                    }
                }

                zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');

                // Add the title from title tag.
                if (sImg.attr('title') && opts.showTitle) {
                    zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
                }

                // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...     
                if ($.browser.msie && $.browser.version < 7) {
                    $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
                        position: "absolute",
                        left: xPos,
                        top: yPos,
                        zIndex: 99,
                        width: w,
                        height: h
                    }).insertBefore(zoomDiv);
                }

                zoomDiv.fadeIn(500);

                if (lens) {
                    lens.remove();
                    lens = null;
                } /* Work out size of cursor */
                cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width();
                ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();

                // Attach mouse, initially invisible to prevent first frame glitch
                lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');

                $mouseTrap.css('cursor', lens.css('cursor'));

                var noTrans = false;

                // Init tint layer if needed. (Not relevant if using inside mode)           
                if (opts.tint) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    $tint = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last');
                    $tint.css('opacity', opts.tintOpacity);                    
                    noTrans = true;
                    $tint.fadeIn(500);

                }
                if (opts.softFocus) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus = jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last');
                    softFocus.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus.css('opacity', 0.5);
                    noTrans = true;
                    softFocus.fadeIn(500);
                }

                if (!noTrans) {
                    lens.css('opacity', opts.lensOpacity);                                      
                }
                if ( opts.position !== 'inside' ) { lens.fadeIn(500); }

                // Start processing. 
                zw.controlLoop();

                return; // Don't return false here otherwise opera will not detect change of the mouse pointer type.
            });
        };

        img1 = new Image();
        $(img1).load(function () {
            ctx.init2(this, 0);
        });
        img1.src = sImg.attr('src');

        img2 = new Image();
        $(img2).load(function () {
            ctx.init2(this, 1);
        });
        img2.src = jWin.attr('href');
    }

    $.fn.CloudZoom = function (options) {
        // IE6 background image flicker fix
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch (e) {}
        this.each(function () {
            var relOpts, opts;
            // Hmm...eval...slap on wrist.
            eval('var   a = {' + $(this).attr('rel') + '}');
            relOpts = a;
            if ($(this).is('.cloud-zoom')) {
                $(this).css({
                    'position': 'relative',
                    'display': 'block'
                });
                $('img', $(this)).css({
                    'display': 'block'
                });
                // Wrap an outer div around the link so we can attach things without them becoming part of the link.
                // But not if wrap already exists.
                if ($(this).parent().attr('id') != 'wrap') {
                    $(this).wrap('<div id="wrap" style="top:0px;z-index:1000;position:relative;"></div>');
                }
                opts = $.extend({}, $.fn.CloudZoom.defaults, options);
                opts = $.extend({}, opts, relOpts);
                $(this).data('zoom', new CloudZoom($(this), opts));

            } else if ($(this).is('.cloud-zoom-gallery')) {
                opts = $.extend({}, relOpts, options);
                $(this).data('relOpts', opts);
                $(this).bind('click', $(this), function (event) {
                    var data = event.data.data('relOpts');
                    // Destroy the previous zoom
                    $('#' + data.useZoom).data('zoom').destroy();
                    // Change the biglink to point to the new big image.
                    $('#' + data.useZoom).attr('href', event.data.attr('href'));
                    // Change the ZOOM link to point to the new big image.
                    $('#zoomer').attr('href', event.data.attr('href'));
                    // Change the small image to point to the new small image.
                    $('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
                    // Init a new zoom with the new images.             
                    $('#' + event.data.data('relOpts').useZoom).CloudZoom();
                    return false;
                });
            }
        });
        return this;
    };

    $.fn.CloudZoom.defaults = {
        zoomWidth: 'auto',
        zoomHeight: 'auto',
        position: 'right',
        tint: false,
        tintOpacity: 0.5,
        lensOpacity: 0.5,
        softFocus: false,
        smoothMove: 3,
        showTitle: false,
        titleOpacity: 0.5,
        adjustX: 0,
        adjustY: 0
    };

})(jQuery);

add in the product.tpl file

<script type="text/javascript" src="catalog/view/theme/mytheme/js/product-zoom.js"></script>
<div class="product-info">
    <?php if ($thumb || $images) { ?>
    <div class="left">
      <?php if ($thumb) { ?>
<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom colorbox" id='zoom1' rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /><span id="zoom-image"><i class="zoom_bttn"></i> Zoom</span></a></div>
      <?php } ?>
      <?php if ($images) { ?>
 <div class="image-additional">
 <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $thumb; ?>' "><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
        <?php foreach ($images as $image) { ?>
        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" width="62" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
        <?php } ?>
      </div>
      <?php } ?>
    </div>
    <?php } ?>

javascript - How to add a zoom effect in opencart product page? - Stac...

javascript jquery zoom opencart