We Keep Coding

Array[0] undefined

When I output my code I get this output:
0[object Object]
1[object Object]
I believe this is because it is an object. Although I'm pretty noob, so I believe an object is an array. Correct me if that's wrong.
I noticed the object in my console:
Objectresult: Objectadmin_county: "Somerset"admin_district: "Sedgemoor"admin_ward: "Axevale"ccg: "NHS Somerset"codes: Objectcountry: "England"eastings: 343143european_electoral_region: "South West"incode: "2WL"latitude: 51.2870673059808longitude: -2.81668795540695lsoa: "Sedgemoor 001A"msoa: "Sedgemoor 001"nhs_ha: "South West"northings: 154531nuts: "Somerset"outcode: "BS26"parish: "Axbridge"parliamentary_constituency: "Wells"postcode: "BS26 2WL"primary_care_trust: "Somerset"quality: 1region: "South West"__proto__: Objectstatus: 200__proto__: Object
it maybe neater to look at this: https://api.postcodes.io/postcodes?lon=0.080647&lat=51.626281000000006&radius=115
I am trying to separate these parts into usable items stored as variables. I tried array[0] but that is undefined. Which I assume means I need to do something more like object(array[0])
I've been searching a while and I'm not getting anywhere.
Here's my full code that I was forking from elsewhere.
$(window).ready(function() {
$(initiate_geolocation);
});
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query);
}
function handle_geolocation_query(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var url = "https://api.postcodes.io/postcodes?lon=" + lon + "&lat=" + lat + "&radius=125";
post(url).done(function(postcode) {
displayData(postcode);
// console.log("postcode says: "+postcode);
console.log(postcode[0[1]]);
});
}
//display results on page
function displayData(postcode) {
var html = "";
$('#text').hide();
for (var index in postcode['result']) {
html += "<div class='row'>";
html += "<div class='cell'>";
html += index.replace(/_/g, ' ').strFirstUpper();
html += "</div><div class='cell'>";
html += postcode['result'][index];
html += "</div></div>";
console.log(postcode)
}
$('#text').html(html).fadeIn(300);
}
//ajax call
function post(url) {
return $.ajax({
url: url,
success: function() {
//woop
},
error: function(desc, err) {
$('#text').html("Details: " + desc.responseText);
}
});
}
//uppercase
String.prototype.strFirstUpper = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
#import url(//fonts.googleapis.com/css?family=Roboto);
html {
font-family: 'Roboto', sans-serif;
}
.header {
position: fixed;
z-index: 10;
width: 100%;
background: -moz-linear-gradient(90deg, #394D66, #3A5B85);
background: linear-gradient(90deg, #394D66, #3A5B85);
height: 80px;
min-width: 500px;
}
h1 {
font-weight: 400;
text-align: center;
margin: 0px;
font-size: 1.5em;
color: #9DC3EB;
text-transform: uppercase;
}
h1 span {
font-size: 0.8em;
text-transform: lowercase;
color: #E0E0E0;
}
.row {
width: 100%;
font-size: 1.2em;
padding: 5px 0px;
border-bottom: 1px solid #ccc;
}
.inputHolder {
width: 100%;
font-size: 20px;
text-align: center;
}
.inputHolder input {
text-align: center;
color: #333;
}
.cell {
display: inline-block;
width: 49%;
color: #393939;
}
.row .cell:first-child {
text-align: right;
padding-right: 10px;
}
.row:hover {
background: #ccc;
}
#text {
z-index: 0;
padding: 90px 0px;
width: 60%;
margin: 0px auto;
min-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class='header'>
<h1><span>Postcode Seach with</span> Postcodes.io</h1>
<!-- <div class='inputHolder'>
<input placeholder='Postcode' type='text' id='txtPostcode'/>
<input type='button' value='Search' id='btnPostcode'/>
</div>
-->
</div>
<div id='text'></div>
Eventually i want this code to ask you for permission to discover your location when you open the page and then find your post code (using postcode.io). I've got most of the way there but my noobishness is hurting me badly. Any help is much appreciated.
The code must be https to run geolocation.

How to debug "Mixed Content" errors in a browser?

I'm working on a project in codepen (it is large project for me as a beginner). So I decided to clean it up a little bit in https://www.dirtymarkup.com/ and pasted tidied code back in codepen. However after that procedure my code is broken and displays a bunch of errors in console.log. If you need look at console.
Project on codepen
HTML
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--********** HEADER **********-->
<header class="navigation">
<div class="icon">
<span class="glyphicon glyphicon-align-justify" onclick=
"openNav()"></span>
<div id="headerText">
Social Media
</div>
</div><!--icon div-->
<div id="textRandomQuote">
Random Quote Project 2016 <span id="by">by</span> <span id=
"nzMai">NZ MAI</span>
</div>
</header><!--********** QUOTE SECTION **********-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 quoteDiv col-xs-12">
<p id="quotes"></p><!--end of "quotes" p-->
<button class="btn btn-primary" id="getQuote" type=
"button">Get Quote</button>
<div class="like&share pull-right">
<span class="glyphicon glyphicon-heart social-but"
data-placement="left" data-toggle="tooltip" title=
"Like the Quote"></span> <span class=
"glyphicon glyphicon-share" data-placement="left"
data-toggle="tooltip" title="Share the Quote"></span>
<span><i aria-hidden="true" class="fa fa-twitter"
data-placement="left" data-toggle="tooltip" title=
"Tweet the Quote"></i></span>
</div>
</div><!--end of "col-md-6 col-md-offset-3" div-->
</div><!--row-->
<div class="row">
<div class=
"col-md-6 col-md-offset-3 col-xs-12 bioDivContainer">
<h1 class="authorName"></h1>
<p class="bioDiv"></p>
</div>
</div><!--row-->
</div><!--end of container-->
</section>
<section class="articlesSection">
<div class="container">
<div class="row">
<div id="wikiArticlesDiv">
<h1 class="wikiArticlesHeader"></h1>
<ul class="wikiArticlesList"></ul>
</div>
</div>
</div>
</section><!--SIDE NAVIGATION-->
<div class="sidenav" id="mySidenav">
<a class="closebtn" href="javascript:void(0)" onclick=
"closeNav()">×</a> About <a href="#"><img alt=
"twitter" id="twitter" src=
"https://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png"></a>
<a href="#"><img alt="youtube" id="youtube" src=
"https://worldartsme.com/images/youtube-icon-clipart-1.jpg"></a>
<a href="#"><img alt="facebook" id="facebook" src=
"https://rocketfans.com/wp-content/uploads/2014/12/Buy-facebook-likes.png">
</a>
</div><!-- Use any element to open the sidenav -->
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
CSS
#import https://fonts.googleapis.com/css?family=Roboto;
.navigation {
width: 100%;
height: 80px;
background-color: #e0f2f1;
box-shadow: 1px 5px 16px #aec0bf;
}
.icon {
display: inline;
width: 240px;
height: 100%;
}
.glyphicon-align-justify {
font-size: 30px;
margin-top: 20px;
margin-left: 20px;
margin-right: 0;
}
#headerText {
display: inline;
font-size: 24px;
margin-left: 10px;
border-right: 2px solid #000;
padding-right: 5px;
font-family: 'Roboto',sans-serif;
font-weight: 700;
opacity: .9;
color: #424242;
}
#textRandomQuote {
width: auto;
display: inline;
margin-left: 20px;
font-family: 'Roboto',sans-serif;
font-size: 18px;
font-weight: 700;
opacity: .75;
}
#by {
font-size: 12px;
font-family: 'Roboto',sans-serif;
opacity: .4;
}
#nzMai {
font-size: 18px;
font-family: 'Roboto',sans-serif;
border: 1px solid #424242;
padding: 10px;
}
.quoteDiv {
padding-bottom: 20px;
transition: all .7s ease;
background-color: #b2b2b2;
height: auto;
margin-top: 40px;
padding-top: 40px;
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
background-image: repeating-linear-gradient(90deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-linear-gradient(180deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-radial-gradient(circle,#607D8B,#607D8B 45%,transparent 45%,transparent 60%,#607D8B 60%,#607D8B 100%);
background-size: 3px 3px;
}
.quoteDiv:hover {
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
background-image: repeating-linear-gradient(45deg,transparent,transparent 50%,#9E9E9E 50%,#9E9E9E),repeating-linear-gradient(-45deg,transparent,transparent 50%,#424242 50%,#424242);
background-size: 50px 50px;
}
#quotes {
text-align: center;
font-family: 'Roboto',sans-serif;
font-size: 36px;
color: #FAFAFA;
text-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
}
#getQuote {
text-align: center;
}
.bioDivContainer {
padding-bottom: 20px;
background-color: #ebf9fe;
height: auto;
margin-top: 40px;
padding-top: 40px;
box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);
}
h1 {
text-align: center;
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
}
.bioDiv {
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
font-size: 18px;
}
.articlesSection {
margin-top: 45px;
height: auto;
background-color: #e0f2f1;
box-shadow: 1px 5px 16px #aec0bf;
margin-bottom: 45px;
}
#wikiArticlesDiv {
padding-top: 20px;
margin: 0 auto;
width: 60%;
margin-top: 25px;
margin-bottom: 25px;
height: auto;
opacity: .9;
border: 2px solid #000;
}
.wikiArticlesHeader {
text-align: center;
font-family: 'Roboto',sans-serif;
opacity: .9;
color: #424242;
}
.wikiArticlesList {
padding-left: 0;
}
.articleItem {
list-style-type: none;
text-align: center;
font-size: 22px;
opacity: .8;
}
.shortInfo {
color: red;
display: block;
font-family: 'Roboto',sans-serif;
font-size: 18px;
opacity: .8;
}
.glyphicon-heart,.glyphicon-share,.fa-twitter {
font-size: 20px;
color: #337ab7;
cursor: pointer;
opacity: .8;
}
.active {
color: red;
opacity: .8;
}
/**********SIDE NAVIGATION****************/
/* The side navigation menu */
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: .5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: .3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,.offcanvas a:focus {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
a #twitter {
width: 60px;
}
a #youtube {
width: 60px;
padding-left: 0;
}
a #facebook {
width: 60px;
padding-left: 0;
}
#media all and (max-width: 1000px) {
#wikiArticlesDiv {
width: 90%;
}
}
#media all and (max-width: 800px) {
.wikiArticlesHeader {
font-size: 24px;
}
.authorName {
font-size: 24px;
}
#quotes {
font-size: 24px;
}
a {
font-size: 18px;
}
.shortInfo {
font-size: 16px;
}
.bioDiv {
font-size: 16px;
}
}
#media all and (max-width: 600px) {
#by,#nzMai {
display: none;
}
}
Javascript
var randomQuoteGenerator = (function() {
//var foundArticle = "Ben Stein";
//////////
///General
//////////
var general = {
// The URL to the quote API
url: 'https://api.forismatic.com/api/1.0/',
// What to display as the author name if s/he's unknown
unknownAuthor: 'Unknown',
// Base URL for the tweet links generation
tweetURL: 'https://twitter.com/home?status=',
//wikiURL:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback'
};
/////////////
////DOM cache
/////////////
var domCache = {
$quoteDiv: $('#quotes'),
$authorDiv: $('#author'),
$clickButton: $('#getQuote'),
$tweetButton: $('#tweetQuote'),
$bioDiv: $('.bioDiv'),
$authorName: $('.authorName'),
$wikiArticlesDivHeader: $('.wikiArticlesHeader'),
$wikiArticlesList: $('.wikiArticlesList'),
$wikiArticlesDiv: $('#wikiArticlesDiv')
};
var getWikiAuthorBio = function(author) {
var url =
'https://en.wikipedia.org/w/api.php?action=opensearch&search=' +
author + '&format=json&callback=wikiCalback'
//////////////
//Wiki request
/////////////
var wikirequest = function() {
$.ajax({
url: url,
dataType: 'jsonp',
success: function(wikiData) {
// Fetch the biographical information
var bioName = wikiData[2][0];
// Check if instead of bio there is a phrase "The article may refer to...." if so then change indices
if (bioName.indexOf(
'may refer to') >= 0) {
bioName = wikiData[2][1];
} else {
var bioName = wikiData[2][0];
}
var wikiArcticles = wikiData[1];
var wikiArticlesShortInfo =
wikiData[2]
domCache.$wikiArticlesList.html(
'');
var authorName = wikiData[0];
if (authorName === "Unknown") {
console.log(
"This is author's name " +
authorName);
$('.bioDiv').html('');
$('.bioDiv').text(
'No available information'
);
}
for (var j = 0; j < wikiData.length; j++) {
var articleAuthor =
wikiData[1][j];
var articleInfo = wikiData[
2][j];
var linkAuthor = wikiData[3]
[j];
domCache.$wikiArticlesList.append(
'<li class="articleItem">' +
'<span>' +
'<a href =' +
linkAuthor +
' target="_blank" >' +
articleAuthor +
'</a>' + '</span>' +
'<span class="shortInfo">' +
articleInfo +
'</span>' + '</li>'
);
// Check if some articles are undefined if so hide them
if (typeof articleAuthor ===
"undefined") {
$('.articleItem').last()
.html('');
}
if (articleInfo === "") {
$('.shortInfo').last().html(
'');
}
//console.log(j + " " + articleAuthor);
//console.log(j + " " + articleInfo);
//console.log(j + " " + linkAuthor);
} // end of for loop
// Short biography
console.log(wikiData);
console.log(wikiArcticles);
console.log(url);
domCache.$bioDiv.text(bioName);
} // end of success
});
} // wikirequest
wikirequest();
}
///////////////////////////////
//Display the quote on the page
///////////////////////////////
var displayQuote = function(quote, author) {
domCache.$quoteDiv.text(quote);
domCache.$authorDiv.text(author);
domCache.$authorName.text(author);
domCache.$bioDiv.text(getWikiAuthorBio(author));
};
//////////
//getQuote
/////////
var getQuote = function() {
$.ajax({
url: general.url,
type: 'GET',
dataType: 'jsonp',
jsonpCallback: "saveQuote",
data: 'method=getQuote&format=jsonp&lang=en&jsonp=saveQuote',
success: function(data) {
if (!data.quoteAuthor) {
data.quoteAuthor = general.unknownAuthor;
}
var quote = data.quoteText;
var author = data.quoteAuthor;
displayQuote(quote, author);
var addon =
"'s Related Wikipedia Articles";
domCache.$wikiArticlesDivHeader.text(
author + addon)
console.log(data);
} // end of success
});
} // get quote
////////////////////////////
//get new quote by clicking
///////////////////////////
var ul = function() {
domCache.$clickButton.on('click', getQuote);
domCache.$wikiArticlesList.html("");
};
var init = function() {
// Display a quote
getQuote();
ul();
};
return {
init: init
};
})(); // end of self-invoking function "randomQuoteGenerator"
//////////
//function is ready
///////////
$(document).ready(function() {
// Initialize the QuoteGenerator module
randomQuoteGenerator.init();
});
// SIDE NAVIGATION
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(".social-but").click(function() {
$(this).toggleClass("active");
});
Errors in console
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://worldartsme.com/images/youtube-icon-clipart-1.jpg'. This content should also be served over HTTPS.
Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?callback=saveQuote&method=getQuote&format=jsonp&lang=en&jsonp=saveQuote&_=1470391383459'. This request has been blocked; the content must be served over HTTPS.

