Here is my issue, I have created a template with handlebars.js and i would like to fetch the data from a json file. So far, it works, my trouble is that my css doesn't apply to my template and events don't work too (mouseenter, mouseleaver ...) The css is well included on the same page.

Here is my js file : http://pastebin.com/AcUmYZvf my template : http://pastebin.com/D2hhXJKy and here is my website : http://emalsaifi.com/purprodv1/productions.php

For instance, the images with BANE should be 320px by 320px.

Can someone help me plese ? :) And sorry for my poor english

Take a look here: http://onedeal.se

Help is greatly appreciated, since this is a requirement from the client that I cannot fix without your help...

I need the user to fill in the fields but when the print button is clicked, I need what shows up in the popup box to show a little differently. I need to add some verbiage to it to make the item they are printing and signing a legally binding agreement. Can anyone help me with this?

http://jsfiddle.net/maddtechwf/z9Efk/

I've been strugeling for ages now. im searching a perfect way to get a grid layout with variable hights and widths. but whatever i try i always get a missing hole.

See for example: http://jsfiddle.net/MTxXZ/116/ when you scale it down you always get this result: http://cl.ly/image/3N1R2h263M3H

Why can't 6 fill up the hole. The only way to solve is to randomize the sort order. but thats just unlogical for a blog. i don't mind switching 5 and 6. but starting with 9 and ending up with 1 is just not the way.

I also tried it with mansory.

nice: http://cl.ly/image/1h0k3i0Q0134 not so nice: http://cl.ly/image/063d2X2d361M

  function($)
  {$.fn.badger=function(badge,callback)
  {var badgerExists=this.find('#Badger').html();if(!badge)
  {if(badgerExists)
  {this.find('#Badger').remove();}}
  else
  {var oldBadge=this.find('#Badge').text();if(badge.charAt(0)=='+')
  {if(isNaN(badge.substr(1)))
  {badge=oldBadge+badge.substr(1);}
  else
  {badge=Math.round(Number(oldBadge)+Number(badge.substr(1)));}}
  else if(badge.charAt(0)=='-')
  {if(isNaN(badge.substr(1)))
  {badge=oldBadge-badge.substr(1);}
  else
  {badge=Math.round(Number(oldBadge)-Number(badge.substr(1)));}}
  if(badgerExists)
  {this.find('#Badge').html(badge);}
  else
  {this.append('<div class="badger-outter" id="Badger"><div class="badger-inner"><p class="badger-badge" id="Badge">'+badge+'</p></div></div>');}
  if(isNaN(badge))
  {this.find('#Badge').removeClass('badger-number').addClass('badger-text');}
  else
  {this.find('#Badge').removeClass('badger-text').addClass('badger-number');}
  if(callback){callback(badge);}}};})(jQuery);

What can i do to make code visible so i can make changes.

Many Thanks

I'm using fitvids() and Izotopes masonry script on this page: http://www.ryniak.com/wpdev/.

Here's a CodePen link: http://codepen.io/anon/pen/BLpJh

There is one video on this page that is causing a problem in Firefox only. In FF only (v 20.0.1) the masonry is all thrown off on page load, but fixes itself as soon as I resize the browser. In all other browsers, the video fits properly right from the first page load.

I believe the offending video is the first one (green leaves). When I take it out, everything works including the other video on the page.

Everything seems to be loading properly, no errors thrown with the exception of "Error: Permission denied to access property 'toString'". I've looked into that one and I don't think it's the cause of this issue.

Any thoughts would be greatly appreciated.

I am trying to get the area below the menu bar to fade away when a tab is clicked and have the selected tab appear in its place. I have gotten the whole page to do it from searching the web, but when I try to apply it to just the divs it doesn't work.

http://www.angelfire.com/va/miura/restituo.html

This page is where I try all my tricks before implementing them on live pages. If I can get help doing it here I can figure how to transfer it to others. Since I don't know JS or jquery yet please try to explain it too me like I was a 5 year old trying to defuse a bomb. Thanks.

I am using a slider on a simple (one break point) responsive micro site.

All I want to do is add a variable on the js running the slider so

Desktop

  $(function () {


    $(".rslides").responsiveSlides({
      auto: true,
      pager: true,
      nav: false,
      speed: 1000,

    });

  });

And then at the first breakpoint I just want to swap the pager and nav round:

  $(function () {


    $(".rslides").responsiveSlides({
      auto: true,
      pager: false,
      nav: true,
      speed: 1000,

    });

  });

So how do add a media query to this script so that I can swap between these two options?

Thanks

The price only occurs a mere 5 times per page. Every price is in a div with a class of price.

How would i go about creating the jQuery code for this? Since there are multiple tags i guess .each() needs to be involved...

Help greatly appreciated!

['history_pr_0_cost1'='0'],['L_AC_CMD'='module("pay_mdl")']

How do I even assign this string to a variable to begin cleaning it and work with it? The double quotes mess things up.

jQuery:

  $('.find').click(function() {
    $('.search').slideToggle('slow');
  });

CodePen

Any help here definitely appreciated

