...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page
Nabin Nepal (Starx) html internet-explorer javascript jquery
April 29, 2012

Mousedown event not fired on a Div if the Div is placed on top of an img tag – issue is only in IE

Question by user983327

user983327user983327

I have placed a Div on top of an img tag. In my example the Div with cls ‘justForClickCls’ is placed on top of an img which is wrapped in another div ‘gameBoardElementGreyCls’. The mousedown on the ‘justForClickCls’ div is not firing in IE. However it works in every other browser.

Here is the code. Any help is much appreciated. By the way i’m testing it i IE 9

<div class='gameBoardElementCls'>
    <div id='9' class='justForClickCls' style='z-index:10;position:absolute;margin:20px;width:80px;height:80px;'></div>
    <div class='gameBoardElementGreyCls'><img src='img/greygmelement.png' width='110px' height='110px'></img></div>
</div>

<script>
    $("div.justForClickCls").mousedown(function () {
        alert('clicked 1');
    });
</script>

Answer by Starx

StarxStarx

First thing you should fix is the closing tag in the img

<img src='img/greygmelement.png' width='110px' height='110px'></img>

To

<img src='img/greygmelement.png' width='110px' height='110px' />

Next, mousedown seems unnecessary since you are trying to trap the click. Simple use click instead of mousedown.

Now check this demo of you coding, which is working

Read more
Nabin Nepal (Starx) jquery jquery-ui sortable

Serializing Jquery-ui sortable with dynamically updated content

Question by nbu

nbunbu

I have a sortable list that updates my database when items are shifted around. However, there’s also a feature where users can add new items to the list dynamically. When these items are added, for some reason, sortable acts as if they don’t exist when updating the item positions in the database.

Is there a way to essentially serialize the sortable list after an item is added so it is essentially ‘live’ on the page?

I’ve looked into the .refresh() code but that doesn’t seem to work…Thanks!

Answer by Starx

StarxStarx

If simple enought, you can use the callback method of the adding sequence and update the database like that instead.

$("#newtab").appendTo("#sortableContainer", function() {
    //OK its time to update this addition to the database
});
Read more
Nabin Nepal (Starx) javascript jquery

Perform Dynamic Table Calculations in HTML – jQuery?

Question by user982124

user982124user982124

I have an HTML table which allows the user to enter some values, either directly or from a select menu. 

<form action="" method="">
<table id="scores" width="358" border="1">
<tr>
<th colspan="5">Activities</th>
</tr>
<tr class="header">
<td width="104">Activity</td>
<td width="163">Rating</td>
<td width="69">Hours Per Week</td>
<td width="163">Weeks Per Year</td>
<td width="163">Average Hours Per Week</td>
</tr>
<tr>
<td class="title"><input type="text" value=""/></td>
<td><select name="rating">
<option value=""></option>
  <option value="High">High</option>
  <option value="Moderate">Moderate</option>
</select></td>
<td class="title"><input type="text" value=""/></td>
<td class="title"><input type="text" value=""/></td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="title"><input type="text" value=""/></td>
<td><select name="rating">
<option value=""></option>
  <option value="High">High</option>
  <option value="Moderate">Moderate</option>
</select></td>
<td class="title"><input type="text" value=""/></td>
<td class="title"><input type="text" value=""/></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="title">Total High</td>
<td class="title" id="totalHigh"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="title">Total Moderate</td>
<td class="title" id="totalModerate"></td>
</tr>
<tr>
<td colspan="5"><button class="copy"  value="Set Value">Submit</button></td>
</tr>
</table>

I need to perform a couple of calculations as follows:

  1. for each row I need to calculate the “Average Hours Per Week” which is simply the (Hours Per Week * Weeks Per Year)/52

  2. for each row the user can select either “High” or “Moderate” for the Rating. I need to then calculate the total of the “Average Hours Per Week” for all rows where Rating = “High” and all rows where Rating = “Moderate”.

I’ve spent the better part of today pulling out my last remaining hairs trying to get something working using jQuery which I’m a newbie with. I’ve setup a jsfiddle at:

http://jsfiddle.net/tZPDr/

which has a simplified version of the table. Would greatly appreciate any help about how to go about performing these 2 calculations dynamically as the user types.

Many thanks,
Steve

Answer by Starx

StarxStarx

If you want to do this as user types, you need to bind onto keypress or keydown.

Example:

$('td.hours input').on('keypress', function() {
   //get  the values and calculate
});

Then choose you fields and perform the calculations. You can get the values like this

Example:

var hrs = $('td.hours input').val();
Read more
Nabin Nepal (Starx) html

HTML table issue (fixed left cell, right cell filling all rest of the content)

Question by John smith – optional

John smith - optionalJohn smith – optional

I need a help with a table that I can’t get right. It is a very simple table with only two cells (left and right):

<table>
   <tr>
     <td width="100px">
       my content 1
     </td>
     <td>
       my content2
     </td>
   </tr>
</table>

I want the one on the left to be of a fixed size (100px) and the right one to expand until the rest of the page.

The issue is that none of what I tried worked. If I leave as is, it will just be as big as “my content 2”.

I tried to put a hidden element (like an image) on the second to make sure it goes all the way, but on my small netbook, it goes above the size of the table and breaks it. So I can’t define a image to be as large as the screen.

Any other ideas? It should be simple, but I can’t get it done.

Answer by Zoltan Toth

Zoltan TothZoltan Toth

Add width: 100% to your table

http://jsfiddle.net/rU9Tu/

Answer by Starx

StarxStarx

Typically, table resizes to its content, so you need set table to take the full length available.

<table width="100%">
...
</table>
Read more
Nabin Nepal (Starx) css css3 javascript jquery

global COLOR opacity hover overlay?

