nogray
-
Posts
930 -
Joined
-
Last visited
Posts posted by nogray
-
-
You have a few errors, first you are adding the validation function to your button click using the id selector #submit, but you don't have an button with the id submit. You should add the validation function to the form submit event (e.g. $('.myform').submit(function(evt) {...})
Second part, you need to use preventDefault() to stop the submit event if it fails validation.
You can find examples here http://api.jquery.com/submit/
-
Instead of rotating every single element, rotate the parent UL (and make sure to set the correct width).
-
You can't use a variable as an object key directly in JavaScript. You need to use brackets [] instead
e.g.
var obj = {}; var element_prop = $(this).val(); obj[element_prop] = 'black'; $("#main_div").css(obj); -
Your PHP array will be a JavaScript object, so you can use a for (property in object) loop
e.g.
for (p in arr) { if (arr.hasOwnProperty(p)) { // do something } }Also, you have to remove the quotes from the "<?php json_encode($visits) ?>"; -
whenever you change the HTML directly, you need to add the even again.
-
By default, a checkbox value is "on" regardless if it's checked or not (if set the value property, that value will always be the same if it's checked or not). When a form is submitted and the checkbox is checked, the value is sent with the form. If it's not checked, the value is not sent at all.
For your script, you should test the checked property (not value). e.g. changeData(this.checked, ...
Also, it's better to use onclick event rather than onchange for older browsers.
-
You actually only need to move the slides that will hide and show, so you don't have to loop all over them. The reason the bounce happens is because it takes some time for the transition to happen (even if its set to zero second), so the first time you try to move it from one side to the other it doesn't happen. Here is a section of code to show how to fix it using a small timeout (this is in the previous function).
num = current_slide - 1; /*for (var i=0;i<=slides.length -1;i++) { slides[i].className = 'slide last'; } slides[current_slide - 1].className = 'slide';*/ // making sure the number is not larger than the slides if (num > slides.length) num = 1; // making sure the slides are not smaller than zero if (num < 1) num = slides.length; if (slides[num - 1].className.indexOf('last') == -1){ slides[num - 1].className = 'slide last'; setTimeout(previous, 100); return; } is_transition = true;I'll still recommend you use one function for back and forth and have the next and previous logic based on the number compared to the current slide (e.g. if number is bigger than current slide, class is hide to left). The reason for that is so you can add ticks for each slide where the user can move to any slide without going through all of them.Hope this helps.
-
FYI, if you change the display css property, the transition is reset and will not work. It's much easier to make a content slider without any transition (just animate the CSS properties using JavaScript). JQuery will make it much easier.
If you want to use CSS transition, here is a quick example that shows how to do it using CSS and basic JavaScript.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <style> .slider_holder {position:relative; width:500px; height:500px; border:solid #000000 1px; margin:auto; overflow:hidden;} .slide {position:absolute; top:0px; left:0px; width:100%; height:100%; opacity: 1; text-align:center; -webkit-transition:left 1s, opacity 1s; -moz-transition:left 1s, opacity 1s; transition:left 1s, opacity 1s; -webkit-transition-timing-function:ease; -moz-transition-timing-function:ease; transition-timing-function:ease;} .slide.hidden {left:-100%; opacity:0;} .slide.next {left:100%; right:auto; opacity:0; -webkit-transition-duration:0s; -moz-transition-duration:0s; transition-duration:0s;} </style> <div class="slider_holder" id="my_slides"> <div class="slide">Slide 1</div> <div class="slide next">Slide 2</div> <div class="slide next">Slide 3</div> </div> <button onclick="previous();">Previous</button> <button onclick="next();">Next</button> <script type="text/javascript"> // current slide var current_slide = 1; // checking if we need to add the event var did_add_evt = false; // making sure the transition doesn overlap var is_transition = false; function gotoSlide(num){ // if same slide skip if (num == current_slide) return; // if the transition is running, return if (is_transition) return; is_transition = true; // slides var slides = document.getElementById('my_slides').querySelectorAll('.slide'); // adding the event if (!did_add_evt){ var end_func = function(){ if (this.className.indexOf('hidden') != -1) this.className = 'slide next'; is_transition = false }; for (var i=0; i<slides.length; i++){ slides[i].addEventListener('transitionend', end_func, false); slides[i].addEventListener('transitionEnd', end_func, false); slides[i].addEventListener('webkitTransitionEnd', end_func, false); slides[i].addEventListener('oTransitionEnd', end_func, false); } } // making sure the number is not larger than the slides if (num > slides.length) num = 1; // making sure the slides are not smaller than zero if (num < 1) num = slides.length; slides[current_slide - 1].className = 'slide hidden'; current_slide = num; slides[current_slide - 1].className = 'slide' } function previous(){ gotoSlide(current_slide - 1); } function next(){ gotoSlide(current_slide + 1); } </script> </body> </html> -
Transition and Animation are different CSS properties. You are using animation in your CSS and transition in your events. You can find more details about the animation event at http://www.sitepoint.com/css3-animation-javascript-event-handlers/
Example using transition (I moved a few things around)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <!DOCTYPE html> <html> <head> <style> .mydiv { width:200px; position:relative; left:0px; transition:left 1s; transition-timing-function:ease; } .mydiv-animated {left:-200px;} </style> </head> <body> <center> <div class="mydiv" id="my-div"> <div style="display:inline-block;width:200px;height:200px;background-color:red;">1</div> <div style="display:inline-block;width:200px;height:200px;background-color:green;position:absolute;top:0px;left:200px;">2</div> </div> <input type="button" onclick="start_slide();" value="go" /> </center> <script language="javascript" type="text/javascript"> function end_transition(evt){ alert('Finished'); document.getElementById("my-div").className = 'mydiv'; } document.getElementById("my-div").addEventListener( 'transitionend', end_transition, false ); document.getElementById("my-div").addEventListener( 'transitionEnd', end_transition, false ); document.getElementById("my-div").addEventListener( 'webkitTransitionEnd', end_transition, false ); document.getElementById("my-div").addEventListener( 'oTransitionEnd', end_transition, false ); function start_slide() { document.getElementById("my-div").className = 'mydiv mydiv-animated'; } </script> </body> </html> </body> </html> -
If you use document.write after the page has loaded, it will rewrite the entire page. Instead, use innerHTML of an html element.
e.g.
<div id="my_video_div"></div>
... later in your script ...
document.getElementById('my_video_div').innerHTML = '<iframe ....>';
-
try $(window).scrollTop() instead of $(document)
-
No, you'll need a javascript code highlighter. If you want something simple and fast, you can check google code prettify http://code.google.com/p/google-code-prettify/
-
JavaScript supports the new line escape sequence, but the string in the example is created in PHP and will be outputted with new line character (not a new line escape sequence).
-
JavaScript does not support multi line strings. If you use the example by Xaotique, you need to use json_encode to make sure the string is a valid JavaScript string
e.g. alert(" . json_encode($content) . ");
-
You need to use the correct id in your form tag
<form action="#" method="post" id="theForm">
-
getElementsByName returns an HTML collections (or array) so you can't just assign a value to it. If you only have one element with that name, you can use
document.getElementsByName("ltotal[]")[0].value = '.....'; // note the [0];
Otherwise use getElementById (each element needs a unique id).
-
onclick or onchange are events and should be added either by addEventListener (and attachEvent for old IE browsers) or as the following
element6.onchange = filllabour; // no parenthesis
-
I don't think you can use "select" as a variable (or any html element name or id) since it will create a conflict in older IE browsers. Try var slct instead. Same thing goes with options.
-
Since you are making a query URL, just added the options to your link
e.g. 'receiver.php?'+opts
-
You need to change the image source (not reload) if you want to change it. Also, to avoid the image being cached, you need to add a random token in the url.
e.g.
<img id="refresh" src="img.png"> <script type="text/javascript"> // add this in an onload event or after the image setInterval(function(){ var src = 'img.png?rand='+(new Date().getTime()); document.getElementById('refresh').src = src; }, 60000); </script> -
You can define your language variables as a global javascript variable in your page and use that variable in your validation function
for example, in your php page add the following (You might want to only print out the error messages used by your javascript instead of the entire language array).
<script type="text/javascript"> var $lang = <?PHP echo json_encode($lang); ?>; <script>
and in your javascript validation file, you can use the language variable as
user: $lang['login_error'],
-
A better approach would be to load the page as if javascript was turned off and add the controls using javascript. (http://en.wikipedia.org/wiki/Progressive_Enhancement)
The reason your page keeps loading is because your success function basically keeps redirecting the page. You can use a php if statement to check if the session has been set or not. If not, print out the ajax request.
Also, you can also simply set the default to show the javascript controls by default (since most people have javascript support) and use the noscript and meta refresh tags to set the session to no javascript controls (you still would need to check if the session is set before printing out the noscript tag).
-
First, the id can't have any spaces, so you should remove the spaces from the ids. To remove the element, you should use the parent and removeChild,
e.g. (your function example)
function remove_me(obj) { obj.parentNode.removeChild(obj); } -
You should use slideup (close) and slidedown (open) instead of slidetoggle.
complicated form validation
in Javascript Help
Posted
Just go to the jQuery url I posted earlier. It has very clear and easy to follow examples. Also, I wouldn't recommend using name="submit" or id="submit" in a form element because it will cause a conflict in some browsers.