samedi 25 avril 2015

Find object in array and then edit it


Let's say I have the following array:

var things = [
    {
        id: "12345",
        name: "Bryan"
    },
    {
        id: "55555",
        name: "Justin"
    }
]

I want to search for the object with the id of 55555. But I want to update the name of that particular object to "Mike" from Justin but still keep the entire army intact.

At the moment, I kinda figured out a way to search for the object, but I can't find a solution to actually edit that particular finding.

Could anyone help me out? This is what I have so far:

var thing = things.filter(function (item) {
    return "55555" === item.id;
})[0]


Empty post response ajax


I'm trying to use ajax to geta response from a codeigniter controller method but it doesn't work ,the response it's empty.

    <script type="text/javascript">
            $(document).ready(function(){
                $("#crear").click(function() {
                    //$('#error_msg').html("Error");
                    $.ajax({
                        type:"POST",
                        url:"clase/create",
                        success:function(data){
                            $('#error_msg').html(data);
                        }
                    });
                });
            });
    </script>

and this is the controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Clase extends CI_Controller {

 function __construct()
 {
   parent::__construct();
   $this->load->model('clase_model','',TRUE);
   $this->load->helper(array('form'));
 }

 function index()
 {
    if($this->session->userdata('logged_in')){
        $data['title'] = 'Gestión de Clases';
        $data['clases'] = $this->clase_model->getAll();
      $this->load->view('header', $data);
      $this->load->view('clase_view', $data);

     }
     else{

          redirect('login', 'refresh');
     }
 }

 function create(){
    if($this->session->userdata('logged_in')){
      $this->load->library('form_validation');
      $this->form_validation->set_rules('name', 'Nombre', 'trim|min_length[2]|required');
      $this->form_validation->set_rules('info', 'Información', 'trim');

       if($this->form_validation->run() == FALSE){
          $data = array(
            'error_message1' => form_error('name'),
            'error_message2' => form_error('info')
            );
           return $data['error_message1'];
       }
       else{
          if($this->input->post('info')){
             $this->insert2($this->input->post('name'),$this->input->post('info'));
          }
          else{
            $this->insert1($this->input->post('name')); 
          }
       }   
    }
    else{
          redirect('login', 'refresh');
    }
 }

 function insert2($name,$information){
    $dat = array(
      'nombre'=>$name,
      'info'=>$information
    );
    $this-> db ->insert('clase',$dat);

    echo $name;
    redirect('clase', 'refresh');
 }
 function insert1($name){
    $dat = array(
      'nombre'=>$name,
    );

    $this-> db ->insert('clase',$dat);
    redirect('clase', 'refresh');
 }
}
?>

and the response header

Cache-Control   
no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection  
Keep-Alive
Content-Length  
0
Content-Type    
text/html; charset=UTF-8
Date    
Sat, 25 Apr 2015 16:04:47 GMT
Expires 
Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive  
timeout=5, max=100
Pragma  
no-cache
Server  
Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
Set-Cookie  
ci_session=941a601d7eaf9f590d21bd4c0aa8c2ac043faa81; expires=Sat, 25-Apr-2015 18:04:47 GMT; Max-Age=7200
; path=/; httponly
x-powered-by    
PHP/5.6.3

Somebody can tell me what is wrong?it's my first time with ajax


how to add image dinamycly jquery


i used the following code to dynamicly create an img the div is created and works fine so is the input text but the problem is that the img control is created but the img is not shown i cant find where the problem is help plz

$.each(data.user, function (i,data) {

    $("<div>"+data.id+"  </div>").attr('id',data.id).appendTo('#page_14_14');
    $('#'+data.id).css({"border-color": "#C1E0FF", 
                        "border-weight":"1px",
                        "margin-top":"10px",                    
                        "border-style":"solid"});

    var ctrl = $('<input/>').attr({ type: 'text', name:'text', value:data.email , id:data.email, disabled:true }).addClass("text");
    $(ctrl).appendTo("#"+data.id); 
    $('#'+data.email).css({"border-color": "#C1E0FF", 
                           "width":"50px",
                           "margin-top":"10px",                    
                           "border-style":"solid"});

    var img = $('<img/>').attr({ className:"inline" , src:"/www/images/Arrow.png" }).addClass("img");

    $(img).appendTo("#"+data.id);        
});   

i also used this for the following two methods for the img but i had the same problem

 var img = $('<img/>', {"class" :"inline", src:"/www/images/Arrow.png"     });


 var img = $('<img class="inline" src="/www/images/bg.png" width="50px" height="50px"  />');


php - pass an array from php to jquery ajax and then again pass the same array from jquery to php


I am in a situation where i am passing an array from php to jquery ajax using json_encode and saving it in an empty array i declared in jquery script var myarr = [], and later on in the same script i am sending the same array i-e, myarr to php script through $.ajax using JSON.stringify function and receiving the array in php script like this json_decode($_POST['myarr'], true), but the problem is it is not converting back into an array. I want to receive an array so that i can use foreach loop to read that array.

Here is the code below. First I am declaring an array in jquery script

var imgArr = [];

Then fetching all the images from php script and saving it in above declared array

PHP Script:

$getProfileId = $users->getPrfId($photoId);
$getImages = array();
$getImages = $users->getTypeImage($getProfileId);
//echo json_encode($getImages);
foreach($getImages as $value){
   echo json_encode($value);
 }

JQuery
  $.ajax({
        type: 'POST',
        url: 'fetchAllImages.php',
        data: {'photoId': photoId},
        success: function(data){
             imgArr = data;
          }
        });

Now in the same script on other button click i am sending this array imgArr to php Script using $.ajax. Here is the code:

JQuery:

$('#right_arrow').live('click', function(e){

var photoId =   $(this).siblings('#o_popup_post').children('#o_post_box').children("#o_complete_post_image").children("img").attr("id");
       $.ajax({
       type: 'POST',
       url: 'nextImage.php',
       data: {'photoId': photoId, 'imgArr' : JSON.stringify(imgArr)},
               beforeSend: function(){
                $('#o_popup_post').fadeOut("normal").remove();
                    $('.o_background_popup').append("<div id='o_popup_post'></div>");
       },
       success: function(response){
            $('#o_popup_post').append(response);
        // alert(imgArr);

       }
    });
   });  


  PHP Script:

  $photoId = $_POST['photoId'];

  $imageArray = array();
  $imageArray = json_decode($_POST['imgArr'], true);

  foreach($imageArray as $key=>$value){....}

Please help. Thanks


How to obtain innerHTML of an active li link?


I want to store the innerHTML of an active menu item to display it as a title for my page. The title HTML is {{pageTitle}}, in the "container" template.

here is my (cleaned) HTML

