Rich Text Editor doesnot work properly in IE 10 - javascript

I have Implemented richtext editor like this.
Problem 1. If i remove images and put simple div, it does not works. The function for
formatting is called, no error comes. But there is no output also. I tried this for div and span.
Problem 2. In IE 10, to format element I have to select previous element. Though it works well in firefox.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
var txtEditor;
var viewHtml = 1;
function initDoc() {
txtEditor = $('#textBox')[0];
}
$(window).load(initDoc);
function formatDoc(sCmd, sValue) {
//if (validateMode()) { document.execCommand(sCmd, false, sValue);
$(txtEditor).focus(); }
document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
}
function validateMode() {
if (viewHtml==1) { return true; }
alert("Uncheck \"Show HTML\".");
$(txtEditor).focus();
return false;
}
</script>
<style type="text/css">
#textBox {
margin-left: 10px;
width: 650px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox , #sourceText {
padding: 0;
margin: 0;
max-width: 650px;
min-height: 200px;
}
#editMode label {
cursor: pointer;
}
.attributesStyle {
margin-left: 0px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.link {
width: 16px;
height: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.marginLeft10 {
margin-left: 10px;
}
.clearBoth {
clear: both;
}
a:hover {
cursor: pointer;
}
</style>
<body >
<form >
<input type="hidden" name="myDoc">
<div style="margin-bottom:10px;">
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('formatBlock', '<h1>');">
<div id="h1" class="attributesStyle">
<img class="link" title="H1" src="~/Images/Heading1.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h2>');">
<div id="h2" class="attributesStyle">
<img class="link" title="H2" src="~/Images/Heading2.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h3>');">
<div id="h3" class="attributesStyle">
<img class="link" title="H3" src="~/Images/Heading3.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h4>');">
<div id="h4" class="attributesStyle">
<img class="link" title="H4" src="~/Images/Heading4.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h5>');">
<div id="h5" class="attributesStyle">
<img class="link" title="H5" src="~/Images/Heading5.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h6>');">
<div id="h6" class="attributesStyle">
<img class="link" title="H6" src="~/Images/Heading6.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<p>');">
<div id="divParagraph" class="attributesStyle">
<img class="link" title="Paragraph" src="~/Images/paragraph.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<pre>');">
<div id="divParagraph" class="attributesStyle">
Pre
</div>
</a>
<a onclick="formatDoc('formatblock', '<blockquote>');">
<div class="attributesStyle">
<img class="link" title="Quote" src="~/Content/themes/base/images /quote_1.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('bold');">
<div id="bolds" class="attributesStyle" title="Bold">
<img class="link" title="Bold" src="~/Images/text_bold.png" />
</div>
</a>
<a onclick="formatDoc('italic');">
<div id="italic" class="attributesStyle" title="Italic">
<img class="link" title="Italic" src="~/Images/text_italic.png" />
</div>
</a>
<a onclick="formatDoc('underline');">
<div class="attributesStyle" title="Underline">
<img class="link" title="Underline" src="~/Images/text_underline.png" />
</div>
</a>
<a onclick="formatDoc('insertorderedlist');">
<div class="attributesStyle">
<img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
</div>
</a>
<a onclick="formatDoc('insertunorderedlist');">
<div class="attributesStyle">
<img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
</div>
</a>
<a onclick="formatDoc('undo');">
<div class="attributesStyle" title="undo">
<img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
</div>
</a>
<a onclick="formatDoc('redo');">
<div class="attributesStyle" title="redo">
<img class="link" src="~/Content/themes/base/images/rotateRight.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('justifyleft');">
<div class="attributesStyle" title="Justify left">
<img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
</div>
</a>
<a onclick="formatDoc('justifycenter');">
<div class="attributesStyle" title="Justify Center">
<img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
</div>
</a>
<a onclick="formatDoc('justifyright');">
<div class="attributesStyle" title="Justify Right">
<img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
</div>
</a>
</div>
<a id="divToggleHtml" >
<div class="attributesStyle" title="Toggle Html">
Toggle HTML
</div>
</a>
<div class="floatLeft marginLeft10">
<a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
<div class="attributesStyle" title="Add Link">
<img class="link" src="~/Content/themes/base/images/link.png" />
</div>
</a>
<a onclick="formatDoc('InsertImage', true);">
<div class="attributesStyle" title="Add Image">
<img class="link" src="~/Content/themes/base/images/image.png" />
</div>
</a>
<a onclick="formatDoc('Unlink');">
<div class="attributesStyle" title="Unlink">
<img class="link" src="~/Content/themes/base/images/brokenLink.png" />
</div>
</a>
</div>
<div class="clearBoth">
</div>
</div>
<div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
<p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" style="display:none;" /></p>
</form>
</body>


i can provide a solution to the first problem.
didn't work for me either as long as i had text in there. problem seemed to be some kind of "select text instead of respond to the click"
add these css-settings for your button-divs:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
this should make your controls respond to clicking.
unfortunately, i can't test your 2nd problem as i'm working on linux ;)

Related

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});