Question by whoa

whoawhoa

I’m using the below for a global link opacity overlay.

a:hover {
    text-decoration: none;  opacity: 0.6; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */
} /* mouse over link */

How can I add color to this? Is this possible with CSS or am I looking at a JS / jQuery solution only?

Answer by trickeedickee

trickeedickeetrickeedickee

If you want the colour e.g. black to be on the background then your code will be 

a:hover {text-decoration: none;  opacity: 0.6; /* css standard */
filter: alpha(opacity=60); /* internet explorer */ /* mouse over link */ background: #000; }

and if you want the a tag to have a colour of eg black then your css will look like this 

a:hover {text-decoration: none;  opacity: 0.6; /* css standard */
filter: alpha(opacity=60); /* internet explorer */  /* mouse over link */ color: #000; }

for some reason you have an extra } in your code.

Answer by Starx

StarxStarx

It seems you dont need opacity at all. The effect you are searching for is a tranparent background. Use rgba() with a rgb() fallback and define a transparent background instead.

a:hover {
    text-decoration: none;  
    background: rgb(255,0,0) /* fallback */
    background: rgba(255,0,0,0.6) /* red with 60% opactiy */
    color: #000;
}
Read more
Nabin Nepal (Starx) javascript jquery json

$.getJSON not doing anything

Question by Vincent Cavallaro

Vincent CavallaroVincent Cavallaro

I am unsure why, but it seems that when I call $.getJSON after another getJson has been called, nothing happens. Here is the code:

getWeather();

function getWeather() {
    $.getJSON("http://where.yahooapis.com/geocode?q=" + lat + ",+" + lon + "&gflags=R&flags=J", function(data){
        zipCode = data.ResultSet.Results[0].postal;
        WOEID = data.ResultSet.Results[0].woeid;
        getYahooWeather(WOEID);         
    });
}

function getYahooWeather(x) {
    var query = escape('select item from weather.forecast where woeid="'+x+'"');
    var url = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=c";
    console.log(url);

    $.getJSON(url, function(data2){
        console.log("hey");
    });
}

My question is, am I doing something wrong with these $.getJSON calls?

Thanks so much

Answer by Guffa

GuffaGuffa

You have specified that the callback should be the c function, so declare it:

function getYahooWeather(x) {
  var query = escape('select item from weather.forecast where woeid="'+x+'"');
  var url = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=c";
  console.log(url);

  $.getJSON(url);
}

function c(data2) {
  console.log("hey");
}

Answer by Starx

StarxStarx

Your request is outside the current domain. You cannot make foreign request, it is restricted by cross-domain policy.

Such requests and made using a jsonp request instead. And here is a guide to get you started.

Read more
Nabin Nepal (Starx) css html menu table

How to stretch this CSS menu to 100%

Question by John Smith

John SmithJohn Smith

Here’s a fantastic CSS menu:

The only disadvantage its not stretched to 100%… if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? Im new to CSS

Answer by Starx

StarxStarx

Modify its width as 100% will make the menu span to full width.

#myfantasticmenu { width: 100%; }

I simulated the change with firebug and the needed Style defination was

#nav {
    overflow: hidden; /* To clear the div */
    width: 100%;
}

And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.

If you consider using jQuery then it will something like

childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);

If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.

Read more
Nabin Nepal (Starx) click javascript jquery simulation

simulate click to view tab when function is run

Question by Michael

MichaelMichael

I am using the following tabs in a project :

//Tabs
$('ul.tabs').each(function(){

  var $active, $content, $links = $(this).find('a');

  $active = $links.first().addClass('active');
  $content = $($active.attr('href'));

  $links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });

  $(this).on('click', 'a', function(e){

    $active.removeClass('active');
    $content.hide();

    $active = $(this);
    $content = $($(this).attr('href'));

    $active.addClass('active');
    $content.show();

    e.preventDefault();
  });
}); //End Tabs

and the HTML is as follows:

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'></div>
<div id='tab2'></div>
<div id='tab3'></div>

The problem I am having is that I want to run a function within the active tab, and then automatically select another tab where the results of the previously executed code will appear.

I am unsure how to go about simulating a click in order to automatically select the next tab, so any help will be greatly appreciated!

Thanks in advance.

Answer by Starx

StarxStarx

A simple way to simulate a click, is using .trigger()

$("#tab2").trigger("click"); //when you need in the function
Read more
Nabin Nepal (Starx) jquery popupwindow

jquery re-attach div on pop up window close

Question by Anna Riekic

Anna RiekicAnna Riekic

I’m using jQuery to open a popup window which works great but I’ve also have it that the #content div detaches from “parent” page …

$('.newWindow').click(function(ev){

window.open('popout.html','pop out','width=400,height=345');
ev.preventDefault();
$('#content').detach();
return false;

});

link used:

<a href="popout.html" rel="0" class="newWindow">Pop Out Window</a>

How can I “re-attach” that div when pop up window is closed?

I’ve tried many of the answers I found here on SO but none seem to work.

Update:

It seems my browser cached the popup window as when I viewed the source (via right click view source) I noticed any changes I made IE the new JS code was not there so closed browser and reopened and hey presto code edits where there…

have temporarily gone for:

window.onunload = function(){
  window.opener.location.reload();
};

which refreshes the parent page on child close but would still prefer a reattach approach.

Answer by Starx

StarxStarx

Create a temporary variable to store the div before detaching.

var content; // temp storage

$('.newWindow').click(function(ev){

     window.open('popout.html','pop out','width=400,height=345');
     ev.preventDefault();
     content = $('#content');
     $('#content').detach();
     return false;
});

When you need to reattach this in the DOM again, just use .appendTo()

content.appendTo($("#whereToReAttach"));
Read more
...

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