Search the Community

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?

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

I've written a script to store images in my database. The images have a caption that is also uploaded and stored. This was fairly easy to get working. I have a jquery function setup to add a new file input and caption input every time I click a button. This also works. What is not working is my PHP is not uploading multiple files for some reason. Could someone tell me what I have done wrong? Thanks HTML: <form id="uploadMultiple" method="post" action="/scripts/php/imageUploadTest" enctype="multipart/form-data"> <table class="fileUploadTable" id="uploadArea" cellspacing="0"> <tr> <td> <label for="imageFile">Image:</label> <input type="file" name="imageFile" accept=".jpg,.jpeg,.png,.gif"> </td> <td> <label for="imageCaption">Image Caption:</label> <input type="text" name="imageCaption"> </td> <td width="150px"> </td> </tr> <tr id="uploadSubmission"> <td> <input type="submit" value="Upload More" id="uploadMore"> </td> <td> <input type="submit" value="Submit" name="addImage"> </td> <td width="150px"> </td> </tr> </table> </form> JQuery for adding new elements: $(function() { var scntDiv = $('#uploadArea'); var i = $('#p_scents tr td').size() + 1; $('#uploadMore').live('click', function() { $('<tr><td><label for="imageFile">Image:</label> <input type="file" name="imageFile" accept=".jpg,.jpeg,.png,.gif"></td><td><label for="imageCaption">Image Caption:</label> <input type="text" name="imageCaption"></td><td><a href="#" class="removeUpload" width="150px" style="text-align: center">Remove</a></td></tr>').insertBefore( $('#uploadSubmission') ); i++; return false; }); $('.removeUpload').live('click', function() { if( i > 1 ) { $(this).parents('tr').remove(); i--; } return false; }); }); And finally the PHP: require($_SERVER['DOCUMENT_ROOT'].'/settings/globalVariables.php'); require($_SERVER['DOCUMENT_ROOT'].'/settings/mysqli_connect.php'); $db_name = 'imageUploads'; $tbl_name = 'gallery'; if(!$conn) { die('Could not connect: ' . mysqli_error()); } mysqli_select_db($conn, "$db_name")or die("cannot select DB"); foreach($_FILES['imageFile'] as $file){ $caption = $_POST['imageCaption']; $uploadDir = 'http://www.example.com/images/'.'gallery/'; $fileName = $_FILES['imageFile']['name']; $filePath = $uploadDir . $fileName; if(move_uploaded_file($_FILES["imageFile"]["tmp_name"],$_SERVER['DOCUMENT_ROOT']."/images/gallery/".$_FILES["imageFile"]["name"])) { $query_image = "INSERT INTO $tbl_name(filename,path,caption) VALUES ('$fileName','$uploadDir','$caption')"; if(mysqli_query($conn, $query_image)) { echo "Stored in: " . "gallery/" . $_FILES["imageFile"]["name"]; } else { echo 'File name not stored in database'; } } } I was hoping I had it working properly for multiple images with my `foreach` loop but it only uploads one image even if I have 4 selected. EDIT: I've tried modifying my code to this and it's not working either but looking at tutorials this seems to be more on the right track than my previous code: r equire($_SERVER['DOCUMENT_ROOT'].'/settings/globalVariables.php'); require($_SERVER['DOCUMENT_ROOT'].'/settings/mysqli_connect.php'); $db_name = 'imageUploads'; $tbl_name = 'gallery'; if(!$conn) { die('Could not connect: ' . mysqli_error()); } mysqli_select_db($conn, "$db_name")or die("cannot select DB"); foreach($_FILES['imageFile'] as $key => $name){ $caption = $_POST['imageCaption']; $uploadDir = 'http://www.example.com/images/'.'gallery/'; $fileName = $key.$_FILES['imageFile']['name'][$key]; $file_size = $_FILES['files']['size'][$key]; $file_tmp = $_FILES['files']['tmp_name'][$key]; $file_type= $_FILES['files']['type'][$key]; $filePath = $uploadDir . $fileName; if(move_uploaded_file($file_tmp,$_SERVER['DOCUMENT_ROOT']."/images/gallery/".$fileName)) { $query_image = "INSERT INTO $tbl_name(filename,path,caption) VALUES ('$fileName','$uploadDir','$caption')"; if(mysqli_query($conn, $query_image)) { echo "Stored in: " . "gallery/" . $_FILES["imageFile"]["name"]; } else { echo 'File name not stored in database'; } } } I've also added `[]` in the names of the HTML input elements that needed them.

