...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
May 6, 2012

unbind click to div

Question by meWantToLearn

unbind click to div. I have two divs .i want to unbind the click event to the inside div

when the page is loaded, i want to unbind the click events to triangle.
my JQuery code:

 $(".wrapper").unbind();
 $(".triangles").unbind();

 $(".triangles" ).click(function(){   //it is still clickable

  alert("hello u clicked me");
 });

<div class="wrapper">
     <div class="triangles">
     </div>
     <div class="triangles">
     </div>
     <div class="triangles">
     </div>
</div>

Answer by Starx

Use .off() to unbind the event, when you need to.

Example:

$(".triangles").off("click");

Another example: Here It will be clickable at first and not from the second time

$(".triangles" ).click(function(){
    alert("hello u clicked me");
    $(this).off('click'); //after this, $(".triangles") will not longer be clickable
});

Try it 🙂


Let me explain, what you did wrong in your codes

 $(".wrapper").unbind(); //unbinded all the events
 $(".triangles").unbind();  //unbinded all the events

 $(".triangles" ).click(function(){  //binded another click event
     alert("hello u clicked me"); //So of course it will be clickable
 });
Read more

insert date data into access database using php?

Question by Illyricum

I am trying to insert data to access database but I am having a problem. I know the problem is when I am inserting value date because i tried to put NULL there and it worked and inserted everything except the date. I also tried to put date in a string ‘date’ to take is as a string but it didnt work. Any idea?

$query_insert = "insert into orders (Ord_Date, Cus_Id_Fk, Book_Id_Fk) Values ($date,$cus_id, $book_id)";
$insert = odbc_exec($conn, $query_insert) or die (odbc_errormsg());

As I said this one with NULL worked, but I need also the date to be inserted.

$query_insert = "insert into orders (Ord_Date, Cus_Id_Fk, Book_Id_Fk) Values (null, $cus_id, $book_id)";
$insert = odbc_exec($conn, $query_insert) or die (odbc_errormsg());

Answer by Starx

Since your date format is MM-DD-YYYY, you have to prepare the $date to fits that format. Here is how

$date = date("d-m-Y");
$query_insert = 'INSERT INTO .... ';
Read more

Jquery popup modal must center

Question by user1292042

Ok i have this code:

    //When you click on a link with class of poplight and the href starts with  a # 
$('a.poplight[href^=#]').click(function() {
var a = $(this).attr('vd');
var b = $(this).attr('id');

    $.post('chk.php', { name : a, name2 : b }, function(output) {
    $('#con').html(output).show();
});

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });

    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});


//Close Popups and Fade Layer

$('a.close').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block, .login').fadeOut(function() {
    $('#fade').remove();

}); //fade them both out



    return false;

});
//end poup

now, whenever the user clicked on the element which has a class of poplight then the above code is executed and it should display the div that has the class of popup_block but before that an ajax function is called and i dont have problem with that but the centerialism of that div(which has the class of a popup_block) is lost, or its appear awfully uncetered as u see that there is a code there that implement the centerialism of that div but it doesnt, its only centered when i specified the position on css or the width and height of that div on the css but i dont want to do that, the jquery function should do that (see code, its been implented there). maybe there is a lack in my code or i just miss something but whatever is that, i dont know. please help, i just want to center that div upon call.thank you in advance.

-that div(has a class of popup_block) is fixed positioned, z-index:99999 and display none by defaut.

Answer by Starx

Centering a div has to be with respect with the window. Here is how you can do that.

Assuming #div is the box to be centered

$("#div").css({
    marginTop : ($(window).height() - $(this).height())/2,
    marginLeft : ($(window).width() - $(this).width())/2,
});

In case you have a absolute position box, then use top and left instead of marginTop and marginLeft respectively.

$("#div").css({
    top : ($(window).height() - $(this).height())/2,
    left : ($(window).width() - $(this).width())/2,
});
Read more
May 5, 2012

faster load time: background image or browser property?

Question by Doug Firr

I have a messy background on my site and, to make it a little easier to read I use this background property:

p : background-color {rgba(250, 250, 250, 0.7)}

With the goal of site load time in mind, would it be better to use a background image with opacity?

You can see the issue here: http://tinyurl.com/7ywoqpf

Note I am already working on reducing the background PNG size, this question is about the paragraph background only

Should I keep current settings or use a background image?

Answer by Andy Davies

Ok this is what the page load waterfall looks like – http://www.webpagetest.org/result/120505_MG_47R9V/1/details/

You already know you need to reduce the images but there’s a few other things you can do..

Remove duplicate ga.js
Use jquery.min.js instead of jquery.js
Turn on gzip for html, css and js

If you’re looking for an image compressor jpegmini.com does a fine job with jpegs, and there are plent of options for PNGs

Answer by Starx

Images have to be downloaded from the server then loaded to browser, Where as using CSS properties like rgba to create the effect, It relies on the browser alone. So without a doubt, rgba is better than images.

Read more

jQuery html disappears on refresh

Question by KenavR

