jQuery Forum

having weird troubles with jQuery Autocomplete --
[6Replies]
- 07-Jul-2017 12:37 PM
- Forum: Using jQuery UI
Hello friends.
Let me describe what this is about and what i've done so far.

As expected, I have a text box where the user would type in names of cities. And it is supposed to show an autosuggest/autocomplete prompt of city names that may match with the letters being typed. I have my server side code returning these city names.

1. my html is simple and such --

Search by City:
<input type="text" placeholder="type city name here ..." id="reg_city" style="border-radius: 6px;color: #21022c; background-color: #f8e7da; width: 310px; height: 38px;" />

2. the jquery code I did --
2. $(document).on('keyups', '#reg_city', function () {
4. $(this).autocomplete({
5. source:function( request, response )
6. {
7. if(request.term!="")
8. {
9. $.ajax({
10. type: 'POST',
11. url: '@Url.Action("Get_CityAutocomp", "Home")',
12. dataType: 'json',
13. contentType: 'application/json; charset=utf-8',
14. data:{name:request.term},
15. success:function(serv_data)
16. {
17. if(serv_data!="")
18. {
19. response($.map(serv_data, function(item)
20. {
21. var name = item.name;
22. return
23. {
24. label:name,
25. value:name, <----------
26. item:serv_data <----------
28. };
29. }));
30. }
31. }
32. });
33. }
34. },
35. autoFocus:true,
36. minLength:2,
37. delay:150,
38. select:function(event, ui)
39. {
40. var name=ui.item.serv_data;
41. $(this).val(name);
42. }
44. });
45. });

Multiple jquery ajax calls to be made from the same page --
[13Replies]
- 01-Jun-2017 11:52 AM
- Forum: Using jQuery
Hi All.

I need a little help with just a jquery implementation on a particular scenario. Actually I’m a little unsure/mixed up with the concept/what to do in the case I’m about to describe, that’s why asking.

Basically, I have a page, where I have a dropdown list. Also a span tag. Now, on the document ready event I’m executing some jquery, filling up the dropdown with items fetched from database; also setting the text of the span tag to the first item from the dropdown. The flow of my application requires that I execute another jquery call to a server side method once the page is steadily loaded, by taking the text value of that span tag. Appears pretty simple. But the thing is, no matter what I try to do, my jquery code always picks null/blank from the span tag text even though text is very much there. I’ve tried to put this 2^nd block of jquery ajax call inside window.load, window.onload, document.onload and all kinds of other things hoping that one will work [trial and error basically]. But none have actually. That’s the catch. It’s a mystery. Why on earth it fails to pick up the text from that span tag, is the most weird mystery to me.
I’m posting the relevant code blocks for what I did. This is what I have so far.
1. 1. The page markup –
1. <h2>Fast Forecast</h2>
  
  Your current location is: <label id="lbl_C"></label>
  
  Select City:
  
  <select id="selCity" style="width:170px; border-radius:5px">
  
  <option value="Select">----------- Select -----------</option>
  
  </select>
  
  <h3>Showing Fast Forecast for:
  <span id="spnC"></span></h3>
2. The jquery:
1. $(document).ready(function () {
  
  
  
          var ctr = $("#lbl_C").val();
  
          $.ajax({
  
              type: 'GET',
  
              url: '@Url.Action("GetCityList", "Home")',
  
              data: JSON.stringify({ country: ctr }),
  
              dataType:'json',
  
              contentType: 'application/json; charset=utf-8',
  
              success:function(response)
  
              {
  
                  $.each(response, function (i, obj) {
  
                      $("#selCity").append(
  
                          $('<option></option>').val(obj.city_nm).html(obj.city_nm)
  
                          );
  
                  });
  
                  var def_city = $('#selCity option:eq(1)').val();
  
                  selCity = def_city;
  
                  $("#spnC").text(def_city);
  
                  $("#hdnC").val(selCity);
  
              },
  
              error:function(err, xhr, msg)
  
              {
  
                  alert(err+"-------------------"+xhr);
  
              }
  
          });
  
          getAPIData();
  
  
      });