<template name="container">
   {{pageTitle}
   {{ > SideMenu}}
</template>

<template name="SideMenu">
    <ul id="menu-items" class="nav nav-stacked nav-pills">
        <li id="menu-item-simple" class="">
            <a href="#">
                menuItem1
            </a>
        </li>
        <li id="menu-item-simple" class="">
            <a href="#">
                menuItem2
            </a>
        </li>
    </ul>
</template>

I created an helper to return the string

Template.container.helpers({
"pageTitle":function(){
    return Session.get("pageTitle");
}
});

And an event to set the string to its correct value when a menu item is clicked

Template.SideMenu.events({
    "click #menu-items":function(e,t){
        var activeItem = $(this).find("li.active")
        Session.set ("pageTitle",activeItem.children("a").innerHTML);
        console.log (activeItem.children("a").innerHTML);
    }
});

The console returns "undefined". I don't get what I am doing wrong and since I'm just beginning, I also wanted to know if I'm going the right way.


how to put a message while waiting for callback from ajax


I would like to insert an image working.gif while the data is being processed by the PHP post.. right now it just does nothing until data is returned.. sometimes there is a 10-15 second processing time before data is returned so some sort of indication to tell the user to wait will be great. Lets use the working.gif image as that indicator.

Appreciate assistance on how i can factor the above in to the following code:

$.ajax({
    type: "POST",
    url: "post.php",
    data: dataString,

    //if received a response from the server
    success: function (response) {

        $('#ajaxResponse').html('<pre>' + response + '</pre>');


Convert jquery/js function to pass variable between pages to a ColdFusion variable


I have some jquery which checks if a particular element is visible on a page and passes a parameter to be appended to the url, so the element can be shown/hidden on the next page.

I want to see if it is possible to store this value in a coldfusion variable and then pass it via the navigation, as this seems to be a more robust method to me.

Here is my basic html:

<nav>
            <ul id="mainNav" class="clearfix">
                <li><a href="/">Main</a></li>
                <li><a href="#" class="<cfif VARIABLES.primarydir EQ 'work'>clicked</cfif>">Work</a></li>
                <li><a href="/about"  class="<cfif VARIABLES.primarydir EQ 'about'>clicked</cfif>">About</a></li>
                <li><a href="/news" class="<cfif VARIABLES.primarydir EQ 'news'>clicked</cfif>">News </a></li>
                <li><a href="/tumblr.com" target="_blank">Blog</a></li>
            </ul>
            <ul id="subNav">
                <li><a href="/work/effort" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'effort'>clicked</cfif>">Effort, We Cried!</a></li>
                <li><a href="/work/why" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'why'>clicked</cfif>">Why Do We Do This</a></li>
                <li><a href="/work/guests" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'guests'>clicked</cfif>">Guests &amp; Hosts</a></li>
                <li><a href="/work/prettygirls" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'prettygirls'>clicked</cfif>">Pretty Girls Doing Horrid Things</a></li>
            </ul>
</nav>

#subNav is set to hidden by default in the css.

I think have some basic jquery to toggle the visibility of the subNav:

    var toggleSubNav = (function(){
        trigger.on('click',function(){
            subNav.toggleClass('visible', function(){
                subNavLength = subNav.is(':visible');
            });
            return false;
        });
    }());

And then a second function which checks the visibility of the subNav and appends the url:

merge.on('click',function(){
            var url = $(this).attr('href');
            subNavLength = subNav.is(':visible');
            if(subNavLength){
                window.location = url + '?subnav=true';
            }else{
                window.location = url;
            }
            return false;
        });

Finally a function which checks the url for the content of '?subnav=true' to display this on the next page:

var subNavProp = (function(){
        if(href.indexOf('?subnav=true') > 0){
            subNav.addClass('visible');
        }else{
            subNav.removeClass('visible');
        }
    }());

The variable subNavLength is global and gets updated via these various functions.

I realise I am posting an awful lot of jquery and I don't really know how (or if) there is a way to convert this to a backend solution for coldfusion. My thought was that I could toggle a class on the subNav element that is wrapped in a coldfusion if, something like:

<ul id="subNav" class="<cfif var IS true">className</cfif>">

But I am wondering if that still requires something of a Front End solution. Or even if there is another better way to do this?


Passing mouseover through element


I'm working on a regex-analyzer that has syntax highlighting as a feature.

My site uses an overlay of two contenteditable divs.

enter image description here

Because of the difficulty in getting the cursor position and maintaining that even as tags are added and subtracted, I decided the best route was to have two contenteditable divs, one on top of the other. The first (#rInput) is pretty plain. If not for some nuisance problems that made me switch from a textarea, it could be a textarea. The second (#rSyntax) gets its value from rInput and provides syntax highlighting. I make sure that both are always scrolled to the same position so that the overlay is perfect (However, I also use a transparent (rgba(...)) font on rSyntax, so that if a momentary sync-delay should occur, the text is still legible.)

In the lower portion snapshot above, the code of the contenteditable rSyntax is this:

<span class="cglayer">(test<span class="cglayer">(this)</span>string)</span>

While rInput, positioned exactly on top, contains only this

(test(this)string)

The problem with this method is that I want to offer some alt-tooltips (or a javascript version) when a user mouses over. When the user mouses over rInput, I would like to pass the mouseover event to elements of rSyntax.

I'd like mousing over (test ... string) to show "Capturing group 1", while mousing over (this) would show "Capturing group 2", or if it were (?:test), it would say "Non-capturing group".

The terminology is a little tough because searching for things like "above" and "below" pulls up a lot of results that have nothing to do with z-index.

I did find the css property pointer-events which sounded ideal for the briefest moment but doesn't allow you to filter pointer events (set rInput to receive clicks, scrolls, but pass mouseover through to rSyntax and its child-elements.

I found document.elementFromPoint which may offer a solution but I'm not really sure how. I thought I would try document.getElementById('rInput').getElementFromPoint(mouseX,mouseY), but this function is not available to child elements.

Theoretically, I could hide the rInput on mousemove, using a setTimeout to put it back quickly, and then a tooltip should appear when mousing over child elements of rSyntax, but that doesn't seem like the best solution because I don't want rSyntax to be clickable. Clicks should always go to rInput.

It's possible to disable the mouseover wizardry while rInput has the focus, but then tooltips from rSyntax won't work, and though I haven't tried this method, I'm not sure if passing a click event from rSyntax to rInput would position the cursor properly.

Is there a method to make this work?


check if the image is available in the given URL by javascript / angularjs or jquery


I am developing an application using java and angularJS. I am getting an image url from database and in the client side I want to check whether that Image is available in that url, if ONLY display it else to display a default image I have.

So how can I check that image is actually available in the given URL..?


Manipulating dynamically generated elements on page load (not a click event or similar)


To bind code to dynamic elements the following is often used: $(document).on('click','#element',function() {});

However I want to do something with those elements on page load, not when user does something particular. How to do that?


Is there a reliable jQuery plugin hat can repopulate the form from json values?


I have a form with 180 form fields. On a button click I need to replace current form fields values with the ones from json var. Instead of doing

on some element click 
$.each(getData, function(index, value) {

    check if select
        add new value, trigger refresh
    check if radio
       add new value, trigger refresh
    check if textarea
       add new value, trigger refresh
...

is there already a plugin that does something like this? I browsed and came up with very old scripts like populate or loadJSON wich are not supported anymore.

My biggest issue is that this is a multi level json array and the field names are like

<input name="form_field[one]"...
<input name="form_field[one][two][three]"...
<input name="form_field[one][two]"...

any help is appreciated.


JQuery Mobile creates wrong HTML code


I'm currently developing a PhoneGap Application for Android using JQuery Mobile. All i want, is to dynamically change the header text of a collapsible:

<div data-role="collapsible" id="collapse">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content</p>
</div>

That code is from demos.jquerymobile.com. Chrome DevTools gives me the following html for this example: http://ift.tt/1HCVBut

For any reason, if i copy exactly the same code to my index.html and run it, chrome DevTools gives me the following html: http://ift.tt/1Gt3UWD

Why are there different html codes?

I actually can change the header's text by

$("#collapse").text("new text");

but then it looses all the styling and also

$("#collapse").trigger('create').

doesn't do anything. What am I doing wrong?


Create a 3D Slideshow with jquery


I'm looking to create a 3D Slideshow or carousel through jquery, css, & html. Something like this is what i want to have http://ift.tt/1ORLSiV

It would be nice if you can include the reflection on the images as well. I only plan to put 3-5 into the carousel.

If anyone could help me, it would be much appreciated


How to end JQuery endless scroll


I know this topic is overflowing on this site however when using the endless scroll plugin below I was hoping to figure out a way of just loading from my ajax request but somehow just ending at some point. e.g. eventually reaching the bottom? Any help is much appreciated?

     <script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
{
    $('div#loadmoreajaxloader').show();
    $.ajax({
    url: "{{url('contentpage')}}",
    success: function(html)
    {
        if(html)
        {
            $("#postswrapper").append(html);
            $('div#loadmoreajaxloader').hide();
        }else
        {
            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
        }
    }
    });
    }
});
</script>


How to find today's date in DateTimePicker JavaScript?


I'm using the following javascript: http://ift.tt/1MosCse , and I want to achieve simple effect - when User selects today's day, it should show him only hours available from now until the end of the day, the previous time should be disabled. But when he choses any other day in the future - then the whole time should be available. I wrote the following function in JS:

<script>
var today = new Date();
var dd = today.getDate();
alert(dd);
           var logic = function( currentDateTime ){
  if( currentDateTime.getDay()==dd ){
    this.setOptions({
      formatTime:'g:i A', 
format: 'd/m/Y h:i A',
  minDate:'+1970/01/02',//today
  minTime: //I don't know yet how to implement the current time
    });
  }else
    this.setOptions({
     formatTime:'g:i A', 
format: 'd/m/Y h:i A',
  minDate:'+1970/01/02'//today
    });
};


                jQuery('#datetimepicker').datetimepicker({
                onChangeDateTime:logic,
                onShow:logic
                });

</script>

The problem is that that line:

currentDateTime.getDay()==dd

doesn't work, because in my case dd equals todays day of the month (e.g. 25), and currentDateTime.getDay() checks current day of the week (e.g. for saturday it's 6). Is there anyone who could help me with that issue? I know there are some other available solutions (other datetime pickers), but I cannot find any other that is as simple and elegant as this. Thanks!


How to get the text from a specific closest element?


I've been learning to code by my own and to do some fancy stuff with jquery library but I'm stuck here. This is what I got:

<span class='ccy'>San Diego</span><span class='dc'> X</span>
<span class='ccy'>San francisco</span><span class='dc'> X</span>
<span class='ccy'>Palo alto</span><span class='dc'> X</span>

I want to be able to click in the $("span.dc") and get only the text() of the < span> next to it (the name of the city), works fine if there is only one city in the html, but as long as I keep adding them up the result gets messy and I end up with a string containing all the city names and I only need one.

I know that the obvious thing would be give them a different id to each one but it'd get even messier 'cause the that html is dynamically generated depending on a previous event triggered by the user, the cities come from an array and I need the individual name of the city to delete from it if 'x' is clicked, I hope I've explained myself good enough.

jsfiddle here!! so you can see better what I mean


facing on Making voting system (Like /Unlike) Button for Q&A website in php , mysql using ajax


i have a Question & Answer website as a part of my graduation project , so am still fresh to such languages but i will try to be specific as much as i can ,,, well i got voting for both Question and answers at each special question page ,, i use the same voting code with changing queries to retrieve desired data ,, but the problem is one of the voting system only works (Question voting or Answers voting) i suppose the problem is action listener is listen to the same btn or the span or smth like that i tried to change values but without any mentioned result,, i will provide all the code am using and am ready to replay to any comment to make stuff clear so i hope you guys help me out to make both voting systems work in the same page ,, thnx you very much ... ^^

srip.js > script for questions

 $(document).ready(function(){
    // ajax setup
$.ajaxSetup({
    url: 'ajaxvote.php',
    type: 'POST',
    cache: 'false'
});

// any voting button (up/down) clicked event
$('.vote').click(function(){
    var self = $(this); // cache $this
    var action = self.data('action'); // grab action data up/down 
    var parent = self.parent().parent(); // grab grand parent .item
    var postid = parent.data('postid'); // grab post id from data-postid
    var score = parent.data('score'); // grab score form data-score

    // only works where is no disabled class
    if (!parent.hasClass('.disabled')) {
        // vote up action
        if (action == 'up') {
            // increase vote score and color to orange
            parent.find('.vote-score').html(++score).css({'color':'orange'});
            // change vote up button color to orange
            self.css({'color':'orange'});
            // send ajax request with post id & action
            $.ajax({data: {'postid' : postid, 'action' : 'up'}});
        }
        // voting down action
        else if (action == 'down'){
            // decrease vote score and color to red
            parent.find('.vote-score').html(--score).css({'color':'red'});
            // change vote up button color to red
            self.css({'color':'red'});
            // send ajax request
            $.ajax({data: {'postid' : postid, 'action' : 'down'}});
        };

        // add disabled class with .item
        parent.addClass('.disabled');
       };
   });
});

ajaxvote.php for opertion inside the questions

<?php


include('config.php');
# start new session
dbConnect();
session_start(); /*  changes will occuar here */

if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
if (isset($_POST['postid']) AND isset($_POST['action'])) {
    $postId = (int) mysql_real_escape_string($_POST['postid']);
    # check if already voted, if found voted then return
    //if (isset($_SESSION['vote'][$postId])) return;
    # connect mysql db
    dbConnect();

    # query into db table to know current voting score 
    $query = mysql_query(" 
        SELECT rate
        from qa
        WHERE id = '{$postId}' 
        LIMIT 1" ); /*  changes will occuar here */

    # increase or dicrease voting score
    if ($data = mysql_fetch_array($query)) {
        if ($_POST['action'] === 'up'){
            $vote = ++$data['rate'];
        } else {
            $vote = --$data['rate'];
        }
        # update new voting score
        mysql_query("
            UPDATE qa
            SET rate = '{$vote}'
            WHERE id = '{$postId}' "); /*  changes will occuar here */

        # set session with post id as true
        $_SESSION['vote'][$postId] = true;
        # close db connection
        dbConnect(false);
    }
}
}
?>

printing code : QR.php

  <?php 

require ("coonection.php");

if(isset($_GET['start']) )
 {
  $FURL = $_GET['start'];


   $data=mysql_query("SELECT * FROM qa WHERE id=($FURL)");
   while($d=mysql_fetch_assoc($data)) { ?>
  <div class="item" data-postid="<?php echo $d['id'] ?>"  data-score="<?php echo $d['rate'] ?>">
        <div class="vote-span"><!-- voting-->
            <div class="vote" data-action="up" title="Vote up">
                <i class="glyphicon glyphicon-thumbs-up"></i>
            </div><!--vote up-->
            <div class="vote-score"><?php echo $d['rate'] ?></div>
            <div class="vote" data-action="down" title="Vote down">
                <i class="glyphicon glyphicon-thumbs-down"></i>
            </div><!--vote down-->
        </div>

        <div class="title"><!-- post data -->
              <p><?php echo $d['question'] ?></p>
          </div>
     </div><!--item-->
    <?php  } } ?>
    </div>

 </p>


                        </div>
    <div class="single-post-title" align="center">
    <h2>Answers</h2>
    </div>
                        <!-- Comments -->
     <?php



  require ("coonection.php");
    if(isset($_GET['start']) )
    {
        $FURL = $_GET['start'];
        $data=mysql_query("SELECT * FROM answers WHERE question_id=($FURL)");
        while($d = mysql_fetch_assoc($data))
        {



                echo'<div class="shop-item">';
                echo'<ul class="post-comments">';
                echo'<li>';
                echo'<div class="comment-wrapper">';
                echo'<h3>';
                echo  $d['answerer'] ;
                echo'</h3>';
                echo '</div>'; ?>
                 <div class="item" data-postid="<?php echo $d['answer_id'] ?>" data-score="<?php echo $d['rate'] ?>">
        <div class="vote-span"><!-- voting-->
            <div class="vote" data-action="up" title="Vote up">
                <i class="icon-chevron-up"></i>
            </div><!--vote up-->
            <div class="vote-score"><?php echo $d['rate'] ?></div>
            <div class="vote" data-action="down" title="Vote down">
                <i class="icon-chevron-down"></i>
            </div><!--vote down-->
        </div>

        <div class="post"><!-- post data -->
            <p><?php echo $d['answer'] ?></p>
        </div>
    </div><!--item-->
<?php
                echo'<div class="comment-actions"> <span class="comment-date">';
                echo  $d['dnt'] ;
                echo'</div>';
                echo'</li>';
                echo'</ul>';
                echo'</div>';            




          }

        }
    ?>

i got ajaxvote2.php and also got scrip2.js for settings in answer ,,, i think using the same code make the printing page confused and only listen to one of voting systems

i will add ajaxvote2.php and scrip2.js just in case some one need to look at them ...

ajaxvote2.php

 <?php


include('config.php');
 # start new session
 dbConnect();
 session_start(); /*  changes will occuar here */

 if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
 if (isset($_POST['postid']) AND isset($_POST['action'])) {
    $postId = (int) mysql_real_escape_string($_POST['postid']);
    # check if already voted, if found voted then return
    //if (isset($_SESSION['vote'][$postId])) return;
    # connect mysql db
    dbConnect();

    # query into db table to know current voting score 
    $query = mysql_query(" 
        SELECT rate
        from answers
        WHERE answer_id = '{$postId}' 
        LIMIT 1" ); /*  changes will occuar here */

    # increase or dicrease voting score
    if ($data = mysql_fetch_array($query)) {
        if ($_POST['action'] === 'up'){
            $vote = ++$data['rate'];
        } else {
            $vote = --$data['rate'];
        }
        # update new voting score
        mysql_query("
            UPDATE answers
            SET rate = '{$vote}'
            WHERE answer_id = '{$postId}' "); /*  changes will occuar here */

        # set session with post id as true
        $_SESSION['vote'][$postId] = true;
        # close db connection
        dbConnect(false);
    }
}
} 
?>

scrip2.js

$(document).ready(function(){
// ajax setup
$.ajaxSetup({
    url: 'ajaxvote2.php',
    type: 'POST',
    cache: 'false'
});

// any voting button (up/down) clicked event
$('.vote').click(function(){
    var self = $(this); // cache $this
    var action = self.data('action'); // grab action data up/down 
    var parent = self.parent().parent(); // grab grand parent .item
    var postid = parent.data('postid'); // grab post id from data-postid
    var score = parent.data('score'); // grab score form data-score

    // only works where is no disabled class
    if (!parent.hasClass('.disabled')) {
        // vote up action
        if (action == 'up') {
            // increase vote score and color to orange
            parent.find('.vote-score').html(++score).css({'color':'orange'});
            // change vote up button color to orange
            self.css({'color':'orange'});
            // send ajax request with post id & action
            $.ajax({data: {'postid' : postid, 'action' : 'up'}});
        }
        // voting down action
        else if (action == 'down'){
            // decrease vote score and color to red
            parent.find('.vote-score').html(--score).css({'color':'red'});
            // change vote up button color to red
            self.css({'color':'red'});
            // send ajax request
            $.ajax({data: {'postid' : postid, 'action' : 'down'}});
        };

        // add disabled class with .item
        parent.addClass('.disabled');
    };
 });
});


jQuery Slider that fades and slide at same time


I've been trying to find a jQuery Slider that fades and slide at the same time but no sucess so far, so I've decided to try and create my own. Well, so far, I've managed to make it slide and barely fade, by barely I mean that in bigger screens it might look like the content is blinking.

This is my HTML:

<div id="slider">
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
</div>

This is my jQuery:

var slider = $('#slider .slide'),
    winWidth = $(window).width();

slider.css({
    width: winWidth
});
$(window).resize(function(){
    winWidth = $(window).width();
    $(args).css({
        width: winWidth
    });
});

var slideW = slider.width(),
    slidesQty = slider.length,
    sliderFullW = slidesQty * slideW,
    slideMvCheck = winWidth/2;

$('#slider').css({
    width: sliderFullW
});

function cycleSlides(){
    $('#slider').animate({
        left: -winWidth
    }, {duration: 2000, queue: false}).fadeOut(700).fadeIn(2000, function(){
        $('#slider .slide:first-child').appendTo('#slider');
        $('#slider').css({left: 0});
    });

}

var autoSlide = setInterval(function () {
    cycleSlides();
}, 4000);

I need help tweaking the code, I've tried a lot of different things in the past two days, I've ran out of ideas and I'm not very good with jQuery.


update jQuery to use with widget


I'm trying to upgrade a site template that uses mainly jQuery 1.08 to use 1.11, since a widget I want to connect to the subscribe form uses 1.11.

Here's the template I'm using:

http://ift.tt/1HD7NLQ

What's weird is if I use the following code, the header is there but the form doesn't work properly:

<script src="scripts/jquery-1.11.0.min.js"></script>

And if I use this code, the form works but the header disappears:

<script src="http://ift.tt/1g1yFpr"></script>

I can't use both either, because whenever I enter the second line the header disappears for some reason. What gives, can someone please help me? Thanks!


Open window in new tab without user event


Here I have two asp.net mvc websites . From first website i have one link to second website. So first website will call the second's action. I want to open on page in new tab and current tab should redirect to my first website. This action will return one view.

My approaches in view

  1.   $(document).ready(function (e) {
            window.open("/newpage");
            window.open("/site1", "_self");
    
      });
    
    

    Browser popup blocker will block this. Because there is no user event . So I tried different approach

2 $(document).ready(function (e) {

    $("#input").on("click", function () {


        window.open("/newpage");
        window.open("/site1", "_self");
    });
    $("#input").trigger("click");


});

test one

I have created triggered one event. But still its blocked. This two approaches is working fine if popup blocker is disabled. I want to open page in new tab without disable the popup blocker.

NOTE: This two website comes under same domain name . eg: abc.com\siteone and abc.com\sitetwo


No scrolling after closing lightbox (blueimp)


I built my own website and wanted to add different galleries, so I tried blueimp. It works perfectly, but when I'm closing the lightbox, I'm not able to scroll on my page anymore. Can somebody please help me?

Here's a little code snippet:

<div id="artworks">
    <a href="gallery/artworks/test1.jpg" title="test1" data-gallery="#blueimp-gallery-artworks" class="btn btn-primary btn-lg" role="button">TAKE A LOOK</a>
    <a href="gallery/artworks/test2.jpg" title="test2" data-gallery="#blueimp-gallery-artworks"></a>
</div>

<!-- blueimp Gallery lightbox -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<!-- scripts -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('artworks').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>


How to draw table with Google Datatable Using PHP & jQuery Ajax Json


I am trying to create table using google datatable with Ajax & json.When user selected file from selectbox , it gets file datas as json with php & jquery ajax.

Here is sample json datas:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

Here is my jQuery Ajax Calls:

 google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawTable);

  $(document).on("change","select#source",function(){

            var source=$("select#source option:selected").attr("value");    



                function drawTable() {

                  var jsonData = $.ajax({
                      url: "google_charts_data_preview_ajax.php",
                      data:{source:source},
                      dataType:"json",
                      async: false
                      }).responseText;

                  // Create our data table out of JSON data loaded from server.

                  var data = new google.visualization.DataTable(jsonData);

                  var table = new google.visualization.Table(document.getElementById('g_table'));

                  table.draw(data, {showRowNumber: true});


                }

        });

After all this an error ocuring on console.Error is:

Uncaught ReferenceError: drawTable is not defined

Google tells how to create charts using json.I applied what they says.But I couldnt figured out what is mistake what I had done?.

http://ift.tt/OlELHC

How can achive this?

Thanks


using “jQuery.event.special”


i am new to Jquery and basically i have been try to look up the bootstrap transition.js(line 50) code and figure out how it works in there . i have stumbled across a really big hurdle . the line of code thats got me stumped is the following :

$.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }

now i did read the documentation here. but really could't understand much except the following :

 bindType: // the event you want to bind with 
 delegateType: // the event you want to delegate with

now i did ask this question on multiple forum and got alot of vague answers such . "This is't a beginner question" and "you'll probably have to look up the Jquery source" . and another answer mentioned the following :

Those are the special attributes for the transition end event that are made available for later use in transition.js. But I SILL DON'T GET IT .

I am trying to figure out things by reading this article , but all i want to know is .... what is $.event.special , WHAT is the use of this line ? WHAT is its common usage ?

P.S. :: I did read this Question on SO but it has more external links than the answer itself , also i am asking a basic question here as to WHAT is the use of $.event.special ? And WHAT are common use cases of $.event.special ?

I am Hoping there is some genius who can answer this question. i went around asking this question so many times that i even got told :

99% of jQuery users have never and will never write this kind of code.

SO now I am really really curious !

Thank you.

Alexander.


Set Dropdown List Selected Value with jQuery


I have created a dropdown list in an ASP.NET MVC view using AJAX:

Url="/Channel/GetChannels";
$.ajax({
    url:Url,
    dataType: 'json',
    data: '',
    success: function (data) {
        $("#ddlChannel").empty();
        $("#ddlChannel").append("<option value='0'>All</option>");
        $.each(data, function (index, optiondata) {
            $("#ddlChannel").append("<option value='" + optiondata.Id + "'>" + optiondata.Name + "</option>");
        });
    }
});
$("#ddlChannel option[value='1']").attr("selected", "selected");

This produces the following markup:

<select id="ddlChannel">
<option value="0">All</option>
<option value="1">New Homes</option>
<option value="2">Sales</option>
<option value="3">Lettings</option>
</select>

Would someone please tell me how I can select an option value using jQuery.

I have tried:

$("#ddlChannel option[value='1']").attr("selected", "selected");

which doesn't work.

Thanks.


ejs code to display a string variable sent by PostController.js in Sails


Attempting to display a string variable in postview.ejs sent by PostController.js in Sails

val is the string variable

[ ejs html javascript Sails express node.js ]

PostController.js

module.exports = {

post : function (req, res) {
     var val = req.param('valeur');
     console.log('val =', valeur); // controller test : no problem so far
     res.render('postview')

postview.ejs (?)

  <html>
  <h1>Post view</h1>
  <body>

// until now everything is running smoothly  

  <script type=«text/javascript»>
    document.write ('your value :' + val)
  </script>

  </body>
  </html>

ejs code not working : is javascript relevant here ?

What is the correct code in Sails to display val string in the return view ?


Accessing plugin methods in JavaScript callback function


I am building a user prompt plugin which uses jQueryUI dialog. Please see http://ift.tt/1JoS57z

The below script is only a very small excerpt of the total script, and is just used to demonstrate where I am having problems. When configuring the plugin, a callback function for validate is defined. This callback function needs to access functions in the main plugin (i.e. checkLength()), however, these functions appear to be in an unavailable in the namespace.

How can script in the callback access the plugin methods?

PS. I really don't like how I have assigned IDs to the JavaScript generated elements in order to validate them. Maybe a better way?

jQuery.fn.extend({
    dialog_prompt: function(settings) {

        function updateTips(t){}
        function checkLength( o, n, min, max ) {}
        function checkRegexp( o, regexp, n ) {}

        $('<div/>').appendTo('body').dialog({
            buttons: [
                {
                    text: "Ok",
                    click: function () {
                        var error=settings.validate();
                    }
                }
            ]
        })
    }
});

$(function(){
    $("#email").dialog_prompt({
        validate:function(){checkLength();}
    });

});


Semantic UI Search Selection won't remain collapsed/unfocused on load


I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.

The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.

My markup looks something like the following:

$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="http://ift.tt/1IVWnjy">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

There are no other instances of .dropdown() in my code. Thoughts?

EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.


js How to add href + text onclick


I need to pass (using javascript) text inside span to href

<div class='tableCell'><span>information</span></div>
<div class='tableCell'><span>contact</span></div>
<div class='tableCell'><span>about</span></div>  

for example when i click to about link must be http://ift.tt/1HCXqrw


How do I check if the current url or path is equal to a certain link and if not, append a forward slash to the href in the nav bar?


I am a JavaScript and jQuery newby and have some issues with page scroll being directed from different page. The work is being done in WordPress PHP. I am currently using page-scroll where the href=#id and I changed it to href=/#id where the slash allows for the directing properly. The issue is if I am on the current page of home. the forward slash now jumps rather than page-scrolls. My thinking is leave the href=#id without the slash and have it check if the current url != to home, then append a forward slash to href. Help is genuinely appreciated!

This allows for page scroll from current page and doesn't direct from Pricing & Services page

    <li><a class="page-scroll" href="#howitworks">How It Works</a></li>

Adding the "/" allows for directing from Pricing& Services page however it jumps if I am on the homepage. I want it to jump if I am not on the homepage. I would like for it to smooth scroll on current page.

    <li><a class="page-scroll" href="/#aboutus">About Us</a></li>

Page I am directing from.

    <li><a class="page-scroll" href="pricing-services">Pricing & Services</a></li>

This is the javascript code I am using which requires the Jquery Easing plugin

    $(function() {
      $('a.page-scroll').bind('click', function(event) {
       var $anchor = $(this);
       $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top-50
       }, 1500, 'easeInOutExpo');
       event.preventDefault();
      });
    });


How to use variable in href and pass to click event function to javascript


I have several href links in my jade and each link is generated using a variable passed in by some variables.

The code in jade is like this:

each rows in meters
    li: a#myLink(href= "/meters/" + rows.meterID)= rows.metername

So in my JavaScript part, I added a event listener to each link so that want to generate different pages according to the variables. So that I can add an event listener and emit that variable using socket like this:

  document.getElementById("myLink").addEventListener("click", function(){
     document.getElementById("visualization").innerHTML = "";
     socket.emit('building', window.location.pathname);
  });

Any help would be appreciated!


How to know which index in the class is clicked


Looking at this link , I was thinking classes are actually indexed. If I have this code, how can I get in JavaScript or jQuery the index of the class of the button clicked?

<button class="class_name" id="b1"></button>
<button class="class_name" id="b2"></button>


Get height of absolutely positioned element with jQuery


I have list element containing an image. The list element has fixed proportions and is relative positioned, image is absolutely positioned inside it.

<ul>
    <li>
        <img src="..."/>
    </li>
</ul>

My goal is to find height of both li and img with jQuery.

var li = $('li');
var image = li.find('img');
console.log("li height = " + li.outerHeight());
console.log("image height = " + image.height());

Unfortunately, this code gives me image height equal to 0 (Fiddle).
How can I get the correct img height?


Select concatenated: if selected option have value 1, show another select


I've this problem. I want to show another select only if I choose YES in option, that have value = 1

    <select id="select_one">
       <option value="1">Yes</option>
       <option value="0">No</option>
    </select>

    <select id="select_yes" style="display:none">
        <option>Yes</option>
        <option>No</option>
    </select>

This is the jQuery code:

jQuery("#select_one").change(function() {
    if(jQuery("#select_one option:selected").val() == 1){
        jQuery("#select_yes").css('display','block');
    }

});

I tryed to change the css class, but it doesn't work.


Dynamically show text depending on form result


I've got a simple form, which looks like this:

Team 1
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity' />

Team 2
<input type='button' value='-' class='qtyminus' field='quantity2' />
<input type='text' name='quantity2' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity2' />

enter image description here

When one of Teams has set number 3 I want to appear that team's name dynamically below. Something like "Team1/Team 2 is the winner!". And when I change the number next to the name of team, I want the text "Team1/Team2 is the winner!" to disappear.


Virtual Keyboard hides fields/textareas/contenteditable/


i know there are already some stackoverflow threads about the problem that the virtual keyboard of mobile phones hide or overlapping input fields, textareas and so on. But all this threads were useless, i searched a lot but many talk about this problem based on android development and also some based on web development.

I focus web development. The problem is, there is NO thread where the problem was solved or any really useful answer was given/posted.

So i started this one with the hope that it will be solved now. So now what is the problem directly? If you click on a area where something can be entered, on a mobile device, you would usually expect that the website scroll up and the virtual keyboard is opening after the editable area, but what happen is not like this. The virtual keyboard is opening just as overlay - It starts overlapping the editable area... . In my case i open a jquery ui dialog where my fields located, but i think that shouldn't matter.

So i let my thoughts crossing and came to the solution to add some additional space. Something like this: JSFiddle . So i am able to scroll down. But this is annoying in case of the fact that it is useless or with other words not needed for people which do not use a device which open a virtual keyboard. So i thought about a function like this:

function isMobileDevice() {
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) {
        return true
    } else {
        return false;
    }
}

Well, for this part would be my question did i forget a device, which also open a virtual keyboard and the primary question would be is there anything else except my workaround? I didn't found something to recognize the virtual keyboard explicitly.

Okay guys i really hope that some more experienced web developers will have some ideas about how to solve this best. Like i said i already searched a lot, but nowhere I had a real solution found for this problem!

Edit 24.04.2015:

Guys i just tested it with a Samsung Galaxy Note and the newest mobile browser versions of Firefox, Chrome as well as Opera. (Updated all three, today!)

Okay here is my result: enter image description here

as you can see all browsers, except Firefox, fail and THIS is the perfect visual example for my problem. The virtual keyboard is overlapping the editable area! Usually i prefer Chrome about any other browser, but for this case i have to say - good work Firefox!


Post and Get value by jquery ajax


How can I add my values owdid and visited id after clicking below link by ajax?

<a href="index.php" onclick="insertvisit(<?php echo $interestid;?>)">member1</a>

Below is my insertvisit function. I have defined owdid and interestid

function insertvisit(visitedid) {
  $.ajax({
       type: "POST",
       url: 'insertvisit.php',
       data:{'field1' : owdid, 'field2' : visitedid},
       success:function(html) {
       }
  });
}

and below is insertvisit.php

global $pdo;
$ownid = $_GET['field1'];
$interestid =$_GET['field2'];

$query = $pdo->prepare("UPDATE tablem SET field1= ? WHERE field2= ?");
$query -> bindValue(1, $ownid);
$query -> bindValue(2, $interestid);
$query -> execute();

Please help thanks.


How to get a table class which is being displayed through ajax


I have a main page which has a div with the id of displayTable. In that a table GETs loaded through AJAX from another php page.

The table is laid out like this:

<div class="table-responsive">
      <table class="table table-bordered table table-condensed">
        <thead>
          <tr>
            <td>Name</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Total</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Dilbert</td>
            <td>Rob</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah Blah Blah</td>
          </tr>
        </tbody>
      </table>
    </div>

I am attempting at using this jquery code to make the first tr fixed. So, in the example above, Dilbert and Name would be fixed and the rest is scrollable. However, I cannot seem to get to the table and it doesn't seem to affect it or do anything.

    var $table = $('#displayTable .table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('my-sticky-col');

    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    $fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
    });


invoking method using ajax at code behind in asp.net


hey i am making a simple web form its a product detail insertion web page. I am trying to insert using ajax call. without ajax it works .. but $.ajax is not invoking my code behind static method, no idea wat's the issue. here's the code:

$(document).ready(function () {
    $("#submit").click(function () {
        var cat = document.getElementById('DropDownList1').value;
        var nm = document.getElementById('name').value;
        var cde = document.getElementById('code').value;
        var dt = document.getElementById('dt').value;

        var price = document.getElementById('price').value;
        var f3 = document.getElementById('ty').innerHTML;

        alert("you clicked " + cat + " - " + nm + "-" + cde + "-" + dt + 
                "-" + price + "-" + f3 +  "-");

       //////////////uptil here alert gives the right value.

       $.ajax({
           method: "POST",
           contentType: "application/json", 
           url: "home.aspx/ins",
           dataType: "json",
           data: "{'Name :' + nm + 'code :' + cde +'category :'+ cat + 
              'date :'+ dt +'price :'+ pr +'img_name :' + f3}",
           //data:"{}",
           //async: false,
           success: function (response) {
               alert("User has been added successfully.");
               window.location.reload();
           }
       });
    })
});


//////////////////////////////// here is the code behind method:

[System.Web.Services.WebMethod]
public static void ins(string Name,string code,string category, DateTime date,
   int price,string img_name)
{
    productclass pc = new productclass();
    pc.Pr_name = Name;
    pc.Code = code;
    pc.Category = category;
    pc.Expiry = date;
    pc.Price = price;
    pc.Pr_image = img_name;

    dalinsert di = new dalinsert();
    bool flag = di.insert(pc);
}


.splice( $.inArray()) should only remove matching item


I have five links. Each link has an id. I save each of these id's into an array.

When clicking on a link im trying to remove the matching clicked link id from within the array.

Im trying to do this with the following:

shuffledBlockIds.splice( $.inArray(removeItem, shuffledBlockIds), 1 );

The item removes fine with the first click, however if I click again it will simply remove yet another item (although the clicked id no longer exists).

How do I only remove an item, if the clicked id exists in the array?

Had a look at indexOf() but that should supposedly not work in IE8.

IE9+ solution would also be welcomed - just wondering if there's some smart Jquery approach also taking care of IE8.

Fiddle: http://ift.tt/1FlXXMy


HTML&CSS: Foundation as floating div on the fullpage.js plugin


I'm trying to use foundation as a floating div on top of my fullpage The foundation has some interactive elements in it (changing text sizes, etc)

example can be seen here: http://ift.tt/1bE9L1n

everything is working so far so good the only problem is that the content of the slides moves aswel when the text in foundation div moves... (i'd like the content of the slides to stay at the same place)

is my div not floating afterall? been looking for hours now and cant really find the problem. Anyone has a clue what I'm doing wrong?

The interactive foundation is btw not affecting the on scroll rotating 'Athene' text (= which is good)

this is the css I used for the foundation div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

Thanks in advance & Best Regards to all of you


Create buttons for this dynamic values


I have a controller and controller returns some dynamic values.I need to create buttons for that dynamic values.

My Contoller

 public ActionResult LoginAs()
        {
            string[] roles = (string[])TempData["data"]; // this array returns 3 values.I need to create a buttons for that values.

            return View();
        }

I have no idea how to create a buttons for this dynamic values.mvc


HTML , CSS , Javascript windows/zeropc selection [on hold]


Selection Box

I want to add selection box like this website to select like windows 7 icons

Image


Use jQuery add() to add element in a loop


How do I use jQuery's add() to add an element in a loop?

http://ift.tt/1HCJ4Y1

var allFields1 = $([]).add($('<input/>')).add($('<input/>').add($('<input/>')));
console.log(allFields1);

var allFields2 = $([]);

$([1,2,3]).each(function (index) {
    var input=$('<input/>').val(index);
    allFields2.add(input);
})

console.log(allFields2);

I see why my above code doesn't work as described by http://ift.tt/ORNyRx, but don't know how to do it.

The following will not save the added elements, because the .add() method creates a new set and leaves the original set in pdiv unchanged:

var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change


Authentication Required for jqueryrotate.googlecode.com


I have a web page that uses this link below, now every time I access the page a dialog box shows up asking for authentication with user name and password. I never had that hapenning before. Is this a bug or something new, has anyone seeing this before, is there a way to fix this?

http://ift.tt/1HCJ62c

Thank you!


Bootstrap data table tr doesn't fire onclick


Please refer to example here: http://ift.tt/1DJW7Qi

A table goes like this:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="reportRow odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>

When you click a row on the first page, click function works but it doesn't work when you are on the other pages:

$('.reportRow').click(function(){
alert('mm');
});

and all rows has reportRow class. If i add onclick='myFunc' to all tr s it works. But I don't want to use that. How to I make the other way work?


Laravel 5 override summernote Image upload


I want to override image upload in summernote with laravel 5 method ajax, but I cant get it to work.

Here's my php method

public function ajaxImage()
{
    $file = Input::file('image');
    $destinationPath = public_path();
    $filename = $file->getClientOriginalName();
    if(Input::file('image')->move($destinationPath, $filename)) {
        echo $destinationPath.$filename;
    }
}

and here's my jquery code:

$(document).ready(function(){
            $('#description').summernote({
                height: 300,

                onImageUpload: function(files, editor, welEditable) {
                    sendFile(files[0], editor, welEditable);
                }
            });
            function sendFile(file, editor, welEditable) {
                var  data = new FormData();
                data.append("file", file);
                var url = '/articles/ajaximage';
                $.ajax({
                    data: data,
                    type: "POST",
                    url: url,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(url) {
                        alert('Success');
                        editor.insertImage(welEditable, url);
                    }
                });
            }
        });

and i get an error in the console of:

POST http://ift.tt/1HCJ622 500 (Internal Server Error)


how to add active class on centre li


I would like to Make one “coverflow effect” based on DIV. I decided to use bxslider and everything is working fine but I am not getting the centre "zoom effect" which I would like... You can see an example of what I want here.http://ift.tt/1z0gWuV

I'm not sure how to get this effect on the bxslider. Would it be possible if I add extra class on each center LI ? Meaning, whichever "li" is moving to the center, I can add one class "active"... so I can make active transform:sceal etc.

Do you have any ideas on how I can make this happen? Or any other coverflow script you can recommend for this....

Thanks.

Demo

http://ift.tt/1brrzvY


jqplot animate pie chart and donut chart


Can anyone tell me if the animate and animate replot options in jqplot work with the pie chart and donut renderer? Doesn't look like a compatible option with this rendered but can't find any specific documentation.

What I need, ideally, is for the pie chart to animate on replot with new data. If the animate options are not working, it could be done by loading in the new data sequentially, rather than all at once, in a similar way to this thread:

JQPlot auto refresh chart with dynamic ajax data

Problem I have is that this example adds to the existing data, rather than replacing it and I wasn't able to get it to work.

This is where I got to using that example:

var storedData = [3, 7];

var plot1;
renderGraph();

$('.change1').click( function(){
doUpdate();
});
$('.change2').click( function(){
doUpdate2();
});

function renderGraph() {
if (plot1) {
    plot1.destroy();
}

var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {
  renderer:$.jqplot.DonutRenderer,
  rendererOptions:{
  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});
}

var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
    var val = newData.shift();

        var newVal = new Number(val); /* update storedData array*/
        storedData.push(newVal);
        renderGraph();

        setTimeout(doUpdate, 1)

} else {
    log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}

http://ift.tt/1IVwUXl

I currently have this to load new data and replace the old data. As you can see, the animate options stated are not affecting the replot:

var storedData = [3, 7];
var newData = [9, 1, 4, 6, 8, 2, 5];

$('.change1').click( function(){
plot1.replot({data: [newData], resetAxes: true,});
});

var plot1 = $.jqplot('chart1', [storedData], {animate: true, animateReplot: true, seriesDefaults: {

  renderer:$.jqplot.DonutRenderer,

  rendererOptions:{
   animation: {
                show: true
            },

  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});

http://ift.tt/1HCD29O

I'm thinking there must be a way to combine the two so that the replaced data loads in an animated/delayed way, and to be able to control the timing.

Any help is much appreciated.

Many thanks

Richard


How do I make my jQuery slides responsive?


I'm working on a website for personal practice, and I've integrated a jQuery slide show for some photographs. My problem is that I can't figure out how to make these slides responsive when increasing and decreasing the screen size. I've checked what feels like everything but can't find the problem. Here is the code:

<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" type="text/css" href="styles.css">
                <link href='http://ift.tt/1EChKIY' rel='stylesheet' type='text/css'>
                <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
                <meta charset="UTF-8"/>
                <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
                
                   <style>
                    /* Prevents slides from flashing */
                    #slides {
                      display:none;
                    }
                  </style>
                
                <!-- jQuery -->
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript">   
        
                $(function(){
                
                        var slideWidth = 700;
                        var slideHeight = 393;
                        
                        if(window.innerWidth <= 400) {
                                
                                slideWidth = window.innerWidth;
                        }
                        
                          $("#slides").slidesjs({
                            play: {
                              active: true,
                                // [boolean] Generate the play and stop buttons.
                                // You cannot use your own buttons. Sorry.
                              effect: "fade",
                                // [string] Can be either "slide" or "fade".
                              interval: 3000,
                                // [number] Time spent on each slide in milliseconds.
                              auto: true,
                                // [boolean] Start playing the slideshow on load.
                              swap: true,
                                // [boolean] show/hide stop and play buttons
                              pauseOnHover: false,
                                // [boolean] pause a playing slideshow on hover
                              restartDelay: 2500
                                // [number] restart delay on inactive slideshow
                            },
                                width: slideWidth,
                                height: slideHeight
                          });
                          
                });
                
                </script>
                
                <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
                <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
                <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
                <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
                <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
                <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
                <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
                <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
                <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
                <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
                <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
                <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
                <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
                <link rel="manifest" href="/manifest.json">
                <meta name="msapplication-TileColor" content="#ffffff">
                <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
                <meta name="theme-color" content="#ffffff">
                <title>Viktor and Luise</title>
        </head>
        <body>

                
                <p class="HomeHeaderBig">Viktor & Luise</p>
                
                
                <!-- Menu -->
                
                <nav>
                        <ul>
                                <li><a href="#" id="dropdown-button">Produkte</a></li>
                        </ul>
                        <ul>
                                <li><a href="Home.html">Home</a></li>
                                <li><a href="Kontakt.html">Kontakt</a></li>
                                <li><a href="News.html">News</a></li>
                                <li><a href="About.html">Über uns</a></li>
                                <li><a href="Impressum.html">Impressum</a></li>
                        </ul>
                </nav>
                
                <!-- Images -->
                  <div id="slides">
                    <img src="Images/VL-10.jpg" alt="throughtherackjacket">
                    <img src="Images/VL-1.jpg" alt="storewindow">
                    <img src="Images/VL-3.jpg" alt="whitejacket">
                    <img src="Images/VL-4.jpg" alt="showcase1">
                    <img src="Images/VL-5.jpg" alt="showcase2">
                    <img src="Images/VL-6.jpg" alt="showcase3">
                    <img src="Images/VL-7.jpg" alt="lvshoes">
                    <img src="Images/VL-8.jpg" alt="polojacket">
                    <img src="Images/VL-9.jpg" alt="shirt">
                  </div>
                <script src="jquery.slides.js"></script>
                <script src="scripts.js"></script>
        </body>
  

</html>
img {
        position: relative;
        padding-top: 4%;
}

body {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: lighter;
}

.slides {
        display: block;
        max-width: 50%;
        max-height: 100%;
        position: relative;
        margin-left: 20%;
        margin-top: 2%
}

.slidesjs-container {
        overflow: hidden;
        margin: 0;
        width: 100%;
        background-color: red;

}
// Generated by CoffeeScript 1.6.1
(function() {

  (function($, window, document) {
    var Plugin, defaults, pluginName;
    pluginName = "slidesjs";
    defaults = {
      width: 1000,
      height: 900,
      start: 1,
      navigation: {
        active: true,
        effect: "slide"
      },
      pagination: {
        active: false,
        effect: "slide"
      },
      play: {
        active: false,
        effect: "slide",
        interval: 5000,
        auto: false,
        swap: true,
        pauseOnHover: false,
        restartDelay: 2500
      },
      effect: {
        slide: {
          speed: 500
        },
        fade: {
          speed: 300,
          crossfade: true
        }
      },
      callback: {
        loaded: function() {},
        start: function() {},
        complete: function() {}
      }
    };
    Plugin = (function() {

      function Plugin(element, options) {
        this.element = element;
        this.options = $.extend(true, {}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
      }

      return Plugin;

    })();
    Plugin.prototype.init = function() {
      var $element, nextButton, pagination, playButton, prevButton, stopButton,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "animating", false);
      $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
      $.data(this, "current", this.options.start - 1);
      $.data(this, "vendorPrefix", this._getVendorPrefix());
      if (typeof TouchEvent !== "undefined") {
        $.data(this, "touch", true);
        this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
      }
      $element.css({
      });
      $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
        overflow: "hidden",
        position: "relative"
      });
      $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
      $(".slidesjs-control", $element).css({
        position: "relative",
        left: 0
      });
      $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        zIndex: 0,
        display: "none",
        webkitBackfaceVisibility: "hidden"
      });
      $.each($(".slidesjs-control", $element).children(), function(i) {
        var $slide;
        $slide = $(this);
        return $slide.attr("slidesjs-index", i);
      });
      if (this.data.touch) {
        $(".slidesjs-control", $element).on("touchstart", function(e) {
          return _this._touchstart(e);
        });
        $(".slidesjs-control", $element).on("touchmove", function(e) {
          return _this._touchmove(e);
        });
        $(".slidesjs-control", $element).on("touchend", function(e) {
          return _this._touchend(e);
        });
      }
      $element.fadeIn(0);
      this.update();
      if (this.data.touch) {
        this._setuptouch();
      }
      $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
        return $(this).css({
          zIndex: 10
        });
      });
      if (this.options.navigation.active) {
        prevButton = $("<a>", {
          "class": "slidesjs-previous slidesjs-navigation",
          href: "#",
          title: "Previous",
          text: "<"
        }).appendTo($element);
        nextButton = $("<a>", {
          "class": "slidesjs-next slidesjs-navigation",
          href: "#",
          title: "Next",
          text: ">"
        }).appendTo($element);
      }
      $(".slidesjs-next", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.next(_this.options.navigation.effect);
      });
      $(".slidesjs-previous", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.previous(_this.options.navigation.effect);
      });
      if (this.options.play.active) {
        playButton = $("<a>", {
          "class": "slidesjs-play slidesjs-navigation",
          href: "#",
          title: "Play",
          text: ""
        }).appendTo($element);
        stopButton = $("<a>", {
          "class": "slidesjs-stop slidesjs-navigation",
          href: "#",
          title: "Stop",
          text: ""
        }).appendTo($element);
        playButton.click(function(e) {
          e.preventDefault();
          return _this.play(true);
        });
        stopButton.click(function(e) {
          e.preventDefault();
          return _this.stop(true);
        });
        if (this.options.play.swap) {
          stopButton.css({
            display: "none"
          });
        }
      }
      if (this.options.pagination.active) {
        pagination = $("<ul>", {
          "class": "slidesjs-pagination"
        }).appendTo($element);
        $.each(new Array(this.data.total), function(i) {
          var paginationItem, paginationLink;
          paginationItem = $("<li>", {
            "class": "slidesjs-pagination-item"
          }).appendTo(pagination);
          paginationLink = $("<a>", {
            href: "#",
            "data-slidesjs-item": i,
            html: i + 1
          }).appendTo(paginationItem);
          return paginationLink.click(function(e) {
            e.preventDefault();
            _this.stop(true);
            return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
          });
        });
      }
      $(window).bind("resize", function() {
        return _this.update();
      });
      this._setActive();
      if (this.options.play.auto) {
        this.play();
      }
      return this.options.callback.loaded(this.options.start);
    };
    Plugin.prototype._setActive = function(number) {
      var $element, current;
      $element = $(this.element);
      this.data = $.data(this);
      current = number > -1 ? number : this.data.current;
      $(".active", $element).removeClass("active");
      return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
    };
    Plugin.prototype.update = function() {
      var $element, height, width;
      $element = $(this.element);
      this.data = $.data(this);
      $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
        display: "none",
        left: 0,
        zIndex: 0
      });
      width = 1000;
      height = 900;
      this.options.width = width;
      this.options.height = height;
      return $(".slidesjs-control, .slidesjs-container", $element).css({
        width: width,
        height: height
      });
    };
    Plugin.prototype.next = function(effect) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "direction", "next");
      if (effect === void 0) {
        effect = this.options.navigation.effect;
      }
      if (effect === "fade") {
        return this._fade();
      } else {
        return this._slide();
      }
    };
    Plugin.prototype.previous = function(effect) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "direction", "previous");
      if (effect === void 0) {
        effect = this.options.navigation.effect;
      }
      if (effect === "fade") {
        return this._fade();
      } else {
        return this._slide();
      }
    };
    Plugin.prototype.goto = function(number) {
      var $element, effect;
      $element = $(this.element);
      this.data = $.data(this);
      if (effect === void 0) {
        effect = this.options.pagination.effect;
      }
      if (number > this.data.total) {
        number = this.data.total;
      } else if (number < 1) {
        number = 1;
      }
      if (typeof number === "number") {
        if (effect === "fade") {
          return this._fade(number);
        } else {
          return this._slide(number);
        }
      } else if (typeof number === "string") {
        if (number === "first") {
          if (effect === "fade") {
            return this._fade(0);
          } else {
            return this._slide(0);
          }
        } else if (number === "last") {
          if (effect === "fade") {
            return this._fade(this.data.total);
          } else {
            return this._slide(this.data.total);
          }
        }
      }
    };
    Plugin.prototype._setuptouch = function() {
      var $element, next, previous, slidesControl;
      $element = $(this.element);
      this.data = $.data(this);
      slidesControl = $(".slidesjs-control", $element);
      next = this.data.current + 1;
      previous = this.data.current - 1;
      if (previous < 0) {
        previous = this.data.total - 1;
      }
      if (next > this.data.total - 1) {
        next = 0;
      }
      slidesControl.children(":eq(" + next + ")").css({
        display: "block",
        left: this.options.width
      });
      return slidesControl.children(":eq(" + previous + ")").css({
        display: "block",
        left: -this.options.width
      });
    };
    Plugin.prototype._touchstart = function(e) {
      var $element, touches;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      this._setuptouch();
      $.data(this, "touchtimer", Number(new Date()));
      $.data(this, "touchstartx", touches.pageX);
      $.data(this, "touchstarty", touches.pageY);
      return e.stopPropagation();
    };
    Plugin.prototype._touchend = function(e) {
      var $element, duration, prefix, slidesControl, timing, touches, transform,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      slidesControl = $(".slidesjs-control", $element);
      if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
        $.data(this, "direction", "previous");
        this._slide();
      } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
        $.data(this, "direction", "next");
        this._slide();
      } else {
        prefix = this.data.vendorPrefix;
        transform = prefix + "Transform";
        duration = prefix + "TransitionDuration";
        timing = prefix + "TransitionTimingFunction";
        slidesControl[0].style[transform] = "translateX(0px)";
        slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
      }
      slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
        prefix = _this.data.vendorPrefix;
        transform = prefix + "Transform";
        duration = prefix + "TransitionDuration";
        timing = prefix + "TransitionTimingFunction";
        slidesControl[0].style[transform] = "";
        slidesControl[0].style[duration] = "";
        return slidesControl[0].style[timing] = "";
      });
      return e.stopPropagation();
    };
    Plugin.prototype._touchmove = function(e) {
      var $element, prefix, slidesControl, touches, transform;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      prefix = this.data.vendorPrefix;
      slidesControl = $(".slidesjs-control", $element);
      transform = prefix + "Transform";
      $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
      if (!this.data.animating && !this.data.scrolling) {
        e.preventDefault();
        this._setuptouch();
        slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
      }
      return e.stopPropagation();
    };
    Plugin.prototype.play = function(next) {
      var $element, currentSlide, slidesContainer,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.playInterval) {
        if (next) {
          currentSlide = this.data.current;
          this.data.direction = "next";
          if (this.options.play.effect === "fade") {
            this._fade();
          } else {
            this._slide();
          }
        }
        $.data(this, "playInterval", setInterval((function() {
          currentSlide = _this.data.current;
          _this.data.direction = "next";
          if (_this.options.play.effect === "fade") {
            return _this._fade();
          } else {
            return _this._slide();
          }
        }), this.options.play.interval));
        slidesContainer = $(".slidesjs-container", $element);
        if (this.options.play.pauseOnHover) {
          slidesContainer.unbind();
          slidesContainer.bind("mouseenter", function() {
            return _this.stop();
          });
          slidesContainer.bind("mouseleave", function() {
            if (_this.options.play.restartDelay) {
              return $.data(_this, "restartDelay", setTimeout((function() {
                return _this.play(true);
              }), _this.options.play.restartDelay));
            } else {
              return _this.play();
            }
          });
        }
        $.data(this, "playing", true);
        $(".slidesjs-play", $element).addClass("slidesjs-playing");
        if (this.options.play.swap) {
          $(".slidesjs-play", $element).hide();
          return $(".slidesjs-stop", $element).show();
        }
      }
    };
    Plugin.prototype.stop = function(clicked) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      clearInterval(this.data.playInterval);
      if (this.options.play.pauseOnHover && clicked) {
        $(".slidesjs-container", $element).unbind();
      }
      $.data(this, "playInterval", null);
      $.data(this, "playing", false);
      $(".slidesjs-play", $element).removeClass("slidesjs-playing");
      if (this.options.play.swap) {
        $(".slidesjs-stop", $element).hide();
        return $(".slidesjs-play", $element).show();
      }
    };
    Plugin.prototype._slide = function(number) {
      var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.animating && number !== this.data.current + 1) {
        $.data(this, "animating", true);
        currentSlide = this.data.current;
        if (number > -1) {
          number = number - 1;
          value = number > currentSlide ? 1 : -1;
          direction = number > currentSlide ? -this.options.width : this.options.width;
          next = number;
        } else {
          value = this.data.direction === "next" ? 1 : -1;
          direction = this.data.direction === "next" ? -this.options.width : this.options.width;
          next = currentSlide + value;
        }
        if (next === -1) {
          next = this.data.total - 1;
        }
        if (next === this.data.total) {
          next = 0;
        }
        this._setActive(next);
        slidesControl = $(".slidesjs-control", $element);
        if (number > -1) {
          slidesControl.children(":not(:eq(" + currentSlide + "))").css({
            display: "none",
            left: 0,
            zIndex: 0
          });
        }
        slidesControl.children(":eq(" + next + ")").css({
          display: "block",
          left: value * this.options.width,
          zIndex: 10
        });
        this.options.callback.start(currentSlide + 1);
        if (this.data.vendorPrefix) {
          prefix = this.data.vendorPrefix;
          transform = prefix + "Transform";
          duration = prefix + "TransitionDuration";
          timing = prefix + "TransitionTimingFunction";
          slidesControl[0].style[transform] = "translateX(" + direction + "px)";
          slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
          return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
            slidesControl[0].style[transform] = "";
            slidesControl[0].style[duration] = "";
            slidesControl.children(":eq(" + next + ")").css({
              left: 0
            });
            slidesControl.children(":eq(" + currentSlide + ")").css({
              display: "none",
              left: 0,
              zIndex: 0
            });
            $.data(_this, "current", next);
            $.data(_this, "animating", false);
            slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
            slidesControl.children(":not(:eq(" + next + "))").css({
              display: "none",
              left: 0,
              zIndex: 0
            });
            if (_this.data.touch) {
              _this._setuptouch();
            }
            return _this.options.callback.complete(next + 1);
          });
        } else {
          return slidesControl.stop().animate({
            left: direction
          }, this.options.effect.slide.speed, (function() {
            slidesControl.css({
              left: 0
            });
            slidesControl.children(":eq(" + next + ")").css({
              left: 0
            });
            return slidesControl.children(":eq(" + currentSlide + ")").css({
              display: "none",
              left: 0,
              zIndex: 0
            }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
          }));
        }
      }
    };
    Plugin.prototype._fade = function(number) {
      var $element, currentSlide, next, slidesControl, value,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.animating && number !== this.data.current + 1) {
        $.data(this, "animating", true);
        currentSlide = this.data.current;
        if (number) {
          number = number - 1;
          value = number > currentSlide ? 1 : -1;
          next = number;
        } else {
          value = this.data.direction === "next" ? 1 : -1;
          next = currentSlide + value;
        }
        if (next === -1) {
          next = this.data.total - 1;
        }
        if (next === this.data.total) {
          next = 0;
        }
        this._setActive(next);
        slidesControl = $(".slidesjs-control", $element);
        slidesControl.children(":eq(" + next + ")").css({
          display: "none",
          left: 0,
          zIndex: 10
        });
        this.options.callback.start(currentSlide + 1);
        if (this.options.effect.fade.crossfade) {
          slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
          return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
            slidesControl.children(":eq(" + next + ")").css({
              zIndex: 0
            });
            $.data(_this, "animating", false);
            $.data(_this, "current", next);
            return _this.options.callback.complete(next + 1);
          }));
        } else {
          return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
            slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
              return slidesControl.children(":eq(" + next + ")").css({
                zIndex: 10
              });
            }));
            $.data(_this, "animating", false);
            $.data(_this, "current", next);
            return _this.options.callback.complete(next + 1);
          }));
        }
      }
    };
    Plugin.prototype._getVendorPrefix = function() {
      var body, i, style, transition, vendor;
      body = document.body || document.documentElement;
      style = body.style;
      transition = "transition";
      vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
      transition = transition.charAt(0).toUpperCase() + transition.substr(1);
      i = 0;
      while (i < vendor.length) {
        if (typeof style[vendor[i] + transition] === "string") {
          return vendor[i];
        }
        i++;
      }
      return false;
    };
    return $.fn[pluginName] = function(options) {
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
    };
  })(jQuery, window, document);

}).call(this);