I have tried to get the following demo working using a collapsible set instead of a listview and I am unable to do so:
http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/
Once the collapsible set is made sortable, the collapse functionality gets broken.
I am using:
JQuery Mobile 1.4.5
JQuery 1.11.0
JQuery-UI 1.11.4
Cordova 6.3.0
And I'm testing this on Android (SGS4)
HTML:
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.touch-punch.min.js"></script>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
JavaScript:
$(document).on("pageshow","#test",function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
/// Refresh list to the end of sort to have a correct display
$( ".sortable" ).bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});
pageshow event not firing. Go through the following code, it is working perfectly.
HTML code:
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
</html>
js code:
$(document).ready(function(){
$(".sortable").sortable();
$(".sortable").disableSelection();
/// Refresh list to the end of sort to have a correct display
$(".sortable").bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});
I hope this will help someone else out. I have not been able to get a collapsible set to work correctly with drag and drop functionality in cordova, so I came up with a different method. I just placed buttons on the collapsible header so that they can move up or down. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/app.css" rel="stylesheet" >
<link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.theme.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jsignature/jSignature.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable ui-collapsible-set ui-group-theme-a ui-corner-all" data-enhanced="true">
<div data-role="collapsible" id="collapsible-1" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 1<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 1</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-2" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 2<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 2</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-3" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 3<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-4" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 4<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 4</p>
</div>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
CSS:
.circular-btn {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
padding: 0px !important;
margin: 0px !important;
}
.circular-btn span span {
height: 100px !important;
line-height: 70px;
}
.span-move-up {
position: relative;
z-index: 10;
float: right;
top: -22px;
left: -40px;
}
JavaScript:
$('.move-collapsible-up').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var prevCollapseElem = currCollapseElem.prev('div');
/// detach and attach the add button
currCollapseElem.insertBefore(prevCollapseElem);
$('.sortable').collapsibleset('refresh');
});
$('.move-collapsible-down').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var nextCollapseElem = currCollapseElem.next('div');
/// detach and attach the add button
currCollapseElem.insertAfter(nextCollapseElem);
$('.sortable').collapsibleset('refresh');
});
Again, I hope this helps someone. If I have any issues in my code please don't hesitate to comment.
Related
<html><head>
<title>J.T.C.</title>
<meta charset="utf-16">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/mainsd2B.css">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Scroll -->
<link href="https://fonts.googleapis.com/css?family=Heebo:460|Ramabhadra|Roboto" rel="stylesheet">
<!-- Adjust top of navbar -->
<script type="text/javascript">
var sw = document.getElementById('side-menu');
window.addEventListener('resize', function(event){
sw.style.width = '0px';
});
</script>
<script type="text/javascript">
var s = document.getElementById('side-menu');
function resizeFunction() {
s.style.display = 'none';
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
<script type="text/javascript">
// Reset Navbar top afer scroll
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
<script type="text/javascript">
//Control side-nav top position
$(function () {
$(document).scroll(function () {
var $nav1 = $(".side-nav-fixed-top");
$nav1.toggleClass('scrolled', $(this).scrollTop() > $nav1.height());
$nav1.visibility= "hidden";
});
});
</script>
<script type="text/javascript">
// Show Hide Navbar UL List
$(window).scroll(function(){
if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
$('.side-nav').hide();
}
});
</script>
<style>
#media screen and (max-width: 927px) {
.navbar {
overflow: visible;
}
}
</style>
</head>
<body onresize="resizeFunction()" >
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="/assets/css/images/header46.jpg" alt=""></span>
</header>
<!-- Nav -->
<nav id="nav">
<div id="mainconm"><img src="/assets/css/images/mainltx.png" alt=""></div>
<ul>
<li>Home</li>
<li>Section One</li>
<li>Social
<ul>
<li>Section Two</li>
<li><a href="#third" class="" >Section Three</a></li>
</ul>
</li>
<li>Course
<ul>
<li>Section Four</li>
<li><a href="#fifth" class="" >Sections Five</a></li>
</ul>
</li>
</ul>
</li>
</nav>
<div id="sticky-anchor"></div>
<!-- class="navbar" -->
<nav class="navbar navbar-fixed-top" id="navigation" onscroll="navtotop()">
<span class="open-slide">
<button id="menu-box" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"></path>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"></path>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"></path>
</svg></button>
</span>
<div id="side-menu" class="side-nav side-nav-fixed-top bg-primary" style="display: none; width: 0px;">
<span class="open-slide">
<div style="height:70px; width: 100%; background:rgb(6, 13, 19, 1)" >
<button id="menu-box" style=" background: #000; border-radius: 0;" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0, 3 30,25" stroke="#fff" stroke-width="3"></path>
<path d="M0,25 60,-17" stroke="#fff" stroke-width="3"></path>
</svg>
</button>
</div>
</span>
Home
<a href="#first" class="slide" >Section One</a>
<a href="#second" class="slide" >Section Two</a>
<a href="#third" class="slide" >Section Three</a>
<a href="#forth" class="slide" >Section Four</a>
<a href="#fifth" class="slide" >Section Five</a>
<a href="#seventh" class="slide" >Section Six</a>
</div>
<div id="conm"><img src="assets/css/images/mainltx.png" alt=""></div>
</nav><div id="intro" style="position: absolute; z-index: 8000; top: 100px;"></div>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section class="main" style="padding-top: 20px !important;">
<div class="spotlight">
<div class="content">
<div id="largeicon" >
<span class="image"><img src="assets/css/images/homeimage.png" alt=""></span>
</div>
<div id="smallicon" class="alt">
<span class="logo"><img src="/assets/css/images/smallbanner.png" alt=""></span>
</div>
<header class="major">
<h3>Help us help you. Please take the surveys below.</h3>
</header>
<div style="float: clear;"></div>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
</header>
<div id="contact" class="sticky slide" >Contact Us</div>
<span class="image"><img style="width: 100%;" src="/assets/css/images/jb.png" alt=""></span>
<div id="coach" class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special apcol">
<header class="major">
<span class="image"><img style="width: 100%;" src="/assets/css/images/ps.png" alt=""></span>
<div class="center-list" style="margin-top: .05em;">
</div>
<footer class="major">
</footer>
</header></section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/lt-icon.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/cting.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Fifth Section -->
<section id="fifth" class="main special inactive">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/vt.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
</div>
<!-- Footer -->
<div id="seventh" class="inactive"></div>
<footer id="footer">
<section>
</section>
<section>
<dl class="alt">
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
// Toggle close with button
var s = document.getElementById('side-menu');
function toggle_visibility() {
if(s.style.width == '0px')
s.style.width = '300px';
else
s.style.width = '0px';
}
</script>
<script type="text/javascript">
// Smooth Scroll
$(document).ready(function() {
$('.slide').click(function() {
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $(link).offset().top}, 2000);
return false;
});
});
// toggle close ul after select from list
document.getElementById('side-menu').style.display = 'none';
document.getElementById('side-menu').style.width = '0';
$(function() {
$("button").click(function() {
$("#side-menu").show();
});
$("#side-menu a").on('click', function(e) {
e.stopPropagation();
$("#side-menu")
.show()
/* .siblings() */
.val($(this).html());
});
});
</script>
</body></html>
My issue is that I have to click twice in order to get the mobile drop down menu for the website to either open or close. I believe that the JavaScript and HTML is sufficient. I have not been able to modify this JavaScript so that it works properly. Nothing I have tried works. Any suggestions? I have simplified this HTML to the essentials
You have very shared very little information. Possible reason can be that s.style.width is not 0px on initiation. Thats why the first click makes it 0px and the second click opens it. Try adding s.style.width='0px' at the start of the script.
I deleted the JavaScript (// toggle close ul after select from list) that is the at the bottom of the codes since it was clashing with the javascript (// Toggle close with button), which is also located near the bottom. I then used another JavaScript similar to the JavaScript found in (// Toggle close with button) to toggle close ul after a selection is selected from the list. This solved the double clicking issue.
Is the script tag with no src attribute is wrong?
I have written this script tag
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
I am getting this error on console Failed to load resource: the server responded with a status of 404 (Not Found). I am unable to understand what is the problem. I have included the jquery core library on header of page. Also there are some other javascripts codes that are included bfore this code but they did not throws any error. I have also attached a screenshot of the console.
Update 1
I tried after removing the type attribute. nothing happens :( .
I have included the jquery library version 1.9.1 in header.
Update 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Bharat">
<title>::Eduesy:: </title>
<meta property="og:title" content="Bharat">
<meta property="og:description" content="Bharat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/web.css?1.0" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/app.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/tooltip.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/custom.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/vendor.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/libs.all.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/app.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tooltip.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tpr.web.min.js"></script>
<script src="http://eduesy.fsas.co.in/js/student/chartist.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".header").addClass('header-fix');
}else{
jQuery(".header").removeClass('header-fix');
}
});
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".row-blue").addClass('header-fix');
}else{
jQuery(".row-blue").removeClass('header-fix');
}
});
});
</script>
</head>
<body>
<div class="header">
<header>
<div class="cf">
<div class="pTopHeader_dropdown pTopHeader_userDropdown non-selectable fr js-user-dropdown">
<a class="pTopHeader_dropdown_trigger pTopHeader_userDropdown_trigger js-trigger">
<span class="profilename">Welcome Chandu</span> <img class="pTopHeader_userDropdown_thumb " alt="" src="http://eduesy.fsas.co.in/uploadedFiles/student/IMG_20150412_182136 (2) - Copy.jpg"/>
</a>
<ul class="pTopHeader_dropdown_menu pTopHeader_dropdown_menu-right pTopHeader_userDropdown_menu js-dropdown">
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Profile
</li>
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Switch Course
</li>
<li>
<span class="fa fa-power-off pTopHeader_dropdown_menu_icon"></span>Logout
</li>
</ul>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide">
<a role="button" tabindex="0" class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Contact Us</a>
<div class="pTopHeader_contactUpWrapper_tooltip">
<div class="contactTooltip">
<div class="cf">
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-feedback"></div>
<div class="contactTooltip_title">Share Feedback</div>
<div class="contactTooltip_subtitle">Share your feedback for us. We are continuously working to improve your experience.</div>
<div class="contactTooltip_callUsNo">abc#xyz.com</div>
</div>
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-callus"></div>
<div class="contactTooltip_title">Call us</div>
<div class="contactTooltip_subtitle">We are happy to hear from you. We are available from 9am to 6pm on all days.</div>
<div class="contactTooltip_callUsNo">+91 - 1800 123 456</div>
</div>
</div>
<div class="contactTooltip_footer">
<span class="contactTooltip_footer_mapIcon fa fa-map-marker" aria-hidden="true"></span>
<div class="contactTooltip_footer_content">
<div class="contactTooltip_footer_title">Eduesy Online Education </div>
<div class="contactTooltip_footer_text">Mumbai - 400076, India</div>
</div>
</div>
</div>
</div>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide notification">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white"><i class="fa fa-bell" aria-hidden="true"></i><span>0</span></a>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide btn-buy">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Buy</a>
</div>
</div>
</header>
<div class="logo">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="mainSidebar_logoBlock_logo -ajaxify" title="EduEsy" style="width: 176px !important">
<div class="mainSidebar_logoBlock_logo_img" style="background-image: url(http://eduesy.fsas.co.in/images/logo.png)"></div>
</a>
</div>
<div class="mobileMenu">
<div class="mobileMenu_fallbackHeader"></div>
<div class="mobileMenu_hamburger js-hamburger-menu">
<div class="mobileMenu_hamburger_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="row-blue">
<div class="pull-left">
Admission Taken Date: 29/05/2017
</div>
<div class="pull-right">
Student ID: EDUESY116 <span>|</span> Package Valid till: 25/12/2017
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.class_slider').click(function(){
jQuery('[name=product_id]').val(jQuery(this).data('product_id'));
jQuery('[name=product_type]').val(jQuery(this).data('product_type'));
jQuery(this).parents('form').submit();
});
});
</script>
<div class="popupbox" id="popuprel_course">
<div id="intabdiv">
<div id="test_tool_modals_wrapper">
<div class="md mdTestPause js-test-pause-modal is-visible" style="overflow-y: auto;">
<div class="close">X</div>
<form action="" method="post">
<div class="obrdV2_container js-modules-container pb-10 ">
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module profiletype" data-module="profiletype">
<div class="p-20 clickable js-toggle-module">
<div class="obrdV2_module_image obrdV2_module_image-klass fl"></div>
<div class="obrdV2_module_heading js-module-heading">
<div class="title">Choose one of the following</div>
<div class="selectedValue js-selected-value"></div>
</div>
<div class="arrowDown js-arrow-down class" style="display: none;"></div>
<div class="clr"></div>
</div>
<div class="obrdV2_module_body js-module-body visible ">
<div class="col-md-6 col-sm-12">
<div class="item academic"><label><input type="radio" name="profileType" value="academic" id="academic" style="display: none;"> Academic</label></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="item professional"><label><input type="radio" name="profileType" value="professional" id="professional" style="display: none;">Professional Courses</label></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module address hide" data-module="address"></div>
<div class="clr"></div>
<div class="submit-row hide">
<div class="obrdV2_module js-module-class js-module submit" data-module="submit">
<div class="obrdV2_module_body js-module-body visible">
<input type="submit" name="switchCourseSubmit" class="btn btn-default" value="Save and Continue">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script>
$(document).ready(function() {
$('.switch_class').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
jQuery('body').on('click', '.popupbox .close', function() {
jQuery(this).parents('.popupbox').fadeOut();
jQuery('#fade').fadeOut();
return false;
});
jQuery('.profiletype .js-module-body .item').on('click', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="profileType"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'profiletype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level2').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.classtype', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="classtype"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'boardtype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level3').remove();
jQuery('.address').before(html);
}
});
}
});
jQuery('.obrdV2_container').on('click', '.boardListing', function(evt){
if (evt.target.tagName == 'INPUT'){
var board = jQuery('[name="boardID"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'classList', classList: board},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level4').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.obrdV2_klass', function(evt){
if (evt.target.tagName == 'INPUT'){
jQuery(this).siblings( '.selected').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.address').removeClass('hide');
jQuery('.submit-row').removeClass('hide');
}
});
jQuery('.obrdV2_container .address').on('change', function(evt){
jQuery('.submit-row').removeClass('hide');
});
(function($){
$(window).on("load",function(){
var modal_ht = jQuery('#popuprel_course .popupbox').actual('height');
jQuery("#popuprel_course #intabdiv").height(modal_ht);
jQuery("#popuprel_course #intabdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick",
scrollbarPosition:"outside",
updateOnBrowserResize: true,
updateOnContentResize: true
});
});
})(jQuery);
});
</script>
<style type="text/css">
.popupbox .close {
position: absolute;
right: 10px;
top: 8px;
font-size: 20px;
font-weight: bold;
background: #fff;
color: #000;
z-index: 9999999999999999;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
</style>
<div class="pageContentContainer">
<div id="page_content_wrapper" class="js-page-content-wrapper">
<div class="pHeader js-page-content">
<div class="cf">
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide paging">
<a href="http://eduesy.fsas.co.in/student" >Dashboard</a> » <a href="index.php" >Lecture</a>
» <a href="javascript:void(0);" >HTML JavaScript</a>
</div></div>
<div class="pHeader_content pt-25 pb-20 phn-pb-5 clearfix">
<div class="container">
<h1 class="h1 color-white normal">
Lectures
</h1>
</div>
</div>
<div class="pHeader_tabsWrapper js-page-tabs-wrapper">
<div class="container">
<nav role="navigation">
<ul class="pHeader_tabs">
<li class=""><a data-tab="challenges_home" href="index.php?subject=51" class="-ajaxify -strk" >HTML Basic</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=52" class="-ajaxify -strk" >HTML Styles</a></li> <li class="active"><a data-tab="challenges_home" href="index.php?subject=53" class="-ajaxify -strk" >HTML JavaScript</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=54" class="-ajaxify -strk" >HTML And XHTML</a></li>
</ul>
</nav>
</div>
</div>
<div class="pHeader_tabsSpacing"></div>
</div>
<div class="container js-page-content">
<div class="coachmarks_icon coachmarks_icon_selectSubject hide js-coachmarks"></div>
</div>
<div class="container pv-30 cf">
<div class="pCol pCol-wide alpha js-pageLearn">
<aside class="pCol pCol-narrow omega phn-mt-40">
<div class="heading heading-bordered h3 bold">Chapters</div>
<div class="cf mt-30 mb-50">
<a href="topic.php?topic=26"><div class="chapterTile tile tile-shadowed select_subject cf js-chapter-tile mb-20 tab-mb-20 phn-mb-15" data-subject_id="19">
<div class="chapterTile_arrowContainer">
<h2 class="chapterTile_title ">HTML File Paths</h2>
<span class="tile_arrow fa fa-angle-right"></span>
</div></div></a>
</div>
</aside>
</div>
<div class="sidebar-common">
<h2>Our mission is to provide a world class education to anyone, anywhere.</h2>
<h3>You will receive inside.</h3>
<ul>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-video.png" /></label>Video Lecture</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-test-series.png" /></label>Test Series</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-study-material.png" /></label>Study Material</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-doubt-section.png" /></label>Doubt Section</li>
</ul>
</div>
<div class="clr"></div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
</div>
<div class="container">
<footer class="footer mv-20">
<ul>
<li>© Eduesy</li>
<span class="footer_dot">•</span>
<li>About</li>
<span class="footer_dot">•</span>
<li>Upgrade</li>
<span class="footer_dot">•</span>
<li>Contact</li>
<span class="footer_dot">•</span>
<li>Terms</li>
<span class="footer_dot">•</span>
<li>Bytes</li>
<span class="footer_dot">•</span>
<li>Blog</li>
</ul>
<div class="clr"></div>
</footer>
</div>
</div>
<div class="mainSidebar js-main-sidebar">
<div class="mainSidebar_switcherBlock js-class-switcher">
<a class="mainSidebar_switcherBlock_switch js-selected-class"> HTML</a>
<div class="mainSidebar_switcherBlock_dropdown js-dropdown">
<form method="post" action="http://eduesy.fsas.co.in/student/lectures/index.php">
<label class="mainSidebar_switcherBlock_option class_slider js-switchOption selected" data-class-title="HTML " data-product_id="47" data-product_type="Course" selected>HTML<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label><label class="mainSidebar_switcherBlock_option class_slider js-switchOption " data-class-title="Advance PHP " data-product_id="61" data-product_type="Course" >Advance PHP<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label>
<input type="hidden" name="product_id" value="course" />
<input type="hidden" name="product_type" value="47" />
<input type="hidden" name="change_product_type" value="1" />
</form>
</div>
</div>
<nav role="navigation" class="mainSidebar_contentBlock mainSidebar_contentBlock-withSwitcher js-main-sidebar-content-block">
<div class="mainSidebar_sHeading">Study Modules</div>
<ul class="mainSidebar_sNav js-mainSidebar-study">
<li data-tab="learn" class="active open">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="-ajaxify q_tip_w" original-title="Lectures">
<div class="iconWrapper">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Lectures</div>
</a>
</li>
<li data-tab="practice" class="">
<a href="http://eduesy.fsas.co.in/student/practice/index.php" class="-ajaxify q_tip_w" original-title="Practice">
<div class="iconWrapper">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Practice</div>
</a>
</li>
<li data-tab="tests" class="">
<a href="http://eduesy.fsas.co.in/student/tests/index.php" class="js-lhs-ts-link q_tip_w -ajaxify -strk">
<div class="iconWrapper">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Tests</div>
</a>
</li>
<li data-tab="tests" class=""><div class="iconWrapper"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><span class="arrow fa fa-angle-right"></span><div class="label">Exam</div></li>
<li data-tab="doubts" class="">
<a href="http://eduesy.fsas.co.in/student/doubt/index.php"
class="-strk -ajaxify q_tip_w js-startDoc">
<div class="iconWrapper">
<i class="fa fa-weixin" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Doubts</div>
</a>
</li>
<li data-tab="challenges" class="">
<a href="http://eduesy.fsas.co.in/student/challenges/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Challenges</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">My Profile</div>
<ul class="mainSidebar_sNav js-mainSidebar-compare">
<li data-tab="dashboard" class="">
<a href="http://eduesy.fsas.co.in/student/dashboard/index.php" class="-ajaxify q_tip_w" original-title="Dashboard">
<div class="iconWrapper">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Dashboard</div>
</a>
</li>
<li data-tab="my_bookmarks" class="">
<a href="http://eduesy.fsas.co.in/student/placement/index.php" class="-ajaxify -bookmarks q_tip_w">
<div class="iconWrapper">
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Placement</div>
</a>
</li>
<li data-tab="achievements" class="">
<a href="http://eduesy.fsas.co.in/student/achievement/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-trophy" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Achievements</div>
</a>
</li>
<li data-tab="leaderboard" class="">
<a href="http://eduesy.fsas.co.in/student/leaderboard/index.php" class="-ajaxify -strk q_tip_w">
<div class="iconWrapper">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Leaderboard</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">Study Tools</div>
<footer class="mainSidebar_footer mv-20">
<ul class="cf">
<li>© Eduesy</li>
<span class="mainSidebar_footer_dot">•</span>
<li>About</li>
<span class="mainSidebar_footer_dot">•</span>
<li>
Discuss
</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Blog</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Terms</li>
</ul>
</footer>
</nav>
</div>
</body>
</html>
ShowMsg('Access denied ! ! !'); Access denied ! ! !
Here is a simple dropdpwn popup example from semantic-ui which fails to work:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="example">
<div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colors</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
<a class="item">
<i class="cart icon"></i>
Checkout
</a>
</div>
</div>
<div id="web_content">
</div>
<div id="web_footer">
</div>
</form>
<script type="text/javascript">
$('.example .menu .browse').popup({
inline: true,
hoverable: true,
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
</script>
</body>
when I click/hover on browse nothing happens. i don't know enough about jquery selectors tough. thanks for reading.
I am trying to create an app in JQuery Mobile in which I can dynamically create buttons with popups. I have this code, but whenever I refresh the page, it opens automatically at the top of the screen, unlike all of the other popups.
$(document).on("pageinit", "#home", function() {
$(".img-holder").append(
$("<div />", {"class" : "spot_holder"}).append(
$("<a />", {
"href" : "#ashcloud",
"data-rel" : "popup",
"class" : "spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all",
"data-transition" : "flip",
"style" : "top: 35px; left: 240px"
})
).append(
$("<div />", {
"data-role" : "popup",
"id" : "ashcloud"
}).append(
$("<p />").text("Ash Cloud")
).popup()
)
)
})
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jQueryMobile/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="styles.css">
<script src="js/jQueryMobile/jquery-1.11.3.min.js"></script>
<script src="js/jQueryMobile/jquery.mobile-1.4.5.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div class="ui-content">
<div class="img-holder">
<img src="img/volcano.jpg" class="image" width="500px">
<!--
<div class="spot-holder">
<a href="#ashcloud"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 35px; left: 240px;"></a>
<div data-role="popup" id="ashcloud">
<p>Ash Cloud</p>
</div>
</div>
-->
<div class="spot-holder">
<a href="#mainpipe"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 250px; left: 232px;"></a>
<div data-role="popup" id="mainpipe">
<p>Main Pipe</p>
</div>
</div>
<div class="spot-holder">
<a href="#sidevent"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 180px; left: 210px"></a>
<div data-role="popup" id="sidevent">
<p>Side Vent</p>
</div>
</div>
<div class="spot-holder">
<a href="#lavaflow"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 120px; left: 215px"></a>
<div data-role="popup" id="lavaflow">
<p>Lava Flow</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Never mind I have found a solution.
Instead of creating a popup for every button, create a single popup that is chared across all of the buttons, then through JS, change the text in the popup for every time you click on it.
It looks like you are trying to create dialogue in pure jQuery way rather than jQuery Mobile.
Below is example how to create jQuery Mobile dialogue. Notice, that there is no Javascript code here. All you need is to create page with data-dialog="true" attribute and link it from your [main] page.
<!--...-->
<!-- page Help -->
<div data-role="page" id="help" data-theme="b">
<!-- header (same data-id for persistent toolbar) -->
<div data-role="header" data-id="tabnav-header" data-position="fixed"
data-theme="b">
<h1>MyApp</h1>
</div>
<!-- content -->
<div data-role="content" class="content_div">
<ul data-role="listview">
<li>About</li>
</ul>
</div>
<!-- footer -->
<div data-role="footer" data-id="tabnav-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
<!-- This page is actually a dialogue window -->
<div data-role="page" data-dialog="true" id="about" data-theme="b">
<div data-role="header" data-theme="b">
<h1>About</h1>
</div>
<div data-role="main" class="ui-content" data-theme="b">
MyApp. All rights deserved.
</div>
<div data-role="footer" data-theme="b"></div>
</div>
...
There is an example on JQ mobile how to create popup dynamically. http://demos.jquerymobile.com/1.4.1/popup-dynamic/
First, they appends on pagecreate event instead of "pageinit".
Second, and I think this is the trick, they call "trigger("pagecreate")" after append.
$.mobile.activePage.append( popup ).trigger( "pagecreate" );
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!