3. The part that doesn’t work:
1. function getAPIData()
  
  {
  
      var c_val = $("#spnC").val(); ß-- it’s picking up nothing from the span tag
  
      $.ajax({
  
          type: 'GET',
  
          url: '@Url.Action("MethodWeather", "Home")',
  
          data: JSON.stringify({ f_cty: c_val }),
  
          dataType: 'json',
  
          contentType: 'application/json; charset=utf-8',
  
          async: false,
  
          success: function (data) {
  
              if (data != null) {
  
                  alert("Fetching Weather Data!");
  
              }
  
          },
  
          error: function (err, xHR, msg) {
  
              alert(err + "---------------------" + msg);
  
          }
  
      })
  }
As you can see, ‘spnC’ is the span tag of which I was talking about. One point to mention is – the getAPIDATA() function I put in another separate js file. Don’t worry I previously tried putting it on the same page also, inside the same block, inside same page but separate block all kindsa perm/comb things. Nothing works. I’m perplexed what to do. Guide me please!
Thanks!

Some guidance needed for MinicartJS Plugin code modification ---
[6Replies]
- 05-Mar-2017 09:42 AM
- Forum: Using jQuery Plugins
Hi there,

This is about a jquery based plugin I'm trying to use in amy application. It's the minicartJS which helps in a nice UI experience in e-commerce application plus some cool features for payment gateway interaction.

Now' I've got the files necessary, the css and the js minified. If you would visit the main page itself www.minicartjs.com you would see the basic sample they've put up for reference. The 3 boxes each have 'add to cart' and the last one a 'view cart' thing to see the cart summary. I'm trying to do something analogous in my application with some alteraions/modifications in behaviour of course.

In the example where you have :

<input type="submit" name="submit" value="Add to cart" class="button">

I have :

<input onclick="@Url.Action("AddtoCart", "ShoppingCart", new { id=Model.photo_id})" id="btnPlOrder" type="submit" name="submit" value="Add to cart" class="button">

Pretty straightforward, don't mind the server side code it's just for sending some request to do some server side stuff.

If you study the parent sample, you'd see, they're showing the cart pop up for every time the item is added to cart [button clicked]. Now, in my application this I don't need. What I only need is to show the minicart summary upon clicking another link I have on my page with a down arrow image icon. I hope they are fetching and storing the product id, name price and all that. I have all that in my app. as well, just as you see - @Model.photo_id , I halso have photo_nm, photo_price, photo_url.

<a id="mnCart_show" href="">

<img src="~/Content/img/dwn.png" style="width:31px; height:26px; border-radius:10px" />

</a>

So, where and how I modify the client script in the plugin js file, is my question. I've studied the file more or less can't find exactly where the region is, that is dealing with the button click interaction codes. I found some of the other regions like modifying the empty cart message, animation speeds, delays etc. all that. I tried searching the code file for terms 'submit' & 'button' cuz those are associated with the buttons in the parent example. No, no luck, I can't pinpoint it. This seems trickier now, than I thought it would be.

Also something else I want to make sure is that:
if this plugin retains the data [added cart items info] across page postbacks; ie when you navigate back and forth through you application and still the plugin would retain the added product info. Because that would make much more sense to use it in my application.

So that's it. These are the things I need help with. Mainly the customization/editing of the js code file to make it behave as per flow I described.

Thanks so much my fantastic forum co-members.

A little help needed with jquery – [a continuous synchronous scroll sidebar]
[4Replies]
- 11-Feb-2017 02:45 PM
- Forum: Using jQuery UI
Hi. My scenario is like this – in my web application I’m building, in one of the pages, there’s supposed to be a small side segment like a div which will move along with the page as it is scrolled down or up gradually. I’ve tried to put together the code after putting some amount of observation into the scenario. In my MVC views, have a _layout page (similar to a master page) where I’ve created the sidebar div.

Here’s what I did –

This is the sidebar div ::

<div id="sidebar" style="padding:7px ;margin-top:30px; z-index:1001; border-radius:9px; color:midnightblue; background:linear-gradient(60deg, rgb(201, 196, 246), #c6e2d0); float:right; position:absolute; margin-left:1020px; width:225px">
1.             Check out the Shop Facility to buy new art and digital media content everyday. Everytime you visit the shop,
              we uphold a new work for sale.
              <br/><br/>
              <p style="text-align:center">
                  <a href="@Url.Action("ArtShop", "Shop")" style="font-size:26px; color:#067aa0">Click Here</a>
              </p>
          </div>
This is the jquery I improvised ::

