jQuery Forum

Date of Birth From Multiple Inputs
[2Replies]
- 10-Apr-2015 08:35 AM
- Forum: Using jQuery
I have a form that, at some point, asks the user "so, you are born on (day) of (month) in (year)". The question is displayed on this way for a better approach on user experience, so, (day), (month) and (year) are different inputs that user selects. The problem is on organising the information for SQL purposes (for a DATA row, that stores information like that: (YYYY-MM-DD)).
I was hopping there is an easy way to transfer the information collected on those three input to a fourth hidden input, from which I will write using php, on my database on this order (YYYY-MM-DD).
1. <form action="">
2. <p>
3. so, you are born on <input type="text" id="day" placeholder="01">
4. of <input type="text" id="month" placeholder="january">
5. in <input type="text" id="year" placeholder="2000">.
6. </p>
7. <input type="text" id="data" name="store-data" style="display:hidden">
8. </form>

Sidebar not fixing properly with jquery ".css" function. #solved
[1Reply]
- 25-Feb-2015 07:32 AM
- Forum: Using jQuery
Hi, in search for a fixed sidebar jQuery code, I found this tutorial , which has this fiddle example . The html , css and js codes are very simple, and while kept simple it works fine. Though, when I tried to insert it in my sandbox project , something goes wrong. Within my project selectors specifications, the js script goes like this:
1. jQuery(document).ready(function () {
2. var length = jQuery('.product-shop').height() - jQuery('#sidebar').height() + jQuery('.product-shop').offset().top;
3. jQuery(window).scroll(function () {
4. var scroll = jQuery(this).scrollTop();
5. var height = jQuery('#sidebar').height() + 'px';
6. if (scroll < jQuery('.product-shop').offset().top) {
7. jQuery('#sidebar').css({
8. 'position': 'absolute',
9. 'top': '0'
10. });
11. } else if (scroll < length) {
12. jQuery('#sidebar').css({
13. 'position': 'absolute',
14. 'bottom': '0',
15. 'top': 'auto'
16. });
17. } else {
18. jQuery('#sidebar').css({
19. 'position': 'fixed',
20. 'top': '0',
21. 'height': height
22. });
23. }
24. });
25. });
But, as you can see in my sandbox, when the page is rendered and when the user scrolls down, the "else" statement seems to be ignored, not fixing the sidebar. The project is running on magento and bootstrap.
Any clue on where is the problem?

iosslider element resize on window resize.
[0Replies]
- 22-Feb-2014 03:58 PM
- Forum: Using jQuery Plugins
Hi there.

You can see on this link (the actual version of the project) that the horizontal slider (iosslider) is composed with images on landscape and portrait dimensions. The problem is that on portrait dimension images, the width of the element only works properly when the browser window is resized.

I am trying to find the issue here, I looked up for some .resize method in iosslider script, but no success until now.

If anyone knows this plugin, just a clue would please me. Thanks.

Magento Ajax Login/Register Plugin jquery-1.10.2 incompatibility.
[3Replies]
- 19-Feb-2014 12:38 PM
- Forum: Using jQuery Plugins
Hi there,
I've installed a module for ajax login/register in my Magento store. It works fine, it includes its own jQuery library (1.7.2) and does all the work perfectly. The problem is: I already have a jQuery library (1.10.2) in this store, and the cohabitation of the two libraries raises some performance issues. For my luck, the module offers the option of include or not include the jQuery library, but, when I choose not to include the 1.7.2 library and keep only the 1.10.2, debugging indicates some issues I don't know how to solve.

Functions like the following happens to indicate a "'undifined' is not a function" issue.
1. $('a[href*="customer/account/create"], .new-users button').live('click', function(){
2. animateShowWindow('register');
3. return false;
4. });
I hope that there is some jQuery library incompatibility you could find easier than me and my frustrated tries.

jQuery(this).next().show(); What am I doing wrong?
[2Replies]
- 16-Sep-2013 12:22 PM
- Forum: Using jQuery
Guys, what am I doing wrong on this syntax?
1. <script type="text/javascript">
  function reveal() {
  jQuery(this).next().fadeIn();
  }
  </script>
  
  <style>
  p { display:none;}
  </style>
  
  <div onclick="reveal()">reveal</div>
  <p>the truth</p>