i am modifying a empty <div> with the .html() method of jQuery. When i refresh the page the added code disappears.

$('#div').html($('#div').html() + '<div>'+obj.name+'&nbsp;<a href="">(x)</a>');

Is it possible to change the behaviour or use other methods?

thanks

Edit:

to calify my problem

Maybe it is a design error. It is a form with some fields and a second form where the user can upload files, after a file is uploaded i add the filename and a delete link in a div. If the user submits the form the program connects the created object and the files. It is not really a page where anybody should need to refresh, but it can happen and then the files are saved in the database but the information is lost to connect it with the form object.

Answer by Starx

Of course, whenever you are reloading the page, all the elements will go back to the original state (as loaded from the server). However there are ways of solving this.

  • Using cookies
  • Using HTML local storage

You have to understand how the client side scripting works. The modification happens on the client’s system, not on the server, from where the script is going to load.

Read more

have an html link direct someone to another page and pop up another page

Question by Kyle Supe

I have tried searching for an answer to this but my searches have come up empty handed. Its tough to even figure out what terms to search for. Basically what I have is a list of products. I have the functionality in place where you click the picture and it opens a new tab directing you to an external link where you can buy the product using target =_blank in my a href. I would also like the picture to direct to another internal link where you can comment on and rate the product and just open it in the same tab that the original page is on (so you would essentially have to hit back to return to the main product list. Is this possible to do and if so how?
Thanks in advance for any guidance.

Answer by Riateche

<a href="url for new tab" target="_blank" 
  onclick="location.href = 'url for current tab'">Link</a>

Answer by Starx

Its pretty simple, use an onclick handler combined with href tags.

<a href="#yourinternallink" onclick="window.open('popup.html')">
   <img src="link/to/my/image.jpg" />
</a>
Read more

How to set height of element to match height of another element?

Question by Jordan

I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.

Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to “height: 100%”. This is because there could be only a small amount of content in the centre column, or a lot.

EDIT: I’ve solved this problem by just using tables. Thanks for the replies.

Answer by Chords

Jordan – welcome to Stack Overflow!

It looks like you’re going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

The only other option I can think of would be to “fake it” by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn’t actually have to span the same height.


EDIT

Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

Answer by Starx

Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.

Since there is no fixed height, I used height: 100% and chained up to the body an html.

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

Demo

TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.

Read more

taking variables from one function to use in another function

Question by Paddy Hallihan

i’m creating a game in javascript for college and i have a button to call a function but i need it to include variables from another function

if i put the function inside the other function where the variables are the button doesn’t call it

is there a way of doing this or to get the variables that were created in the first function and use them in the second function

it is a simple maths game where you get a random number a random sum and another random number
(i.e. 5+7, 4*3, 2/6, etc,)

so i’ve got a function to show the random number using

var ranNum1a=Math.floor(Math.random()*10);

i need the other function to check the users answer but i need to know what the random number was from the other function

Answer by Starx

For simplest case, passing variables to another function might be the best approach to this problem.

Here is an illustration:

fucntion f1(var1, var2) {
    //do you stuff then pass the variable to another function
    f2(var1, var2);
}

function f2(v1, v2) {
    // here v1 will get the value from var1 and v2 from var2 if passed from within the function f1
}
Read more

Jquery contains selector, regex

Question by Jernej Pangeršič

This is my code:
Let’s say that name is set to john

$("#first_table").append($('#second_table').find("tr:contains(" + name + ")"));

Basically I have 2 tables on my website. I would like to move elements from first to second, but only if they match completely. How can i do that?

Now if I have (for example) john john #1, john #2 in my table, they would all be moved. I would only like to move john and leave john #1 and john #2
Thanks!
EDIT:
I would like the code to work to match the variable name EXACTLY.
So if name is JOHN it must only get JOHN. If it’s JOHN #1, it must only get JOHN #1 and so on. Is this possible?

Answer by Starx

Since every name case is valid to :contains(" + name +") statement, it matches all of them.

Try this, with a :not to omit the one with “#”

$("#first_table").append($('#second_table').find("tr:contains(" + name + "):not(:contains('#'))"));

Update:

If you want to be precise about the values inside. Then use something like this

$("#second_table tr td").each(function() {
   if($(this).text() == 'John') { 
     $(this).closest("tr").appendto($("#first_table")); //find the cotaining tr and append to another table
   }
});
Read more

css-animations/animation-direction/reverse

Question by SakerONE

#div {
position: absolute; top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: reverse;
  }
 @-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    20% {
        top: 150px;
        left: 100px;
    }
    to {
        top: 400px;
        left: 300px;
    }   
 }

http://jsfiddle.net/uVv65/2/
why do the reverse animation-direction is the same as normal? I thought it would go from

top: 400px;
left: 300px;

to

top: 50px;
left: 0px;  

Answer by Starx

There is another way to do this too.

@-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    10% {
        top: 150px;
        left: 100px;
    }
    50% {
        top: 400px;
        left: 500px;     
    }
    to {
        top: 50px;
        left: 0px;
    }   
 }

Demo

Read more
...

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