$(document).ready(function () {
1.             var sidebar = $("#sidebar");
              var window = $(window);
              var offset = sidebar.offset();
              var topPadding = 140;
  
              $(window).scroll(function () {
                  if (window.scrollTop() > offset.top) {
                      sidebar.stop().animate({
                          marginTop: window.scrollTop() - offset.top + topPadding
                      });
                  }
                  else {
                      sidebar.stop().animate({
                          marginTop: 0
                      });
                  }
              });
          });
All would seem fine apparently but is not as you can guess. The div is not moving as I scroll the page. Errors I observed from the web browser inspection console --

Uncaught ReferenceError: $ is not defined at localhost/:72

Strange cuz I added the reference of jquery file in my bundleConfig file well enough (people acquainted with the .NET MVC practices can easily relate).

SO what’s the ruckus here. Why wouldn’t the method fire why doesn’t it get the cross-reference of the jquery file. I suppose that should straightaway solve it. Isn’t it? Or is it?
What do I do now. The above jquery section I wrote in the head section of the _layout view itself. I was making a speculation if I make a complete different javascript file like site_sript.js where I put the thing and add it in the scripts bundle – would that neatly resolve the issue?
Main thing is I want to get this working – the scrolling side bar.

Help Please my folks.

Use jQuery to parse & display image from database –
[9Replies]
- 12-Oct-2016 12:21 PM
- Forum: Using jQuery
Hello All;

Need some help with this one. The topic headline itself explains the scenario. I have some image files in DB for every shop/restro of my application; images stored as raw bytes. Now using a web API I am fetching them. Any shop may have several pics associated with it. The image files are being fetched in the format like the huge lengthy:
1. /9j/4AAQSkZJRgABAQEASABIAAD/4ROwRXhpZgAATU0AKgAAAAgADgEOAAIAAAAgAAAAtgEPAAIAAAAgAAAA1gEQAAIAAAAgAAAA9gESAAMAAAABAAEAAAEaAAUAAAABAAABFgEbAAUAAAABAAABHgEoAAMAAAABAAIAAAExAAIAAAAgAAAABAAAC2gAAA …….
etcetcetc
When I use alert to see the ‘photo_file’ data, I get to see the above ones.
Now I would like to reprocess it back and show the image files in my application. My ultimate goal is to show them as a slide show; but to begin with I first want to show them inside separate image controls like suppose, imgF1, imgF2, imgF3, imgF4. The huge format of the files that I am getting as data through my api looks like some base64 string although I am not fully sure. So how do I proceed to change it back into the image files? Hope this is possible by jQuery and I won’t need any other framework/plugin. In server side code, blob data, HttpPostedFileBase etc. I did use previously to tackle similar situations. Just don’t know how to write the same for client side jQuery code.
This is what I have so far:
1. function processImageDataDB() {
  
                  var shpnm = $("#shp_nm").text();
  
                  $.ajax({
  
                      type: 'get',
  
                      url: "/api/restaurant/SelShopFotos/" + shpnm,
  
                      success:function(data)
  
                      {
  
                          if(data!=null)
  
                          {
  
                              var fotoData = $.parseJSON(data);
  
                              $(fotoData).each(function (i, obx) {
  
                                  //alert(obx.photo_file); ß just to see photo file content
  
                              });
  
  
  
  
  
                          }
  
                      },
  
                      error:function(err, xhr, status)
  
                      {
  
                          alert("internal error while fetching images for this bistro! "+err.statustext);
  
                      }
  
                  });
  
              }
So how do I proceed from here, is the question. I did Google some examples but none were close enough to my scenario. No use. So I need help from you.

Thanks much in advance.

jQuery Ajax parsing the response data properly --
[7Replies]
- 08-Sep-2016 01:14 PM
- Forum: Using jQuery
Hello members.

I need help on a certain jQuery data parsing thing.

I’m doing a regular jQ ajax call and executing some server side code in C# which is returning me data. The data which the server code is returning, is basically nothing but an object of a model class [which has some properties of its own] with the values assigned to the properties fetched from db. That’s all fine.
Now in the block where I am receiving the response like

success: function(data)

{

//things need to be done here

}

I am supposed to parse the data and assign the values to some controls on my page, mostly labels. Now, there are properties like rest_nm, rest_hrs, rest_weblinks, rest_id, rest_seatingcap etcetc which are pretty self-explanatory; and resp. labels for them. The parsing of the data object is where I am stuck. Cuz no matter what I do, it gives me ‘undefined’ whereas data is being returned just right from the server side code.
Among several other things, I tried