As you may have figured out, originally the browser renders only the div with "reveal" content, than, when I click on it, I want the "p" element to be shown. But, no success. I need the ".next()" selector because there will be more than one triggering divs to reveal their respective adjacent elements.
Thanks.

Improving jQuery Animation
[7Replies]
- 20-Aug-2013 11:17 PM
- Forum: Using jQuery
Hi,

I'm developing a website wich contains a home section with an animation. I've been able to successfully code the animation using jQuery, you can see the blueprint of that project in here. Looking at it, you'll notice that the animation is simple, it consist's of animating the opacity of some divs inside the home section (the white blocks), and loop the animation forever (the home section background is with an animation function too, but that is not the case of this post).

However, I think my way of doing that ain't the best one, and I want to know about you guys how to improve that code, to make it more sofisticated.
1. $(document).ready(function () {
2. function animacao() {
3. $("#anim1").delay('1200').animate({opacity: "0"}, 1000, function () {
4. $("#anim2").delay('800').animate({opacity: "1"}, 1000, function () {
5. $("#anim3").delay('600').animate({opacity: "1"}, 1000, function () {
6. $("#anim4").delay('800').animate({opacity: "0"}, 1000, function () {
7. $("#anim5").delay('400').animate({opacity: "1"}, 1000, function () {
8. $("#anim6").delay('400').animate({opacity: "1"}, 1000, function () {
9. $("#anim2").delay('800').animate({opacity: "0"}, 1000, function () {
10. $("#anim1").delay('800').animate({opacity: "1"}, 1000, function () {
11. $("#anim7").delay('800').animate({opacity: "1"}, 1000, function () {
12. $("#anim3").delay('400').animate({opacity: "0"}, 1000, function () {
13. $("#anim6").delay('400').animate({opacity: "0"}, 1000, function () {
14. $("#anim4").delay('400').animate({opacity: "1"}, 1000, function () {
15. $("#anim7").delay('400').animate({opacity: "0"}, 1000, function () {
16. $("#anim5").delay('400').animate({opacity: "0"}, 1000, animacao)});
17. });
18. });
19. });
20. });
21. });
22. });
23. });
24. });
25. });
26. });
27. });
28. });
29. };
30. animacao();
31. });
Thanks for the contributions.

To trigger an action when windows reachs a section.
[3Replies]
- 15-Aug-2013 08:55 AM
- Forum: Using jQuery
Hi guys, hope you understand my english (brazilian here) and help me.

I'm developing a website with that vertical disposition of sections, on wich the user navigate through the whole website staying on the same page, going up or down, and with a fixed menu on the top. Plus, it is responsive. Now comes my problem.

The first section has just a 'greeting' content, so that I don't want to polute it with a menu bar. The menu bar comes to light only when the browser reaches the second section.

For that kind of effect, I used to apply the following:
1. $("#menuOculto").hide();
2. $(function () {
3. $(window).scroll(function () {
4. if ($(this).scrollTop() > 1200) {
5. $('#menuOculto').fadeIn();
6. } else {
7. $('#menuOculto').stop().fadeOut();
8. }
9. });
10. });
11. });
But, as may come to your attention, this code defines a fixed measure of distance the browser would roam to than display the menu. This definition I need not to be fixed by scrollTop value, but some function that recognizes the browsers top window has reached the second section of the page. It needs to be that way because the responsive designs variate the high of the first section, making the definition of '1200px' arbitrary in certain situations.
Right now, I'm uploading my actual blueprint version of this project in this link, just in case you guys need more specific details of the application.

That's it. Thanks for your attention.

Loop not working.
[2Replies]
- 16-Aug-2012 02:47 PM
- Forum: Getting Started
Hi, folks. I'm trying to make an animation loop till the end of times, but i'm not reaching success in the way i'm writing the script. Hope you take a look and help me to figure out a way to make it work.