Add Class To Parent IMG - LazySizes

With the lazysizes the images will carry one by one. The default class in the IMG element is lazyload and when an image is loading the lazyloading class comes into action next to it, and when the loading of that image finishes, the lazyloading class is replaced by the lazyloaded class what I want now is to use add / remove a class of the div.parent based on the classes that become active in IMG.
`<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="">
</a>
</div>`
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>

Solved by #dvd, #aFarkas: https://pt.stackoverflow.com/a/280306/95735
$(document).ready(function(){
$(".image-wrap").addClass("classe1");
const els = $(".image-wrap").find("img");
els.each(function(){
$(this).on("load error", function(){
$(this)
.closest(".image-wrap")
.addClass("classe2")
.removeClass("classe1");
});
});
});
/*linhas só para exemplo*/
.classe1{
background: red;
}
.classe2{
background: blue;
}
.image-wrap{
padding: 15px;
margin: 5px;
position:relative;
}
.classe1:before {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
content: "";
background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>
Solution #2
https://github.com/aFarkas/lazysizes/issues/474
$(document).on('lazybeforeunveil lazyloaded', function(e){
if(e.type == 'lazyloaded'){
var addClass = 'classe2',
removeClass = 'classe1';
}else{
var addClass = 'classe1',
removeClass = 'classe2';
}
$(e.target)
.closest('.image-wrap')
.addClass(addClass)
.removeClass(removeClass);
});
/*linhas só para exemplo*/
.classe1{
background: red;
}
.classe2{
background: blue;
}
.image-wrap{
padding: 15px;
margin: 5px;
position:relative;
}
.classe1:before {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
content: "";
background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
</a>
</div>
<div class="image-wrap">
<a href="#">
<img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
</a>
</div>
</div>

Jquery onclick Toggle large div menu

I am trying to expand menu What We Do Let's Meet.
The problem:div is below the navigation bar and acts like a large menu with 100% width. I made it working on codepen somehow but found solution to be naive. How can i have robust menu design where i can automatically get onclick toggle over every li element inside the ul with div class as target.
Secondary, i can't manage to change the background-color li element on click.
$( ".sub-menu1" ).click(function() {
$( ".sub-menu-list" ).toggle();
$( ".sub-menu-list1" ).hide();
});
$( ".sub-menu2" ).click(function() {
$( ".sub-menu-list1" ).toggle();
$( ".sub-menu-list" ).hide();
});
header.header {
color: #111;
background: rgba(255,255,255,1);
width: 100%;
displaY: flex;
justify-content: space-between;
font-weight:600;
}
header .header-item {
align-self: center;
}
header .header-items {
display:inline-block;
padding:0 3rem 0 0;
}
header li.header-items:last-child {
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-item">
<li class='header-items'>Hi!</li>
<li class='header-items'><a class="sub-menu1" href="#" > What We Do</a></li>
<li class='header-items'><a class="sub-menu2" href="#">Let's Meet</a></li>
</nav>
</header>
<section class="sub-menu-list" onfocusout="closed()">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
<form class="ci_form" action='' method='post'>
<div str-row>
<div str-xs="12" str-sm="4" str-sm-offset="2">
<input type="text" placeholder="Enter Name" name="fname">
</div>
<div str-xs="12" str-sm="4">
<input type="tel" placeholder="Contact Number" name="phone">
</div>
</div>
<section str-row>
<div str-sm="4" str-sm-offset="2" str-xs="12">
</div>
<div str-sm="4" str-xs="12">
<select id="fieldselector">
<option value="0">Select Reason to Contact</option>
</select>
</div>
</section>
<div str-row>
<div str-xs="12" str-sm="8" str-sm-offset="2">
<button class="button submission">Get Quote</button>
</div>
</div>
</form>
</section>
<section class="sub-menu-list1">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
</section>
The code snippet is not looking accurate but can help to some extent. Codepen demo looks far better. link given above.

Deleting and restoring items

I am trying to delete and restore items in this fashion:
when deleted (by pressing the red 'x') a picture of the item will appear in the navbar,
when the image is clicked in the navbar, the item will be restored onto the page.
As you can see, the last two functions that are currently commented out are what I have been trying to use to implement this functionality, however when I remove the comment '/*' my other javascript functions stop working. Any help would be greatly appreciated.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="jquery-cookie-master"/>
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand deleted-item hidden" id="box1">
<img class="navpics" src="surface3.jpg" alt="Microsoft Surface">
</a>
<a class="navbar-brand deleted-item hidden" id="box2">
<img class="navpics" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
</a>
<a class="navbar-brand deleted-item hidden" id="box3">
<img class="navpics" src="mabook.jpg" alt="Apple Macbook Pro Retina">
</a>
<a class="navbar-brand deleted-item hidden" id="box4">
<img class="navpics" src="superdrive.jpg" alt="Apple SurperDrive">
</a>
<a class="navbar-brand deleted-item hidden" id="box5">
<img class="navpics" src="case1.jpg" alt="Laptop Case">
</a>
</div>
</div>
</div>
<h2>Premium Computer Supplies!</h2>
</header>
<ul id="sortable" style="list-style-type:none">
<!----------------------------------------------------------------->
<!--<div id="all">-->
<li class="ui-state-default"><div class="row" id="box1">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div class="description" id="pnd1" hidden>
<!--Description and price-->
<div >
<p>With a variety of processors and memory options, there's a Surface for everyone!</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box2">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div class="description" id="pnd2" hidden>
<!--Description and price-->
<div>
<p>The Type Cover is a perfect accessory for your Surface!</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box3">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div class="description" id="pnd3" hidden>
<!--Description and price-->
<div>
<p>The Macbook is a must-have for students, parents, and more!</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box4">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div class="description" id="pnd4" hidden>
<!--Description and price-->
<div>
<p>Able to read disks, the SuperDrive is essential for burning music and home-movies!</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box5">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div class="description" id="pnd5" hidden>
<!--Description and price-->
<div>
<p>Carry your computer with you anywhere with a computer bag!</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6',
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1',
}, 1);
});
$("div#box1").click(function(){
$("#pnd1").animate({
hidden: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
hidden: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
hidden: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
hidden: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
hidden: 'toggle'
});
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$('button.close').click(function() {
$(this).parent().animate({
'opacity': 0
}, 1, function() {
$(this).css({'display': 'none'})
})
$(".deletedItem#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
</script>
</body>
CSS:
.bodypics {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
#sortable li {
height: 402px;
float: left;
}
.close{
color:red;
}
.navpics{
width: 70px;
height: 30px;
}

I have figured it out! Mainly a combination of me being careless and inexperienced, but here's the solution:
Just change this last bit of code:
$('button.close').click(function() {
var name = $(this).parent().attr("id");
$(this).parent().toggleClass("hidden");
$(".deleted-item#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
And now all is dandy!

Categories

Resources