success: function(data)

{

$(“#lbl_weblink”).text(data.d.rest_weblink);

$(“#lbl_hrs”).text(data.d.rest_hrs);

$(“#lbl_nm”).text(data.d.rest_nm);

… .. and so on

}

You can understand that rest_nm, rest_hrs, rest_id etcetc are basically the names of the props. of the object returned by server side code.
However, this doesn’t work [the jquery I used that is]. Everything is ‘undefined’. What is the exact way to do this? Any loop, parse approach needs to be adopted? Or should there be some client side mvvm object which should then have its properties assigned to the values got from the code.
Which part did I do wrong? What is the correct syntax?
Please help me. Stuck knee deep in this.

Thanks much in advance!

Problem with opening a new Tab and showing a specific URL Based on item Clicked ----
[2Replies]
- 22-Dec-2015 08:30 AM
- Forum: Using jQuery
Hello All,
Greetings,

I'm getting a few errors [well, outputs not as expected] on a scenario. I'll describe it.

Basically, on my web page, I have several small image thumbnails. These are just images of some organisations/companies. Now, on clicking any of them, I wanted that it would open a new separate tab on the browser, and display a certain specific page; namely the careers page of that particular comp/org. That's it. Sounds brief and straight enough.

What I did was like this::
The html markup portion --
2. <table style="background-color:rgb(242, 231, 189)">
3. <tr>
4. <td><a href="" onclick="return showParentSite('deloitte');"><span class="Cfocus"></span><img src="Resource/Comps/comp1.jpg" width="145px" height="65px" alt="" title="" /></a></td>
5. <td><a href="" onclick="return showParentSite('infosys');"><span class="Cfocus"></span><img src="Resource/Comps/comp2.png" width="145px" height="65px" alt="" title="" /></a></td>
6. <td><a href="" onclick="return showParentSite('wipro');"><span class="Cfocus"></span><img src="Resource/Comps/comp3.jpg" width="145" height="" alt="" title="" /></a></td>
7. <td><a href="" onclick="return showParentSite('adecco');"><span class="Cfocus"></span><img src="Resource/Comps/comp4.png" width="145" height="" alt="" title="" /></a></td>
8. <td><a href="" onclick="return showParentSite('sungard');"><span class="Cfocus"></span><img src="Resource/Comps/comp5.jpg" width="145" height="65px" alt="" title="" /></a></td>
9. <td><a href="" onclick="return showParentSite('hp');"><span class="Cfocus"></span><img src="Resource/Comps/comp6.png" width="145" height="" alt="" title="" /></a></td>
10. <td><a href="" onclick="return showParentSite('schlumberger');"><span class="Cfocus"></span><img src="Resource/Comps/comp7.jpg" width="145" height="65px" alt="" title="" /></a></td>
11. <td><a href="" onclick="return showParentSite('odessa');"><span class="Cfocus"></span><img src="Resource/Comps/comp8.png" width="145" height="65px" alt="" title="" /></a></td>
12. <td><a href="" onclick="return showParentSite('infomedia');"><span class="Cfocus"></span><img src="Resource/Comps/comp9.jpg" width="145" height="" alt="" title="" /></a></td>
13. </tr>
14. </table>
The jQuery I wrote --
2. function showParentSite(obj) {
3. var url = null;
4. switch(obj)
5. {
6. case 0:
7. obj = 'deloitte';
8. url="http://www2.deloitte.com/in/en.html";
9. break;
10. case 1:
11. obj = 'infosys';
12. url="http://www.infosys.com/";
13. break;
14. case 2:
15. obj = 'wipro';
16. url="http://www.wipro.com/";
17. break;
18. case 3:
19. obj = 'adecco';
20. url="http://www.adecco.co.in/";
21. break;
22. case 4:
23. obj = 'sungard';
24. url="https://www.sungard.com/";
25. break;
26. case 5:
27. obj = 'hp';
28. url="http://www8.hp.com/us/en/jobs/index.html?jumpid=va_jtfz1bkq3m";
29. break;
30. case 6:
31. obj = 'schlumberger';
32. url="https://careers.slb.com/";
33. break;
34. case 7:
35. obj = 'odessa';
36. url="https://www.odessatechnologies.com/";
37. break;
38. case 8:
39. obj = 'infomedia';
40. url="https://infomedia.com/";
41. break;
45. }
46. var win = window.open(url, '_blank');
47. win.focus();
48. }
Now what happens, is that even though a new separate tab opens, the page won't be displayed. It is blank. Even though the url and all I checked them, are all absolutely ok and correct. The url bar of the newly opened window shows 'about:blank'.
Why is this so? Just needed some help on getting this work neat, friends. Please help me a little on this one.

Thanks,
And Merry Christmas All.

Having slight problem with nested UL LI structures ---
[10Replies]
- 27-Feb-2015 10:22 AM
- Forum: Using jQuery
Hello All.

I am facing slight problem with a nested UL LI UL structure. See the fiddle: http://jsfiddle.net/bw2zr3qj/18/

As you can see, I'm trying to check which parent li has children ul elements with subsequent li elements in it and if there is, show those elements and show an optional pop alert. For example Wine has a number of children elements, but Vermouth and Tequila don't. If you understand what I'm trying to say. If you click Wine, the different types of wine are shown but not so for Vermouth, Tequila or Liqueur

The function VerticalFilter here is not working. Seems the "has" logic I've written is erroneous. I require some assistance with this implementation. Kindly help.

Many Thanks.

Vertical News Slider Plugin not working correctly -
[15Replies]
- 02-Dec-2014 08:06 AM
- Forum: Using jQuery Plugins
Hello.
I have some issues with using the vertical news slider plugin that I secured from here: https://github.com/impressivewebs/vertical-news-slider [if you just download the working sample from there you can see the code. It is not so complex.]

Now I did the server side code and all [with C#] which is fetching the desired data from database correctly, as per my logic. No problem there. Then I go to integrate the fetched data with this plugin, so that the slider animation effect is created. See the screenshots.

All the data is perfect here, member names, avatar, their testimonials, dates etc. No worry. But it is clear all the data has appeared at once one below the other [I couldn't post the full length of the page screenshots] and not one at a time as the periodic ticking effect the plugin is supposed to bring. And the jquery animation is not working either.

These are the files I have included:
CSS: vertical.news.slider.css
JS: vertical.news.slider.js, vertical.news.slider.min.js
This is code snippet from the testimonial main page:
2. <div id="container">
3. <a href="#top" id="back-top"><img src="~/Images/topgo.png" height="24px" width="24px" /></a>
4. <div class="container">
5. <div id="notification"></div>
6. <div class="row">
7. <div class="span12">
8. <div class="row">
9. <div class="span12" id="testimonialTicker">
10. <div class="breadcrumb">
11. </div>
12. <h1 class="style-1">Client Testimonials</h1>
13. @Html.Partial("_testimonialTicker")
14. <div class="buttons">
15. <div class="right">
16. <a class="button-cont-right" href="@Url.Action("Index")">Continue
17. <img src="~/Images/continue.png" height="27px" width="27px" /></a>
18. </div>
19. </div>
20. </div>
21. </div>
22. </div>
23. </div>
24. </div>
25. </div>
This is some code snippet from my partial view
2. <div class="news-holder cf">
3. @if (TestimonialDisplayService.FetchTopTestimonial().Count() != 0)
4. {
5. int x = TestimonialDisplayService.FetchTopTestimonial().Count();
6. List<string> aliases = TestimonialDisplayService.FetchTopTestimonial().Select(item => item.alias_nm).ToList();
7. <ul class="news-headlines">
8. @for (int v = 0; v < x; v++)
9. {
11. <li>
12. <strong>@aliases[v].ToString();</strong>
13. </li>
15. }
16. </ul>
17. foreach (TestimonialBasic itmT in TestimonialDisplayService.FetchTopTestimonial())
18. {
19. <div class="news-preview">
20. <div class="news-content top-content">
21. <img src="@itmT.mem_avatar" title="View Profile" alt="View Profile" />
22. <p><a href="#"><b>@itmT.alias_nm</b></a></p>
23. <p>@itmT.mem_testimonial</p><br /><br />
24. <p><i>@itmT.testimonial_dt.AsDateTime().ToShortDateString()</i></p>
25. </div>
26. </div>
27. }
28. }
29. </div>

Google Map show Circular Shadow/Coverage Zone with specific Radius --
[3Replies]
- 09-Sep-2014 08:41 AM
- Forum: Using jQuery Plugins
Hello and greetings.

I have a unique requirement. It involves google maps etc. I have the Lat, Long of a particular place, stored in db of course. Now I want to show a circular shadow zone like a coverage zone [of a light/faint colour like aliceblue] on the map that loads on my web page, with that place as the centre of the circle. The radius of this circle will be 7 km. Is this at all possible? If so, can you lead me step by step to developing this functionality? What are the plugins I need to do this?

I have no shame in admitting that at this point, I have not the requisite theoretical knowledge to implement this. I am confused. But I cannot stress enough as to how important and mandatory it is that I finally implement this in my application. That is why I turned to the forums. Please help me. I am counting on the collective knowledge of forum members.

Many Thanks in advance. God Bless.

Scrollable header strip that moves along as I scroll down Page
[2Replies]
- 05-Sep-2014 12:57 PM
- Forum: Using jQuery
Hello All.
My first post on here. Hope I get some help from the specialists.

I have a web page with a header strip. It contains the site logo, a search facility and some html for showing shopping cart summary etc. I want that as I scroll up/down my page, this strip should scroll along with me as well. In essence a mobile header strip, like you see in many sites. See the header strip where the logo and all that is present:

The html for this all is like:
2. <div class="container">
3. <div class="row">
4. <div class="span12">
5. <div class="toprow-1">
6. <a class="swipe-control" href="#">
7. <i class="icon-reorder"></i>
8. </a>
10. <div class="top-search">
11. <i class="icon-search"></i>
12. </div>
13. </div>
14. </div>
15. </div>
16. <div class="row">
17. <div class="span12">
18. <div class="mobilelogo mobivisible">
19. <div class="customer_support">Delivery only in Kolkata, Minimum Order Amount 1,850.00 INR<br> Customer Support: +91 9836757590</div>
20. <div id="logo"><a href="/Home/Home"><img src="/Images/iconvdv.jpg" title="VinoDivino.com" width="190px" height="110px" alt="Vino Divino Home"></a></div>
21. </div>
22. <div id="stickyribbon" top:0px"="">
23. <div class="header">
24. <div id="logo">
25. <a href="/Views/Home/Index">
26. <img src="/Images/iconvdv.jpg" title="VinoDivino.com" alt="Vino Divino Home" height="110px" width="190px">
27. </a>
29. </div>
30. <div id="search">
31. <div class="inner">
32. <div class="button-search">
34. <input type="text" name="Search" placeholder="Search" value="">
35. <div class="search_btn"><img src="/Sliders/srch1.png" height="36px" width="36px"></div>
37. </div>
38. </div>
39. </div>
40. <div class="cart-position">
41. <div class="cart-inner">
42. <div id="cart" class="">
43. <div class="heading">
44. <span class="link_a">
45. <img src="/Images/cart_icon.png" height="26px" width="26px">
46. <b>CART: </b>
47. <span class="sc-button"></span>
48. <span id="cart-total2"></span>
49. <span id="cart-total">
50. 0 Item(s)
51. <strong>INR 0.00</strong>
52. </span>
53. <i class="icon-angle-down">
54. <img id="popdowncart" src="/Images/popdown.jpg" width="30px" height="30px">
55. </i>
56. <span class="clear"></span>
58. </span>
59. </div>
60. <div class="content">
61. <div class="content-scroll">
62. Your shopping cart is empty!
63. </div>
64. </div>
65. </div>
66. </div>
67. </div>
68. <div class="clear"></div>
69. </div>
71. </div>
72. </div>
73. </div>
74. <div id="menu-gadget">
75. <div class="row">
76. <div class="span12">
77. <div id="menu-icon">Categories</div>
78. <ul id="nav" class="sf-menu-phone">
80. </ul>
81. </div>
82. </div>
83. </div>
85. </div>
There's not much into all that html, basically a div class 'container' -> then class 'row' -> then 'span12'. that's how it's built. The 'container' is the main parent container for the strip. I understand, we have to keep altering the css for this strip dynamically as the document senses a scroll event happening on it to make the strip move along with the document as I scroll it up/down. Just haven't got enough ideas to put together the jquery code block

Please help me develop the jQuery for this scrolling header. Look forward to receiving all the help from you on this matter.
Thanks in advance.

Response title

Attachments

jQuery Forum

Activity Trend