Jump to content

Search the Community

Showing results for tags 'jquery'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 72 results

  1. Why does this source file seem to cause the ajax to crash after the first call to the function? function swapContent(href, url_data, target) { $.ajax({ type: 'GET', cache: false, url: href+'?' + url_data, //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request //load more data to "target" value div target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below } }) }
  2. Hi Here is my problem https://jsfiddle.net/mphur5eq/14/ I have two tables on the left section1 on top and section2 at the bottom each section has its own button to insert row section 1 has different number of fields than that on section 2. the problem is when i clicked on New Row on section 2 it clones the row from section 1 which is wrong, it should clone the row of the section where it belongs. can you help me with this? Thank you
  3. Hello, I have a navigation bar which opens up a submenu with a mouseover event on pc and with a touch for ios. For ios devices the following code is utilized to close the menu on a touch event to the document. <script> document.onclick = mclose(); window.addEventListener('load', function (){ // on page load document.body.addEventListener('touchstart', function(e){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }, false) }, false) </script> My question is - how can I remove the above EventListener from the div displayed as the submenu so that touching within that div does not close it and the links are functional? I am guessing there is a method using preventdefault that may be applied but I am uncertain.
  4. This is jquery dialog box. http://jqueryui.com/dialog/#modal-confirmation I am wondering where would be the best place to add the dialog box div, in below html page? <html> <head> </head> <body> </body> </html>
  5. Say I have button 1 and I want to replace it with button2 on click. How would I do that? <button id="button1">butto 1</button> <button id="button2">butto 2</button>
  6. How do you solve an error where a soft refresh of data causes an accordion to fail, but on a hard refresh it works just fine? example: $(function() { $( "#accordion" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); console.log('ran'); });
  7. links in header looks like.. <link rel="icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.1.1.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.equalheights.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/tmStickUp.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/validjs.js"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link rel="stylesheet" href="css/homestyle.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/side-slider.css" rel="stylesheet" type="text/css" media="screen"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.side-slider.js"></script> if i comment the below jq library.. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> then my stuck-container works on scroll down the page.. but my "username checker" plugin does not work.. and... VICE-VERSA... Please help me to get out of this prob...
  8. Hi Peeps So basically im creating a "customer page" i have 2 tabs, 1 is customer info which is the primary and the invoicing tab I have a date picker in the invoicing tab which im hoping will populate a table below. I tried having the form post to php but this resets the page which then goes to the customer info tab so im guessing this will have to be done with jquery and ajax. could someone please point me in the right direction to do this? here is the current page for better explanation: All help is greatly appreciated in advance Mooseh
  9. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  10. Hi there, I was trying to do a live table edit for our site. Everything seemed to be going ok, till i realised that its not actually updating the database, there are no error messages, you have to refresh the page to see it hasn't worked. I'm at a loss as to why was hoping someone might be able to point me in the right direction. thanks, MsKazza tableedit.php table_edit_ajax.php
  11. I have this html to let people select how how many color div wants to have from 1-3 <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> I have this jquery to show /hide depend on the value chosen which is really just depend on value then show() /hide() the other divs which I didn't show since it's just simple something like value == 1, color1.show() color2.hide() and so on I have this function which then lets people pick the color they wanted in the selectColorBox div I know this code is duplicating but I tried a few ways and not sure how I can combine them in order to reuse most of the codes and if I have side C D E F G I wouldn't need to just copy and paste my codes var colorHolder = null; //used to store the location where color is picked <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> this is my simple div box for user to pick colors <div class="colorSelectBox"> <div>Special</div> <div> <div class="pink" value="pink"></div> <div class="black" value="black"></div> <div class="yellow" value="yellow"></div> </div> <div class="clear"></div> <div>Original</div> <div> <div class="red"></div> <div class="blue"></div> <div class="grey"></div> <div class="green"></div> <div class="white"></div> </div> </div> how can I combine those two duplicated jquery into one function that I can further use more later if needed?
  12. Hello all, I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4 <div class="messageSuccess"></div> <div class="row"> <div class="col-md-9 mb-md-0 mb-5"> <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" --> <div class="row "> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtName" name="txtName" required /> <label for="txtName">Your Name </label> <div class="nameError"></div> </div> </div> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtEmail" name="txtEmail" required /> <label id="lblEmail" for="txtEmail">Your Email Address </label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form mb-0"> <input class="form-control" type="text" id="txtSubject" name="txtSubject" data-error="Subject Here" required /> <label for="txtSubject">Subject </label> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form"> <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea> <label for="txtMessage">Your Message </label> </div> </div> </div> <div class="text-center text-md-left"> <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" /> </div> <div class="status"></div> </form> <!-- JavaScript Inner File Form Validation --> <script type="text/javascript"> $(document).ready(function () { var form = $("#contact-form"); var name = $("#txtName").val(); var email = $("#txtEmail").val(); var subject = $("#txtSubject").val(); var message = $("#txtMessage").val(); var btnSubmit = $("BtnFormSubmit"); $(form).submit(function (event) { if (this.checkValidity() == false) { $(this).addClass("was-validated"); event.preventDefault(); event.stopPropagation(); } alert("Form Valid to create message"); if (!event.isDefaultPrevented) { alert("passed prevent default"); var url = "testemail.php"; // POST values 'ajax' $.ajax({ type: "POST", url: url, data: $(this).serialize(), success: function (data) { // done: // data = JSON object object for contactEmail.php // recieve message type: success | danger var messageAlert = "alert- " + data.type; var messageText = data.message; // Bootstrap alert box HTML var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' + 'data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>'; // if messageAlert and messageText if (messageAlert && messageText) { // Put message on page in messageSuccess section. $(form).find("#messageSuccess").html(alertBox); // Reset the form. $(form)[0].reset(); } } }); //return false; } }); //$(name).blur(function () { //}) // Validate :inputs $(":input").blur(function () { let controlType = this.type; switch (controlType) { case "text": case "password": case "textarea": validateText($(this)); break; case "email": validateEmail($(this)); break; default: break; } }); // each :input focusin remove existing validation messages if any. $(":input").click(function () { $(this).removeClass("is-valid is-invalid"); }) /* OPTIONAL ':input' KEYDOWN validation messages remove */ // Reset Form and remove all validation messages. $(":reset").click(function () { $(":input").removeClass("is-valid is-invalid"); $(form).removeClass("was-validated"); }); }); // Validate Text Function function validateText(control) { let textField = control.val(); if (textField.length > 1) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } } // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/ ) function validateEmail(control) { let textField = control.val(); let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i; if (regexPattern.test(textField)) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } } </script> <?php $from = 'SampleEmail@YourEmail.com'; $sendTo = 'sample@Gmail.com'; $subject = 'Your Message Subject Here';// Email Message Contact Form Fields // Array - ($varName => Text from controls) $controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message'); $successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.'; $errorMessage = 'There was an error submitting your message, Please try again. Or try later.'; error_reporting(E_ALL & ~E_NOTICE); try { if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty'); $emailText = "You have a new message from your contact form\n------------------------------------------------------\n"; foreach($_POST as $key => $value) { if(isset($controls[$key])) { $emailText .= "$controls[$key]: $value\n"; } } $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from, 'Reply-To: ' . $from, 'Return-Path: ' . $from, ); // Send email mail($sendTo, $subject, $emailText, implode("\n", $headers)); $responseArray = array('type' => 'success', 'message' => $successMessage); } catch(\Exception $e) { $responseArray = array('type' => 'danger', 'message' => $errorMessage); } // If AJAX request return JSON response **RARE** if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encodedJSON = json_encode($responseArray); header('Content-Type: application/json'); echo $encodedJSON; } else { echo $responseArray['message']; } ?>
  13. Hello, So I have this program I'm trying to create where there are 9 articles (the html tag) and I want 3 random ones to display at any one time. When you click the link in the article, it should bring up that link in an iframe. A skip button then appears and when you click it, the iframe should disappear and three different random articles should come up. It works fine for the first time you click, but any time after that it just gets more and more messed up. If anyone can look at my code and tell me where I've gone wrong, it would be a great help. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New Path Page</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <style> article { color: white; } article a, article a:visited, article a:hover { color: white; } .offer-one, .offer-two, .offer-three, .offer-four, .offer-five, .offer-six, .offer-seven, .offer-eight, .offer-nine { height: 300px; padding-top: 18px; text-align: center; font-size: 20px; } .offer-one { background-color: #93104d; } .offer-two { background-color: #285b6c; } .offer-three { background-color: #368a2c; } .offer-four { background-color: #93104d; } .offer-five { background-color: #285b6c; } .offer-six { background-color: #368a2c; } .offer-seven { background-color: #93104d; } .offer-eight { background-color: #285b6c; } .offer-nine { background-color: #368a2c; } iframe { width: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe></iframe> <a class="skip">SKIP</a> <div class="offers"> <div class="row"> <article class="col-md-4 offer-one"> <h2>test</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-two"> <h2>test2</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-three"> <h2>tes3</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-four"> <h2>test4</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-five"> <h2>test5</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-six"> <h2>tes6</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-seven"> <h2>test7</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-eight"> <h2>test8</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-nine"> <h2>tes9</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> </div> <? // end of row ?> </div> </div> <? //end of container ?> </body> </html> and the Jquery: <script> $(window).load(function() { $('.offers article').hide(); $('iframe').hide(); $('.skip').hide(); var offers = [".offer-one",".offer-two",".offer-three",".offer-four",".offer-five",".offer-six",".offer-seven",".offer-eight",".offer-nine"]; var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); $('.offers article a').click(function(e) { e.preventDefault(); var setSRC = $(this).attr('href'); $('iframe').attr('src',setSRC); $(offerOne).fadeOut(1); $(offerTwo).delay(200).fadeOut(1); $(offerThree).delay(400).fadeOut(1, function() { $('iframe').fadeIn(1, function() { $('.skip').show(); }); }); }); $('.skip').click(function(e) { e.preventDefault(); $('.offers article').hide(); $('.skip').hide(); $('iframe').fadeOut(1); $('iframe').hide(); var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); }); }); </script>
  14. hi mate its me again asking questions on jquery clone. As solved before, i have a form that contains rows that is being cloned. (works perfect). Make a Copy of that form to the right side (Works great) here is my problem, when i make a copy of that form to the right the click event is lost on the New Row button to the form on the right. can you help me with this? Here is a working jsfiddle: https://jsfiddle.net/mphur5eq/5/
  15. I'm using a plugin to include a photo gallery on a wordpress site. At the bottom of the page in the footer I include <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> just like the samples I look at do it here http://getbootstrap.com/getting-started/#examples The problem is that the plugin doesn't work when I include jquery. I posted the probelm here https://wordpress.org/support/topic/huge-it-doesnt-work-with-google-ajax-jquery And the reply was jQuery should not be called this way? That's the way the samples do it You try to call jQuery in no standard way? It's the same in every footer Sooo, how do you call jquery and what is the standard way? Thanks in advance
  16. I've wrote code for sending array to another php file with mysql, everything works, but but i can't add CHANGE function to my code, to make code react on changes (checked/uchecked checkbox) <div id="checkboxes"> <input id="chkbx_0" type="checkbox" name="first" checked="checked" />Option 1 <input id="chkbx_1" type="checkbox" name=second" />Option 2 <input id="chkbx_2" type="checkbox" name="third" />Option 3 <input id="chkbx_3" type="checkbox" name="fourth" checked="checked" />Option 4 </div> <script> $(document).ready(function () { // var name = []; $('#checkboxes input:checked').each(function() { name.push($(this).attr('name')); }).get(); // $.post('load.php', {name:name[1]}, function(data){ $('#name-data').html(data); }); // }); </script>
  17. I have this jquery code below. It basically shows a new div when mouse hover over another div. It works. But I noticed that on page load, it sometimes shows 1 or 2 products already hovered and showing the ".show-details" content. This doesn't happen on every page and sometimes it's only 1 product and sometimes it's 2 products. And they vary in the positions on a page. Do you know why it's doing that and how to fix it? By the way, I have ".show-details" set to display: none by default in the CSS file. <script> $(document).ready(function() { $(".product-small").hover(function() { $(this).find('.show-details').fadeIn("fast").css({ display: 'block'}); }, function(){ $(this).find('.show-details').fadeOut("fast").css({ display: 'block'}); }); }); </script>
  18. loading image during ajax process not working properly: my code smthing like this... div to show content and loading image- <div id="adS" style="float: left; width: 70%"> <div id="loading-image" style="background-image: url('images/processing.gif'); display: none;"> </div> </div> jquery code- $(function() { $("#lets_search").bind('submit',function() { var gen = $("input[name='radGen']:checked").val(); var mt = $('#selMtQ').val(); var agf = $('#agf').val(); var agt = $('#agt').val(); var rel = $('#religQ').val(); var cast = $('#selCstQ').val(); $('#loading-image').show(); $.post('adSearch.php',{gen:gen,mt:mt,agf:agf,agt:agt,rel:rel,cast:cast}, function(data){ $("#adS").html(data); $('#loading-image').hide(); }); return false; }); }); The loading image show only one time on click event.. not every time when i click search li... Need help...
  19. hi guys im trying to hide a specific class selector in jquery. where the id and the type attributes are generated dynamically. but dont know how to select and hide it so, as to do a ajax call. can anyone help. here is the code for the jquery: $(".hidden_text_area").click(function(){ $(".hidden_edit_4_session").show(); var hide_status=$(".statusboxes").attr('type'); $(hide_status).find(".statusboxes").hide(); }); and here is the code where the type attribute is which i want to select and hide if the user clicks edit button. $status_list='<fieldset><div class="jumbotron"><div id="'.$updateid.'" type="'.$updateid.'" class="statusboxes">' . '<h3 style="text-align:left; color:black;" class="pull-left">'.$title.'</h3>' . '<span class="pull-right">' . '<div class="dropdown">' . '<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" >' . '<span class="glyphicon glyphicon-edit"></span></button>' . '<ul class="dropdown-menu">' . '<li><a href="#" class="hidden_text_area glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li>'.$statusdeletebutton.'</ul></div></span><br><hr><span class="pull-left"style="font-size:14px; text-align:left; color:black;"><legend>' . $data.'</legend></span><br><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u='.$author.'">'.$author. '</a> '.$post_date.'</small></b>' . '<br>'.$status_replies . '</div></div>'.$statusui_edit ;
  20. Guys i'm trying to create a infinite scroll feature for a project of mine and i couldn't make it work in the infinite scroll fashion any inputs would be appreciated. Jquery code: $(document).ready(function(){ var load=0; var sess_uname="<?php echo $session_uname;?>"; var f_uname="<?php echo $f_uname;?>"; var sess_count="<?php echo $total_sess_count;?>"; var f_count="<?php echo $total_friend_count;?>"; if(sess_uname==f_uname){ $(window).scroll(function(){ if($(window).scrollTop()==$(document).height()-$(window).height()){ load++; alert('hai1'); if(load *5 >sess_count){ $(".message").text("no more posts to show"); }else{ $.post("st&com.php", {load:load},function(data){ // $(".status_area").append(data); alert('hai'); }); } } }); } }); here is the php code: $load= (int)($_POST['load'])*2; $sess_id=(int)$_SESSION['id']; $friends = array(); $stmt= $conn->prepare("select friend_one, friend_two from friends where (friend_one=:session OR friend_two=:session) and accepted='1'"); $stmt->bindparam(":session",$_SESSION['uname']); $stmt->execute(); $fetch=$stmt->fetchAll(); $count=count($fetch); if($count==0){ $totalids=$project->totalUpdates1($sess_id,$load); here is the class: public function totalUpdates1($id, $load) { $sql2="SELECT * FROM updates WHERE user_id_u=:id order by time desc limit $load,5"; $stmth= $this->_db->prepare($sql2);//Check here syntax of $db $stmth->bindValue(":id",$id); //$stmth->bindValue(":load",$load); $stmth->execute(); return $stmth->fetchAll(); }
  21. http://www.tirerack.com/content/tirerack/desktop/en/wheels.html See the window where it says "Shop by Vehicle"? Is there a script already out there that does the dropdown search by make/model/year? I am only looking for the front-end code; javascript/jquery code in particular.
  22. Hi, I am struggling to get a htmnl 5 canavas not to work after the back button is pressed in the browser. I have stopped back button being allowed but it stops me using javascript to use go back which i need. The code is as follows. <?php require('globals.php'); if ($ir['wof_spins'] > 0) { error("You have span the wheel this hour"); //this does not work on page back } ?> <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script> <script type='text/javascript' src="js/jquery.transit.min.js"></script> <style type='text/css'> .wheel-wrap { position: relative; width: 550px; height: 550px; overflow: hidden; margin: 0 auto; z-index: 1; } .marker { top: 10px; left: 247px; z-index: 1; position: absolute; } .wheel { top: 90px; left: 74px; width: 550px; z-index: 1; } </style> <script type='text/javascript'>//<![CDATA[ $(function(){ window.WHEELOFFORTUNE = { cache: {}, init: function () { console.log('controller init...'); var _this = this; this.cache.wheel = $('.wheel'); this.cache.wheelMarker = $('.marker'); this.cache.wheelSpinBtn = $('.wheel'); //mapping is backwards as wheel spins clockwise //1=win this.cache.wheelMapping = [400, 120, 80, 750, 150, 300, 60, 175, 500, 125, 75, 1000, 120, 200, 90, 600, 100, 250].reverse(); this.cache.wheelSpinBtn.on('click touchstart', function (e) { e.preventDefault(); if (!$(this).hasClass('disabled')) _this.spin(); }); //reset wheel this.resetSpin(); //setup prize events this.prizeEvents(); }, spin: function () { console.log('spinning wheel'); var _this = this; // reset wheel this.resetSpin(); //disable spin button while in progress this.cache.wheelSpinBtn.addClass('disabled'); /* Wheel has 10 sections. Each section is 360/10 = 36deg. */ var deg = 1500 + Math.round(Math.random() * 1500), duration = 6000; //optimal 6 secs _this.cache.wheelPos = deg; //transition queuing //ff bug with easeOutBack this.cache.wheel.transition({ rotate: '0deg' }, 0) .transition({ rotate: deg + 'deg' }, duration, 'easeOutCubic'); //move marker _this.cache.wheelMarker.transition({ rotate: '-20deg' }, 0, 'snap'); //just before wheel finish setTimeout(function () { //reset marker _this.cache.wheelMarker.transition({ rotate: '0deg' }, 300, 'easeOutQuad'); }, duration - 500); //wheel finish setTimeout(function () { // did it win??!?!?! var spin = _this.cache.wheelPos, degrees = spin % 360, percent = (degrees / 360) * 100, segment = Math.ceil((percent / 6)), //divided by number of segments win = _this.cache.wheelMapping[segment - 1]; //zero based array console.log('spin = ' + spin); console.log('degrees = ' + degrees); console.log('percent = ' + percent); console.log('segment = ' + segment); console.log('win = ' + win); //display dialog with slight delay to realise win or not. setTimeout(function () { $.ajax({ url: 'spinwheel.php', type: 'post', data: {"win":win}, success: function(data) { if(!alert('You have won 짜'+win)) document.location = 'http://samuraiassault.com/loggedin.php'; } }); }, 700); //re-enable wheel spin _this.cache.wheelSpinBtn.removeClass('disabled'); }, duration); }, resetSpin: function () { this.cache.wheel.transition({ rotate: '0deg' }, 0); this.cache.wheelPos = 0; } } window.WHEELOFFORTUNE.init(); });//]]> </script> </head> <body> <!-- By http://jquery4u.com / Sam Deering --> <h3><u>Wheel Of Fortune</u></h3><hr/> <table><tr> <td class="contentcontent" width="100%"> <div class="wheel-wrap"> <img class="wheel" src="images/wheel.jpg" /> <img class="marker" src="images/marker.png" /> </div> </tr> </td> </table><hr/><?php echo $goback; ?><hr/> </body> </html> thanks for you help in advance
  23. I took on the daunting task of reducing the size of a Magento site. Beast that. At any rate, I have 3 different jQuery libraries loading. 1.10.1, 1.11.1, and 2.1.3. Then 2 different migrates which I would think would fix migration issues if I removed the two older versions. But just removing 1.11.1 gives me the error of 'jQuery is not a function, jQuery is not defined.' many times. Understanding no conflict is being used which should kill $ but not jQuery? What is the easiest way for me to migrate to using solely 2.1.3 and killing off the other two libraries? Perhaps a change log to see what has been removed since 1.10.1 and 1.11.1? I'd appreciate any advice on this one as I'm a php developer and write in jQuery but it is not my forte. Thanks
  24. I am having a bit of an issue with ob_flush in particular. What's happening is I am using jquery UI to create a tabbed div. With in one of the DIV's I print out the live output on an apache ant command using ob_flush, however that also seems to flush jquery as well which breaks all of my formating. Once the ant command is complete, the formatting returns to normal. Does any one know any way around this issue? I am assuming that jquery is being flushed as well. Here is the page I am running, the live output of ant is displaying like I would like but like I said the formatting get's flushed <html> <head> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="scripts/jquery-ui.min.js"></script> <script src="scripts/jquery-ui.js"></script> <script language="javascript"> function clearform() { document.getElementById("json").value=""; } </script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <title>Add Manual Event Data</title> <?php if (empty($_POST["comment"])) { $comment = ""; } else { $cleaned = test_input($_POST["comment"]); $comment = ($_POST["comment"]); } function test_input($data) { $data = trim($data); $data = addslashes($data); return $data; } ?> </head> <body> <div id="tabs" class="body-check"> <ul> <li><a href="#tabs-1">Event By String</a></li> <li><a href="#tabs-2">Add Event Form</a></li> </ul> <div id="tabs-1"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <center><h1>Add Event Data:</h1></center> <p> <textarea id="json" name="comment"><?php echo $comment;?></textarea> </p> <input type="submit" name="submit" value="Submit"> </form> <?php if (isset($cleaned)){ echo '<div id="ant">'; $json_arg = escapeshellarg($cleaned); $proc = popen("sudo /var/www/html/scripts/set_vars.sh $json_arg 2>&1", 'r'); echo '<pre>'; while (!feof($proc)){ echo fread($proc, 1024); @ob_flush(); @flush(); } echo '</pre>'; echo '</div>'; echo '<script>'; echo 'setTimeout( function ( ) { alert( "Event Added!" ); }, 2000 );'; echo 'clearform();'; echo '</script>'; } ?> </div> <div id="tabs-2"> <h1>Hello!</h2> </div> </div> </body> </html>
  25. I am using jcrop to crop images. **This is the form that i upload the image and crop.** <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"> <!-- hidden crop params --> <input type="hidden" id="x1" name="x1" /> <input type="hidden" id="y1" name="y1" /> <input type="hidden" id="x2" name="x2" /> <input type="hidden" id="y2" name="y2" /> <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> <div class="error"></div> <div class="step2"> <h2>Step2: Please select a crop region</h2> <img id="preview" /> <div class="info"> <label>File size</label> <input type="text" id="filesize" name="filesize" /> <label>Type</label> <input type="text" id="filetype" name="filetype" /> <label>Image dimension</label> <input type="text" id="filedim" name="filedim" /> <label>W</label> <input type="text" id="w" name="w" /> <label>H</label> <input type="text" id="h" name="h" /> </div> <input type="submit" value="Upload" /> </div> </form> **upload.php file which upload cropped image to *avatar* directory.** <?php function uploadImageFile() { // Note: GD library is required for this function if ($_SERVER['REQUEST_METHOD'] == 'POST') { $iWidth = $iHeight = 200; // desired image result dimensions $iJpgQuality = 90; if ($_FILES) { // if no errors and size less than 250kb if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 250 * 1024) { if (is_uploaded_file($_FILES['image_file']['tmp_name'])) { // new unique filename $sTempFileName = 'avatar/' . md5(time().rand()); // move uploaded file into cache folder move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName); // change file permission to 644 @chmod($sTempFileName, 0644); if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) { $aSize = getimagesize($sTempFileName); // try to obtain image info if (!$aSize) { @unlink($sTempFileName); return; } // check for image type switch($aSize[2]) { case IMAGETYPE_JPEG: $sExt = '.jpg'; // create a new image from file $vImg = @imagecreatefromjpeg($sTempFileName); break; /*case IMAGETYPE_GIF: $sExt = '.gif'; // create a new image from file $vImg = @imagecreatefromgif($sTempFileName); break;*/ case IMAGETYPE_PNG: $sExt = '.png'; // create a new image from file $vImg = @imagecreatefrompng($sTempFileName); break; default: @unlink($sTempFileName); return; } // create a new true color image $vDstImg = @imagecreatetruecolor( $iWidth, $iHeight ); // copy and resize part of an image with resampling imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']); // define a result image filename $sResultFileName = $sTempFileName . $sExt; // output image to file imagejpeg($vDstImg, $sResultFileName, $iJpgQuality); @unlink($sTempFileName); return $sResultFileName; } } } } } } $sImage = uploadImageFile(); echo '<img src="'.$sImage.'" />'; ?> My Question: Right now it just upload the cropped image in avatar directory with width and height of 200px. I want to also upload that cropped image in to two other directories 1. avatar1 with width and height of 500px 2. avatar2 with width and height of 700px Any help will be appreciated.
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.