When I click to the button and close my box with jQuery ( Toggle ) ,If the box closed I want to box will depend on hold after I refresh the page . Or If it's Open ,after I refresh the page It will stay open.
I don't know the code that help me do what I want .
For example I wrote a code when we click on red Square , the blue square will be disappear and when we click on it again the blue square will be appear . but there is a problem that after I refresh the page My data or changes will be forgotten .
DEMO
CSS :
.close-open {
background:red;
width:50px;
height:50px;
float:left;
}
.box {
background:blue;
width:100px;
height:100px;
float:left;
clear:left;
margin:40px 0px 0px 0px;
}
HTML :
<span class="close-open"></span>
<div class="box">Test Box Toggle</div>
jQuery :
$(document).ready(function(){
$(".close-open").click(function(){
$(".box").toggle();
});
});
You can achieve this with some ways. I will show one with Web Storage:
js
$(document).ready(function(){
var isClose = localStorage.getItem("isClose");
if(isClose == "false"){
$(".box").hide();
}
$(".close-open").click(function(){
$(".box").toggle(
function(){
localStorage.setItem("isClose", $(this).is(':visible'));
});
});
});
fiddle
The localStorage object stores the data with no expiration date. The
data will not be deleted when the browser is closed, and will be
available the next day, week, or year.
If you want restrict this functionality to the particular session you can use this...
$(document).ready(function(){
if(sessionStorage.isVisible == "false" ){
$(".box").hide();
sessionStorage.isVisible = "true";
}
else
sessionStorage.isVisible = "false";
$(".close-open").click(function(){
sessionStorage.isVisible = $(".box").toggle().is(':visible');
});
});
fiddle Demo
Related
I'm brand new to Svelte (3.0+)...and for my latest project, I'd like to emulate the functionality of many "todo" lists that allow you to edit todo items previously submitted by double-clicking on them (Here's an example of the functionality I'm looking for).
I imagine, the first step is figuring out how to make a div contentEditable with Svelte with the on:dblclick event handler. I'm having trouble figuring out the syntax for this task (though I can do it with vanilla javascript).
Here's the Svelte code I have so far: ( Here it is on CodeSandBox.io - see page: CEDiv.svelte)
<script>
function edit(event) {
//update db functionality goes here
//alert("you've 'submitted' your edit")
}
function handleDblClick() {
//I need help HERE...and probably on the div on:dblclick down below....
}
function handleKeydown() {
key = event.key;
keyCode = event.keyCode;
//submit the div's content to the edit function if enter or tab is pressed.
keyCode == 13 || keyCode == 9 ? edit(event) : null;
}
</script>
<style>
div.read-mode {
padding:10px;
border:1px solid green;
height:30px;
line-height:30px;
width:500px;
margin:0 auto;
}
div.edit-mode {
padding:10px;
background: lightgreen;
border:3px solid green;
height:26px;
line-height:26px;
width:496px;
margin:0 auto;
}
</style>
<div on:dblclick={handleDblClick} class="read-mode" on:keydown={handleKeydown} contentEditable="false">
I want this Div to be editable one double click.
</div>
Thanks in advance for your help!
Add a boolean variable
let editable = false;
which will be changed inside your handler
function handleDblClick(event) {
editable = true; // or use editable=!editable to toggle
}
bind your editable variable inside the attribute,
and take a look how to dynamically toggle the class "edit-mode" using a ternary operator
<div
on:dblclick={handleDblClick}
class={editable ? 'edit-mode': 'read-mode'}
on:keydown={handleKeydown}
contenteditable={editable}>
I want this Div to be editable on double click.
</div>
Here's a CodeSandbox fork
I have created a very simple and basic Jquery script that changes the class for textboxes on my site in order for them to have a different colored background when a button is clicked. I then attempted (with the help of a Jquery-for-dummies-book) to set it up so that the color choice is remembered locally.
I must however be a greater "dummy" than expected because I have not been able to make this work.When I upload the script to the server and test it on the site, I can change the color, but if I close then window and then go to my website again, the color is back to default. It is NOT remembered/stored.
Is it possible the problem stems from the fact that my textboxes use the class "row" to set the background color, and you can not change a class to a different class, but must use a proper element or ID? Or should the order of the script-parts perhaps be different?
Any and all insight is appreciated on my learning-journey.
External script
$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") { $(".row").addClass("farve");
}
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {localStorage.removeItem("farvevalg")}
$('#farvevalg').click(function(){
$(".row").toggleClass('farve');
}); }
My HTML
/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}
Your attempt is correct but add/remove localStorage you are doing at the wrong place. You should do it inside that button click.
WORKING FIDDLE
Snippet won't work because of the CORS issue. It's for code view only.
$(document).ready(function () {
if (localStorage.getItem("farvevalg") == "farve") {
$(".row").addClass("farve");
}
$('#farvevalg').click(function () {
$(".row").toggleClass('farve');
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {
localStorage.removeItem("farvevalg")
}
});
});
/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row">
Test
</div>
<button id="farvevalg">
Change
</button>
some changes in login, not tested but should work
$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") {
$(".row").addClass("farve");
}
$('#farvevalg').click(function(){
//only here we add/remove setting
var wasFarveColor = $(".row").hasClass("farve")
$(".row").toggleClass('farve');
if(wasFarveColor)
localStorage.removeItem("farvevalg")
else
localStorage.setItem("farvevalg", "farve")
});
})
what you are doing is, at the start of your application, check it there is a saved item 'farvevalg' with value 'farve'. If that is the case, then you add the class 'farve' to all elements with class 'row'.
After this you check if there is a row element with class 'farve' and, if that is the case' you set the item in storage, otherwise you delete it. As you can see it doesn't make sense for this bit of code to be here as it won't have any effect. You should instead move this if/else block inside of the click callback ( after $(".row").toggleClass('farve'); )
I have some chat boxes.after the box creation.how to minimize the individual boxes
$(document).ready(function(){
$("a").click(function(){
var name = $(this).html();
var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>';
$("#demo1").append(user);
return false;
});
});
// minimize the individual box
$(document).on('click', '#min', function(){
$(this).find("#mainchat").toggle(700);// its not working.
//$("#mainchat").toggle(700) applied this code,first box only was minimized.
});
#mainchat
{
position :relative;
float:left;
top:10px;
left:50px;
margin right:10px;
height:250px;
width:100px;
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
first<br>
second<br>
third
<p id ="demo1"></p>
please help to minimize individual boxes.When click on individual minimize buttons.thanks in advance
Just edit this, because find only works to point to the child element:
see here: https://jsfiddle.net/r84dw7t3/
// minimize the individual box
$(document).on('click', '#min', function(){
$(this).parent("#mainchat").toggle(700);
});
If we need to jump to top section then we can simple write a code
link to top
or just javascript code
location.href=#top
Result : It takes us to top page with url :http://fiddle.jshell.net/_display/#top.
But what my problem is, I dont' want to show /#top query on url string but i want my page to that top section . Reason why i don't want to show that string in url is, my page get stuck if browser don't find 'id' named top .Context or information which i'm displaying is inside a dialog box so that once the dialog box is closed there isn't any id named top then when user tries to refresh that page i.e http://fiddle.jshell.net/_display/#top , page gets stuck .
Can anyone give a better solution for this problem?
You have few options...
You can use pure Javscript:
window.scrollTo(X, Y); (obvisourly X and Y are the scroll coordinates, and top will be 0,0).
Another option (yet non-jQuery based) can be:
document.body.scrollTop = document.documentElement.scrollTop = 0;
If you prefer jQuery based solution, try the following:
$(document).scrollTop(0);
Or, as well:
$(window).scrollTop(0);
Use the option that better suit your need.
Enjoy coding.
Try
$(".link").on("click", function(e) {
$("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
return false
})
#top, #bottom {
height:400px;
width:100%;
display:block;
}
div:nth-of-type(1) {
background:blue;
}
div:nth-of-type(2) {
background:orange;
}
span {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="top">top <span class="link">go to bottom</span></div>
<div id="bottom">bottom <span class="link">go to top</span></div>
Demo Here
Html
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
Jquery
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
//});
});
});
I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.