Search the Community

HI i trying to create a website of forum textarea editor are necessary too for recommendation which editor are best for textarea such as summernote, wysihtml5 .... and how is work to store the data/value/text in mysql database ? Thanks all of you

HI there, first i apology my english not too well, hope you may understand what i mean ,Thanks Im try to using the Bootstrap one of the function is popover similar like tooltips, but i facing the problem For example : <div id="all"> <div id="a" class="circle_ball" data-user-id="2">●</div> <div id="b" class="circle_ball" data-user-id="1">●</div> </div> and my Jquery code is : $('#all').on('mouseenter','div',function(){ $(this).popover({ title: 'Jun Hoo', content: $(this).attr('data-user-id'), trigger:'hover', html:true }); }); but the result on the code will showing delay and at least need to hover the target more than 2 time ... any ways to figure out? thanks you so much i found ways to solve the delay speed, but will keep popover the content when mouse pointer hover the first popover body the ways is add one more code --- $('#all').popover({title: 'Loading', content: '...',selector: 'div',trigger:'hover',html:true}); Thanks for helping

This Code Isn't Working: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#area").animate({ backgroundImage:"url('image2.png')" },2000); }); </script> <style> #area { width:100%; height:600px; background-image:url("image2.png"); } </style> <div id="area"></div>

