...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
Nabin Nepal (Starx) append javascript jquery selector variables
February 27, 2013

loop the .append() with selector as variable

Question by user2108245

user2108245user2108245

I am trying to loop the .append() function in order to change the selector each time with different value. But, I don’t know the syntax for the selector in order to meet my target. So, how to change it? Thanks so much!
Ka Ho

<script type="text/javascript">
var a=3;
for (var i=0;i<a;i++)                       {                           
$i.append(i);
}
</script>

<div class="0"></div> // expected: display 0
<div class="1"></div> // expected: display 1
<div class="2"></div> // expected: display 2

Answer by Starx

StarxStarx

First of all numeric class and ids are not supported that much as you think it is.

Update your HTML to something like this

<div class="box-0"></div>
<div class="box-1"></div>
<div class="box-2"></div>

Then you can use the script provided by deadlock in his answer.

var a=3;
for (var i=0;i<a;i++) {                           
    $(".box-"+i).append(i); //this is what you need
}
Read more
Nabin Nepal (Starx) jquery

jQuery fade-out DIV display after certain set time

Question by Dan

DanDan

I have the following code and would like to hide a DIV (.video-field-new) after a specified amount of time after the page loads, for example 5 seconds. Is that possible?

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

And bonus if I could have it fade-out instead of just disappearing as the user will see this occurring.

Answer by dystroy

dystroydystroy
$(window).load(function(){
  setTimeout(function(){ $('.video-field-new').fadeOut() }, 5000);
});

Answer by Starx

StarxStarx

You can do it in this way

$("#BodyField").delay(5000).fadeOut();
Read more
Nabin Nepal (Starx) php script vowel

Split words starting with vowels and consonants to arrays

Question by user2116493

user2116493user2116493

i have to make a script in PHP. First in splits the sentence by spaces and adds to array. Then it splits the words from array by the starting letter. If it starts with vowel, it goes into one array and if it starts with consonant, it goes to other arrray. Then it prints the words with the both arrays and shows the number of letters in the word by every word.
Allowed functsions are explode, strlen, in_array.
Thank you.

Answer by Starx

StarxStarx

You can start by using explode() function.

$sentence = "Your long long sentence";
$explodeIntoWords = explode(" ", $sentence); //You can specify the sentence to be split based on words.

//Now you can loop through this array and compare them if they are vowels or consonants 
foreach($explodeIntoWords as $value) {
   // Analyse $value 
}
Read more
Nabin Nepal (Starx) css3 font-face html5

How can I use @font-face with Gotham-Light font?

Question by Mishkat Islam

Mishkat IslamMishkat Islam

I want to show Gotham-Light on the web with css codding but I can’t code. I have two fonts named Gotham-Light.eot, Gotham-Light.ttf. Now How can I use on the browser? Please help me.

Answer by Starx

StarxStarx

Define your font like this:

@font-face{
   font-family: gotham-light;
   src: url('gotham-light.ttf') url('gotham-light.eot');
}

And use it as you would normally

#someelement {
    font-family: gotham-light;
}
Read more
Nabin Nepal (Starx) css html html5 javascript jquery

input file with cross-browsing simple button look

Question by Rafael El Bundas Fernandez

Rafael El Bundas FernandezRafael El Bundas Fernandez

I have to create a button. If the user click the said button, he is prompted to choose a file to upload. After choosing the file, using Javascript or JQuery, i have to fill a form and submit it so the file can be uploaded.

The problem is that i cannot use the usual html 

<input type="file" name="xml" class="custom-upload" id="custom-upload"/>

Is there anyway on how to do this? I have searched thoroughly and all the possible answears seem overly complicated so i thought i was missing a more essential solution.

Answer by Starx

StarxStarx

You can create an image showing a image of a button instead. Then on click of that button, you can trigger the click event of the real file input.

<img id="imageButton" src="soure/to/imagebutton.jpg" />
<input type="file" id="fileImageButton" style="display: none; " />

And a little jQuery to do the trick

$("#imageButton").on('click', function() {
    $("#fileImageButton").trigger('click');
});

Or, vanilla javascript

document.getElementById('imageButton').addEventListener('click', function() {
  fileinput = document.getElementById('fileImageButton');

  if (document.createEvent) {
    var evt = document.createEvent("MouseEvents")
    evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
    fileinput.dispatchEvent(evt);
  } else {
    element.fireEvent("onclick"); //For IE
  }
});
Read more
Nabin Nepal (Starx) 64bit oauth php php-5.4 windows

Is there a x64 OAuth DLL for PHP 5.4?

Question by DaveBagler

DaveBaglerDaveBagler

I’m looking for a the PECL OAuth DLL for 64 bit Windows and PHP 5.4. Does anyone know where I can find the DLL (assuming it exists somewhere out there)?

There are similar questions on Stack Overflow, however I’ve gone through all the questions I could find and most of the solutions point at a few websites to download the DLL. Unfortunately none of these websites have the DLL I’m looking for.