The console errors you are receiving are exactly what they say they are, Mixed Content errors. You are loading the codepen page via HTTPS but the resources named in the errors are being loaded over HTTP. You can either change the URLs for those resources to HTTPS urls (alter http:// to https:// ) or remove the protocol designations entirely enabling the browser to pick which protocol to use ( remove http: leaving just the // ).

changing link image on hover

my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page.
I am trying to use an image for a link, and would like the image to change when you hover over it. The link below is what I am trying to accomplish, but for whatever reason when I substitute my code from my page to it, it doesn't work.
EXAMPLE http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover
I am completely lost now and just need a little help. Here is my code.
DEMO
function hoverImg(x) {
x.style.backgroundImage = "url(image/arrowBtnHover.png)"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.style.backgroundImage = "url(image/arrowBtn.png)"
}
#header {
background-color: #473D39;
height: 100%;
width: 100%;
display: table;
position: absolute;
z-index: 10;
}
#wrapper {
display: table-cell;
vertical-align: middle;
}
#header h1 {
text-align: center;
margin: 0px;
font-size: 80px;
padding-top: 5%;
font-weight: normal;
color: #FFF;
letter-spacing: 18px;
text-transform: uppercase;
}
#header h5 {
text-align: center;
color: #FFF;
margin: 15px 15px 50px;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
<div id="header">
<div id="wrapper">
<h1>Premier Webster</h1>
<h5>Local Web Design For The Profesional In You</h5>
<img onmouseover="hoverImg(this)" onmouseout="normalImg(this)" src="image/arrowBtn.png" />
</div>
</div>