$( document ).ready( function(){ //this will fire once the page has been fully loaded $( '#comment-post-btn' ).click( function(){ comment_post_btn_click(); }); }); function comment_post_btn_click() { //Text within textarea which the person has entered var _comment = $( '#comment-post-text' ).val(); var _userId = $( '#userId' ).val(); var _userName = $('#userName').val(); if( _comment.length > 0 && _userId != null ) { //procced with ajax callback $('.comment-insert-container').css('border' , '1px solid #e1e1e1' ); $.ajax({ type: "POST", url: "/ajax/comment_insert.php", data: { task : "comment_insert", userId : _userId, comment : _comment }, error : function( ) { console.log("Error: " ); } , success : function(data) { comment_insert( jQuery.parseJSON(data)); console.log( "ResponseText: " + data); } }); console.log( _comment + " UserName: " + _userName + " User Id: " + _userId ); } else { //the textaarea is empty, lets put a border of red in italics //in a second $('.comment-insert-cotainer').css('border' , '1px solid #ff0000 '); console.log( "The text area was empty" ); } //remove the text from the text area, ready for another comment //possibly $( '#comment-post-text' ).val(""); }; function comment_insert( data ) { var t = ''; t += '<li class="comment-holder" id="_'+data.comment_id+'">'; t += '<div class="user-img">'; t += '<img src="'+data.profile_img+'" class="user-img-pic" />'; t += '</div>'; t += '<div class="comment-body">'; t += '<h3 class="username-field">'+data.userName+'</h3>'; t += '<div class="comment-text">'+data.comment+'</div>'; t += '</div>'; t += '<div class="comment-buttons-holder">'; t += '<ul>'; t += '<li class="delete-btn">X</li>'; t += '</ul>'; t += '</div>'; t += '</li>'; $( '.comments-holder-ul' ).prepend( t ); } Hi all, I was wondering if somoneone could help me out with my problem. I am a complete beginner, so you may have to dumb things down for me lol. But I've been trying to make a comments box for my website and following a tutorial on youtube. I'm upto about lesson 11 but i can't get past it because it doesn't work for me and the guy who posted the tutorial doesn't seem to bother replying to comments. ​Can someone take a look at my code and try help where I am going wrong? I think the problem maybe that it is a little outdated. I've already changed the ajax part from the tutorial, but it's still not working right. The console is telling me that it is a problem with : comment_insert( jQuery.parseJSON(data)); ​Thanks.

hi everybody i need some help in my work it would be awesome if someone could help me . the issue is im having w horizontale scrolling website the thing is when i put some text in a specific area and when i scroll it doesnt stays in the position it moves up while i scroll to the left anyone could help me.

I am using Jquery-ui's Date picker to pick what date I want. But now I need to store that date I type/pick from DatePicker into php variable. I tried doing this myself but it didn't work, It wasn't being saved in variable without pressing a button. Do I need to use Ajax? If yes, can you help me with that? Thank you. <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> <input type="text" id="datepicker" name="datepicker" placeholder="Search by date" />

Hello internet. I am trying to use the following code and my webpage is not accepting my fadeOut function I'm using <link> to grab the jquery library from my server. CODE: $("div").click(function() { $(this).fadeOut("slow"); }); However, if I replace <script type="text/javascript" src="jquery.min.js"></script> WITH <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> It works just fine. Why is this? NOTES: 1. I am placing jquery code within my <head> tags. 2. jquery.min.js is the 3.1.0 compressed file I have on my server

Hello All, I am stuck trying to filter results of a json response. I have a sample json response: [ { "id":0, "commentText":"Test", "createdBy":"User1", "isImportant":false }, { "id":1, "commentText":"Hello World", "createdBy":"User2", "isImportant":true }, { "id":2, "commentText":"Testing", "createdBy":"User2", "isImportant":false }, { "id":3, "commentText":"This is another one", "createdBy":"User2", "isImportant":true }, { "id":4, "commentText":"Hello World!", "createdBy":"User2", "isImportant":true } ] I am attempting to filter out results that "isImportant" are not true. I have tried multiple ways of doing it with no luck. IE. var response = $(jsonSample).filter(function (i,n){ return n.isImportant===true }); var response2 = $.grep(Object(jsonSample), function(j){ return j.isImportant !== false; }); var response3 = $.map(jsonSample, function (n,i){ $.each(n, function(j){ return n.isImportant !== false; }) }); console.log(response); //jquery-2.2.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: ... console.log(response2); //logs every individual character in the jsonSample ["[", "{", """, "i", "d", """, ":", "1", ... console.log(response3); //jquery-2.2.4.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ...

Hello guys! I want a little help! I want to take all HTML form div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags. Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good! But when a change the information in textareas my javascript code do not take the new information from that field. What is wrong with my code? <!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <?php if(isset($_POST['save'])){ $scrita = $_POST['hid']; $scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>'); echo $scritaInsert; exit; //just for the test } ?> <form method="POST"> <input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/> <input type="hidden" name="hid" id="hid"/> </form> <div id="container"> <p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p> <p style="text-align: center; color: black; font-size:16px; text-decoration: underline;"> The address </p> <p style="font-weight: bold; color: black;"> To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea> </p> <p style="font-weight: bold; color: black;"> Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea> </p> <p style="text-align: center;font-weight: bold;font-size: 19px;color: black;"> CONTRACT<br> <n style="text-align: center;font-size: 16px;color: black;"> For transport </n><br> <nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea> Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea> </nz> </p> </div> </body> </html> <script type="text/javascript"> $('#submitContainer').click(function(){ $('.picker').html(''); var content = $('#container').html(); $('#hid').val(content); }); </script>

I was reading the tutorial for creating an accordion here: http://www.w3schools.com/howto/howto_js_accordion.asp Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive Multi Level Horizontal Nav?</title> <!--nav styles--> <style> .show { display: block; } nav { width: 100%; float: left; font-family: 'Oswald', sans-serif; font-size: 100%; color: #252525; border-bottom: 4px solid #0069d4; border-top: 4px solid #0069d4; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; position: relative; } a { text-decoration: none; color: #fff; } li a { height: 60px; line-height: 60px; background-color: #fff; width: 120px; text-align: center; color: #252525; display: block; } li a:hover { background-color: #0069d4; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } /* submenu desktop */ ul.submenu { position:absolute; top:100%; display:none; } ul.submenu li { display:block; } ul.submenu li a { display:block; float:none; font-size: 100%; line-height:40px; height:auto; } ul li:hover ul.submenu { display:block; } /* open close mobile nav*/ #i-nav { display: none; float: right; padding: 20px 20px; } .expand_sub { display: none; float: right; } @media (max-width: 1024px) { nav { width: 100%; padding: 0; margin: 0; } ul li { display:block; } ul { width: 100%; display: none; } li a { width: 100%; text-align: center; float: left; } #i-nav { display: block; } .expand_sub { display: block; } ul.submenu { position:relative; top:0%; display:block; } ul.submenu li { display:block; } ul.submenu li a { width: 100%; float: left; } } </style> <!--google fonts--> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <!--font awesome--> <link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div> <ul id="menu"> <li><a href="#">HOMEPAGE</a><li> <li><a href="#">PROGRAMS</a> <ul class="submenu"> <li><a href="#">Program 1</a></li> <li><a href="#">Program 2</a></li> <li><a href="#">Program 3</a></li> </ul> </li> <li><a href="#">MEMBERSHIP</a><li> <li><a href="#">NEWS</a><li> <li><a href="#">GALLERY</a><li> <li><a href="#">CONTACT</a><li> </ul> </nav> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- script to toggle mobile menu --> <script> $(document).ready(function(){ $('#i-nav').click(function(){ $('#menu').toggleClass('show'); }); }); </script> </body> </html>

I am working with Advanced Custom Fields in Wordpress and trying to get some of the input fields to total in another field when certain fields lose focus. I can get this to work when the page is loaded and the fields are already on the page. However, there is a "button" (technically not a button, but this: <ul class="acf-hl"> <li class="acf-fr"> <a href="#" class="acf-button blue" data-event="add-row">Add Row</a> </li> </ul> ) that when pressed will add rows with new input fields. The script will not work unless I save the page. Is there a way for a script to include any newly added elements to a web page? Here is my code: jQuery(document).ready(function($) { $("div[data-name='away_players'] tr.acf-row").each(function(){ var z = $(this).find('input'); z.blur(function(){ z[3].value = (2 * parseInt(z[0].value)) + (3 * parseInt(z[1].value)) + parseInt(z[2].value); })(jQuery); I've included a screen shot. When the light blue inputs lose focus they get summed and the total goes in the red input for each row. Here is the screen shot:

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> <div style="background:red;height:50px;width:50px;position:absolute;"></div> </body> </html> Hi All, I've been working through W3 Schools tutorial on jQuery. I worked my way down to the topic on .animate (http://www.w3schools.com/jquery/jquery_animate.asp). For Example 1, of the "Use Queue Functionality", I thought I'd try experimenting with the code, and modified it to add a small red square on top of the large green one (see attached code). I want the red square to change size as the green square changes size, but maintain its size relative to its larger sibling. I can make this happen if I 'ID=' each square and give each the appropriate numeric value, but this isn't exactly flexible/generic. I can use something like '+=100px' and '-=100px', but this clearly adds the same amount to both squares, and naturally the red square doesn't stay relatively sized to the green square. Using something like '*=2.0' just silently fails. Anybody have any suggestions? Thanks, Richard

Here is my code. I have two arrows and they go to the next 'slide' and previous 'slide'. For someone reason clicking the buttons doesn't 'switch slides'. Is there anything wrong? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <style> body{ background-color: black; } h3{ color: white; font-family: corsiva; text-align: center; } .maindiv{ height: 450px; width: 800px; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 50px; } #leftarrow{ height: 40px; width: 100px; border: 2px solid black; margin-top: 140px; margin-left: 100px; color: black; text-align: center; font-size: 20px; background-color: black; } #rightarrow{ height: 40px; width: 100px; border: 2px solid white; margin-top: -140px; margin-left: 600px; color: white; text-align: center; font-size: 20px; background-color: black; position: absolute; } #image{ height: 250px; width: 300px; border: 2px solid white; margin-top: -150px; margin-left: 250px; } #explanation{ height: 100px; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid white; margin-top: 20px; } </style> <script> $(document).ready(function(){ var slide = 0; $('#rightarrow').click(function(){ slide = slide + 1; if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); $('#leftarrow').click(function(){ slide = slide - 1; if (slide = 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css("color", "black").css("border", "2px solid black"); } if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); </script> <body> <h3><u>Life Cycles of Stars</u></h3> <div class = 'maindiv'> <button id = 'leftarrow'>Previous</button> <div id = 'image'></div> <button id = 'rightarrow'>Next</button> <div id = 'explanation'>Animation</div> </div> </body> </html>

Hello I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please? function drawCircle(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 25, 0, 2 * Math.PI); ctx.stroke(); } function clearArea() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); return false; } function drawEllipse(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); } function drawP(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("p", 50, 100); } function drawQ(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("q", 50, 100); } function OnClickDraw() { var drawtype = $('#drawType').val().toLowerCase(); switch(drawtype) { case 'c': drawCircle(); break; case 'e': drawEllipse(); break; case 'p': drawP(); break; case 'q': drawQ(); break; } return false; } As you can see I'm using jquery already in my switch statement...

Greetings classmates! School is in session. It seems this is mostly a CSS question. So my apologies for any re-tread. I have seen numerous posts addressing similar, but can't seem to put it together. Any help or direction to existing solutions is greatly appreciated. I am Developing an ASP.NET/MVC5 web app. It uses bootstrap 3. I am new to bootstrap and never really got into CSS more than the basics. Question: How can I change/override the a:hover of a thumbnail to include a user-defined hoverscale? So in the thumbnail.less file I see: @thumbnailHoverScale : 1.3; . . . a:hover img.thumbnail { .selected(@thumbnailHoverScale); } HoverScale is not a style attribute it seems so I can't override in standard local definition HTML style="..."!?! I do understand I can define a <style/> in local HTML to override, but again fail to comprehend exactly how. Here is my HTML: <div id="thumbnailContainer"> <div class="thumbnail-loading-spinner"></div> <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul> <div class="admin"></div> </div> and the template: <script id='thumbnailsTemplate' type="text/x-jquery-tmpl"> <li> <a href="${Url}" data-vpath="${VPath}"> <img class="thumbnail" src="${UrlThumbnail}" /> </a> </li> </script> So basically in the template, I want to override hoverscale just for just the generated thumbs. I have tried a number of style="" property definitions, then realized HoverScale is not a property. I also tried a number of variations like: ...class="thumbnail {HoverScale:2}" I think I am close on this one, possibly, but not sure how I would apply it to just the generated thumbs?? <style> a.thumbnail:hover { .selected(3) } </style> with no joy. Anyone? Thanks! Cheers!

hello, i am working with jquery, thake a look at my jsbin code. when you click on the smile icon there popups a screen. Now the IMG field should be the IMG SRC. For some reason i cant get it to display the IMG SRC, any ideas?? https://jsbin.com/lelaxam/1/edit?js,output kind regards

lease see my code below, I have sorted out all my coding to work how I want it too, but for some reason I just can't get it to load the map when you open it up in a browser. Can anyone see where I have gone wrong and guide me to get it work please. Thank you. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title>County Polygons + Markers w/elapsed time</title> <script src="../fiveenglishcounties.js" charset="UTF-8"> // positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk </script> <script type="text/javascript"> var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin; $('#controls input[name="[counties]"]').click(function(){ var poly = pollies[this.value]; if(poly.map){ poly.infowindow.close(); poly.setMap(null); this.checked = false; } else { poly.setMap(map); this.checked = true; } }); function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); $('#activatemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setIcon(pinImage); return false; } }); }); $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } tm.get(0).size = $('option', tm).length; }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); this.size = $('option', $(this)).length; }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.178227, -0.46013)); map.setZoom(8); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(8); } }); function formatCodes(codeString){ var a = codeString.split(' '), l = a.length, po; while(--l > -1){ po = a[l].split(','); a[l] = {lat: +po[1], lng: +po[0]}; } return a;} function initMap() { pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor); defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor); var p; geocoder = new google.maps.Geocoder(); bounds = new google.maps.LatLngBounds(); map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 52.178227, lng: -0.4013}, mapTypeId: google.maps.MapTypeId.ROADMAP }); pollies = { Bedfordshire: { paths: BedfordshireCodes, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.15, latlng: {lat: 52.002974, lng: -0.465139} }, Bedford: { paths: BedfordCodes, strokeColor: '#FFC0CB', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFC0CB', fillOpacity: 0.15, latlng: {lat: 52.135973, lng: -0.466655} }, Hertfordshire: { paths: HertfordshireCodes, strokeColor: '#FFFF55', strokeOpacity: 0.9, strokeWeight: 2, fillColor: '#FFFF55', fillOpacity: 0.25, latlng: {lat: 51.809782, lng: -0.237674} }, Cambridgeshire: { paths: CambridgeshireCodes, strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.15, latlng: {lat: 52.305297, lng: 0.021820} }, Northamptonshire: { paths: NorthamptonshireCodes, strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.15, latlng: {lat: 52.272994, lng: -0.875552} } }; for(p in pollies){ var polly = pollies[p]; polly.paths = formatCodes(polly.paths); polly = pollies[p] = new google.maps.Polygon(polly); polly.infowindow = new google.maps.InfoWindow({ content: p, position: polly.latlng }); polly.addListener('click', function(){ if(this.infowindow.map){ this.infowindow.close(); } else { this.infowindow.open(map, this); } }); polly.setMap(map); } } function initialize() { } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form> <br> Location 1 <input type="text" class="address"> <br> <br> Location 2 <input type="text" class="address"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="submit" value="Submit"> </form> </div> <div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"> <label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br> <label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br> <label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br> <label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br> <label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label> </div> <div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br> <input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br> <input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker"> </div> </div> <div id="map"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div> </body> </html>

I am trying to embed some kml files for local county bodries but am not sure how to asign multiple ones as I am coding in dreamweaver. Also I have made a drop down menu for eack kml file but am not sure how to link and get it all to work, mainly want the boundries to be shown on the map at all times and when selected in the dropdown menu, that particular county is shown on the map. Please see my coding I have done, and if there is any advice i would appreciate it. I am completely new to this and trying to teach myself. var kmlUrl = 'maps/central bedfordshire' ; var kmlOptions = { suppressInfoWindows: true, preserveViewport: false, map: map }; var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); function countiesDropdown(container){ var counties = { "bedfordshire", "hertfordshire", "cambridgeshire", "northamptonshire", "buckinghamshire" } var out = "<select><option value=""></option>";</select> <select> for (var key in counties) {</select> <select> out += "<option value="" + key + "">" + counties[key] + "</option>";</select> <select> }</select> <select> out += "</select>"; console.log(out); document.getElementById(container).innerHTML = out; } I have already inbeded the general map and markers etc and they work fine hence why have only given the coding that isn't working. Here is the HTML part. <div id="menu" style=" position: absolute; margin: 45px 80px;" > <select id="Counties"> <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </div> Hope this enough of an understanding of what i have and am trying to do.

Hi How can I change the code that when the counter get to 30 seconds he will stop and start to count again..? This is the script: (function($){ // Number of seconds in every time division var days = 24*60*60, hours = 60*60, minutes = 60; // Creating the plugin $.fn.countup = function(prop){ var options = $.extend({ callback : function(){}, start : new Date() },prop); var passed = 0, d, h, m, s, positions; // Initialize the plugin init(this, options); positions = this.find('.position'); (function tick(){ passed = Math.floor((new Date() - options.start) / 1000); // Number of days passed d = Math.floor(passed / days); updateDuo(0, 1, d); passed -= d*days; // Number of hours left h = Math.floor(passed / hours); updateDuo(2, 3, h); passed -= h*hours; // Number of minutes left m = Math.floor(passed / minutes); updateDuo(4, 5, m); passed -= m*minutes; // Number of seconds left s = passed; updateDuo(6, 7, s); // Calling an optional user supplied callback options.callback(d, h, m, s); // Scheduling another call of this function in 1s setTimeout(tick, 1000); })(); // This function updates two digit positions at once function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; function init(elem, options){ elem.addClass('countdownHolder'); // Creating the markup inside the container $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span class="count'+this+'">').html( '<span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span class="countDiv countDiv'+i+'"></span>'); } }); } // Creates an animated transition between the two numbers function switchDigit(position,number){ var digit = position.find('.digit') if(digit.is(':animated')){ return false; } if(position.data('digit') == number){ // We are already showing this number return false; } position.data('digit', number); var replacement = $('<span>',{ 'class':'digit', css:{ top:'-2.1em', opacity:0 }, html:number }); // The .static class is added when the animation // completes. This makes it run smoother. digit .before(replacement) .removeClass('static') .animate({top:'2.5em',opacity:0},'fast',function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},'fast',function(){ replacement.addClass('static'); }); } })(jQuery);

I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have done so far. <!DOCTYPE html> <html> <head> <style type="text/css"> #supplementwindow { display: none; position: absolute; left: 10px; top: 10px; } </style> <!-- Google Maps and Places API --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var markers = []; function createMarker(latlng, html, map) { var infowindow = new google.maps.InfoWindow({ content: html }); var marker = new google.maps.Marker({ map: map, position: latlng }); marker.addListener('mouseover', function() { infowindow.open(map, this); $('#supplementwindow').html(latlng + '<br>' + html).fadeIn(); }); marker.addListener('mouseout', function() { infowindow.close(); $('#supplementwindow').fadeOut(); }); markers.push(marker); } //declare namespace var up206b = {}; //declare map var map; function trace(message) { if (typeof console != 'undefined') { console.log(message); } } up206b.initialize = function() { var latlng = new google.maps.LatLng(52.136436, -0.460739); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); up206b.geocode(); } var geocoder = new google.maps.Geocoder(); up206b.geocode = function() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var bounds = new google.maps.LatLngBounds(); var addresses = [$('#address').val(), $('#address2').val()]; addresses.forEach(function(address) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); } </script> </head> <body onload="up206b.initialize()"> <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;"> <h1 align="center">Map Search</h1> <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" > <form > <br> Location 1 <input type="text" id="address"> <br> <br> Location 2 <input type="text" id="address2"> <br> <br> <input type="button" value="Submit" onClick="up206b.geocode()"> </form> </div> </div> <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div> <div id="supplementwindow"></div> </body> </html>

UPDATE - Drag & Drop is working But need dropped item to be invisable. Again this was working, code in css #fruit > * { display: none; } Code done for each box New jsfiddle -jsfiddle.net/eru2mc2k/1/ Hi My first post here so hope I've posted everything correct. My drag & drop was working fine until I added the following code in script. shuffleList(); function shuffleList(){ var origList = $("#dragsource li").detach(); var newList = origList.clone(); for(var i=0; i<newList.length; i++) { var randomIndex = randomInt(newList.length - i); newList[i] = origList.splice(randomIndex, 1); $("#dragsource").append(newList[i]); } } function randomInt(maxNum){ return Math.floor(Math.random()*maxNum); } $(document).ready(function () { var $lis = $("#dragsource li").hide(); $lis.slice(0,20).show(); var size_li = $lis.length; })I The above code shuffles my list and displays 20 items from it ,which I need Can someone please look at this so the drag and drop work again. Thank you. Here's jsfiddle http://jsfiddle.net/W4Km8/8725/

Hello, Having some issues with this Given http://codepen.io/caim/pen/pggZOx I'm trying to replace the first column from input to select dropdown but having trouble figuring out how to read the data for each cell. It was working fine with an input and normal td but now the select entered the picture and it's skipping one column. The day drop-downs are for newly added rows currently. This is how I'm trying to read the data, maybe I'm missing something essential here $BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var $tds = $TABLE.find('td:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var $td2 = $td.find('input'); var $td3 = $td.find('select'); var h2 = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { // h2[header] = $td.eq(i).text(); //the dropdown value -> //console.log($td3.eq(i).val()); h2[header] = $td3.eq(i).val(); if ($td3.eq(i).val() === undefined){ // it's not dropdown ? read it normaly.. console.log(i); h2[header] = ($td.eq(i).text() == '') ? $td2.eq(i).val() : $td.eq(i).text(); } //console.log(h2[header]); }); data.push(h2); }); // Output the result $EXPORT.text(JSON.stringify(data)); });

So recently I got my hands on one of youtube videos, it's quit old, and the guy explaining how to create a form for uploading image and all data that is connected with it, to MySQL and then showing on your web site. So everything is ok, but webpage does not display any images, it just show me white picture frame with picture icon on the top. This is my connection file with database: <?php $hostname_phpimage = "***"; $username_phpimage = "***"; $password_phpimage = "***"; $database_phpimage = "***"; // Create connection $inkedmen_marko = mysql_pconnect($hostname_phpimage, $username_phpimage, $password_phpimage); // Check connection if ($phpimage->connect_error) { die("Connection failed: " . $phpimage->connect_error); } ?> Then the file that uploads the images: <?php require_once('php/connect.php'); if($_POST['submit']) { $name=basename($_FILES['file_upload']['name']); $t_name=$_FILES['file_upload']['tmp_name']; $dir='/home4/inkedmen/public_html/images'; $cat=$_POST['cat']; if(move_uploaded_file($t_name,$dir."/".$name)) { mysql_select_db($database_phpimage, $inkedmen_marko); $qur="insert into anglija (mid, cid, name, path) values ('','$cat','$name','/home4/inkedmen/public_html/images/$name')"; $res=mysql_query($qur,$inkedmen_marko); echo'file upl success'; } else { echo 'not uploaded'; } } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file_upload"/> cat_id <input type="text" name="cat" /><br/> <input type="submit" name="submit" value="upload"/> </form> </body> </html> Then this one shows me what countries I have in one of the data base tables, so there is two england and slovenia, they both have a separate id that I have to type when uploading an image: <?php require_once('php/connect.php'); mysql_select_db($database_phpimage, $inkedmen_marko); $qur="select * from cat"; $res=mysql_query($qur,$inkedmen_marko); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <?php while($row= mysql_fetch_array($res)) { ?> <h1><a href="image.php?cid=<?php echo $row['id']?>"><?php echo $row['name'] ?> </a></h1><br/> <?php } ?> </body> </html> And finally, when I push on each country it directs me to the pictures that are connected with that countries according to the id given: <?php require_once('php/connect.php'); mysql_select_db($database_phpimage, $inkedmen_marko); $id=$_GET['cid']; $qur="select * from anglija where cid='$id'"; $res=mysql_query($qur,$inkedmen_marko); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <?php while ($row=mysql_fetch_array($res)){ ?> <img src="<?php echo $row['path'] ?>" width="300px" height="200px"> <br/> <?php } ?> </body> </html> So in the end it directs me to the pictures, but I can't see the pictures, it's just white windows with icon on the top. The pictures uploads to the image folder, the id, names of the file, path also uploads good, but somehow I can't show the images. I know it should be something small, but I can't figure it out. Maybe someone have any ideas????

JSFiddle Basically, I have this list inside a collapsible div, and I would like to follow the href="#bc" when I click/tap. When it isn't collapsible it works just fine. I'm using JQuery Mobile, and any help would be greatly appreciated.

JSFiddle <div data-role="collapsible" data-theme="a"> <h3>Bard</h3> <ul data-role="listview" data-theme="a"> <li><a href="#bc">Cantrips</a></li> <li><a href="#b1">Level 1</a></li> Basically, I have this list inside a collapsible div, and I would like to follow the href="#bc" when I click/tap. When it isn't collapsible it works just fine. I'm using JQuery Mobile, and any help would be greatly appreciated.