Jump to content

Search the Community

Showing results for tags 'JQuery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hi everybody! I just made this slider in an object oriented fashion. I would like to know how I can improve the script. Thank you! var Slideshow = function(element) { var totalWidth = 0; this.slider_wrap = element.find('.slider_wrap'); this.slider = element.find('.slider'); this.slide = element.find('.slide'); this.first_slide = element.find('.slide:first'); this.slider_controls_prev = element.find('.slider_controls_prev'); this.slider_controls_next = element.find('.slider_controls_next'); this.all_slides = this.slide.each(function(){ totalWidth = totalWidth + jQuery(this).outerWidth(true); }); this.maxScrollPosition = totalWidth - this.slider_wrap.outerWidth(); this.toSliderItem = function(jQuerytargetItem){ if(jQuerytargetItem.length){ this.newPosition = jQuerytargetItem.position().left; if(this.newPosition <= this.maxScrollPosition){ jQuerytargetItem.addClass('active'); jQuerytargetItem.siblings().removeClass('active'); this.slider.animate({ left : - this.newPosition }); } else { this.slider.animate({ left : - this.maxScrollPosition }); }; }; }; this.slider.width(totalWidth); this.first_slide.addClass('active'); this.buttons(); } Slideshow.prototype.buttons = function() { var that = this; this.slider_controls_prev.click(function() { var jQuerytargetItem = that.slider.find('.active').prev(); that.toSliderItem(jQuerytargetItem); }); this.slider_controls_next.click(function() { var jQuerytargetItem = that.slider.find('.active').next(); that.toSliderItem(jQuerytargetItem); });}var speakers = new Slideshow(jQuery('.slider-1'));}); The HTML: <div class="slider_wrap"> <div class="slider clearfix"> <div class="slide">Slide Content</div> </div> <div class="slider_controls clearfix"> <div href="#" class="slider_controls_prev"> ◄ </div> <div href="#" class="slider_controls_next"> ► </div> </div></div>
  2. Hi, I am trying to make this webpage for posting and viewing news. It will be shown on a big screen in our Hub. I've been having a super hard time with putting a proper slideshow in the HubWeb_HubPage.php one. I've tried copying in code from two other pre-made slideshows, but best I've got was a misaligned slideshow that didn't fit the top right area properly. And I made an embedded YouTube video appear and reappear on top of it periodically. So I decided to learn and do a simple one myself. What could go wrong if I'm writing the thing inside my webpage myself, right? Nothing happens. See for yourself. It's driving me mad already. My goal for the top right slideshow area is to have at least 5 images or videos sliding and autoplaying with the top right area filled as much as possible, though keeping normal proportions (to not stretch the image). So the whole webpage with news must be responsive and fill the screen it's on. The slideshow area is 70%/70% of the screen width (the webpage will be put on fullscreen on the display in Hub). But I can't even get the images sliding! Please download the zipped folder from this link and check out the code and the page: http://s000.tinyupload.com/index.php?file_id=60798650373352387766 I've also attached just the HubPage that has the slideshow code on it. This one is how far I could get it modifying the CSS values. Thank you for your help! <!DOCTYPE html><?phpif (!empty($_POST)) {file_put_contents('NewsLines.txt', $_POST['newsline'] . "____" . date("d.m") . "____" . "^^^^" . PHP_EOL, FILE_APPEND);}?><html> <head> <!-- load jQuery --> <script src="jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="HubWeb_CSS.css"> </script> <script type="text/javascript"> window.onload = function() { fullClock(); newscaster(); updater(); } $(document).ready(function() { var currentPosition = 0; var slideWidth = 500; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); function fullClock() { var today=new Date(); var mon=today.getMonth(); var d=today.getDate(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); var timeOfDay=(h<12)?"AM":"PM"; var period = ""; if (h == 8 && m >= 55 && m <= 59) { period = "Registration"; } else if (h == 9) { period = "Period 1"; } else if (h == 10) { period = "Period 2"; } else if (h == 11 && m < 15) { period = "Break"; } else if ((h == 11 && m >= 15) || (h == 12 && m < 15)) { period = "Period 3"; } else if ((h == 12 && m >= 15) || (h == 13 && m < 15)) { period = "Period 4"; } else if (h == 13 && m >= 15 && m < 50) { period = "Lunch"; } else if ((h == 13 && m >= 50) || (h == 14 && m < 50)) { period = "Period 5"; } else if ((h == 14 && m >= 50) || (h == 15 && m <= 35)) { period = "Period 6"; } else { period = ""; } mon = mon + 1; mon = checkTime(mon); d = checkTime(d); m = checkTime(m); s = checkTime(s); document.getElementById('date').innerHTML = d+"."+mon; document.getElementById('clock').innerHTML = h+":"+m+":"+s; document.getElementById('AMPM').innerHTML = timeOfDay; document.getElementById('period').innerHTML = period; var t = setTimeout(function(){fullClock()},500); } function checkTime(i) { if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } // VIDEO-------------------------------------------------------------------------------------------------------------------- function updater() { setInterval(function() { newscaster() }, 1000); } function newscaster() { $.ajax({ url: 'NewsLines.txt', type:'POST', success: function(m){ allLines = m; allLines = allLines.split("r"); // Splice loop reverse because splice messes up the index of the original array the loop is looking up for (var i = allLines.length-1; i >= 0; i--) { checkLine = allLines[i].split("____"); if (checkLine[0].length <= 1) { allLines.splice(i, 1); } } textline = allLines[allLines.length - 1].split("____"); document.getElementById('news1').innerHTML = textline[0]; document.getElementById('date1').innerHTML = textline[1]; textline = allLines[allLines.length - 2].split("____"); document.getElementById('news2').innerHTML = textline[0]; document.getElementById('date2').innerHTML = textline[1]; textline = allLines[allLines.length - 3].split("____"); document.getElementById('news3').innerHTML = textline[0]; document.getElementById('date3').innerHTML = textline[1]; } }); } // clicking on a line or image in the Hub Page deletes that IMG in the directory or text line from the News Lines file function deleteLine(Nr) { var answer = confirm("Delete News Line " + Nr + "?"); if (answer) { search = document.getElementById('news' + Nr).innerHTML + "____" + document.getElementById('date' + Nr).innerHTML; $.post('HubWeb_Deleter.php', {search}); } } </script> </head> <body> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <img src="Slideshow/banner01.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner02.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner03.jpg" /> </div><!--/slide--> </div><!--/slideshowWindow--> </div><!--/slideshow--> <div id="side"> <div id="sideclock1" onclick="window.location='HubWeb_StaffPage.php';"> <p id="date"></p> <p id="clock"></p> </div> <div id="sideclock2" onclick="window.location='HubWeb_StaffPage.php';"> <p id="AMPM"></p> <p id="period"></p> </div> </div> <!-- add current time and period number on side section, say if Student WiFi is ON? --> <div = id="bottom"> <div id="line1" onclick="deleteLine('1')"> <img src="Contents/GreenStar.svg" id="star1"> <marquee id="news1" scrollamount=5>News line 1</marquee> <p id="date1">01.01</p> </div> <div id="line2" onclick="deleteLine('2')"> <img src="Contents/GreenStar.svg" id="star2"> <marquee id="news2" scrollamount=5>News line 2</marquee> <p id="date2">02.02</p> </div> <div id="line3" onclick="deleteLine('3')"> <img src="Contents/GreenStar.svg" id="star3"> <marquee id="news3" scrollamount=5>News line 3</marquee> <p id="date3">03.03</p> </div> </div> </body></html> HubWeb_HubPage.php HubWeb_CSS.css
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/jquery.validate.min.js"></script> </head> <body> <form id="loginForm" method="post"> Enter Name<input type="text" name="txtname"><br /> Enter Email<input type="text" name="txtemail"><br /> Enter ######:<input type="radio" name="gender" value="male">male <input type="radio" name="gender" value="female">female<br> <input type="submit" value="Login" /> </form> <script> $(document).ready(function(){ $('#loginForm').validate({ rules:{ txtname:{ required:true, minlength:1, maxlength:40 }, txtemail:{ required:true, email:true }, gender:{ required:true, }, }, messages:{ txtname:{ required:"Name required", minlength:"Name at least 1 char long", maxlength:"Name max 40 char long" }, txtemail:{ required:"Email Required", email:"Invalid Emal" }, gender:{ required:"gender is required", } } }); }); </script> </body> </head> </html>
  4. Hey, so I have this code and when apple falls from a tree, if it touches a person the screen should say true, if it doesn't touch a person it says false. But, nothing is happening. Please help. Here is my code: <script> function collision($div1, $div2) { var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true; }$(document).ready(function(){ window.setInterval(function() { $('#result').text(collision($('#div1'), $('#div2'))); }, 200);});<p>Colliding? <span id="result">false</span> P.S. I didn't include the entire code, just what is important to my question.
  5. Okay, so I am driving myself crazy. I have a stick figure character that moves right and left. I also have a play button. When the button is clicked an apple falls from a tree. When it gets to the bottom it is supposed to dissapear. But it does not. Please, help. Are there any openings or mistakes in this code? <!DOCTYPE html><html><head> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><style>.character{ height: 150px; width: 70px; margin-top: -151px; margin-left: 300px; position: absolute;}body{ background-image: url("https://lh3.googleusercontent.com/-Q4hNQoLkZEw/VUeBIKRItxI/AAAAAAAAAEc/LIGJGi42At4/w426-h239/tree.png"); background-size: 800px 550px; background-repeat: no-repeat;}.head{ width: 50px; height: 50px; background-color: rgba(); border: 3px solid black; border-radius: 100%; margin-top: -40px; ;}.body{ height: 80px; width: 3px; background-color: black; ;}.leftarm{ height: 50px; width: 3px; background-color: black; transform: rotate(-60deg); margin-top: -100px; ;}.rightarm{ height: 50px; width: 3px; background-color: black; transform: rotate(60deg); margin-top: -50px; ;}.leftleg{ height: 50px; width: 3px; background-color: black; transform: rotate(-140deg); margin-top: 43px; ;}.rightleg{ height: 50px; width: 3px; background-color: black; transform: rotate(140deg); margin-top: -50px; ;}.lefteye{ height: 6px; width: 6px; background-color: black; margin-top: 15px; margin-left: 15px; border-radius: 100%;}.righteye{ height: 6px; width: 6px; background-color: black; margin-top: -6px; margin-left: 28px; border-radius: 100%;}.mouth{ border-radius:0 0 50% 50%; background-color: black; height: 10px; width: 20px; margin-top: 10px; margin-left: 14px;}.begin{ height: 80px; width: 80px; background-color: rgba(); border: 3px solid blue; margin-top: -115px; margin-left: 650px;}.leaves{ width: 100%; height: 100%; background-color: rgba();}.apple{ position: absolute;}.applemain{ height: 30px; width: 30px; background-color: red; border-radius: 100%; margin-top: -5px;}.applestem{ height: 10px; width: 4px; background-color: brown; margin-left: 20px; transform: rotate(10deg); margin-top: -7px;}.appleleaf{ height: 15px; width: 10px; transform: rotate(50deg); background-color: green; margin-left: 20px; border-radius: 70%;}</style><script> $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 37) { $('.character').animate({left: '-=50px'}, 200); } if (e.keyCode == 39) { $('.character').animate({left: '+=50px'}, 200); } }); $(".begin").click(function(){ $(".leaves").append("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); $(".apple").animate({top: "+=400px"}, 1500); $(".leaves").hide("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); }); });</script><body> <div class = "leaves"></div> <div class = "character"> <div class = "head"> <div class = "lefteye"></div> <div class = "righteye"></div> <div class = "mouth"></div> </div> <div class = "body"></div> <div class = "leftarm"></div> <div class = "rightarm"></div> <div class = "leftleg"></div> <div class = "rightleg"></div> </div> <div class = "begin">Play</div></body></html>
  6. I have a problem with the jQuery AJAX Append function. Everytime I append a comment to the <span>, not only does it append that single one, but also replicates every other comment dynamically generated by the PHP. So I end up with multiple repeated comments. However, the repeated comments aren't stored in the database, so whenever I refresh the page, it goes away. How can I prevent this without refreshing the page everytime? PHP: To display all comments <span id="commentHint"></span><?phpecho "<b>$comment_user said:</b><small>$comment_time</small><br>"; echo "$comment<br>";?> AJAX: Comment On Submit <script> $(document).ready(function () { var form = $('#form'); var submit = $('#submit'); form.on('submit', function (e) { // prevent default action e.preventDefault(); // send ajax request $.ajax({ url: 'commentpost.php', type: 'POST', cache: false, data: form.serialize(), beforeSend: function () { // change submit button value text and disabled it submit.val('Submitting...').attr('disabled', 'disabled'); }, success: function (data) { var item = data; $('#commentHint').append(item); //Appends it to div. form.trigger('reset'); submit.val('Submit Comment').removeAttr('disabled'); }, error: function (e) { alert(e); } }); }); });</script>
  7. Basically, I want my character to move to the left when I press the left arrow button, but nothing happens. Why won't my code work? <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src='script.js'></script></head><style>html{ background-color: lightblue;}.character{ height: 150px; width: 70px; margin-top: 300px; margin-left: 300px}</style><script>$(document).ready(function(){ $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } });});</script><body> <img class = "character" src = "https://lh3.googleusercontent.com/-i1FpxHN6IGs/VUQpAAWIp0I/AAAAAAAAADo/lEkxwoauAyc/w346-h780/stickfigure.png"></img></body></html>
  8. Hey, so this is my code: <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src='script.js'></script><style>.character{ height: 10px; width: 10px; background-color: red; margin-top: 50px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.character2{ height: 10px; width: 10px; background-color: blue; margin-top: -16px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.outerbox{ width: 400px; height: 400px; border: 2px solid black;}.innerbox{ width: 200px; height: 200px; border: 2px solid black; margin-left: 95px; margin-top: 20px;}</style><script>$(document).ready(function(){ var thing = $(".character"); var position = thing.position(); var thing2 = $( ".character2" ); var position2 = thing2.position(); if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } if (e.keyCode == 38){ $('.character').animate({top:'-=30px'}, 200); } if (e.keyCode == 39){ $('.character').animate({left:'+=30px'}, 200); } if (e.keyCode == 40){ $('.character').animate({top:'+=30px'}, 200); } if (e.keyCode == 65){ $('.character2').animate({left:'-=30px'}, 200); } if (e.keyCode == 87){ $('.character2').animate({top:'-=30px'}, 200); } if (e.keyCode == 83){ $('.character2').animate({left:'+=30px'}, 200); } if (e.keyCode == 90){ $('.character2').animate({top:'+=30px'}, 200); } if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } });});</script></head><body> <div class = "outerbox"> <div class = "character"></div> <div class = "character2"></div> <div class = "innerbox"> <p id = "thing">Hello</p> <p id = "other"></p> <p id = "other2"></p> <p id = "collision"></p> </div> </div></body></html> What I want to do is for something to happen when the positions of the two character divs are the same, but I am not quite sure how. Please help.
  9. Hello everyone, This is my first topic on W3Schools Forum. I am having issues dealing with disabling textbox when I click a radio button. And you might wanna read this code that I've posted here: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Airline Reservations</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css"> <script> $(function(){ $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ){ $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ){ $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); </script> <style> body { background-color: #EFEFEF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } </style></head><body><form><input type="text" name="origin" placeholder="Origin"><input type="text" name="destination" placeholder="Destination"> <br>Trip: <input type="radio" name="trip" value="one-way">One-Way<input type="radio" name="trip" value="return">Return <br><label for="from">Departing on:</label><input type="text" id="from" name="from"><label for="to">Arriving on:</label><input type="text" id="to" name="to"> <br>Number of Passengers: <input type="number" min="1" max="9"> <br><input type="submit" value="Find Flights"></form></body></html> Believe me, I am studying in Web Design course. If you have any knowledge about this, please reply to this post. Thank you.
  10. I have a piece of JQuery: $('#bkbtnHome').click(function(e){ $('div#m2Map,div#m3Map,div#m4Map,div#m5Map,div#m6Map,div#m7Map,div#m8Map').fadeOut('slow', function(){ $(".m1Details,#AlaskaMini").css("display","block"); $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none"); $('div#m1Map').fadeIn('slow'); });}); Trouble is, I have recently noticed that when I click #bkbtnHome, the div that is currently visible gets pushed down as it is fading out and the div that fades in appears above it. It's just ugly because it pushes it down for a second which actually causes my page to need a scroll bar for a second before it too disappears. Thing is, I know this only occurs because there are multiple divs "fading out" even though the rest of them are not visible. For example: div#m2Map is visible. I click #bkbtnHome. div#m2Map fades out, the other stuff changes their display, div#m1Map fades in. However, #bkbtnHome can also be clicked when div#m3Map is visible. When that too is clicked, it needs to fade out and have the same stuff change its display. Hence why I put it all together. When it is just a single item fading out, this problem doesn't occur. I am pretty sure it is because something that is already invisible is being told to fade out. My question is, what might be a better way to write this to accomplish the same task? I tried adding an if statement like this: $('#bkbtnHome').click(function(e){ if($('div#m2Map').css("display","block")){ $('div#m2Map').fadeOut('slow',function(){ $(".m1Details,#AlaskaMini").css("display","block"); $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none"); $('div#m1Map').fadeIn('slow'); }); };}); And it does work, but this would require me to write many if statements (or one with many else). Is there another approach I could take to fix this little glitch that would keep it simple/short?
  11. I was just wondering, how do you make a div, or a character run and when it comes in contact with a coin, it collects the coin? Like if mario were running and he collects a coin.
  12. Hey, so I have this simple jQuery function,but it is not working. When I click the div with the class "buttonup", the div with the class "thing" doesn't move. Can anyone tell me why this won't work? $(document).ready(function(){ $('.buttonup').click(function(){ $('.thing').animate({left: '+=10px'}, 500); });});
  13. Hi guys, So I set up a few boxes on a page and want a random one to disappear whenever any box is clicked on. I am a little rusty and was never that good at coding so this is just for fun/practice. My divs are set up as having id's square(1-18) My jquery code is: $(document).ready(function() { $("div").mouseenter(function() { $(this).animate({ height: '+=50px', width: '+=50px', fontSize: '+=100px'}); }); $("div").mouseleave(function() { $(this).animate({ height: '-=50px', width: '-=50px', fontSize: '-=100px' }); }); var num = math.floor(math.random() * 18) + 1; var n = num.toString(); var sEvent = "'" + "#" + "square" + n +"'"; $("div").click(function() { $(sEvent).toggle(400); }); }); the first 2 sections work fine but I cant get my click function to work properly. Please let me know your thoughts!
  14. Hello everyone! My name is Ron Kane and I am an accomplished web developer and technical writer having done many technical manuals, general information and "how-to"s in the Content Management field. I have significant success in utilizing the Adobe Suite and Microsoft SharePoint products with respect to creating content and following industry based style guides. My biggest success to date was working with one of my past company's Chief of Staff for a SVP in revamping their entire Intranet portal. This portal went from being unprofessional looking and having no web traffic to being very professional looking and increasing the traffic to it ten-fold. Right now, I'm reading through the HTML tutorials in preparation for my first ever HTML certification through here to gain recognition for my commitment to improving my skills and to meet with fellow web developers on here. Ask away if you have quesitons and I'm glad to be on here! Ron
  15. Hello everyone, I'm having a problem executing a function, I have now tried different methods for hours and can't understand anything anymore. Now when I execute the fuction infoApp(); in this function below, then it works. function editCat(ids){ $('.mode').hide(); $('.editmode_'+ids).show(); $('.save_category_'+ids).click(function(){ var getThisName = $('.category_'+ids).val(); infoApp('cat_edit',getThisName); }); } But when I try to execute the funtion automaticly then it does not work.Like this: var getThisName = 'test value';infoApp('cat_edit',getThisName); Here's the function function infoApp(app,usedata){ $('.infomsg').show(); if(app == "cat_edit"){ $('.infomsg').text("Information, "+ usedata +" category was saved"); } $('.infomsg').fadeOut(3600); } Hope anyone got some advice for me.Kris
  16. Hello everyone I have now worked on this trying several options for hours, I have tried tinyMCE.get('.content').getContent(); and regular jquery $('.content').val(); but it still won't work for me. I like the new look of the simple version of tinyMCE so I hope I won't have to give it up just yet! I'm retriving it for saving as: var content = $('.content').val(); I tried to retrive the data from the iframe that tinyMCE makes itself, but that would not work either.. But I might have done it wrong. Hope someone can help me out! Kris
  17. I Am Creating A iOS WebApp [ StandAlone] Which Looks Like A iOS Application The Only Difference That It Written In HtmlAnd JavascriptWhen You Go To A Website and click on add to home screen it creates an icon with the site content [webclip] i have created a website and i need help with one little detail i found that script in my site it permit all links to open in the webapp i was trying to make the links open in safari but when i manage to do that, the navigation menu doesn't work could any one help me please ?heres the code Detect if iOS WebApp Engaged and permit navigation without deploying Safari (function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone") i need to open the links in safari rather than the webapp thats it
  18. I want to create a main header where texts will bounce in, in 0.5s intervals and then at the same time it will all fade out, 1s interval again then new text will bounce in same intervals again and fade out. When it finished I want it to start from the beginning. I use animate.css, twitter-bootstrap and jquery. I have tried a few different ways, but so far I couldnt even get it to fade out after a short delay or if it fades out, it wont bounce in. http://erotikus-munka.co.uk/test/index2.html $( document ).ready(function() { $( '.main2' ).addClass( 'bt_visible animated fadeInDownBig'), $('.main2').addClass(3000, 'animated fadeOutDownBig')});$( document ).ready(function() { $( '.main2' ).addClass( 'bt_visible animated fadeInDownBig'); $( ".main2" ).toggle( "puff" ).delay(3000);});$( document ).ready(function() { $( '.main2' ).addClass( 'bt_visible animated fadeInDownBig'); $( ".main2" ).removeClass( 'bt_visible animated fadeInDownBig').delay(3000); $( '.main2' ).addClass( 'bt_visible animated fadeOutDownBig').delay(3000);});
  19. Hi All, Could you guys suggest how to call a function to resize fieldsets to equal height when the validation plugin puts an error message? I have a fancy form made of 3 fieldsets side by side, and a simple code makes their height equal. It goes like this: function eqHgt(){ var hght = 0; $('.column').each(function() { // all fieldsets have 'column' class if($(this).height() > hght) { hght = $(this).height(); } }); $('.column').height(hght);} The form is validated by the jQuery Validation plugin. The problem is that when the plugin finds some invalid fields, it puts error messages in label elements under those fields and the content of the fieldset overflows. It would make the wrapping fieldset one or more lines higher, but it can't grow because my function eariler gave a fixed height to all the 3 fieldsets. In this situation it's useless if I run the eqHgt again because it looks for the tallest element without avail. I tried to put a new line into my eqHgt function immediatelly after the 3rd line ($('.column').each...): $('.column').height('auto'); ...so in my logic it would let the fieldsets to grow to the size their content dictate and then record the new size but it doesn't work. I must say I have no idea why. Maybe the problem is that I bound eqHgt to an improper event. I tried to use #myform.change, .column.change and in invalidHandler function of validation plugin. Your help would be highly appreciated.
  20. Hallo all, I have a problem that I hope someone can help me with. I am using the Intel XDK with jQuery and Cordova. I do not unfortunately know which versions they are because I can't see it but the XDK has just update so I believe it is the newest versions whatever they are. I added a html file that I am working with at the moment to read a text file and eventually save to a database but for now to get it working I just want to place the contents in a div. I am using an input type="file" as below to select the file from the directory. <input class="wide-control" placeholder="Text File" type="file" name="txtFile" id="txtFile"> My code is in the index.html file (attached) and the input and div is in the other html file. My problem is lying where I get the file. I have put alerts before and after and I also have two versions of reading the file. the readText function is doing the jQuery.get or at the moment $.get and just absolutely nothing happens. The readFile function gives me an error: Uncaught TypeError: Cannot read property '0' of undefined index.html line 143. var Importer = { init: function() { var me = this $("#btnImport").bind("tap", function(e) { //me.readText() me.readFile() }); }, readText: function() { if (window.File && window.FileReader && window.FileList && window.Blob) { var myfile = $("#txtFile").val() var isAbs = $.mobile.path.isAbsoluteUrl(myfile); alert("Abs URL: " +isAbs); alert(myfile); $.get(myfile.file[0], function(data) { alert("$.get") //var myvar = data; //var myline = data.replace(/n/g,"<br />") //alert(myline); //$('#filecontents').html(data.replace(/n/g,'<br />')); }); } else { alert("Files are not supported"); }; }, // readtext readFile: function() { if (window.File && window.FileReader && window.FileList && window.Blob) { var fileSelected = $('#txtFile').val(); alert(fileSelected); var fileExtension = /text.*/; alert(fileExtension); var fileTobeRead = fileSelected.files[0]; if (fileTobeRead.type.match(fileExtension)) { var fileReader = new FileReader(); fileReader.onload = function (e) { var fileContents = $('#filecontents'); fileContents.innerText = fileReader.result; } fileReader.readAsText(fileTobeRead); } else { alert("Please select text file"); } } else { alert("Files are not supported"); }; } // readfile } //importer index.html
  21. In my previous question I managed to solve a way to load an external php file into my html thanks to your help. The php file loads perfectly fine as long as it follows the simple to criteria to load php after a given amount of time, which in my case is 1000 milliseconds. I wanted to know a method which loads data from the php file ONLY, and ONLY if the data in that php file has changed. My script what I managed to do after hours of research looks like follows: <script type="text/javascript">$(document).ready(function () { var auto_refresh = setInterval( function () { function testing() { var result = null; var scriptUrl = "http://localhost:8888/test-site/wp-content/my-php-files/test-check.php"; //Use this php file (NB: This file contains the same data as "test.php") as a check if data changed or not. $.ajax({ url: scriptUrl, type: 'POST', // I tried "GET" as well dataType: 'html', success: function (data) { result = data; } }); return result; } databaseData = testing(); currentData = $('#demo').html(); if (databaseData != currentData) { // I compare the values from the Ajax request and the value currently in my div to see if they are similar or not. $('#demo').fadeOut('slow', function () { // I added fadeOut and FadeIn effect for the div to load when data has changed $('#demo').load('http://localhost:8888/test-site/wp-content/my-php-files/test.php', function () { $('#demo').fadeIn('slow'); }); }); } }, 1000);});</script><div id="demo"></div> In this case scenario, the problem is that the div is loaded every second with the fadeIn and FadeOut effect although the data has not changed. Precisely, the same value appears even up to ten times with the effects even if it is the same value the whole time. It does not matter, if the value is altered or not, the div will be refreshed anyway. The php file contains some data (to pe precise prices) that are refreshed in a random amount of time (it can be 1 second, 10 seconds, 1 minute, etc; this is uncertain). Is there a way to compare the data in "test.php" and if it is not the same, upload the div with the new content? Thanks once again!! This forum always gives great support and positive feedback.
  22. i want to recreate a jquery of the home banner http://manoharart57.wix.com/purple-pr Help Appreciated!
  23. This would be quite a simple issue for someone more experienced: (I have just begun with Jquery and Javascript)I have coded a really simple HTML, CSS, Jquery animation.. The ball <div> moves from side to side (Pretty Damn COOL!) BUT... I need to try and trigger the animation with scrolling, basically creating a 'Pong' game. From one side of the scren to the other. HOW do I do this? I have been trying to find a sollution online and can't. Please help, or I will find you and kill you. <!DOCTYPE html><html> <head> <title> Pong </title> <style type="text/css"> .pong{ position: relative; border-radius:100%; top:250px; float:left; z-index: 1; width: 100px; height: 100px; transition-property: transform, -webkit-transform; transition-duration: 0.2s; transition-timing-function: ease-out; background-color:#FFF700; } #stage{ min-height:500px; min-width:500px; background-size:cover; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function () { move(); }); function move() { $(".pong").animate({ left: 900 }, { duration: 5000, complete: function () { $(".pong").animate({ left: 40 }, { duration: 5000, complete: function () { move(); } }); } }); } </script> <script type="text/javascript"> </script> </head> <body> <div class id="stage"> <div class="pong"> </div> </div> </body></html> any help would be greatly appreciated.
  24. Hello, i'm wondering how my contact form requires 2 form submits until it actually submits the data. (Fill it with fake data example blaablaa@bla.com & such on to see) Preview: http://mudsaf.info/contact.php
  25. Linked is my website that I have been working on and off for awhile. As you can see the image is not inline with the title, I realise this is probably a jquery issue that I am just not getting. Can anyone advise me on the correct tag or class I should be applying to have it inline with the title. Thank you http://mrt.guardian1.com.au:57005/test/index.php
  • Create New...