Develop Reference

Open the menu with Hover and close it by clicking outside the cart

My problem is that by moving the shopping cart button, the card menu opens and by clicking except the card menu, the card box should be closed. I wrote some of these, help me get the solution, thank you.
$(document).ready(function() {
$('.shop').hover(function() {
$('.carts').css('visibility', 'visible');
});
});

You could check if the clicked target (e.target) is not the .carts element (negation with !):
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
Working example:
$(document).ready(function () {
$('.shop').hover(function () {
$('.carts').css('visibility', 'visible');
});
$('body').click(function(e) {
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
});
});
.shop {
background-color: yellow;
}
.carts {
background-color: red;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="shop">Shop</span>
<div class="carts">Test</div>

$(document).click(function() {
$(".carts").hide();
});
$(".carts").click(function(event) {
event.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carts" style="width: 50px;height: 50px;border: 1px solid;"></div>

Toggle changed button class

I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked.
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off"></i></button>
I create the javascript below, however it changed the button style="display:none" instead change its class.
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
$("#change").toggle(function()
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
}, function() {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});

There you go, I used toggleClass (http://api.jquery.com/toggleclass/) function to toggle the class when you click your button, it'll disabled this class fa-toggle-off and activate this class fa-toggle-on on click
(https://api.jquery.com/click/) and vice versa.
$(document).ready(function(){
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-off fa-toggle-on");
});
});
.fa-toggle-off {
background-color: #F00;
}
.fa-toggle-on {
background-color: #0F0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn">
Button <i id="change" class="fa fa-toggle-off">AAA</i>
</button>
Beware, in your code you're checking if #change is clicked, the button got #btn ID attribute.
Wish I helped you.

You can use .toggleClass to add or remove class alternatively
$(document).ready(function() {
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-on");
});
});
.fa-toggle-off {
color: red;
}
.fa-toggle-on {
color: blue;
}
.btn-default {
display: block;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off">Hello my button</i></button>

You can check if on/off class exist and then can remove existing class & add new class as below code:
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
if ($("#change").hasClass("fa-toggle-off"))
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
} else {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
Hope it helps you.

Repeating code execution while mouse button is down

$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
$('#btn').mousedown(function(){
$('.act').insertBefore($('.act').prev());
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>
Keeping the button pressed I need to continue act to be moved to the top, without clicking again, and again.
How to do that?

Use setInterval on mousedown then clearInterval on mouseup:
$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
var intervalId;
$('#btn').mousedown(function(){
intervalId = setInterval(function() {
$('.act').insertBefore($('.act').prev());
}, 500);
}).mouseup(function() {
clearInterval(intervalId);
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>

$('#btn').mousedown(function () {
var currentIdx = $(".act").index();
while (currentIdx != 0) {
$('.act').insertBefore($('.act').prev());
currentIdx = $(".act").index();
}
});

Showing a div and keep it show() if i clicked on it

$(document).ready(function() {
$('#input').focusin(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
});
$('#input').focusout(function() {
$('#div').hide();
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
</div>
<input id='input' type='text'>
In this jquery code, the #div shows when i type something inside the #input but if i tried to click on the #div it disappears and the link doesn't work,
How can i keep the #div shown if i clicked on #div or #input only, But anything outside will hide it as normal?
The Problem happens because of position: absolute; bottom 20px line in CSS.
Updated the code and suddenly it worked as intended after adding if statement after .focusin function, For previous error solution, remove the position and bottom in the CSS

You could disable the effect of the focusout handler by the use of a flag:
var noHide = false;
$(document).ready(function() {
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
$('#div a').hover(
function() { noHide = true; },
function() { noHide = false; $('#input').focus(); }
);
$('#input').focusout(function() {
if(!noHide) {
$('#div').hide();
}
});
});
#div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='#'>HellWorld</a>
</div>
<input id='input' type='text'>

When you blur out of the input, check if the currently active element is the DIV, and hide it if it isn't.
Also, if you're positioning an element absolutely, you need to give it a z-index so you can click on it. Otherwise, the click is sent to the normally-positioned element at that location.
$(document).ready(function() {
$('#input').focus(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
}).blur(function() {
if (!$("#div").is(":focus,:active")) {
$("#div").hide();
}
});
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
var search = $('#input').val();
$.post('search.php', {
search: search
}, function(data) {
$('#div').html(data);
});
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='www.someplace.com'>HellWorld</a>
</div>
<input id='input' type='text'>

How to show a indicator when clicked on a Button in this case

On Click Of the Try Again Button , is it possible to show some processing happening on the device
My jsfiddle
My code as below
$(document).on("click", ".getStarted", function(event) {
// Simulating Net Connection here
var a = 10;
if (a == 10) {
$('#mainlabel').delay(100).fadeIn(300);
$('#nonetconnmain').popup({
history : false
}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
$('#mainlabel').hide();
});
With my code , the functionality is working , but it seems that the application is not doing any action
So my question is it possible to show any indication (For example , delay , progressbar , anything )

Here ya go
$(document).on("click", ".getStarted", function(event) {
$.mobile.loading("show", {
text: "",
textVisible: true,
theme: "z",
html: ""
});
// Simulating Net Connection here
var a = 10;
if (a == 10) {
setTimeout(function() {
$.mobile.loading("hide");
$('#mainlabel').fadeIn(300);
}, 1000);
$('#nonetconnmain').popup({
history: false
}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
$('#mainlabel').hide();
});
.popup {
height: 200px;
width: 150px;
}
.popup h6 {
font-size: 1.5em !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
<div data-role="page">
<div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a">
<div class="popup_inner popup_sm">
<div class="popup_content" style="text-align:center;">
<p class="">Please check net connectivcty</p>
<label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check</label>
</div>
<div class="popup_footer nonetconnmainclose">
<a class="">Try Again</a>
</div>
</div>
</div>
<button class="getStarted btn btn-a get_btn">Click Here</button>
</div>

You can use a small function (with time as parameter) and use jQuery animate() to create the process effect like below.
var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}
Do notice that the time that is chosen when calling updateProgress() is relevant with the delay and the fade in effect of the text message
updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);
Check it on the snippet below
var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}
$(document).on("click", ".getStarted", function(event) {
var a = 10;
if(a==10)
{
updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);
$('#nonetconnmain').popup({history: false}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain",function( event, ui ) {
$('#mainlabel').hide();
});
.popup {
height: 200px;
width: 400px;
}
.popup h6 {
font-size: 1.5em !important;
}
#p {
border:none;
height:1em;
background: #0063a6;
width:0%;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"/>
<div data-role="page">
<div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a">
<div class="popup_inner popup_sm">
<div class="popup_content" style="text-align:center;">
<p class="">Please check net connectivcty</p>
<div id="p"></div><br>
<label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check </label>
</div>
<div class="popup_footer nonetconnmainclose">
<a class="">Try Again</a>
</div>
</div>
</div>
<button class="getStarted btn btn-a get_btn">Click Here</button>
</div>
Fiddle

Probably when you click on try again , you can have a setinterval triggered which can check for online connectivity and when found can close the popup and get started again, also when we do retries in the interval the progress can be shown as progressing dots..
Below is the code, i haven't tried to run the code, but it shows the idea
$(document).on('click', '.nonetconnmainclose', function(event) {
var msgUI = $("#mainlabel");
msgUI.data("previoustext",msgUI.html()).html("retrying...");
var progress = [];
var counter = 0 ,timeout = 5;
var clearIt = setInterval(function(){
var online = navigator.onLine;
progress.push(".");
if(counter > timeout && !online){
msgUI.html(msgUI.data("previoustext"));
counter=0;
}
if(online){
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
counter=0;
clearInterval(clearIt);
}
else{
msgUI.html("retrying" + progress.join(""));
counter++;
}
},1000);
event.stopImmediatePropagation();
event.preventDefault();
return false;
});

Sure,
try appending a loader GIF to one of the div and remember to remove the same when your process is finished.
Kindly refer to StackOverflow
And try appending this
$('#nonetconnmain').append('<center><img style="height: 50px; position:relative; top:100px;" src="cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/…; alt="loading..."></center>');
This will append a loader to your HTML to show some kind of processing.