The html is this:
2. <div id="elementosPrimeiros">
3. <div class="elemento pincel">
4. <img src="../Imagem/pincel_lapis.jpg" />
5. <div class="descricaoElemento">
6. <h4>Boa Aparência</h4>
7. <h5>Design direcionado e de qualidade.</h5>
8. </div>
9. </div>
10. <div class="elemento mais">
11. <img src="../Imagem/mais.png" />
12. </div>
13. <div class="elemento regua">
14. <img src="../Imagem/regua.jpg" />
15. <div class="descricaoElemento">
16. <h4>Funcionalidade</h4>
17. <h5>Precisão no desenvolvimento e nos resutados.</h5>
18. </div>
19. </div>
20. </div>
21. <div id="elementosSegundos">
22. <div class="elemento igual">
23. <img src="../Imagem/igual.png" />
24. </div>
25. <div class="elemento solucao" >
26. <img src="../Imagem/lampada.jpg" />
27. <div class="descricaoElemento">
28. <h4>Solução</h4>
29. <h5>É disso que estamos falando.</h5>
30. </div>
31. </div>
32. </div>
And the script:
2. $(document).ready(function () {
4. $(".elemento").hide();
5. $(".descricaoElemento").hide();
8. function firstElement() {
9. $(".pincel").fadeIn('600', function () {
10. $(".pincel div").slideDown('fast', function () {
11. $(".mais").delay('400').fadeIn('800', function () {
12. $(".regua").delay('400').fadeIn('600', function () {
13. $(".regua div").slideDown('fast', function () {
14. $("#elementosPrimeiros").delay('1000').fadeOut('fast', secondElement);
15. });
16. });
17. });
18. });
19. });
20. }
22. function secondElement() {
23. $('.igual').fadeIn('fast', function () {
24. $(this).delay('400').fadeOut('slow', function () {
25. $('.solucao').fadeIn('slow', function () {
26. $('.solucao div').slideDown('slow', function () {
27. $('#elementosSegundos').delay('2000').fadeOut('slow', firstElement);
28. });
29. });
30. });
31. });
32. }
34. firstElement();
36. });
You noticed that it is an animation composed by two stages, the fisrtElement and the secondElement. What happens is that in the last callback of the firstElement, it calls the secondElement, and than the other way around. But, after the ending of the secondElement, the firstElement does not restart again.

How to show a gif while loading all elements of the website?
[1Reply]
- 02-Aug-2012 09:56 PM
- Forum: Getting Started
Dudes, I am looking for a way to show a .gif (loading disc, loading bar or whatever) while all the content (including images of the current page, like backgrounds and illustrations) are being loaded and then, when it all is loaded, show the current page.

I have tried a very simple code that I found here with the .load() event but, apparently, it does not make the function I am looking for.

How to randomize content?
[10Replies]
- 23-Jul-2012 03:47 PM
- Forum: Getting Started
Hi! I am novice at jQuery, and I'm trying to insert a random html content show in one of my websites projects. I would like your help to understand how can i do that.
The transition between the contents is already working, but the html content is being showed in its code order, I would like to randomize the order of showing this content.

The html content is this:
1. <div id="banners">
2. <div id="bannerGuitarra">
3. <p>Some text?<br />
4. <span>some more text here<br/>
5. And here, <a href="">there</a>, and everywhere.
6. </span></p>
7. </div>
8. <div id="bannerBateria">
9. <p>Some other text?<br />
10. <span>this is other text <br/>
11. And here, <a href="">some</a> other text.</span></p>
12. </div>
13. </div>
The css code is this:
1. #bannerGuitarra, #bannerBateria {
2. position:absolute;
3. width:900px;
4. height:400px;
5. margin:0 auto;
6. background:url(../imagem/instrumentos/guitarra.jpg) no-repeat;
7. background-position:bottom left;
8. }
9. #bannerGuitarra p , #bannerBateria p {
10. margin:0;
11. padding:0;
12. color:#a14636;
13. font-size:56px;
14. text-align:right;
15. }
16. #bannerGuitarra span , #bannerBateria span {
17. color:#766460;
18. font-size:18px;
19. line-height:30px;
20. }
21. #bannerGuitarra a, #bannerBateria a {
22. color:#a14636;
23. }
And the javascript i'm using so far know is that (with no kind of randomizing code)
1. $(document).ready (function () {
2. var counter = 0,
3. banners = $('#bannerGuitarra, #bannerBateria');
4. banners.hide()
5. function showBanner () {
6. banners.fadeOut(1000)
7. .filter(function (index) { return index == counter % 2; })
8. .fadeIn(1000);
9. counter++;
10. };
12. showBanner();
13. setInterval(function () {
14. showBanner();
15. }, 7000);
16. });
Hope you help me.

Response title

Attachments

jQuery Forum

Activity Trend