Please take a look at https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition
div.smile {
background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
cursor: pointer;
}
div.smile:hover {
background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
transition: ease 0.5s;
}
<div class="smile"></div>

You should be changing the src attribute instead:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this.

Since it's an image, you need to change it's src property, not it's CSS.
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}

Regex not working in one circumstance [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code is an excerpt from a larger project, but I have tried to pull out the relevant material and provide that only.
I have a project, and the part that I need help with is this:
Product codes are generated by users via a series of drop-downs and radio buttons. The one part that will always stay the same is that there is a
(x11)
at the end of each line with a product number, where 11 represents the quantity of the product code, and will also change.
A demo of the relevant code is available at This Fiddle.
My problem is this: the deleteItem() function works when the code is displayed as
ca-fefefsefef (x45)
but not when I tried to change the format to display the quantity as
ca-fjeoisfne Qty. 78
(The difference being in the way the quantity is displayed, not the code itself)
All of the product codes are examples, are not real, and the actual codes will vary in length and content. The quantity of each product code will change as well.
I suppose what I am asking for is a new regex to replace the old one in the deleteitem() function, but this regex needs to work with
Qty. 23
where 23 is the quantity, and will change from code to code.
Basically, the selection of code that I have provided at the fiddle is designed to display each product code and its corresponding quantity in a drop down. The codes are stored in an array, as well as the quantities(in a separate array). The purpose of the deleteitem() function is when the delete button is clicked next to a product code and quantity, it not only deletes the product code and quantity from the drop-down, but it also deletes the corresponding items in the product_codes and quantities arrays. (with the help of the removetextfromarray() function)
Make sure to watch the web console, it will display the arrays before and after the items are deleted. You'll note that when the quantity is displayed as (x99), it works, but if you change it to Qty. 99, it removes the items from the dropdown, but does not remove the corresponding items from their arrays.
So what I need is a new regex to replace the old one (or possibly a new/updated deleteitem() function that will work with the quantity display format as
Qty. 3
instead of
(x3)
and will delete both the items both from the drop down, and delete the two items from their corresponding arrays.
Please keep in mind the following: The product codes in the array, and the quantities in their own array will change, the ones I have provided are examples. There may be more than three, and they will change in length. I am also unable to use Jquery.
If you can spare the time, I would love any help you can give. I've spent literally hours trying to build new regexes that will work, trying to uncode the existing one (I didn't write it) and such. A working fiddle would be absolutely GREAT. Thanks so much for any help.
If I'm not being clear, please comment and I'll be happy to answer any questions about it or make updates. Thanks again!

How about this: /\w*Qty\. \d+$/
(see example here https://jsfiddle.net/xes3eLxp/1/)
That means, match:
Zero or more white space characters (\w*),
Qty. (Qty\.),
A single space (),
One or more digits (\d+),
The end of the line ($).
Consider the sample string: "ckj-fjeieofj Qty. 56"
The above regex would match Qty. 56
product_codes = ['cr-rttrnhuj3', 'ckj-fjeieofj', 'jjff-cr-sd'];
quantities = ['2', '56', '98'];
myfunction = function () {
document.getElementById('cart_body').innerHTML = '';
cart_text = '';
emp = '<div class="close_button" onclick="deleteItem(this)">x</div>';
open_span = '<span class="close_span">';
close_span = '</span>';
elf = '<br class="none"/>';
for (i = 0; i < product_codes.length; i++) {
cart_text += "<div>" + open_span + product_codes[i] + " Qty. " + quantities[i] + close_span + emp + elf + "</div>";
}
document.getElementById('cart_body').innerHTML = cart_text;
}
function removeTextFromArray(array, text){
for (var i=array.length-1; i>=0; i--) {
if (array[i] === text) {
array.splice(i, 1);
quantities.splice(i, 1);
return array;
}
}
}
myfunction();
hider2 = function () {
cart_bod = document.getElementById('cart_body');
cart_bod.classList.toggle('closed');
}
//below function is the important one
deleteItem = function (item) {
//dot instead of hashtag
item.parentElement.remove();
console.log('set');
var textInNode = item.parentElement.getElementsByClassName("close_span")[0].innerHTML;
textInNode = textInNode.replace(/\w*Qty\. \d+$/g, "").trim();
//new regex is /*\Qty[^)]*\ */g
//old is / *\([^)]*\) */g
codes = removeTextFromArray(product_codes, textInNode);
console.log(product_codes)
console.log(quantities);
}
body {
font: 12px tahoma;
}
.centered {
border: 2px solid transparent;
margin: 0 auto;
width: 90%;
margin-bottom: 10px;
}
#debug-box {
}
#configurator-container {
}
#submit-box {
width: 400px;
height: 50px;
margin-bottom: 5px;
}
#unit-container {
border: 2px solid transparent;
width: 50%;
/*change this width to test whether it'll fit in the SEI website'*/
}
#quantity {
width: 40px;
}
.select-label {
}
dt {
float: left;
width: 45%;
text-align: right;
cursor: default;
}
br {
margin-bottom: 30px;
}
.none {
margin-bottom: 0px;
}
.s_container {
margin-top: 20px;
}
.sm_it {
font-style: italic;
}
i {
padding-left: 20px;
font-size: 10px;
}
input[type='email'] {
width: 235px;
}
.second_line_italics {
padding-left: 40px;
}
#configurator-container {
background-image: url("data:image/gif;base64,R0lGODlhBgAGAKIAANbXy+Hi29rc08THu9HWy8zQwwAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkYzM0I5RTQ3Q0UwRUUwMTFCMzMzRkRGNDFGODlGRDVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2QjNGNjE4ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2QjNGNjE3ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzQgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyMDlGMEYwQjg2QUUwMTFCOTg2OTk5N0I0QjM1NDEyIiBzdFJlZjpkb2N1bWVudElEPSIxNzA3NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh5N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAGAAYAAAMQSBpcLnBIQFlQBApXKJBDAgA7");
}
select {
width: 235px;
}
input[type='number'] {
width: 235px;
}
.twin_btns {
display: inline;
cursor: pointer;
}
.twin_divs {
margin: 0 auto;
margin-top: 10px;
z-index: 300;
position relative;
text-align: center;
}
#second_line_ex-length {
width: 215px;
margin-left: 20px;
}
#b-length-1 {
width: 145px;
}
#b-length-2 {
width: 145px;
}
.hidden {
color: grey;
pointer-events: none;
pointer: default;
border-color: grey;
}
.contact-i-header {
font-weight: bold;
font-size: 18px;
}
input[type='text'] {
width: 235;
}
#request-quote-container {
height: 60px;
width: 90%;
margin:0 auto;
border-bottom: 1px solid #ADAEA9;
font-family: Tahoma;
background-color: #DADCD3;
}
h2 {
opacity: .8;
width: 284.917px;
text-align: right;
}
.side-by-side {
display: inline-block;
}
h5 {
margin-left: 40px;
}
#item {
margin-top: 5px;
}
#triangle-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
opacity: 0.6;
}
.slider {
overflow-y: hidden;
transition-property: all;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}
.slider2 {
overflow-y: hidden;
transition-property: all;
transition-duration:.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
max-height: 200px;
}
.slider2.closed {
max-height: 0;
}
#submit_info {
text-align: center;
margin: 0 auto;
}
.bottom_btns {
}
#sent_box {
height: 20px;
text-align: center;
}
#write_box {
height: 20px;
text-align: center;
}
#send_box {
height: 20px;
text-align: center;
}
.cart_parts {
border: 1px solid black;
box-sizing: border-box;
width: 60%;
margin: 0 auto;
}
#cart_top {
height: 40px;
font-family: Tahoma;
background-color: #DADCD3;
margin: 0 auto;
box-shadow:
}
#cart_body {
text-align: center;
}
.close_button {
border: 1px solid black;
width: 12px;
height: 12px;
border-radius: 90px;
font-size: 12px;
text-align: center;
line-height: 11px;
background-color: lightGrey;
display: inline-block;
margin-left: 20px;
}
.close_span {
display: inline-block;
}
.close_button:hover {
color: red;
border: 2px solid red;
font-weight: bold;
}
#script_no {
color: red;
text-align: center;
font-size: 16px;
}
#not_supported {
text-align: center;
color: red;
}
#ter {
margin-bottom: 30px;
background-color: red;
}
#submit-box {
margin: 45px auto;
}
#tbr {
margin-bottom:10px;
}
<div id='cart_top' class='cart_parts'> <dt class='list-item' style='margin-top: 10px;'>
View your Quote
</dt>
<dd class='list-item'>
<div id='triangle-up' class='side-by-side' style='float: right; margin-right: 20px; cursor: pointer; margin-top: 15px;' onClick='hider2()'></div>
</dd>
</div>
<div id='cart_body' class='cart_parts slider2 closed'></div>

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>

I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});

try removing the
:focus {
-moz-outline-style:none;
}
and see what happens