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).
<form action="">
<p>
so, you are born on <input type="text"
id="day" placeholder="01">
of <input type="text"
id="month" placeholder="january">
in <input type="text"
id="year" placeholder="2000">.
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:
jQuery(document).ready(function
() {
var length = jQuery('.product-shop').height() -
jQuery('#sidebar').height() +
jQuery('.product-shop').offset().top;
jQuery(window).scroll(function () {
var scroll = jQuery(this).scrollTop();
var height = jQuery('#sidebar').height() +
'px';
if (scroll <
jQuery('.product-shop').offset().top) {
jQuery('#sidebar').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll < length) {
jQuery('#sidebar').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
jQuery('#sidebar').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
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.
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.
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.
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.
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.
$(document).ready(function () {
function animacao() {
$("#anim1").delay('1200').animate({opacity: "0"}, 1000, function () {
$("#anim2").delay('800').animate({opacity: "1"}, 1000, function () {
$("#anim3").delay('600').animate({opacity: "1"}, 1000, function () {
$("#anim4").delay('800').animate({opacity: "0"}, 1000, function () {
$("#anim5").delay('400').animate({opacity: "1"}, 1000, function () {
$("#anim6").delay('400').animate({opacity: "1"}, 1000, function () {
$("#anim2").delay('800').animate({opacity: "0"}, 1000, function () {
$("#anim1").delay('800').animate({opacity: "1"}, 1000, function () {
$("#anim7").delay('800').animate({opacity: "1"}, 1000, function () {
$("#anim3").delay('400').animate({opacity: "0"}, 1000, function () {
$("#anim6").delay('400').animate({opacity: "0"}, 1000, function () {
$("#anim4").delay('400').animate({opacity: "1"}, 1000, function () {
$("#anim7").delay('400').animate({opacity: "0"}, 1000, function () {
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:
$("#menuOculto").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1200) {
$('#menuOculto').fadeIn();
} else {
$('#menuOculto').stop().fadeOut();
}
});
});
});
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.
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:
<div id="elementosPrimeiros">
<div class="elemento pincel">
<img src="../Imagem/pincel_lapis.jpg" />
<div class="descricaoElemento">
<h4>Boa Aparência</h4>
<h5>Design direcionado e de qualidade.</h5>
</div>
</div>
<div class="elemento mais">
<img src="../Imagem/mais.png" />
</div>
<div class="elemento regua">
<img src="../Imagem/regua.jpg" />
<div class="descricaoElemento">
<h4>Funcionalidade</h4>
<h5>Precisão no desenvolvimento e nos resutados.</h5>
</div>
</div>
</div>
<div id="elementosSegundos">
<div class="elemento igual">
<img src="../Imagem/igual.png" />
</div>
<div class="elemento solucao" >
<img src="../Imagem/lampada.jpg" />
<div class="descricaoElemento">
<h4>Solução</h4>
<h5>É disso que estamos falando.</h5>
</div>
</div>
</div>
And the script:
$(document).ready(function () {
$(".elemento").hide();
$(".descricaoElemento").hide();
function firstElement() {
$(".pincel").fadeIn('600', function () {
$(".pincel div").slideDown('fast', function () {
$(".mais").delay('400').fadeIn('800', function () {
$(".regua").delay('400').fadeIn('600', function () {
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.
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.
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:
<div id="banners">
<div id="bannerGuitarra">
<p>Some text?<br />
<span>some more text here<br/>
And here, <a href="">there</a>, and everywhere.
</span></p>
</div>
<div id="bannerBateria">
<p>Some other text?<br />
<span>this is other text <br/>
And here, <a href="">some</a> other text.</span></p>