I have this HTML structure and I'm using jQuery 1.9.x and want to basically iterate through a series of <li> tags and grab the value of a the HTML 5 data attribute (data-customerid) and build a comma delimited list of all the values. I can't figure out how to format my message on here, but basically i have a UL with a named "id" and a series of li tags underneath with a href tags underneath each li. The href tags have a data attribute called "data-customerid".

  <ul id="myList">
      <li>Row 1 <a href="javascript:void(0)" data-customerid="833"></a></li>
      <li>Row 2 <a href="javascript:void(0)" data-customerid="836" ></a></li>
      <li>Row 3 <a href="javascript:void(0)" data-customerid="839" ></a></li>
  </ul>

I should end up with a string like this in a variable 833,836,839.

How can I do this?

Thanks...

I just want to learn how I can recreate it. I tried to copy and paste to try and understand but it doesn't work. P.S I'm a beginner, clearly.

Please help...

Any ideas?

My current tries:

CSS:

progress::-webkit-progress-value {
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   -ms-transition: all 0.5s;
   transition: all 0.5s; /* Works like a charm */
}

JavaScript (with no success):

// These lines do nothing when the progress value changes:
$(".progressSelectorClass[progress-value]").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass > *").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass").css({"-webkit-transition" : "all 6s"});

// This will return an error:
$(".progressSelectorClass::-webkit-progress-value").css({"-webkit-transition" : "all 6s"});

Is there any chance to select the progress::-webkit-progress-value in JavaScript (with or without jQuery)?

Only one bio should be open at the time. When an other one is clicked, it should disappear.

Thank you very much for your help! Johnny

Just I have made my first website for a client and I'm trying to make PageScroller lite work, but I can't.

This is the webpage: The Faith Keepers

I'm using HTML5 document and in Head of index I included this:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
  <script type="text/javascript" src="<?php echo $tpath; ?>/js/jquery.pagescroller.lite.js"></script>   
  <script type="text/javascript">   
    $(document).ready(function(){       
      // initiate page scroller plugin    
      $('body').pageScroller({HTML5mode:true});           
    });     
  </script>

I'm Using Joomla! And I load modules in different sections of website for the frontpage and in Menu I link to a href="#"...

Don't know what I'm doing wrong.

Pleas some help and thanks in advance. Kevin.

Ben Foster who posted this question on stackoverflow explains our problem very well:

"The plugin appears to calculate the "next available space" based on the height of elements on the previous row.

View example here.

In this example item #6 goes to the far right because the height of #4 is less than the height of #2 (where I want it to go).

The layout I would like to achieve is more similar to left-floating elements:

View example here.

Are there options on the above plugin to achieve this layout or perhaps a different plugin available?"

if (the mouse enters area from x = 0, x = 90px && y = 0, y = 90px) { switch to :hover state 1 }

That obviously wouldn't be the code, but I hope this explanation makes sense. So, is there a way to do this, and if so, could someone direct me to the proper place to figure it out. It would be quite useful. Thanks!

I have the following problem. I am using a single page design and use jQuery to get an offset of -85. It works for the larger screens, but as soon as I apply the media queries, the headers on each page disappear. What is the correct way to sort out the issue? CSS/JavaScript.... and where on planet Earth do I begin?

  $('.scroll').click(function(event) {
  event.preventDefault();

    var full_url = this.href;

    var parts = full_url.split('#');
    var trgt = parts[1];

    //var target_offset = $('#'+trgt).offset();
    var target_offset = $('#'+trgt).offset();
    var target_top = target_offset.top -85;

    //add the magic
    $('html, body').animate({scrollTop:target_top}, 500);

});

$('nav#navigation a').click(function(){
  $('nav#navigation a').removeClass('active');
    $(this).addClass('active');
}); 

http://cdpn.io/vBqin

Can someone point me in the right direction on how to achieve what is in the image?

I have no problem on working it out myself, but I need a nudge, because I don't know enough about JavaScript to know what to look for.

I think it is a slider, but I want to use one word instead of an image. When you click on the elipses, the word will change, but it will also change (fade) on it's own every few seconds or so.

I can do this in Drupal with a module, but I would like to achieve it in my html prototype as well. Any hints?

Thanks C

/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 * jQuery.browser.mobile will be true if the browser is a mobile device
 **/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Example Usage:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Detect iPad

var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)
{
  ...
}

Detect iPhone

var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)
{
  ...
}

Detect iPod

var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)
{
  ...
}

Detect iDevice

var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());

if (isiDevice)
{
  ...
}

Detect Andriod

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)
{
  ...
}

Detect Blackberry

var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());

if (isBlackBerry)
{
  ...
}

Detect WebOs

var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());

if (isWebOS)
{
  ...
}

Detect Windows Phone

var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());

if (isWindowsPhone)
{
  ...
}

I'm using a bootstrap based responsive design, but there is no 'middle' size, just desktop and mobile, so iPads and other small screens (greater than 480px) get the standard desktop view.

The viewport meta tag is required for the mobile layout, but I would like to remove this if the screen size is greater than 480px, because I would like the iPad and other tablet devices to automatically resize the desktop site to fit, as they do without the viewport tag.

Essentially I'm trying to do this:

  <span class="visible-phone"><meta name="viewport" content="width=device-width, initial-scale=1.0"></span>

Which would work perfectly in the body area, but not in the head area of the html.

Any ideas? *I'm already loading JQuery and Bootstrap's responsive features so is there anything in there that I can use, or does this involve custom javascripting (where I'm out of my depth)?