I'm struggling to produce results to the screen from the following code: HTML: <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="../scripts/autocomplete.js"></script> <div> <input type='text' class='search_input' name='search' id='search' placeholder='search' autofocus onkeypress='search_func("http://webfarm.io/subs/homefront/list_articles.php" , "search_output")'> <div id='search_output' class='search_output'></div> </div> Javascript: function search_func( href , target){ var search = $("#search").val(); search = $.trim(search); if(search){ $.ajax({ method: "POST", url: href , data: { search: search } }) .done(function( msg ) { target.innerHTML = msg; // 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; console.log(msg); }); } else { target.innerHTML = ''; } } What am I doing wrong? Why won't it produce the desired results? Sorry if I'm looking like a help vamp, but I'm not trying to be.

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'); });

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 } }) }

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

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.

I want to be able to check whether values exist in the php array without having to click the submit button to do those checks using jquery/ajax. when users enter an abbreviation in the text field want to be able to show that the brand exists (either vw or tyta) or not (as they type in the input box) and show the results in the carnamestatus div. I was following a tutorial from youtube, however it queried against a mysql database. I was wondering if this is possible using php arrays instead of mysql? I would be grateful if you could pick any faults in the code. The jquery is in the head section. the rest of the code is as follows: <?php $car = array() $car["vw"] = array( "name" => "volkswagen"); $car["tyta"] = array( "name => "toyota"); ?> the html code is as follows: <label for="carname">Car Code:</label> <input type="text" onblur="checkcar()" value="" id="carname" /> <div id="carnamestatus"></div> the checkcar() function checkcar(){ var u = _("carname").value; if(u != ""){ _("carname").innerHTML = 'checking ...'; var B = new XMLHttpRequest(); B.open("POST","check.php",true); / B.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); B.onreadystatechange = function() { if(B.readyState==4 && B.status== 200) { _("carnamestatus").innerHTML = B.responseText; } } var v = "carnamecheck="+u; B.send(v); } } </script>

I am trying to coonect my jquery price slider to my database in order to search for recipes depending on the price. I have written the code below but I am not sure were i am going wrong. Could anyone help? <!--Javascript code for jquery price range slider--> <script type="text/javascript"> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 10, values: [ <?php echo $min?>,<?php echo $max?> ], // This line could be the issue? slide: function( event, ui ) { $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> <!--php code to connect to jquery price slider--> <?php require_once './config.php'; include './header.php'; include('database.php'); if($_POST && isset($_POST['amount'])){ $values = $_POST['amount']; $values = str_replace(array(' ', '£'), '', $_POST['amount']); list($min, $max) = explode('-', $values); $sql = "SELECT `recipe_name`, `recipe_price`, `Image` FROM `recipe` WHERE `recipe_price` BETWEEN :min AND :max"; $stmt = $DB->prepare($sql); $stmt->execute(array(':min' => $min, ':max' => $max)); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); if (count($rows) > 0) { foreach ($rows as $row) { // do loop stuff } } else { $min = 0; $max = 10; $HTML = ''; } } ?> <!--HTML code for price slider --> <form action="" method="post" id="recipe"> <div style="margin-left:20px"> <label for="amount">Price range:</label> <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly> <br><br> <div id="slider-range" style="width:50%;"></div> <br><br> <input type="submit" value="Find" /> <br><br> <?php echo $HTML?> </div> </form> <!-- connnect to Database - PDO connection--> <?php error_reporting(E_ALL & ~E_DEPRECATED & ~E_NOTICE); ob_start(); define('DB_DRIVER', 'mysql'); define('DB_SERVER', 'localhost'); define('DB_SERVER_USERNAME', 'xxxxx'); define('DB_SERVER_PASSWORD', 'xxxx'); define('DB_DATABASE', 'xxxxx'); define('PROJECT_NAME', 'BudGet Recipes'); $dboptions = array( PDO::ATTR_PERSISTENT => FALSE, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8', ); try { $DB = new PDO(DB_DRIVER . ':host=' . DB_SERVER . ';dbname=' . DB_DATABASE, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, $dboptions); } catch (Exception $ex) { echo $ex->getMessage(); die; } ?>

Great site!, Im trying to understand a bit more pdo.. I have the following: I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below: <script> function fill_contact(evt) //display click event { var country_id = evt.target.id document.getElementById('country_name').firstChild.data = country_id } </script> My php code is as follows: <?php //Define constants define('DB_DRIVER', "mysql"); define('DB_SERVER', "127.0.0.1"); define('DB_DATABASE', "aeea"); define('DB_USER', "root"); define('DB_PASSWORD', "root"); //Database connection try { $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e){ die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage()); } //Get data $query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?"; $country = 'country_name'; //Create the statement $stmt = $dbh->prepare($query); $stmt->execute(array($country)); //Use data $row = $stmt->fetch(PDO::FETCH_ASSOC); echo '<pre>', print_r($row), '</pre>'; ?> My Html code is as follows: <div id="IndexPage"> <div id="IndexPage_Left"> <div id="IndexPage_Left_top"> <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine--> <p></p> <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display--> <p></p> <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display--> <p></p> <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden--> </div> <div id="IndexPage_Left_bottom"> <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database --> </div> </div> <div id="IndexPage_Right"> <svg id="map" version="1.1" and rest of svg code. My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc. I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details. How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it. Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct? Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form? This is my first website. Please help

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.

Hi, I have the following setup: A main-page.php that is consisted of: 1) A header 2) A nav bar 3) Content (is loaded inside a <div id="dynamic-content"></div>) 4) Footer Inside the nav bar you find several options (ex. About Us, Contact Us, etc..). Lets say that the script responsible for "About Us" is called about-us.php. What i want to achieve is to load the output of about-us.php page inside the content area (aka the dynamic-content div), as soon as i press the "About Us" button (#about-us div). In order to achieve this i use the following AJAX call: $("#about-us").on('click', function(){ $.ajax({ url: "about-us.php", success: function(output){ $("#dynamic-content").html(output); } }); }); Both main-page.php and about-us.php include their own CSS and JavaScript files: main-page.js and main-page.css included in main-page.php about-us.js and about-us.css included in about-us.php THE PROBLEM I FACE: Initially the tabs inside nav bar (About us, Contact Us, etc) were stand alone pages, meaning when you clicked on the link it redirected you to a new URL (for example http://www.domain.com/about-us.php). In this case about-us.php was consisted of a head where all CSS was included, a body where all JS was included, In other words it was a complete HTML/PHP page. The page was working properly. When i tried to load this page into a div inside main-page.php, i started facing some problems. Sometimes CSS was overwritten by the CSS of Contact Us causing problems (at this point i have to mention that since about-us.php and contact-us.php were stand alone pages, sometimes we used the same classes/ids to target DOM elements). Problems started to happen with JS as well. THE QUESTION: What is the correct way to use CSS and Javascript files of about-us.php? Should i include them inside the about-us.php script or include them inside the main-page.php? Do i have to create one big CSS and one big JS file that will include all previously created CSS and JS that will target each element of each imported page? Is there another way? Thanks in advance.

Hi.. I really need help. I'm completely stuck and waaaay out of my depth here. I don't even know where to begin. I am desperate to learn how to use existing API services - but I find the whole concept completely overwhelming. I can't even get something from a Google search because everything on this subject just goes over my head. I have created an account with tvrage.com and got an API key. With that, I can get a list, in XML, of all the current TV shows in the UK and the US. It starts like this; <currentshows> <country name="US"> <show> <showid>69</showid> <showname>Who Wants to Be a Millionaire (US)</showname> <showlink>http://tvrage.com/Who_Wants_to_Be_a_Millionaire_US</showlink> </show> <show> <showid>237</showid> <showname>Jack Van Impe</showname> <showlink>http://tvrage.com/jack-van-impe</showlink> </show> <show> <showid>286</showid> <showname>Figure It Out</showname> <showlink>http://tvrage.com/figure-it-out</showlink> </show> <show> <showid>548</showid> <showname>TNA Pay-Per-View</showname> <showlink>http://tvrage.com/TNA_Pay-Per-View</showlink> </show> <show> <showid>576</showid> <showname>WWE After Burn</showname> <showlink>http://tvrage.com/wwe-after-burn</showlink> </show> All I want, is to list this out on MY website... I am a complete beginner. I imagine I have to copy and paste the URL in to my code, right? A javascript link? But then, what after that? I have barely touched javascript or jquery as a developer. Can someone just give me some guidance on this please? It's really starting to stress me out :-(

hello, i'm facing this problem. i have a main page with the definition of tab. each tab is a different page called by ajax when selected. in some tabs i'd like to add datepickers but i'm having trouble. when i load the tab the datepicker does not work. do you have any suggestion or a better way to do this? thanks here's the code i'm using main.php <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script src="../lib/datepicker-it.js"></script> <script type="text/javascript" src="../lib/rollover.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../css/jqueryobject.css" /> <script> $(document).ready(function() { $( "#tabs" ).tabs({ }); }); </script> </head> <body> <?php include ("../top.php"); ?> <br /> <fieldset><legend>Ricerche</legend> <div id="tabs"> <ul> <li><a href="tab1.php">Tab1</a></li> <li><a href="tab2.php">Tab2</a></li> <li><a href="tab3.php">Tab3</a></li> </ul> </div> </fieldset> </body> </html> tab1.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $.datepicker.setDefaults( $.datepicker.regional[ "it" ] ); $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", beforeShowDay: highlightOddsEven, showOtherMonths: true, selectOtherMonths: true }); function highlightOddsEven(date) { //return [true, date.getDate() % 2 == 1 ? 'odd' : '']; return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven']; } </script> <div id="termConsegna" name="termConsegna"> <fieldset><legend>Termini Consegna</legend> <form class="cmxform" name="form_termine" id="form_termine" method="post" action="tab1.php"> <input type="hidden" id="submit" name="submit" value="1"> <table id="tab_termine" class="css-table"> <?php $i=1; while($sql->fetch()){ echo "<tr> <td>da <input type=\"text\" name=\"data_da$i\" id=\"data_da$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($da)."\"></td> <td> a <input type=\"text\" name=\"data_a$i\" id=\"data_a$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($a)."\"></td> <td><input type=\"text\" name=\"data_termine$i\" id=\"data_termine$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($termine)."\"></td> </tr>"; $i++; } ?> <input type="hidden" name="num_termini" id="num_termini" value="<?php echo $i; ?>"> <tr><td colspan="3"><input type="submit" value="Salva"></td></tr> </table> </form> </fieldset> </div> tab2.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script> $(document).ready(function() { $.datepicker.setDefaults( $.datepicker.regional[ "it" ] ); $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", beforeShowDay: highlightOddsEven, showOtherMonths: true, selectOtherMonths: true }); function highlightOddsEven(date) { //return [true, date.getDate() % 2 == 1 ? 'odd' : '']; return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven']; } </script> <div id="ricAvanz" name="ricAvanz"> <fieldset><legend>Ricerca Avanzata</legend> <form class="cmxform" id="form_ricerca" name="form_ricerca" action="ricerca.php" method="post"> <input type="hidden" id="ricerca" name="ricerca" value="1"> <p><label>Data1: </label>da:<input type="text" name="da_comparizione" id="da_comparizione" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['da_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>><label> </label>a:<input type="text" name="a_comparizione" id="a_comparizione" value="<?php if(isset($_POST['ricerca'])) echo $_POST['a_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php if(isset($_POST['ricerca'])) echo $dateValidation; ?>></p> <p><label>Data2: </label><input type="text" name="asta_si" id="asta_si" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_si']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data3: </label><input type="text" name="asta_ci" id="asta_ci" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_ci']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data4: </label><input type="text" name="sloggio_pa" id="sloggio_pa" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['sloggio_pa']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><input type="submit" value="Cerca"></p> </form> <fieldset> <?php echo $fieldset; while (isset($_POST['ricerca']) and $ricerca->fetch()) echo "<p><a href=\"../esecuzioni/panel_generale.php\">.......</a></p>"; ?> </fieldset> </div>

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>

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.

I have done this a while back but lost the code. It worked back then. I am trying to recreate it but my memory isn't perfect. It's basically a follow/unfollow button like twitter. This is the main reference. http://jsfiddle.net/jakie8/ZECEN/ The php/mysql action queries do work if I call it through normal a href link; but for some reason, it's not being called through ajax. The jquery/ajax set variables do show up correctly when I test an alert with them inside. So that works too. I could really use fresh pair of eyes to see what I might have done wrong. Here is the index.php page. <html> <head> <script src="js/jquery-1.11.0.min.js"></script> <script> $(function() { $(document).on('click','.followButton',function(e) { e.preventDefault(); $button = $(this); if($button.hasClass('following')){ //$.ajax(); Do Unfollow var unfollow = $(this).attr('rel'); var follower = $("#follower-id").val(); $.ajax({ type: "POST", url: "actions.php", data: "unfollow="+unfollow+"follower="+follower+"&action=unfollow", success:function(data){ $button.removeClass('following'); $button.removeClass('unfollow'); $button.text('+ Follow'); } }); } else { // $.ajax(); Do Follow var following = $(this).attr('rel'); var follower = $("#follower-id").val(); $.ajax({ type: "POST", url: "actions.php", data: "following="+following+"follower="+follower+"&action=follow", success:function(data){ $button.addClass('following'); $button.text('Following'); } }); // return false; } }); $('button.followButton').hover(function(){ $button = $(this); if($button.hasClass('following')){ $button.addClass('unfollow'); $button.text('Unfollow'); } }, function(){ if($button.hasClass('following')){ $button.removeClass('unfollow'); $button.text('Following'); } }); }); </script> </head> <body> <div class="container"> <input type="hidden" id="follower-id" value="<?php echo $follower_userid; ?>"> <button class="btn followButton following" rel="<?php echo $following_userid; ?>">+ Follow</button> </div> </body> </html> And here is actions.php page. require_once 'core/init.php'; if($action == "follow") { $following = $_POST['following']; $follower = $_POST['follower']; $date = date('Y-m-d H:i:s'); $follow = $db->prepare("INSERT INTO followers(following_id, follower_id, date, active) VALUES(:following_id, :follower_id, :date, :active)"); $follow->bindParam(':following_id', $following); $follow->bindParam(':follower_id', $follower); $follow->bindParam(':date', $date); $follow->bindValue(':active', 1); $follow->execute(); } else if($action == "unfollow") { $unfollow = $_POST['unfollow']; $follower = $_POST['follower']; $date = date('Y-m-d H:i:s'); $unfollow = $db->prepare("UPDATE followers SET date = :date, active = :active WHERE following_id = :following_id AND follower_id = :follower_id"); $unfollow->bindParam(':following_id', $unfollow); $unfollow->bindParam(':follower_id', $follower); $unfollow->bindParam(':date', $date); $unfollow->bindValue(':active', 0); $unfollow->execute(); } else { // echo 'no action'; }

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>

This twitter style button I found. http://jsfiddle.net/jakie8/ZECEN/ I have managed to modify it to my liking. And yes I know the ".live" is depreciated and instead use "on". Anyways, the only thing I noticed is that if I click "Follow" button and it turns green; once I refresh the page, it goes back to default "follow" mode. I was wondering how can I keep it green even if I refresh the page?

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

Quick question that I have not been able to find on the internet. Go figure. Can you apply the jQuery :eq(index) to a selection menu? I use it for list items but have been unsuccessful at using it for a selection menu. Probably because they aren't an ordered list? So I've probably answered my own question there. What could I use in it's place for a selection menu? I'm indexing the actual line item referenced to know what to load thusly... $('.tab-content div.tab:eq(' + $('#tab-menu > li').index(this) + ')').slideDown('slow'); Really need to do the same thing with a selection menu but google has not helped me out so far.

Need little help with the quiz problem. I want to set time limit for each question in quiz module (say 30 seconds) and after that time, the form will auto submit the question (auto submit = no option selected = unanswered). There are 3 questions, so total time limit is 90 sec (30 sec each). I'm doing this via XAMPP. The link below provide the work so far https://www.dropbox.com/s/4dzlgjtjzvs48vw/quiz.rar?dl=0 Thanks

Hi, I have a PHP script sendEmail.php that given some data (receiver, content, etc), sends an email to the receiver. When i click the Send button i fire the sendEmail.php script using AJAX: $('#sendbutton').on('click', function(){ $.ajax({ type: "POST", url: "js/ajax/sendEmail.php", data: {receiver:receiver, content: content} }); }); I want to add a feature call "Schedule send" where the user can select in how many minutes the email will be send. What i did, was to take the minutes value, insert it into a countDown timer, and as soon as the time is Zero, to fire the same AJAX call. This is working only if the browser is open. And i can understand this, since it is Javascript's responsibility to fire the AJAX call since its the one on client site. QUESTION: Is there a way to fire this sendEmail.php scipt even if the web browser is closed?Using PHP/MYSQL of course.. For example the user will select the recipient, write the email, schedule it to be sent 20 minutes later, and close the browser. If not, what are your suggestions? Thanks in advance, Christos

I am trying to create a dynamic form using Jquery but don't know how to post those data using $_POST. The page <html> <head> <title> Dynamically create input fields- jQuery </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { var addDiv = $('#addinput'); var i = $('#addinput p').size() + 1; $('#addNew').live('click', function() { $('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2' + i +'" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv); i++; return false; }); $('#remNew').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); </script> </head> <body> <h2>Dynammically Add Another Input Box</h2> <form action="gen.php" method="post"> <div id="addinput"> <p> <input type="text" id="p_new" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new2" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a> </p> </div> </form> </body> </html> Here is live example.. A Pen by Captain Anonymous Whatever, The new fields got an unique name="" value as p_new_1, p_new_21 for first new field, p_new_2, p_new_22 for second new field ...... ...... Now, I know I can display inserted data using <?php echo $_POST["p_new_1"]; ?> and similar way like this... But as a growing field, this form can have unlimited input field. How can I display all of those data in the page gen.php? It must be something like this example: <html> <body> <div class="header">Generated content<div> <p><a href="inserted data of first field of default row">inserted data of second field of default row</a></p> <p><a href="inserted data of first field of first new row">inserted data of second field of first new row</a></p> <p><a href="inserted data of first field of 2nd new row">inserted data of second field of 2nd new row</a></p> <p><a href="inserted data of first field of 3rd new row">inserted data of second field of 3rd new row</a></p> <p><a href="inserted data of first field of 4th new row">inserted data of second field of 4th new row</a></p> And list go on according to submitted form.... </div></body></html> I actually lake of knowledge of PHP and no idea about array or something named loop. Can someone do it for me? What I have to do in gen.php?