Answer by Starx

StarxStarx

I have searched for this recently but no luck. So short answer.

NO

Read more
Nabin Nepal (Starx) css css-transitions css3 hover

CSS3 – Transition

Question by Wanny Miarelli

Wanny MiarelliWanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

nothing special ! and this is the main.css

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

i think the problem is around here …

.box:hover .ssin{
    width: 500;
}

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer by Jeremy T

Jeremy TJeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer by Starx

StarxStarx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>
</div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
Read more
Nabin Nepal (Starx) css html javascript

remove array using jquery

Question by DrWooolie

DrWooolieDrWooolie

I have created nestled arrays, which I then append to a div. When i click the button with id “name”, a movie with title is stored in an array $titelBetyg, which is later stored in another array $films. Whenever i create a new $titelBetyg, i want to remove the previous $films from my div, before replacing it with the new one. How do I do this?

Javascript

$(document).ready(function(){

var $films = [];

$('#name').keyup(function(){
            $('#name').css('background-color', 'white');
});

$('#options').change(function(){
            $('#options').css('background-color', 'white');
});

$("#button").click(function(){
    var $titelBetyg = [];

    var $titel = $('#name').val();
    var $betyg = $('#options').val();

    if($titel == ""){
        $('#name').css('background-color', 'red');
        alert("Fail");
    }
    else if($betyg == "0"){
        $('#options').css('background-color', 'red');
        alert("Fail");
    }
    else{

        $titelBetyg.push($titel);
        $titelBetyg.push($betyg);
        $films.push($titelBetyg);

        // here is where i need to remove it before appending the new one

        $('#rightbar').append("<ul>");
        for(i=0; i<$films.length; i++){
            $('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>");
        }
        $('#rightbar').append("</ul>");
    }
});

$('#stigande').click(function(a,b){

});
$('#fallande').click(function(){

});

});

Answer by Bergi

BergiBergi

Use .empty() like this (and append to the <ul> instead of something else):

var $ul = $("<ul>");
for (var i=0; i<$films.length; i++) {
    $ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li><br>");
}
$('#rightbar').empty().append($ul);

Btw, it might be easier to only append the new one instead of emptying and rebuilding the whole thing:

$('#rightbar ul').append("<li>" + $titel + " " + $betyg + "</li><br>");

To remove only the list contents (and nothing else) from the #rightbar, you could use this:

var $ul = $('#rightbar ul').empty();
if (!$ul.length) // if nonexistent…
    $ul = $("<ul>").appendTo('#rightbar'); // create new one


for (var i=0; i<$films.length; i++)
    $ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>");

Answer by Starx

StarxStarx

You only require to remove the content of the container. So, use the .empty() function

$('#rightbar').empty().append("<ul>"); //It will empty the content and then append
for(i=0; i<$films.length; i++){
    $('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>");
}
$('#rightbar').append("</ul>");
Read more
Nabin Nepal (Starx) connection-string php

PHP Connection string

Question by Richard Griffiths

Richard GriffithsRichard Griffiths

Im having a few difficulties when connecting to a database using PHP. Im using the following code: 

$db=mysql_connect ("HOST", "USER", "PASS") or die ('I cannot connect to the database because: ' . mysql_error());

and it works fine when connecting to a host using phpmyadmin. But my clients host is using something called mylittletools.net and for some reason the connection string will not access the database.

Its been racking my brain for days, I would really appreciate it if anyone could shed any light on this for me.

Answer by Starx

StarxStarx

Your syntax is correct, unless it is the variable problems as mentioned in comments the only explanations are that

  • your server does not have MySQL server
  • or PHP’s MySQL driver is not working or not enabled.
Read more
Nabin Nepal (Starx) php

Sorting of some strings?

Question by user1934039

user1934039user1934039

I can only imagine that this is fairly simple, and yet the solution eludes me.

Let assume I have the following variables:

$group1 = "5";
$group2 = "1";
$group3 = "15";
$group4 = "3";
$group5 = "7";
$group6 = "1";
$group7 = "55";
$group8 = "0";
$group9 = "35";

I want the groups listed with the highest amount first e.g.:

Group 7 is number 1 with 55.
Group 9 is number 2 with 35.
Group 3 is number 3 with 15.
Group 5 is number 4 with 7.
Group 1 is number 5 with 5.
Group 4 is number 6 with 3.
Group 2 is number 7 with 1.
Group 6 is number 8 with 1.
Group 8 is number 9 with 0.

Perhaps it would be easier to list all the data in a double-array and then sort it?

Answer by Starx

StarxStarx

Put your groups in an array

$groups = array("5","1","15","3","7","1","55","0","35");
arsort($groups); //This sort the array is descending order

var_dump($sorted_groups);

To print the array in your format use the following function

count = 1;
foreach($groups as $key => $value) {
    echo "Group ".($key+1)." is number ".$count++." with ".$value;
}
Read more
...

Please fill the form - I will response as fast as I can!